@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">
    <div class="row mt-3">
        <div class="col-md-12 mb-3" 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>
                        @foreach($pros as $apro)
                        <option value="{{$apro->uid}}" {{$selectedProUid === $apro->uid ? 'selected' : ''}}>{{$apro->name_first}} {{$apro->name_last}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-sm btn-primary" submit>Filter</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <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 wide>
                        <a start show>
                            Edit
                        </a>
                        <form url="/api/proGeneralAvailability/createForWholeWeek">
                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                            <input type="hidden" name="timezone" value="EASTERN">
                            <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">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" col-span="3">
                                <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="pb-0 border-0"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($daysOfWeek as $dow)
                        <tr>
                            <td class="pl-3 align-middle">{{$dow}}</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="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}}">
                                                                    <input type="hidden" name="timezone" value="EASTERN">
                                                                    <div class="form-group">
                                                                        {{$ga->day_of_week}}
                                                                    </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"></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="text-secondary font-italic bg-transparent border-0">None specified</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}}">
                            <input type="hidden" name="timezone" value="EASTERN">
                            <div class="mb-2">
                                <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Date </label>
                                <input class="form-control" type="date" name="startDate">
                            </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" type="date" name="endDate">
                            </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-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>
                                    <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}}">
                                                <input type="hidden" name="timezone" value="EASTERN">
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="title" value="{{$sa->title}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Date </label>
                                                    <input class="form-control" type="date" 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" type="date" 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 Unvailability
                        </a>
                        <form url="/api/proSpecificUnavailability/create">
                            <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
                            <input type="hidden" name="timezone" value="EASTERN">
                            <div class="mb-2">
                                <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                            </div>
                            <div class="mb-2">
                                <label for="" class="control-label">Start Date </label>
                                <input class="form-control" type="date" name="startDate">
                            </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" type="date" name="endDate">
                            </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"></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>
                                    <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}}">
                                                <input type="hidden" name="timezone" value="EASTERN">
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="title" value="{{$su->title}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">Start Date </label>
                                                    <input class="form-control" type="date" name="startDate" value="{{unfriendly_date($su->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($su->start_time, $su->timezone)}}">
                                                </div>
                                                <div class="mb-2">
                                                    <label for="" class="control-label">End Date </label>
                                                    <input class="form-control" type="date" name="endDate" value="{{unfriendly_date($su->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($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">
            <div class="card">
                <div class="card-header px-3 py-2 d-flex align-items-center">
                    <strong class="">
                        <i class="fas fa-user-injured"></i>
                        Pro Availability
                    </strong>
                </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() {

        function initAvailabilityCalendar() {
            var calendarEl = document.getElementById('pro-availability-calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                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 }}',
                        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();
        }
        addMCInitializer('pro-availability-calendar', initAvailabilityCalendar, '#pro-availability-container');
    })();
</script>
@endsection
