@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content">

        <div class="row">
            <div class="col-lg-10 mx-auto">

                <!-- Start Page Header -->
                <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3">
                    <div class="flex-grow-1">
                        <h6 class="fw-bold mb-0 d-flex align-items-center"><a href="{{ $route }}"><i
                                    class="ti ti-chevron-left me-1 fs-14"></i>{{ $module }}</a></h6>
                    </div>

                    <div class="token-area text-success">
                        TOKEN : <span id="token_number">--</span>
                    </div>
                </div>
                <!-- End Page Header -->

                <!-- Start Add  -->

                <div class="card mb-0">
                    <div class="card-body">
                        <form id="addAppointmentForm" method="POST" action="{{ $route }}">
                            @csrf
                            <div class="form">
                                <div class="mb-3">
                                    <label class="form-label mb-1 fw-medium">Phone Number<span
                                            class="text-danger ms-1">*</span></label>
                                    <input type="text" class="form-control fw-bold" id="find-phone"
                                        placeholder="Enter Phone Number" style="color: var(--primary); font-size: 16px;"
                                        autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                                        autofocus>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center justify-content-between mb-1">
                                                <label class="form-label mb-0 fw-medium">
                                                    Patient<span class="text-danger ms-1">*</span>
                                                    <span
                                                        class="fetch-detail badge rounded-pill badge-outline-info"></span>
                                                </label>

                                                <a href="javascript:void(0);" class="link-primary"
                                                    data-bs-toggle="modal" data-bs-target="#addModel">
                                                    <i class="ti ti-circle-plus me-1"></i>Add New
                                                </a>
                                            </div>

                                            <div id="patient-select-wrapper" class="position-relative">

                                                <select name="patient_id" id="patient_id" class="form-control select2"
                                                    style="color: black" required>
                                                </select>

                                                <!-- Loader Overlay -->
                                                <div id="patient-loader" class="patient-loader d-none">
                                                    <div class="spinner-border spinner-border-sm text-primary"></div>
                                                    <span class="ms-2">Fetching...</span>
                                                </div>

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

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label mb-1 fw-medium">Department</label>
                                            <select id="department_id" class="form-control select2">
                                                <option value="all">All Departments</option>
                                                @foreach ($departments as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label mb-1 fw-medium">Doctor<span
                                                    class="text-danger ms-1">*</span></label>
                                            <select name="doctor_id" id="doctor_id" class="form-control select2"
                                                required>
                                                <option value="">Select</option>
                                                @foreach ($doctors as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label mb-1 fw-medium">Date<span
                                                    class="text-danger ms-1">*</span></label>
                                            <input type="text" class="form-control" name="date" id="booking_date"
                                                disabled required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label mb-1 fw-medium">Time<span
                                                    class="text-danger ms-1">*</span></label>
                                            <select name="time" id="booking_time" class="form-control select2"
                                                disabled required>
                                            </select>

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

                                <div class="mb-3">
                                    <div class="form-check form-switch mb-2">
                                        <label class="form-check-label" for="paymentToggle">
                                            <h5 class="m-0">Add Payment</h5>
                                        </label>
                                        <input class="form-check-input" name="paymentToggle" type="checkbox" role="switch"
                                            id="paymentToggle">

                                    </div>
                                </div>

                                <hr>
                                <div class=" d-flex justify-content-between gap-2">
                                    <div>
                                        <span class="fee-area">{{ env('CURRENCY') }}<span
                                                class="fee">0.00</span></span>
                                    </div>
                                    <div>
                                        <a href="{{ $route }}" class="btn btn-light btn-lg btm-md">Cancel</a>
                                        <button class="btn btn-primary btn-lg btm-md" id="book-btn" disabled>Book
                                            {{ $singluar }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


            </div>

            <!-- End Add -->

        </div>
    </div>

</div>
<!-- End Content -->

</div>


@include('appointment::payment-canvas')

<!-- ========================
   End Page Content
  ========================= -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    $(document).on('keyup', '#find-phone', function() {

        let phone = $(this).val().replace(/[^0-9]/g, '');
        $(this).val(phone);
        $('#addPatientForm .phone').val(phone);

        if (phone.length >= 10) {

            // SHOW loader
            $('#patient-loader').removeClass('d-none');
            $('#patient_id').prop('disabled', true)
                .html('<option>Loading...</option>');

            $.ajax({
                url: "{{ route('appointment.check.patient.phone') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    phone: phone
                },
                success: function(result) {

                    if (result.status) {

                        $('#patient_id')
                            .html(result.html)
                            .prop('disabled', false);

                        $('.select2').select2();

                        if (result.count > 1) {
                            $('.fetch-detail').html('Fetched: ' + result.count);
                        } else {
                            $('.fetch-detail').html('');
                        }

                    } else {

                        $('#patient_id')
                            .html('')
                            .prop('disabled', true);

                        $('.fetch-detail').html('');

                        $('#warningToast .toast-body').html(result.message);
                        new bootstrap.Toast(
                            document.getElementById("warningToast")
                        ).show();
                    }
                },
                complete: function() {
                    // HIDE loader always
                    $('#patient-loader').addClass('d-none');
                }
            });
        }
    });


    $(document).on('change', '#department_id', function() {
        var department_id = $(this).val();
        $.ajax({
            url: "{{ route('appointment.check.department.doctor') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                department_id: department_id
            },
            success: function(result) {
                $('#doctor_id').html(result.html);
                $('.select2').select2();
            }
        });
    });

    $(document).on('change', '#doctor_id', function() {
        var doctor_id = $(this).val();
        if (doctor_id == '') {
            $('#booking_date').prop('disabled', true);
            $('#booking_date').flatpickr().clear();
            $('#booking_time').prop('disabled', true);
            $('#booking_time').html('');
            $('.fee-area .fee').text('0.00');
            $('#token_number').text('--');
        }
        $.ajax({
            url: "{{ route('appointment.check.doctor.schedule') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                doctor_id: doctor_id
            },
            success: function(result) {
                if (result.status) {
                    availableDates(result.dates);
                    $('.fee-area .fee').text(result.fee);
                    $('#total_amount_input').val(result.fee);
                    $('#book-btn').prop('disabled', false);
                    $('#booking_date').prop('disabled', false);
                    $('#booking_time').prop('disabled', false);
                } else {
                    $('#booking_date').flatpickr().clear();
                    $('#booking_date').prop('disabled', true);
                    $('#booking_time').prop('disabled', true);
                    $('.fee-area .fee').text('0.00');
                    $('#book-btn').prop('disabled', true);
                }

            }
        });
    });

    $(document).on('change', '#booking_date', function() {
        var doctor_id = $('#doctor_id').val();
        var date = $(this).val();
        availableTime(doctor_id, date);
    });


    $(document).on('change', '#booking_time', function() {
        $.ajax({
            url: "{{ route('appointment.get.timewise.token') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                doctor_id: $('#doctor_id').val(),
                date: $('#booking_date').val(),
                time: $(this).val(),
            },
            success: function(result) {
                $('#token_number').text(result.token);
            }
        });
    });


    function availableDates(enableDate) {
        var defaultDate = enableDate && enableDate[0] ? enableDate[0] : "today";
        flatpickr("#booking_date", {
            dateFormat: "Y-m-d",
            enable: enableDate,
            minDate: "today",
            defaultDate: defaultDate,
        });
        availableTime($('#doctor_id').val(), defaultDate);
    }


    function availableTime(doctor_id, date) {
        $.ajax({
            url: "{{ route('appointment.check.schedule.time') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                doctor_id: doctor_id,
                date: date
            },
            success: function(result) {
                $('#booking_time').html(result.html);
                $('#token_number').text(result.token);
                $('.select2').select2();

            }
        });
    }


    $(document).ready(function() {
        $('#addPatientForm').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            let updatedForm = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                name: formData.get('name'),
                phone: formData.get('phone'),
                age: formData.get('age'),
                gender: formData.get('gender'),
                city: formData.get('city'),
            };
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: updatedForm,
                success: function(res) {
                    if (res.status) {
                        $('#patient-select-wrapper').html(res.data);
                        $('.select2').select2();
                        $('#find-phone').val(formData.get('phone'));
                        $('#addPatientForm input').val('');
                    }
                    $('#addModel').modal('hide');
                }
            });
        });


        $('#addAppointmentForm').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            let updatedForm = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                patient_id: formData.get('patient_id'),
                doctor_id: formData.get('doctor_id'),
                date: formData.get('date'),
                time: formData.get('time'),
                paymentToggle : $('#paymentToggle').is(':checked'),
                payments : localStorage.getItem("paymentState")

            };

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: updatedForm,
                success: function(res) {
                    if (res.success) {
                        successAlert(res.message);
                    } else {
                        warningAlert(res.message);
                    }
                }
            });
        });


        $('#paymentToggle').on('change', function(e) {
            e.preventDefault();
            let total = $('#total_amount_input').val();
            if (total == 0) {
                $('#paymentToggle').prop('checked', false);
                warningAlert('Please select valid schedule.');
                $('#offcanvas_add_payment').offcanvas('hide');
                return false;
            }
            if ($(this).is(':checked')) {

                $('.amount').val(total);
                $('#totalAmount').val(total);
                $('#offcanvas_add_payment').offcanvas('show');

            } else {
                $('#offcanvas_add_payment').offcanvas('hide');
            }
        });

        $('#offcanvas_add_payment').on('hide.bs.offcanvas', function() {
            if (localStorage.getItem("paymentState")) {
                $('#paymentToggle').prop('checked', true);
            } else {
                $('#paymentToggle').prop('checked', false);
            }
        })
    });
</script>





@include('patient::create', ['singluar' => 'Patient'])
@include('layouts.footer')