@extends('layouts.layout')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('patient-appointments.index') }}">@lang('Patient Appointment')</a>
                        </li>
                        <li class="breadcrumb-item active">@lang('Add Patient Appointment')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">@lang('Add Patient Appointment')</h3>
                </div>
                <div class="card-body">
                    <form id="scheduleForm" class="form-material form-horizontal" action="{{ route('patient-appointments.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="user_id">@lang('Select Patient') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-injured"></i></span>
                                        </div>
                                        <select name="user_id" class="form-control select2 @error('user_id') is-invalid @enderror" id="user_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($patients as $patient)
                                                <option value="{{ $patient->id }}" {{ old('user_id') == $patient->id ? 'selected' : '' }}>{{ $patient->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('user_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="doctor_id">@lang('Select Therapist') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-md"></i></span>
                                        </div>
                                        <select name="doctor_id" class="form-control select2 @error('doctor_id') is-invalid @enderror" id="doctor_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($doctors as $doctor)
                                                <option value="{{ $doctor->id }}" {{ old('doctor_id') == $doctor->id ? 'selected' : '' }}>{{ $doctor->name }} ({{ $doctor->doctorDetail->hospitalDepartment->name }})</option>
                                            @endforeach
                                        </select>
                                        @error('doctor_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="supervisor_therapist">@lang('Supervising Therapist') <b hidden class="ambitious-crimson">*</b></label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-md"></i></span>
                                        </div>
                                        {{-- <input type="text" id="supervisor_therapist" name="supervisor_therapist" list="doctor-data-list" value="{{ old('supervisor_therapist') }}" class="form-control @error('supervisor_therapist') is-invalid @enderror" placeholder="@lang('Supervising Therapist')">
                                        <datalist id="doctor-data-list">
                                            @foreach ($doctors as $doctor)
                                                <option value="{{ $doctor->name }}">
                                            @endforeach
                                        </datalist> --}}
                                        <select name="supervisor_id" class="form-control @error('supervisor_id') is-invalid @enderror" id="supervisor_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($doctors as $doctor)
                                                <option value="{{ $doctor->id }}" {{ old('supervisor_id') == $doctor->id ? 'selected' : '' }}>{{ $doctor->name }} ({{ optional($doctor->doctorDetail)->hospitalDepartment->name ?? '' }})</option>
                                            @endforeach
                                        </select>
                                        @error('supervisor_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="appointment_date">@lang('Appointment Date') <b class="ambitious-crimson">*</b></label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="far fa-calendar-check"></i></span>
                                        </div>
                                        <input type="text" name="appointment_date" id="appointment_date" class="form-control flatpickr @error('appointment_date') is-invalid @enderror" placeholder="@lang('Appointment Date')" value="{{ old('appointment_date') }}">
                                        @error('appointment_date')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="therapist_availability" class="mb-2 mt-2 font-weight-bold text-danger text-small">
                                    
                        </div>

                        <div class="mb-2 mt-2 font-weight-bold">
                            Booked Slot
                        </div>
                        <div id="bookedSlotDiv" class="d-flex flex-row flex-nowrap overflow-auto">
                            <div class="card card-block mx-2 p-2" style="min-width: 100px;">No Booked Slot</div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="start_time">@lang('Start Time') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                        </div>
                                        <input type="text" name="start_time" id="start_time" class="form-control flatpickr-pick-time @error('start_time') is-invalid @enderror" value="{{ old('start_time') }}" required>
                                        @error('start_time')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="end_time">@lang('End Time') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                        </div>
                                        <input type="text" name="end_time" id="end_time" class="form-control flatpickr-pick-time @error('end_time') is-invalid @enderror" value="{{ old('end_time') }}" required>
                                        @error('end_time')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" hidden>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="appointment_slot">@lang('Available Appointment Slots') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-clock"></i></span>
                                        </div>
                                        <select class="form-control @error('appointment_slot') is-invalid @enderror" name="appointment_slot" id="appointment_slot">
                                        </select>
                                        @error('appointment_slot')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <div class="row">
                                    <label for="appointment_slot" class="col-ms-12">@lang('Recurring/Once')</label>
                                    <div class="col-md-12">
                                        <input id="is_recurring" name="is_recurring" type="checkbox" data-toggle="toggle" data-on="Recurring" data-off="Once" data-onstyle="info" data-offstyle="secondary" data-size="sm">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="recurring_div" class="row border rounded" style="display: none;">
                            <div class="row col-md-12">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="recurring_start_date">@lang('Start Date') <b class="ambitious-crimson">*</b></label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-calendar-check"></i></span>
                                            </div>
                                            <input type="text" name="recurring_start_date" id="recurring_start_date" class="form-control flatpickr @error('recurring_start_date') is-invalid @enderror" placeholder="@lang('Recurring Sart Date')" value="{{ old('recurring_start_date') }}">
                                            @error('recurring_start_date')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="recurring_end_date">@lang('End Date') <b class="ambitious-crimson">*</b></label>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-calendar-check"></i></span>
                                            </div>
                                            <input type="text" name="recurring_end_date" id="recurring_end_date" class="form-control flatpickr @error('recurring_end_date') is-invalid @enderror" placeholder="@lang('Recurring End Date')" value="{{ old('recurring_end_date') }}">
                                            @error('recurring_end_date')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="recurring_period">@lang('Recurring Period') <b class="ambitious-crimson">*</b></label>
                                        <div class="form-group input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                            </div>
                                            <select id="recurring_period" name="recurring_period" class="form-control @error('recurring_period') is-invalid @enderror">
                                                <option value="">----Select----</option>
                                                <option value="daily">Daily</option>
                                                <option value="weekly">Weekly</option>
                                                <option value="monthly">Monthly</option>
                                            </select>
                                            @error('recurring_period')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div id="therapist_recurring_availability" class="m-2 font-weight-bold text-danger text-small">
                                    
                                </div>

                                <div id="daily_day_checkbox_div" class="row border rounded col-md-12 m-2" style="display: none">
                                    <div class="">
                                        <input type="checkbox" id="Sunday" name="Sunday" checked {{ old('Sunday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Sunday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Monday" name="Monday" checked {{ old('Monday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Monday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Tuesday" name="Tuesday" checked {{ old('Tuesday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Tuesday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Wednesday" name="Wednesday" checked {{ old('Wednesday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Wednesday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Thursday" name="Thursday" checked {{ old('Thursday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Thursday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Friday" name="Friday" checked {{ old('Friday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Friday" data-cls-check="bd-cyan">
                                    </div>

                                    <div class="">
                                        <input type="checkbox" id="Saturday" name="Saturday" checked {{ old('Saturday') ? 'checked' : '' }} class="day-checkbox" data-role="checkbox" data-style="2" data-caption="Saturday" data-cls-check="bd-cyan">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-12">
                                <div class="row">
                                    <label for="appointment_slot" class="col-ms-12">@lang('Link to patient case')</label>
                                    <div class="col-md-12">
                                        <input id="is_case" name="is_case" type="checkbox" data-toggle="toggle" data-on="Case" data-off="Non-Case" data-onstyle="info" data-offstyle="secondary" data-size="sm">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="case_div" class="row border rounded" style="display: none;">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="prescription_id">@lang('Select Patient Case') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                        <select id="prescription_id" name="prescription_id" class="form-control @error('prescription_id') is-invalid @enderror">
                                            <option value="">----Select----</option>
                                            {{--  @forelse ($cases as $case)
                                                    <option value="">No Case Found</option>
                                                @empty
                                                    <option value="">No Case Found</option>
                                                @endforelse --}}
                                        </select>
                                        @error('prescription_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="hospital_department_id">@lang('Select Therapy') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-injured"></i></span>
                                        </div>
                                        <select name="hospital_department_id" class="form-control @error('hospital_department_id') is-invalid @enderror" id="hospital_department_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($therapies as $therapy)
                                                <option value="{{ $therapy->id }}" {{ old('hospital_department_id') == $therapy->id ? 'selected' : '' }}>{{ $therapy->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('hospital_department_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="appointment_type_id">@lang('Select Appointment Type') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-md"></i></span>
                                        </div>
                                        <select name="appointment_type_id" class="form-control @error('appointment_type_id') is-invalid @enderror" id="appointment_type_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($patientAppointmentTypes as $patientAppointmentType)
                                                <option value="{{ $patientAppointmentType->id }}" {{ old('appointment_type_id') == $patientAppointmentType->id ? 'selected' : '' }}>{{ $patientAppointmentType->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('appointment_type_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="appointment_status_id">@lang('Select Status') <b class="ambitious-crimson">*</b></label>
                                    <div class="form-group input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user-md"></i></span>
                                        </div>
                                        <select name="appointment_status_id" class="form-control @error('appointment_status_id') is-invalid @enderror" id="appointment_status_id" required>
                                            <option value="">--@lang('Select')--</option>
                                            @foreach ($patientAppointmentStatuses as $patientAppointmentStatus)
                                                <option value="{{ $patientAppointmentStatus->id }}" {{ old('appointment_status_id') == $patientAppointmentStatus->id ? 'selected' : '' }}>{{ $patientAppointmentStatus->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('appointment_status_id')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col-md-6">
                            <div class="form-group">
                                <label for="reason">@lang('Cancelation Reason') 
                                <div class="form-group input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user-injured"></i></span>
                                    </div>
                                    <input name="reason" id="reason" class="form-control @error('reason') is-invalid @enderror" rows="4" placeholder="@lang('Cancelation Reason')">
                                    @error('reason')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div> --}}
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="problem">@lang('Problem')</label>
                                    <div class="input-group mb-3">
                                        <textarea name="problem" id="problem" class="form-control @error('problem') is-invalid @enderror" rows="4" placeholder="@lang('Problem')">{{ old('problem') }}</textarea>
                                        @error('problem')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-form-label"></label>
                            <div class="col-md-8">
                                <input type="submit" value="{{ __('Submit') }}" class="btn btn-outline btn-info btn-lg" />
                                <a href="{{ route('patient-appointments.index') }}" class="btn btn-outline btn-warning btn-lg">{{ __('Cancel') }}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer')
    <script src="{{ asset('assets/js/custom/patient-appointment.js') }}"></script>

    <script>
        $(document).ready(function() {
            if ($('#is_recurring').is(":checked")) {
                $("#recurring_div").show();
            }

            $("#is_recurring").change(function() {
                if ($(this).is(":checked")) {
                    $("#recurring_div").show(200);
                    $("#recurring_period").prop('required', true);
                    $("#recurring_start_date").prop('required', true);
                    $("#recurring_end_date").prop('required', true);

                } else {
                    $("#recurring_div").hide(200);
                    $("#recurring_period").prop('required', false);
                    $("#recurring_start_date").prop('required', false);
                    $("#recurring_end_date").prop('required', false);
                }
            });

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

            $("#appointment_date").change(function() {
                $("#recurring_start_date").flatpickr({
                    disabled: true,
                    dateFormat: "Y-m-d",
                }).setDate($(this).val(), true, 'Y-m-d');

            });

            $("#is_case").change(function() {
                if ($(this).is(":checked")) {
                    $("#case_div").show(200);
                    $("#prescription_id").prop('required', true);

                } else {
                    $("#case_div").hide(200);
                    $("#prescription_id").prop('required', false);
                }
            });

            $("#user_id").change(function() {
                var patient_id = $(this).val();
                p_case_str = "";
                var _case_url = '{{ route('patient-cases-list.fetch', ':id') }}';
                _case_url = _case_url.replace(':id', patient_id);
                $('#prescription_id').find('option').not(':first').remove();
                // AJAX request 
                $.ajax({
                    url: _case_url,
                    type: 'get',
                    dataType: 'json',
                    success: function(patinent_cases) {
                        $.each(patinent_cases, function(key, option) {
                            if (option.remaining_hours > 0) {
                                p_case_str += "<option value='" + option.id + "'>" + option.hospital_department.name + " " + "(" + moment(option.prescription_date).format('DD-MMM-YYYY') + ")" + "</option>";
                            }

                        });
                        $('#prescription_id').append(p_case_str);
                    }
                });
            });

            $("#scheduleForm").submit(function(event) {
                event.preventDefault();
                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
                        }
                    });

                    if (!checkboxChecked) {
                        alert("Please select at least one day from Sunday to Saturday.");
                    } else {
                        $("#scheduleForm")[0].submit();
                    }
                } else {
                    $("#scheduleForm")[0].submit();
                }

            });
        });
    </script>
@endpush