@extends('layouts.layout')
@section('one_page_css')
    <link rel="stylesheet" href="{{ asset('assets/calendar/css/calendar-handcrafted.css') }}">
@endsection


@section('content')
    {{-- <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">@lang('Doctor Schedule')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section> --}}
    @include('patient-appointment.create-modal')
    <ul class="custom-menu">
        {{-- <li data-action="first">New Appointment</li>
        <li data-action="second">New Patient</li>
        <li data-action="third">Therapist Schedule</li> --}}
        <li><a data-toggle="modal" data-target="#createPatientAppointmentModal" href="javascript:void(0)">New Appointment</a></li>
        <li><a target="_blank" href="{{ route('patient-details.create') }}">New Patient</a></li>
        <li><a target="_blank" href="{{ route('doctor-schedules.create') }}">Therapist Schedule</a></li>
    </ul>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form id="search_form" action="" method="get" role="form" autocomplete="off">
                    <div class="card-header">
                        {{-- <h3>@lang('Doctor Schedule')</h3> --}}

                        <div class="card-tools d-flex w-100"> {{-- mx-auto --}}
                            @can('patient-appointment-create')
                                <div class="mr-auto" style="margin-top: 1.5rem;">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#createPatientAppointmentModal" class="btn btn-sm btn-circle btn-info d-grid" data-role="hint" data-hint-position="right" data-hint-text="New appointment" style="align-items: center; display: grid;">
                                        <i class="fas fa-plus"></i>
                                    </a>
                                    <span class="pull-right"></span>
                                </div>
                            @endcan


                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>@lang('Therapists')</label>

                                        <select name="doctor_id[]" class="form-control bs-multiselect" id="doctor_id" multiple>
                                            {{-- <option value="">--@lang('Select')--</option> --}}
                                            @foreach ($doctors as $doctor)
                                                <option value="{{ $doctor->id }}" {{ collect(request()->doctor_id)->contains($doctor->id) ? 'selected' : '' }}>{{ $doctor->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>@lang('Appointment Date')</label>
                                        <input type="text" name="appointment_date" id="appointment_date" class="form-control range-appointment-date" placeholder="@lang('Appointment Date')"
                                            value="
                                            @if (old('appointment_date', request()->appointment_date)) {{ old('appointment_date', request()->appointment_date) }}
                                            @else
                                            {{ \Carbon\Carbon::now()->format('Y-m-d') }} @endif">
                                    </div>
                                </div>

                                <div class="btn-group col-sm-3" style="margin-top: 1.5rem;">
                                    <div class="col-sm-5">
                                        <button type="submit" class="btn btn-info">@lang('Submit')</button>                                        
                                    </div>
                                    <div class="col-sm-5">
                                        @if (request()->isFilterActive)
                                            <a href="{{ route('calendar.clear') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div>

                                <div class="btn-group col-sm-2" role="group" style="margin-top: 1.5rem;">
                                    {{-- <div class="form-group m-0 p-0">
                                                <div class="form-group input-group m-0 p-0">
                                                    <div class="input-group-prepend">
                                                        <label for="view_selector" class="input-group-text">@lang('View')</label>
                                                    </div>
                                                    <select name="view_selector" class="form-control" id="view_selector" onchange="javascript:this.form.submit()">
                                                        <option value="day" {{ request()->view_selector == 'day' ? 'selected' : '' }}>@lang('Day')</option>
                                                        <option value="prev" {{ request()->view_selector == 'prev' ? 'selected' : '' }}>@lang('Last Week')</option>
                                                        <option value="next" {{ request()->view_selector == 'next' ? 'selected' : '' }}>@lang('This Week')</option>
                                                    </select>
                                                </div>
                                            </div> --}}
                                    @php
                                        Session::put('current_data', $appointmentsGroupedByDoctors);
                                    @endphp
                                    {{-- <button id="ca-schedules-button" type="button" data-toggle="modal" data-target="#schedulesModal" class="btn btn-default"><i class="far fa-calendar-alt"></i> @lang('Therapist Availability')</button> --}}
                                    <div class="dropdown btn btn-circle btn-default dropleft" data-toggle="dropdown">
                                        <a href="javascript:void(0)" class="dropleft text-dark" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-print"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a id="formattedPrint" class="dropdown-item" href="javascript:void(0)">Scheduler</a>
                                            <a id="schedules-print" type="button" class="dropdown-item" onclick="window.open('{{ route('print.scheduler.pdf') }}','_blank')">Formatted</a>
                                        </div>
                                    </div>
                                    <button id="ca-reload-button" type="button" class="btn btn-default btn-circle" data-role="hint" data-hint-position="top" data-hint-text="Refresh">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                    {{-- <button class="btn btn-default btn-circle" type="button" data-toggle="collapse" href="#filter" data-role="hint" data-hint-position="top" data-hint-text="Search">
                                                <i class="fas fa-filter"></i>
                                            </button> --}}
        
                                    {{-- <a id="schedules-print" class="btn btn-default btn-circle" type="button" target="_blank" href="{{ route('print.scheduler.pdf') }}" data-role="hint" data-hint-position="top" data-hint-text="Print schedules and appointments">
                                                <i class="fas fa-print"></i>
                                            </a> --}}
                                </div>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="cardbody">
                <div id="filter" class="collapse @if (request()->isFilterActive) shows @endif">
                    <div class="card-body border">

                        <input type="hidden" name="isFilterActive" value="true">
                        {{-- <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>@lang('Therapists')</label>
                                            <div class="form-group input-group input-group-sm m-0 p-0">
                                                <select name="doctor_id[]" class="form-control select2" id="doctor_id" multiple>
                                                    
                                                    @foreach ($doctors as $doctor)
                                                        <option value="{{ $doctor->id }}" {{ collect(request()->doctor_id)->contains($doctor->id) ? 'selected' : '' }}>{{ $doctor->name }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="input-group-append">
                                                    <a id="check-all" href="javascript:void(0)" class="btn btn-default input-group-btn">Select All</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>@lang('Appointment Date')</label>
                                            <input type="text" name="appointment_date" id="appointment_date" class="form-control range-appointment-date" placeholder="@lang('Appointment Date')"
                                                value="
                                            @if (old('appointment_date', request()->appointment_date)) {{ old('appointment_date', request()->appointment_date) }}
                                            @else
                                            {{ \Carbon\Carbon::now()->format('Y-m-d') }} @endif
                                            ">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <button type="submit" class="btn btn-info">@lang('Submit')</button>
                                        @if (request()->isFilterActive)
                                            <a href="{{ route('calendar.clear') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div> --}}

                    </div>
                </div>
            </div>
            </form>


            @switch($layout)
                @case('date_tab')
                    @include('patient-appointment.calendar-layouts.date-tab-layout')
                @break

                @case('therapist_tab')
                    @include('patient-appointment.calendar-layouts.therapist-tab-layout')
                @break

                @case('non_tab')
                    @include('patient-appointment.calendar-layouts.non-tab-layout')
                @break

                @default
                    @include('patient-appointment.calendar-layouts.therapist-tab-layout')
            @endswitch


            <div id="scheduler"></div>
            @include('patient-appointment.event-modal')
            @include('patient-appointment.schedules-modal')
        </div>
        @include('layouts.delete_modal')
    @endsection

    @section('one_page_js')
        <script src="{{ asset('assets/js/stopExecutionOnTimeout.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="{{ asset('assets/js/daypilot/daypilot-all.min.js') }}"></script>
        <script src="{{ asset('assets/calendar/js/calendar-handcrafted.js') }}"></script>



        <script>
            $(document).ready(function() {
                $("#ca-reload-button").click(function() {
                    location.reload();
                });

                $(document).on('click', '.show-appointment', function(e) {
                    e.preventDefault();
                    let id = $(this).attr('data-id');
                    var _url = '{{ route('patient-appointment-scheduler.edit') }}';
                    $.ajax({
                        url: _url,
                        method: 'get',
                        data: {
                            id: id,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            $('#delete_appointment_scheduler').attr('data-id', response.id);
                            $('#patient_name_modal').html("Patient: " + (response.user ? response.user.name : 'Patient Deleted'));
                            var app_url = '{{ route('patient-details.details', ':id') }}'
                            app_url = app_url.replace(':id', response.user_id);
                            $('#modal_profile_button').attr('href', app_url);
                            var img_url = "{{ asset(':url') }}";
                            img_url = img_url.replace(':url', (response.user ? response.user.photo : ''));
                            if (response.user) {
                                if (response.user.photo) {
                                    $('#patient_img_modal').attr('src', img_url);
                                } else {
                                    $('#patient_img_modal').attr('src', "{{ asset('storage/pre-asset/no-img.png') }}");
                                }
                            }

                            //$('#patient_img_modal').attr('src', (response.user.photo ? img_url : {{ asset('storage/pre-asset/no-img.png') }}));
                            $('#appointment_date_modal').html(moment(response.appointment_date, 'YYYY-MM-DD').format('DD-MMM-YYYY'));
                            $('#appointment_time_modal').html(moment(response.start_time, "HH:mm:ss").format("hh:mm A") + " - " + moment(response.end_time, "HH:mm:ss").format("hh:mm A"));
                            var cache1 = $('#appointment_type_modal').children();
                            var cache2 = $('#appointment_status_modal').children();
                            $('#appointment_type_modal').text(response.appointment_type.name).prepend(cache1);
                            $('#appointment_status_modal').text(response.appointment_status.name).prepend(cache2);
                            $('#appointment_type_dot_modal').css('background-color', response.appointment_type.color_code);
                            $('#appointment_status_dot_modal').css('background-color', response.appointment_status.color_code);
                            if (response.user) {
                                $('#patient_memo_modal').html(response.user.memo ? response.user.memo : 'No Memo');
                            }
                            $('#therapist_name_modal').html(response.doctor.name);
                            $('#therapy_name_modal').html(response.hospital_department ? response.hospital_department.name : "Not Available");
                            $('#problem_name_modal').html(response.problem ? response.problem : "Not Available");

                            $("#doctor_id_edit").val(response.doctor_id).change();
                            $("#appointment_date_edit").flatpickr({
                                disabled: true,
                                dateFormat: "Y-m-d",
                            }).setDate(response.appointment_date, true, 'Y-m-d');
                            $("#appointment_type_id_edit").val(response.appointment_type_id).change();
                            $("#appointment_status_id_edit").val(response.appointment_status_id).change();
                            $("#hospital_department_id_edit").val(response.hospital_department_id).change();
                            $("#patient_id_edit").val(response.user_id);
                            $("#appointment_id_edit").val(response.id);
                            var a_time = moment(response.start_time, "HH:mm:ss").format("HH:mm") + "-" + moment(response.end_time, "HH:mm:ss").format("HH:mm")
                            //$("#appointment_slot_edit option[value$='"+ a_time +"']").prop("selected", true);                        

                            $("#appointment_slot_edit").prop('required', false);
                            if (response.prescription) {
                                $('#if_case').html('(This appointment is related to case: ' + response.prescription.hospital_department.name + ' ' + response.prescription.prescription_date + ')');
                            } else {
                                $('#if_case').html('');
                            }

                            $('#start_time_edit').flatpickr({
                                enableTime: true,
                                noCalendar: true,
                                dateFormat: 'H:i',
                            }).setDate(response.start_time);

                            $('#end_time_edit').flatpickr({
                                enableTime: true,
                                noCalendar: true,
                                dateFormat: 'H:i',
                            }).setDate(response.end_time);
                        }
                    });


                });

                $(document).on('click', '#delete_appointment_scheduler', function(e) {
                    e.preventDefault();
                    let app_id = $(this).attr('data-id');
                    let csrf = '{{ csrf_token() }}';
                    var _app_url = '{{ route('scheduler-patient-appointment.delete') }}';

                    swal({
                        title: "Are you sure?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        buttons: [
                            'Cancel',
                            'Yes, I am sure!'
                        ],
                        dangerMode: true,
                    }).then(function(isConfirm) {
                        if (isConfirm) {
                            $.ajax({
                                url: _app_url,
                                method: 'delete',
                                data: {
                                    appointment_id: app_id,
                                    _token: csrf
                                },
                                success: function(response_modal) {
                                    Swal.fire(
                                        'Deleted!',
                                        'Data deleted successfully.',
                                        'success'
                                    );
                                }
                            }).done(location.reload());
                        }
                    });
                });

                $('#weekday_name').on('change', function() {
                    var _url = '{{ route('therapist-schedules-get') }}';
                    var keyword = $('#weekday_name').val();
                    $.ajax({
                        url: _url,
                        method: 'get',
                        data: {
                            weekday_name: keyword,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(schedules_response) {

                            table_schedule_row(schedules_response);
                        }
                    });
                });

                $('.range-appointment-date').on('change', function() {
                    $('#view_selector').val('day');
                });

                $('#doctor_id_edit, #appointment_date_edit').on('change', function() {
                    $("#appointment_slot_edit").prop('required', true);
                });


                function table_schedule_row(res) {
                    let htmlView = '';
                    if (res.length <= 0) {
                        htmlView += '<tr><td colspan="3">No data.</td></tr>';
                    }
                    $.each(res, function(k, i) {
                        htmlView += '<tr>';
                        htmlView += '<td> ' + (k + 1) + ' </td>';
                        htmlView += '<td> ' + (i.user ? i.user.name : 'Deleted Therapist') + ' </td>';
                        htmlView += '<td>  ' + (moment(i.start_time, "HH:mm:ss").format("hh:mm A")) + ' - ' + (moment(i.end_time, "HH:mm:ss").format("hh:mm A")) + '</td>';
                        htmlView += '</tr>';
                    });
                    $('#schedules_tbody').html(htmlView);
                }

                /* function fetchSelectedAppointment(id) {
                let s_id = id; //$('.selected-appointment').attr('data-id');
                var _url = '{{ route('patient-appointment-scheduler.edit') }}';
                $.ajax({
                    url: _url,
                    method: 'get',
                    data: {
                        id: s_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {                    
                        $('#doctor_name').html("Therapist : " + response.doctor.name);
                        $('#app_date').html("(" + response.appointment_date + ")");
                        $('#appointment_type_label').html("Appointment Type : " + response.appointment_type.name);
                        $('#appointment_status_label').html("Appointment Status : " + response.appointment_status.name);
                        $('#problem_modal').html("Problem/Issue : " + (response.problem ? response.problem : "Not Available"));
                        $("#doctor_id_edit").val(response.doctor_id).change();
                        $("#appointment_date_edit").flatpickr({
                            disabled: true,
                            dateFormat: "Y-m-d",
                        }).setDate(response.appointment_date, true, 'Y-m-d');
                        $("#appointment_type_id_edit").val(response.appointment_type_id).change();
                        $("#appointment_status_id_edit").val(response.appointment_status_id).change();
                        $("#patient_id_edit").val(response.user_id);
                        $("#appointment_id_edit").val(response.id);

                    }

                });                
                } */

                flatpickr(".range-appointment-date", {
                    mode: "range",
                    dateFormat: "Y-m-d",
                });

                $(".select2").select2({
                    closeOnSelect: false,
                    placeholder: 'All Therapists',
                    allowHtml: true,
                    allowClear: true,
                    tags: true,
                    //maximumSelectionLength: 5
                });

                $("#check-all").on('click', function() {
                    $('.select2').val($('.select2 option').map(function() {
                        return this.value
                    }).get()).trigger('change');
                    //let maxSelectable = $('.select2').data("select2").options.options.maximumSelectionLength;

                    /* $('.select2').val($('.select2 option').slice(0, 5).map(function() {
                        return this.value
                    }).get()).trigger('change'); */

                });

                $("#uncheck-all").on('click', function() {
                    $('.select2').val([]).data("maximumSelectionLength").trigger('change');
                });


                $("#createAppointmentForm").submit(function(e) {
                    e.preventDefault();
                    const fd = new FormData(this);
                    var _url = '{{ route('details-patient-appointment.store') }}';

                    if ($("#recurring_period").val() == 'daily') {
                        var checkboxChecked = false;
                        $('input[name="Sunday"], input[name="Monday"], input[name="Tuesday"], input[name="Wednesday"], input[name="Thursday"], input[name="Friday"], input[name="Saturday"]').each(function() {
                            if ($(this).is(':checked')) {
                                checkboxChecked = true;
                                return false; // This line will break the loop when first selected checkbox is found
                            }
                        });

                    } else {
                        checkboxChecked = true;
                    }


                    if (!checkboxChecked) {
                        alert("Please select at least one day from Sunday to Saturday.");
                    } else {
                        $.ajax({
                            url: _url,
                            method: 'post',
                            data: fd,
                            cache: false,
                            processData: false,
                            contentType: false,
                            dataType: 'json',

                            success: function(response) {
                                if (response.status == 200) {
                                    Swal.fire(
                                        'Saved!',
                                        'Data Saved Successfully!',
                                        'success'
                                    )
                                }
                                $("#createAppointmentForm")[0].reset();
                                $("#createPatientAppointmentModal").modal('hide');
                            },
                            error: function(response) {
                                if (response.status == 400) {
                                    Swal.fire(
                                        'Alert!',
                                        response.responseJSON.message,
                                        'info'
                                    )
                                }
                                $("#createAppointmentForm")[0].reset();
                                $("#createPatientAppointmentModal").modal('hide');
                            }
                        }).done(location.reload());
                    }
                });

                $("#recurring_period").change(function() {
                    if ($(this).val() == 'daily') {
                        $('#daily_day_checkbox_div').show();
                    } else {
                        $('#daily_day_checkbox_div').hide();
                    }
                });


                $('.bs-multiselect').multiselect({
                    enableFiltering: true,
                    filterBehavior: 'text',
                    enableCaseInsensitiveFiltering: true,
                    includeSelectAllOption: true,
                    /* includeResetOption: true,
                    includeResetDivider: true, */
                    maxWidth: 150,
                    maxHeight: 200,
                    dropUp: false,
                    buttonWidth: '280px',
                    /* buttonText: function(options, select) {
                        return 'Therapists';
                    }, */
                    
                });

            });
        </script>
    @endsection