@extends('front.layouts.master')

@section('frontend-css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #f07c36 !important;
        color: #000 !important;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #f07c36 !important;
        color: #000 !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #f07c36 !important;
        border: 1px solid #f07c36 !important;
        color: #000 !important;
    }

    .select2-selection__count {
        list-style: none;
        background: #f07c36;
        padding: 4px 10px;
        border-radius: 4px;
        margin-top: 4px;
        display: inline-block;
        color: #000;
        font-weight: 500;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background: #f1f1f1 !important;
        border: 1px solid #ccc !important;
        padding: 4px 10px !important;
        border-radius: 5px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        cursor: default;
        padding-left: 12px !important;
        padding-right: 5px;
    }

    /* Slot button styles */
    .slot-btn {
        margin: 6px;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 14px;
    }

    .slot-btn.active {
        background-color: #f07c36;
        color: #000;
        border-color: #f07c36 !important;
    }
</style>
@endsection


@section('content')
<!-- banner section start -->

<section id="inner-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-breadcrumb">
                    <h2>Appointment</h2>
                    <ul>
                        <li><a href="{{ route('front.home') }}">Home</a></li>
                        <li>
                            <p>Appointment</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- banner section end -->

<!-- start book-appointment -->
<section id="doctors" class="mt-3 mt-sm-5">
    <div class="container">

        <div class="row">
            <div class="col-md-10 offset-md-1 mb-4">

                <!-- Search Form -->
                <div class="appointment-text-form mb-4">

                <div class="toggle-switch d-lg-none d-md-block">
                    <span class="btn btn-outline-secondary mb-2 d-block w-100">Filters <i class="fa-solid fa-chevron-up"></i></span>
                </div>

            

                    <form action="{{ route('front.book-appointment') }}" class="row g-3 align-items-center filter-dox "
                        method="GET">


                        <div class="col-lg-2 col-sm-6">
                            <input type="text" class="form-control" id="doctor" name="name"
                                placeholder="Doctor..." value="{{ request()->name ?? '' }}">
                        </div>

                        <div class="col-lg-3 col-sm-6">

                            <select class="form-select service" name="service[]" multiple="multiple" searchable>

                                @if (isset($services) && count($services) > 0)
                                @foreach ($services as $key => $service)
                                @if (!empty($key))
                                <option value="{{ $key }}"
                                    {{ in_array($key, request()->service ?? []) ? 'selected' : '' }}>
                                    {{ $service }}
                                </option>
                                @endif
                                @endforeach
                                @endif

                            </select>

                        </div>

                        <div class="col-lg-3 col-sm-6">

                            <select class="form-select designation" name="designation[]" multiple>

                                @if (isset($designations) && count($designations) > 0)
                                @foreach ($designations as $key => $designation)
                                @if (!empty($key))
                                <option value="{{ $key }}"
                                    {{ in_array($key, request()->designation ?? []) ? 'selected' : '' }}>
                                    {{ $designation }}
                                </option>
                                @endif
                                @endforeach
                                @endif

                            </select>

                        </div>

                        <div class="col-lg-2 col-sm-6">

                            <select class="form-select" name="gender" id="gender">

                                <option value="" selected disabled>Select Gender</option>

                                <option value="Male" {{ request()->gender == 'Male' ? 'selected' : '' }}>Male</option>

                                <option value="Female" {{ request()->gender == 'Female' ? 'selected' : '' }}>Female</option>

                            </select>

                        </div>

                        <div class="col-lg-2 col-sm-12">

                            <div class="search-btn d-flex justify-content-center align-items-center gap-2">
                                <button type="submit" class="btn btn-main w-100 ">
                                    <i class="fa fa-search"></i>
                                </button>
                                <a href="{{ route('front.book-appointment') }}" class="btn btn-danger border-0">
                                    <i class="fa fa-refresh"></i>
                                </a>
                            </div>

                        </div>

                    </form>

                </div>

                <!-- Doctor List -->
                @if (isset($doctors) && count($doctors) > 0)
                @foreach ($doctors as $doctor)

                <div class="row mt-3 p-2 m-0 border_full justify-content-md-between align-items-md-center" data-name="{{ strtolower($doctor->name) }}" data-service="{{ $doctor->service }}"
                    data-designation="{{ $doctor->designations }}" data-gender="{{ $doctor->gender }}">
                    <div class="col-12 col-md-8 ps-0 mob-rp">
                        <div class="doctor-details">
                            <div class="doctor-main-box">
                                <div class="doctor-img">
                                    <img src="{{ asset(DOCTOR_PATH . $doctor->image) }}" alt="Doctor image"
                                        class="img-fluid">
                                </div>
                                <div class="doctor-listing">
                                    <div class="doctor-list">
                                        <h4>{{ $doctor->name }}</h4>
                                        <p> {{ $doctor->services }}</p>
                                        <div class="degree-box">
                                            <p> {{ $doctor->designations }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-4">

                     <div class="day_available text-center">
                            <h5>Day's Availability</h5>
                             {{-- <p> {{ implode(', ', array_intersect_key(days(), array_flip(explode(',', $doctor->opd_days)))) }}</p>  --}}

                             <span>
                                @php
                                    $selectedDays = explode(',', $doctor->opd_days);
                                @endphp

                                @foreach(days() as $key => $day)
                                    @if(in_array($key, $selectedDays))
                                        <small>{{ strtoupper(substr($day, 0, 3)) }}</small>
                                    @endif
                                @endforeach
                            </span>
                            
                        </div>
                        <div class="book-form-btn text-center">
                            @if(!Auth::guard('patient')->check())
                            {{-- Not user Login Chchecked --}}
                                <a href="#" class="book-btn" data-bs-toggle="modal" data-bs-target="#authModal">Book an Appointment</a>
                            @else
                            <a href="#" class="book-btn" data-bs-toggle="modal" data-bs-target="#bookAppointment" data-bs-whatever="@mdo" data-doctor="{{ $doctor->id }}"
                                data-days="{{ $doctor->opd_days }}" data-DoctorName="{{ $doctor->name }}">Book an Appointment</a>
                            @endif
                        </div>
                    </div>
                </div>

                @endforeach
                @else
                <div class="text-center p-4">
                    <h5>No doctors found.</h5>
                </div>
                @endif

            </div>
        </div>

    </div>
</section>

<!-- end book-appointment -->
@if(Auth::guard('patient')->check())
<!-- start modal -->
<div class="modal fade" id="bookAppointment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered ">
        <div class="modal-content">

            <div class="modal-header">
                <h1 class="modal-title fs-5">Appointment For:- <span class="appointment_dotor"></span> </h1>
                <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="book_appointment"
                    action="{{ route('front.booking-summary') }}"
                    method="GET">

                    @csrf

                    <div id="message" class="alert alert-danger d-none"></div>
                    <div id="noslot" class="alert alert-danger d-none"></div>

                    <input type="hidden" id="doctor_id" name="doctor_id">
                    <input type="hidden" id="slot_timing_input" name="slot_timing">
                    <input type="hidden" id="slot_type_input" name="slot_type">

                    <div class="row">
                        <div class="col-lg-6 col-sm-6">

                            <label class="form-label">Date of Appointment</label>
                            <input type="text"
                                name="booking_date"
                                class="form-control booking_date">

                            <span class="text-danger error-booking_date"></span>

                            <div class="slot_div mt-3"></div>

                            <span class="text-danger error-slot_timing"></span>

                        </div>

                        <div class="col-lg-6 col-sm-6">
                            <div class="booking_form">
                                <div class="mb-3">
                                    <label>Full Name</label>
                                    <input type="text" name="full_name" class="form-control" placeholder="Eg. John Doe" minlength="3" maxlength="50" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
                                    <span class="text-danger error-full_name"></span>
                                </div>

                                <div class="mb-3">
                                    <label>Email</label>
                                    <input type="email" name="email_id" class="form-control" placeholder="Eg.johndoe@gmail.com" @if(Auth::guard('patient')->check()) value="{{ Auth::guard('patient')->user()->email }}" @endif>
                                    <span class="text-danger error-email_id"></span>
                                </div>

                               
                                <div class="custom-bboking-number mb-3">

                                    <label class="form-label">
                                        Mobile Number
                                    </label>

                                    <input type="tel" class="form-control" id="update_patient_mobile_number" name="phone_number" inputmode="numeric" pattern="[0-9]*" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                    @if(Auth::guard('patient')->check()) value="{{ Auth::guard('patient')->user()->phone }}" @endif>
                                    <input type="hidden" id="update_patient_dial_code" name="appointment_dial_code" @if(Auth::guard('patient')->check()) value="{{ Auth::guard('patient')->user()->dial_code }}" @endif>
                                    <input type="hidden" id="update_patient_dial_code_iso" name="appointment_dial_code_iso" @if(Auth::guard('patient')->check()) value="{{ Auth::guard('patient')->user()->dial_code_iso }}" @endif>
                                    <span class="text-danger error-phone_number"></span>

                                </div>

                                <input type="hidden" name="payment_method" value="cash">

                                <div class="mb-3">
                                    <label>Message</label>
                                    <textarea name="message" class="form-control" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"></textarea>
                                    <span class="text-danger error-message"></span>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">
                            Close
                        </button>

                        {{-- <button type="submit" class="btn btn-main">
                            Proceed to Pay
                        </button> --}}

                         <button type="submit" class="btn btn-main">
                            Continue
                        </button>

                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!--end  modal -->
@endif

@endsection

@section('frontend_bottom_script')



<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    let doctor_id = 0;
    let booking_date = '';
    let datePicker = null;

    function formatState(state) {
        if (!state.id) {
            return state.text;
        }

        const checked = state.selected ? 'checked' : '';

        return $(`
            <div class="d-flex align-items-center select2-custom-option" style="cursor: pointer;">
                <input type="checkbox"
                    value="${state.id}"
                    class="me-2 select-checkbox"
                    ${checked}
                    style="pointer-events: none; cursor: pointer;">
                <span class="select2-label">${state.text}</span>
            </div>
        `);
    }

    function updateSelect2Count(selectElement) {

        let selected = selectElement.select2('data') || [];

        let container = selectElement.next('.select2');

        container.find('.select2-selection__count').remove();

        if (selected.length > 0) {

            container.find('.select2-selection__choice').hide();

            container.find('.select2-selection__rendered').append(`
                <li class="select2-selection__count">
                    <span>${selected.length} Selected</span>
                </li>
            `);

        } else {

            container.find('.select2-selection__choice').show();
        }
    }

    function initSelect2(selector, placeholder) {

        $(selector).select2({
            placeholder: placeholder,
            closeOnSelect: false,
            allowClear: true,
            width: '100%',
            templateResult: formatState,
            escapeMarkup: function(markup) {
                return markup;
            }
        });

        $(selector).on('change select2:select select2:unselect', function() {
            updateSelect2Count($(this));
        });

        updateSelect2Count($(selector));
    }

    $(document).on('click', '.select2-custom-option', function(e) {

        e.preventDefault();
        e.stopPropagation();

        let checkbox = $(this).find('.select-checkbox');

        let value = checkbox.val();

        let select = $(this)
            .closest('.select2-container')
            .prev('select');

        let isChecked = !checkbox.prop('checked');

        checkbox.prop('checked', isChecked);

        select.find('option[value="' + value + '"]')
            .prop('selected', isChecked);

        select.trigger('change');
    });

    $(document).ready(function() {

        initSelect2('.service', 'Select Service');
        initSelect2('.designation', 'Select Designation');

        $(document).on('click', '.book-btn', function() {

            doctor_id = parseInt($(this).data('doctor')) || 0;
            let doctor_name = $(this).data('doctorname');



            $(".appointment_dotor").text('');
            $(".appointment_dotor").text(doctor_name);

            if (doctor_id < 1) {
                $('#message').html('Invalid doctor selected.').show();
                return;
            }

            document.getElementById("book_appointment").reset();

            booking_date = '';

            $('#doctor_id').val(doctor_id);
            $('#slot_timing_input').val('');
            $('#slot_type_input').val('');

            $('.slot_div').html('');
            $('#message').hide();

            let days = $(this).data('days');

            let availableDays = days ?
                days.toString().split(',').map(function(day) {
                    day = parseInt(day);
                    return day === 7 ? 0 : day;
                }).filter(d => !isNaN(d)) : [];

            if (datePicker) {
                datePicker.clear();
                datePicker.destroy();
            }

            $('.booking_date').val('');

            datePicker = flatpickr(".booking_date", {

                dateFormat: "d-m-Y",
                minDate: "today",
                maxDate: new Date().fp_incr(30),

                disable: [
                    function(date) {
                        return !availableDays.includes(date.getDay());
                    }
                ],

                onChange: function(selectedDates, dateStr) {

                    booking_date = dateStr;

                    $('#slot_timing_input').val('');
                    $('#slot_type_input').val('');

                    $('.slot-btn').removeClass('active');

                    $('.slot_div').html('');

                    getSlots();
                }
            });
        });

    });


    function getSlots() {

        if (!doctor_id || doctor_id < 1) {

            $('#message')
                .html('Please select a doctor first.')
                .show();

            return;
        }

        if (!booking_date) {

            return;
        }

        $.ajax({

            method: 'POST',

            url: '{{ route("front.get-slots") }}',

            data: {

                _token: '{{ csrf_token() }}',

                doctor_id: doctor_id,

                booking_date: booking_date
            },

            beforeSend: function() {

                $('#loader').show();

                $('#message').hide();
            },

            success: function(response) {

                $('#loader').hide();

                console.log(response);

                if (response.success) {

                    if (
                        response.extra &&
                        response.extra.active_slot_html &&
                        response.extra.active_slot_html.trim() !== ''
                    ) {

                        $('.slot_div').html(response.extra.active_slot_html);

                        $('#noslot').hide();
                        $('#message').hide();

                    } else {

                        $('.slot_div').html('');

                        $('#noslot')
                            .html(response.message || 'No slots available for this day.')
                            .removeClass('d-none')
                            .show();
                    }

                } else {

                    $('.slot_div').html('');

                    $('#message')
                        .html(response.message)
                        .removeClass('d-none')
                        .show();
                }
            },

            error: function(xhr) {

                $('#loader').hide();

                let msg =
                    'Error loading slots. Please try again.';

                if (
                    xhr.responseJSON &&
                    xhr.responseJSON.message
                ) {
                    msg = xhr.responseJSON.message;
                }

                $('#message')
                    .html(msg)
                    .show();
            }
        });
    }

    $(document).on('click', '.slot-btn', function() {

        $('.slot-btn').removeClass('active');

        $(this).addClass('active');

        $('#slot_timing_input').val(
            $(this).data('slot')
        );

        $('#slot_type_input').val(
            $(this).data('slot-type')
        );
    });

    // $(document).on('submit', '#book_appointment', function(e) {

    //     e.preventDefault();

    //     $('.text-danger').html('');
    //     $('#message').addClass('d-none').html('');

    //     $.ajax({

    //         url: "{{ route('front.booking-summary') }}",

    //         type: "POST",

    //         data: $(this).serialize(),

    //         beforeSend: function() {

    //             $('#loader').show();

    //             $('#book_appointment button[type=submit]')
    //                 .prop('disabled', true);
    //         },

    //         success: function(response) {

    //             $('#loader').hide();

    //             $('#book_appointment button[type=submit]')
    //                 .prop('disabled', false);

    //             if (response.success) {

    //                 // close modal
    //                 $('#bookAppointment').modal('hide');

    //                 // redirect
    //                 window.location.href =
    //                     response.redirect_url;
    //             }
    //         },

    //         error: function(xhr) {

    //             $('#loader').hide();

    //             $('#book_appointment button[type=submit]')
    //                 .prop('disabled', false);

    //             if (xhr.status === 422) {

    //                 let errors = xhr.responseJSON.errors;

    //                 $.each(errors, function(field, messages) {

    //                     $('.error-' + field)
    //                         .html(messages[0]);
    //                 });

    //             } else {

    //                 $('#message')
    //                     .removeClass('d-none')
    //                     .html(xhr.responseJSON.message ??
    //                         'Something went wrong.');
    //             }
    //         }
    //     });

    // });






    // $("#book_appointment").on("submit", function(e) {

    //     e.preventDefault(); // 🔥 MUST ADD THIS

    //     let isValid = true;

    //     $(".text-danger").html("");
    //     $("#message").addClass("d-none").html("");

    //     let full_name = $("input[name='full_name']").val();
    //     let email_id = $("input[name='email_id']").val();
    //     let phone_no = $("input[name='phone_no']").val();
    //     let booking_date = $("input[name='booking_date']").val();
    //     let slot_timing = $("#slot_timing_input").val();

    //     if (!full_name) {
    //         $(".error-full_name").html("Full name is required");
    //         isValid = false;
    //     }

    //     if (!email_id) {
    //         $(".error-email_id").html("Email is required");
    //         isValid = false;
    //     }

    //     if (!phone_no) {
    //         $(".error-phone_no").html("Phone number is required");
    //         isValid = false;
    //     }

    //     if (!booking_date) {
    //         $(".error-booking_date").html("Booking date is required");
    //         isValid = false;
    //     }

    //     if (!slot_timing) {
    //         $(".error-slot_timing").html("Please select a slot");
    //         isValid = false;
    //     }

    //     if (isValid) {
    //         this.submit(); // allow submit only if valid
    //     }
    // });

    $("#book_appointment").on("submit", function(e) {
        e.preventDefault();

        let form = this;
        let formData = new FormData(form);

        $(".text-danger").html("");
        $("#message").addClass("d-none").html("");

        $.ajax({
            url: "{{ route('front.booking-validation') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // All validation passed,
                // including doctor validation
                form.submit();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        $(".error-" + field).html(messages[0]);
                    });
                } else {
                    $("#message")
                        .removeClass("d-none")
                        .html("Something went wrong. Please try again.");
                }
            }
        });
    });
