@extends ('layouts/template')

@section('content')
<link href='/fullcalendar-5.3.2/lib/main.css' rel='stylesheet' />
<script src='/fullcalendar-5.3.2/lib/main.js'></script>
<div class="container-fluid mcp-theme-1" id="pro-availability-container">
    @if($pro->pro_type === 'ADMIN')
    <div class="row mt-3">
        <div class="col-md-12" moe>
            <form show url="{{route('pro-availability-filter')}}" method="POST" class="form-inline" redir="/practice-management/pro-availability/[data]">
                @csrf
                <div class="form-group">
                    <select name="proUid" class="form-control form-control-sm mr-2" provider-search data-pro-uid="{{ @$selectedProUid }}"
                            required>
                        <option value="">-- select pro --</option>
                    </select>
                </div>
                <div class="form-group ml-2">
                    <button class="btn btn-sm btn-primary" submit>Filter</button>
                </div>
            </form>
        </div>
    </div>
    @endif
    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header d-flex align-items-center px-3 py-2">
                    <?php $daysOfWeek = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'] ?>
                    <span class="font-weight-bold">
                        General Availability
                    </span>
                    <span class="mx-2 text-secondary">|</span>
                    <div moe>
                        <a start show>
                            Add (for whole week)
                        </a>
                        <form url="/api/proGeneralAvailability/createForWholeWeek">
                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                            <div class="form-group">
                                <label for="" class="control-label font-weight-bold mb-1">Days </label>
                                @foreach($daysOfWeek as $dayOfWeek)
                                <div class="form-check d-flex align-items-center mb-1">
                                    <input class="form-check-input my-0 mr-2" type="checkbox" name="daysOfWeek[{{$loop->index}}]" id="ga_chk_{{$dayOfWeek}}" value="{{$dayOfWeek}}">
                                    <label class="form-check-label" for="ga_chk_{{$dayOfWeek}}">{{$dayOfWeek}}</label>
                                </div>
                                @endforeach
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                <select name="timezone" class="form-control form-control-sm" required>
                                    <option value="">-- select --</option>
                                    <option value="EASTERN">Eastern</option>
                                    <option value="CENTRAL">Central</option>
                                    <option value="MOUNTAIN">Mountain</option>
                                    <option value="PACIFIC">Pacific</option>
                                    <option value="ALASKA">Alaska</option>
                                    <option value="HAWAII">Hawaii</option>
                                    <option value="PUERTO_RICO">Puerto Rico</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                <input class="form-control" type="time" name="startTime" value="08:00">
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label font-weight-bold mb-1">End Time </label>
                                <input class="form-control" type="time" name="endTime" value="17:00">
                            </div>
                            <div class="form-group m-0">
                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                            </div>
                        </form>
                    </div>
                    {{--<div class="mx-2 text-secondary">|</div>
                    <div moe wide>
                        <a start show>
                            Add Single Day
                        </a>
                        <form url="/api/proGeneralAvailability/createForSingleDay">
                            <input type="hidden" name="proUid" value="{{$pro->uid}}">
                            <input type="hidden" name="timezone" value="EASTERN">
                            <div class="form-group">
                                <select name="dayOfWeek" class="form-control">
                                    <option value=""> -- select day -- </option>
                                    @foreach($daysOfWeek as $dayOfWeek)
                                    <option value="{{$dayOfWeek}}">{{$dayOfWeek}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label">Start Time </label>
                                <input class="form-control" type="time" name="startTime" value="08:00">
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label">End Time </label>
                                <input class="form-control" type="time" name="endTime" value="17:00">
                            </div>
                            <div class="form-group m-0">
                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                            </div>
                        </form>
                    </div>--}}
                </div>
                <table class="table table-sm table-striped m-0">
                    <thead>
                        <tr>
                            <th class="pl-3 w-25">Day</th>
                            <th class="w-75">
                                <table class="table table-sm m-0">
                                    <thead>
                                    <tr>
                                        <th class="w-25 pb-0 border-0">Start</th>
                                        <th class="w-25 pb-0 border-0">End</th>
                                        <th class="w-25 pb-0 border-0">Timezone</th>
                                        <th class="pb-0 border-0"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($daysOfWeek as $dow)
                        <tr>
                            <td class="pl-3 align-middle">
                              <div class="d-flex">
                                <div moe wide class="mr-3">
                                    <a start show title="Update" class="text-success">
                                        Add
                                    </a>
                                    <form url="/api/proGeneralAvailability/createForSingleDay">
                                        <input type="hidden" name="dayOfWeek" value="{{$dow}}">
                                        <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                                        <div class="form-group">
                                            <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                            <select name="timezone" class="form-control form-control-sm" required>
                                                <option value="">-- select --</option>
                                                <option value="EASTERN">Eastern</option>
                                                <option value="CENTRAL">Central</option>
                                                <option value="MOUNTAIN">Mountain</option>
                                                <option value="PACIFIC">Pacific</option>
                                                <option value="ALASKA">Alaska</option>
                                                <option value="HAWAII">Hawaii</option>
                                                <option value="PUERTO_RICO">Puerto Rico</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                            <input class="form-control" type="time" name="startTime" value="08:00">
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="control-label font-weight-bold mb-1">End Time </label>
                                            <input class="form-control" type="time" name="endTime" value="17:00">
                                        </div>
                                        <div class="form-group m-0">
                                            <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                            <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                                {{$dow}}
                              </div>
                            </td>
                            <td>
                                <table class="table table-sm m-0">
                                    @if(count($generalAvailabilities[$dow]))
                                        @foreach($generalAvailabilities[$dow] as $ga)
                                            <tr class="bg-transparent">
                                                <td class="w-25 border-0">{{friendly_time($ga->start_time)}}</td>
                                                <td class="w-25 border-0">{{friendly_time($ga->end_time)}}</td>
                                                <td class="w-25 border-0">{{$ga->timezone}}</td>
                                                <td class="border-0">
                                                    <div class="d-flex align-items-center justify-content-end pl-2">
                                                        @if(isset($generalAvailabilities[$dow]))
                                                            <div moe wide class="mr-2">
                                                                <a start show title="Update">
                                                                    <i class="fa fa-pencil-alt"></i>
                                                                </a>
                                                                <form url="/api/proGeneralAvailability/update" right>
                                                                    <input type="hidden" name="uid" value="{{$ga->uid}}">
                                                                    <div class="form-group">
                                                                        {{$ga->day_of_week}}
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                                                        <select name="timezone" class="form-control form-control-sm" required>
                                                                            <option value="">-- select --</option>
                                                                            <option value="EASTERN" {{$ga->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
                                                                            <option value="CENTRAL" {{$ga->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
                                                                            <option value="MOUNTAIN" {{$ga->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
                                                                            <option value="PACIFIC" {{$ga->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
                                                                            <option value="ALASKA" {{$ga->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
                                                                            <option value="HAWAII" {{$ga->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
                                                                            <option value="PUERTO_RICO" {{$ga->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="" class="control-label">Start Time </label>
                                                                        <input class="form-control" type="time" name="startTime" value="{{military_time($ga->start_time)}}">
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="" class="control-label">End Time </label>
                                                                        <input class="form-control" type="time" name="endTime" value="{{military_time($ga->end_time)}}">
                                                                    </div>
                                                                    <div class="form-group m-0">
                                                                        <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                                        <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        @endif
                                                        <div moe wide class="mr-2">
                                                            <a start show title="Cancel">
                                                                <i class="fa fa-times-circle text-danger"></i>
                                                            </a>
                                                            <form url="/api/proGeneralAvailability/cancel" right>
                                                                <input type="hidden" name="uid" value="{{$ga->uid}}">

                                                                <div class="form-group">
                                                                    Cancel record?
                                                                </div>

                                                                <div class="form-group m-0">
                                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tbody>
                                        <tr class="bg-transparent">
                                            <td class="w-50 text-secondary font-italic bg-transparent border-0">None specified</td>
                                            <td class="border-0 width-100px">
                                                <div class="d-flex align-items-center justify-content-end pl-2">
                                                    <div moe wide class="mr-2">
                                                        <a start show title="Update" class="text-success">
                                                            Add
                                                        </a>
                                                        <form url="/api/proGeneralAvailability/createForSingleDay">
                                                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                                                            <input type="hidden" name="dayOfWeek" value="{{$dow}}">
                                                            <div class="form-group">
                                                                <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                                                <select name="timezone" class="form-control form-control-sm" required>
                                                                    <option value="">-- select --</option>
                                                                    <option value="EASTERN">Eastern</option>
                                                                    <option value="CENTRAL">Central</option>
                                                                    <option value="MOUNTAIN">Mountain</option>
                                                                    <option value="PACIFIC">Pacific</option>
                                                                    <option value="ALASKA">Alaska</option>
                                                                    <option value="HAWAII">Hawaii</option>
                                                                    <option value="PUERTO_RICO">Puerto Rico</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                                                <input class="form-control" type="time" name="startTime" value="08:00">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="" class="control-label font-weight-bold mb-1">End Time </label>
                                                                <input class="form-control" type="time" name="endTime" value="17:00">
                                                            </div>
                                                            <div class="form-group m-0">
                                                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    @endif
                                </table>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="card mb-4">
                <div class="card-header d-flex align-items-center px-3 py-2">
                    <span class="font-weight-bold">
                        Specific Availability
                    </span>
                    <span class="mx-2 text-secondary">|</span>
                    <div moe wide class="mr-2">
                        <a start show>
                            Add Specific Availability
                        </a>
                        <form url="/api/proSpecificAvailability/create">
                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                            <div class="mb-2">
                                <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label mb-1">Timezone </label>
                                <select name="timezone" class="form-control form-control-sm" required>
                                    <option value="">-- select --</option>
                                    <option value="EASTERN">Eastern</option>
                                    <option value="CENTRAL">Central</option>
                                    <option value="MOUNTAIN">Mountain</option>
                                    <option value="PACIFIC">Pacific</option>
                                    <option value="ALASKA">Alaska</option>
                                    <option value="HAWAII">Hawaii</option>
                                    <option value="PUERTO_RICO">Puerto Rico</option>
                                </select>
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Date </label>
                                <input class="form-control stag-dp" type="text" name="startDate" value="{{date('m/d/Y')}}"
                                       onchange="$(this).closest('form').find('[name=endDate]').val(this.value)">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Time </label>
                                <input class="form-control" type="time" name="startTime">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">End Date </label>
                                <input class="form-control stag-dp" type="text" name="endDate" value="{{date('m/d/Y')}}">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">End Time </label>
                                <input class="form-control" type="time" name="endTime">
                            </div>
                            <div class="form-group m-0">
                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <table class="table table-sm table-striped m-0">
                    @if(count($specificAvailabilities))
                        <thead>
                        <tr>
                            <th class="w-25 pl-3">Start Time</th>
                            <th class="w-25">End Time</th>
                            <th class="w-25">Timezone</th>
                            <th class="w-50"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($specificAvailabilities as $sa)
                            <tr>
                                <td class="pl-3">{{friendly_date_time_short_with_tz($sa->start_time, true, $sa->timezone?$sa->timezone:'EASTERN')}}</td>
                                <td>{{friendly_date_time_short_with_tz($sa->end_time, true, $sa->timezone?$sa->timezone:'EASTERN')}}</td>
                                <td>{{$sa->timezone}}</td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-end px-2">
                                        <div moe wide class="mr-2">
                                            <a start show title="Update">
                                                <i class="fa fa-pencil-alt"></i>
                                            </a>
                                            <form right url="/api/proSpecificAvailability/update">
                                                <input type="hidden" name="uid" value="{{$sa->uid}}">
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                                    <input type="text" class="form-control form-control-sm" name="title" value="{{$sa->title}}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                                    <select name="timezone" class="form-control form-control-sm" required>
                                                        <option value="">-- select --</option>
                                                        <option value="EASTERN" {{$sa->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
                                                        <option value="CENTRAL" {{$sa->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
                                                        <option value="MOUNTAIN" {{$sa->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
                                                        <option value="PACIFIC" {{$sa->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
                                                        <option value="ALASKA" {{$sa->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
                                                        <option value="HAWAII" {{$sa->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
                                                        <option value="PUERTO_RICO" {{$sa->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Date </label>
                                                    <input class="form-control stag-dp" type="text" name="startDate" value="{{unfriendly_date($sa->start_time)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Time </label>
                                                    <input class="form-control" type="time" name="startTime" value="{{military_time($sa->start_time, $sa->timezone)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">End Date </label>
                                                    <input class="form-control stag-dp" type="text" name="endDate" value="{{unfriendly_date($sa->end_time)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">End Time </label>
                                                    <input class="form-control" type="time" name="endTime" value="{{military_time($sa->end_time, $sa->timezone)}}">
                                                </div>
                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div moe wide class="mr-2">
                                            <a start show title="Cancel">
                                                <i class="fa fa-times-circle"></i>
                                            </a>
                                            <form right url="/api/proSpecificAvailability/cancel">
                                                <input type="hidden" name="uid" value="{{$sa->uid}}">

                                                <div class="form-group">
                                                    Cancel record?
                                                </div>

                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    @else
                        <tbody>
                        <tr>
                            <td class="pl-3 py-3 text-secondary font-italic bg-white">No specific availabilities</td>
                        </tr>
                        </tbody>
                    @endif
                </table>
            </div>

            <div class="card mb-2">
                <div class="card-header d-flex align-items-center px-3 py-2">
                    <span class="font-weight-bold">
                        Specific Unavailability
                    </span>
                    <span class="mx-2 text-secondary">|</span>
                    <div moe wide>
                        <a start show>
                            Add Specific Unavailability
                        </a>
                        <form url="/api/proSpecificUnavailability/create">
                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                            <div class="mb-2">
                                <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label mb-1">Timezone </label>
                                <select name="timezone" class="form-control form-control-sm" required>
                                    <option value="">-- select --</option>
                                    <option value="EASTERN">Eastern</option>
                                    <option value="CENTRAL">Central</option>
                                    <option value="MOUNTAIN">Mountain</option>
                                    <option value="PACIFIC">Pacific</option>
                                    <option value="ALASKA">Alaska</option>
                                    <option value="HAWAII">Hawaii</option>
                                    <option value="PUERTO_RICO">Puerto Rico</option>
                                </select>
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Date </label>
                                <input class="form-control stag-dp" type="text" name="startDate" value="{{date('m/d/Y')}}"
                                       onchange="$(this).closest('form').find('[name=endDate]').val(this.value)">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Time </label>
                                <input class="form-control" type="time" name="startTime">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">End Date </label>
                                <input class="form-control stag-dp" type="text" name="endDate" value="{{date('m/d/Y')}}">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">End Time </label>
                                <input class="form-control" type="time" name="endTime">
                            </div>
                            <div class="form-group m-0">
                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <table class="table table-sm table-striped m-0">
                    @if(count($specificUnavailabilities))
                        <thead>
                        <tr>
                            <th class="w-25 pl-3">Start Time</th>
                            <th class="w-25">End Time</th>
                            <th class="w-25">Title</th>
                            <th class="w-25">Timezone</th>
                            <th class="w-25"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($specificUnavailabilities as $su)
                            <tr>
                                <td class="pl-3">{{friendly_date_time_short_with_tz($su->start_time, true, $su->timezone)}}</td>
                                <td>{{friendly_date_time_short_with_tz($su->end_time, true, $su->timezone)}}</td>
                                <td>{{$su->title}}</td>
                                <td>{{$su->timezone}}</td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-end px-2">
                                        <div moe wide class="mr-2">
                                            <a start show title="Update">
                                                <i class="fa fa-pencil-alt"></i>
                                            </a>
                                            <form right url="/api/proSpecificUnavailability/update">
                                                <input type="hidden" name="uid" value="{{$su->uid}}">
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                                    <input type="text" class="form-control form-control-sm" name="title" value="{{$su->title}}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
                                                    <select name="timezone" class="form-control form-control-sm" required>
                                                        <option value="">-- select --</option>
                                                        <option value="EASTERN" {{$su->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
                                                        <option value="CENTRAL" {{$su->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
                                                        <option value="MOUNTAIN" {{$su->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
                                                        <option value="PACIFIC" {{$su->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
                                                        <option value="ALASKA" {{$su->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
                                                        <option value="HAWAII" {{$su->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
                                                        <option value="PUERTO_RICO" {{$su->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Date </label>
                                                    <input class="form-control  stag-dp" type="text" name="startDate" value="{{friendly_date_time($su->start_time, false, '', true)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Time </label>
                                                    <input class="form-control" type="time" name="startTime" value="{{military_time($su->start_time, $su->timezone)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">End Date </label>
                                                    <input class="form-control  stag-dp" type="text" name="endDate" value="{{friendly_date_time($su->end_time, false, '', true)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">End Time </label>
                                                    <input class="form-control" type="time" name="endTime" value="{{military_time($su->end_time, $su->timezone)}}">
                                                </div>
                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div moe wide class="mr-2">
                                            <a start show title="Cancel">
                                                <i class="fa fa-times-circle"></i>
                                            </a>
                                            <form right url="/api/proSpecificUnavailability/cancel">
                                                <input type="hidden" name="uid" value="{{$su->uid}}">

                                                <div class="form-group">
                                                    Cancel record?
                                                </div>

                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    @else
                        <tbody>
                        <tr>
                            <td class="pl-3 py-3 text-secondary font-italic bg-white">No specific unavailabilities</td>
                        </tr>
                        </tbody>
                    @endif
                </table>
            </div>
        </div>
        <div class="col-md-6">
            @if($pro->is_enrolled_as_mcp && $pro->is_considered_for_mcp_assignment)
                @include('layouts.confirm-hours-of-availability-notification')
            @endif
            @if($pro->is_enrolled_as_mcp && $pro->is_considered_for_mcp_assignment)
                <div class="my-3 border p-3 rounded bg-light d-flex align-items-baseline">
                    <i class="fa fa-globe-americas"></i>
                    <div class="flex-grow-1 ml-2">
                        <div class="d-flex align-items-baseline">
                            <span class="">Display Timezone:</span><b class="ml-2">{{$pro->display_timezone ?: '(not set)'}}</b>
                            <div moe class="ml-3">
                                <a href="#" start show class="font-weight-bold">Edit</a>
                                <form url="/api/pro/putDisplayTimezone">
                                    <input type="hidden" name="uid" value="{{$pro->uid}}">
                                    <div class="mb-2">
                                        <label class="text-sm text-secondary mb-1">Display Timezone:</label>
                                        <select name="timezone" class="form-control form-control-sm width-200px">
                                            <option value="EASTERN" {{$pro->display_timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
                                            <option value="CENTRAL" {{$pro->display_timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
                                            <option value="MOUNTAIN" {{$pro->display_timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
                                            <option value="PACIFIC" {{$pro->display_timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
                                            <option value="ALASKA" {{$pro->display_timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
                                            <option value="HAWAII" {{$pro->display_timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
                                            <option value="PUERTO_RICO" {{$pro->display_timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
                                        </select>
                                    </div>
                                    <div class="form-group m-0">
                                        <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                        <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="text-sm text-secondary mt-1">
                            Your patients will see your availability in this timezone (if set) while booking appointments.
                        </div>
                    </div>
                </div>
            @endif
            <div class="card">
                <div class="card-header px-3 py-1 d-flex align-items-center">
                    <strong class="">
                        <i class="fas fa-user"></i>
                        Pro Availability
                    </strong>
                    <div class="ml-auto d-inline-flex align-items-center">
                        <span class="font-weight-bold text-secondary mr-2">Timezone:</span>
                        <select id="calendar-timezone" class="form-control form-control-sm ml-auto width-200px">
                            <option value="EASTERN" {{!$pro->display_timezone || $pro->display_timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
                            <option value="CENTRAL" {{$pro->display_timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
                            <option value="MOUNTAIN" {{$pro->display_timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
                            <option value="PACIFIC" {{$pro->display_timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
                            <option value="ALASKA" {{$pro->display_timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
                            <option value="HAWAII" {{$pro->display_timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
                            <option value="PUERTO_RICO" {{$pro->display_timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
                        </select>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="pro-availability-calendar" class="mx-2 my-2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var events = JSON.parse({!! json_encode($events) !!});
    (function() {

        let calendar = null;

        function initAvailabilityCalendar() {
            var calendarEl = document.getElementById('pro-availability-calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                allDaySlot: false,
                timeZone: 'US/Eastern',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timeGridWeek,timeGridDay'
                },
                initialView: 'timeGridWeek',
                //initialDate: '{{ date('Y - m - d ') }}',
                //editable: true,
                selectable: true,
                navLinks: true,
                dayMaxEvents: false,
               // slotDuration: '00:15:00',
                events: function(info, successCallback, failureCallbackk) {
                    console.log("loading envents:", info.startStr.substr(0, 10), info.endStr.substr(0, 10))
                    jQuery.ajax({
                        url: '/availability/load/{{ $selectedProUid }}?tz=' + $('#calendar-timezone').val(),
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: '{{ csrf_token() }}',
                            start: info.startStr.substr(0, 10),
                            end: info.endStr.substr(0, 10)
                        },
                        success: function(events) {
                            console.log(events);
                            successCallback(events);
                        }
                    });
                }
            });
            calendar.render();

            $('#pro-availability-container').find('input.stag-dp')
                .prop('readonly', true)
                .addClass('bg-white')
                .datepicker({
                    minDate: 0,
                    maxDate: '{{date('m') . '/01/' . (date('Y') + 1)}}'
                })
            .trigger('change');

            $('#calendar-timezone')
                .off('change')
                .on('change', function() {
                    calendar.refetchEvents();
                });
        }
        addMCInitializer('pro-availability', initAvailabilityCalendar, '#pro-availability-container');
    })();
</script>
@endsection