</script>

<script>
@if(!empty($select_doctor))
$(document).ready(function() {
    setTimeout(function() {
        @if(Auth::guard('patient')->check())
            // 1. Locate the button using pure JS
            let targetBtn = document.querySelector('.book-btn[data-doctor="{{ $select_doctor->id }}"]');

            if (targetBtn) {
                // 2. Dispatch a native click event (Triggers both jQuery logic AND Bootstrap modal)
                targetBtn.click();
            } else {
                // Fallback using Bootstrap 5 JavaScript API
                let modalEl = document.getElementById('bookAppointment');
                if (modalEl) {
                    let modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                    modal.show();
                }
            }
        @else
            // Open auth modal if guest
            let authModalEl = document.getElementById('authModal');
            if (authModalEl) {
                let authModal = bootstrap.Modal.getOrCreateInstance(authModalEl);
                authModal.show();
            }
        @endif
    }, 200); // 200ms delay ensures Flatpickr & Bootstrap scripts are ready
});
@endif

document.addEventListener('DOMContentLoaded', function () {
    const appointmentModal = document.getElementById('bookAppointment');

    if (appointmentModal) {
        appointmentModal.addEventListener('show.bs.modal', function () {
          $('#book_appointment .text-danger').text('');
        });
    }
});

</script>
@endsection