@extends('layouts.app')

@section('content')
    @include('includes.navbar')
    <!-- get all Doctor data by State ID section start-->
    <div class="container mt-5 pt-5">
        <a class="btn btn-outline-primary mb-3" href="https://www.myhospitalnow.com/doctors/">Back to doctors</a>

        <!-- Search Filter Section -->
        <div class="input-group mb-4">
            <input type="text" id="doctorSearch" class="form-control" placeholder="Search doctor by name...">
            <div class="input-group-append">
                <button class="btn btn-primary" id="searchDoctorBtn">Search</button>
            </div>
        </div>
        <section class="container">
            <div class="row">
                <h1>Doctors in {{ ucwords(str_replace('-', ' ', $city_new)) }} for
                    {{ ucwords(str_replace('-', ' ', $category)) }}</h1>
                <div class="col-sm-12 col-md-12" id="profile-table" name="profile">
                    <p id="noDoctorsMessage" style="display: none;">No Data for search</p>
                    @if ($doc_data_cate->isEmpty())
                        <p>No doctors found in this category or city.</p>
                    @else
                        @foreach ($doc_data_cate as $key => $doc_data)
                            <div class="card shadow-lg p-3 mb-1 bg-white rounded doctor-card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-3 col-md-3 d-flex flex-column align-items-center">
                                                    <p>
                                                        @if ($doc_data->avatar == 'default.png')
                                                            <img class="img-thumbnail" src="/doctors/images/default.png"
                                                                alt="{{ $doc_data->name }}"
                                                                style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                        @else
                                                            <img class="img-thumbnail"
                                                                src="/doctors/storage/users/{{ $doc_data->avatar }}"
                                                                alt="{{ $doc_data->name }}"
                                                                style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                        @endif
                                                    </p>
                                                    <span class="mt-2"><a href="/doctors/{{ $doc_data->slug }}"
                                                            class="btn btn-outline-primary">View Profile</a></span>
                                                </div>
                                                <div class="col-sm-6 col-md-5 text-left">
                                                    <a href="/doctors/{{ $doc_data->slug }}" class="u-color--primary">
                                                        <h3 data-qa-id="hospital_name"
                                                            class="u-title-font u-c-pointer u-bold doctor-name"
                                                            style="color: #14bef0">
                                                            {{ $doc_data->name }}
                                                        </h3>
                                                    </a>
                                                    <address style="display: block; font-style: italic;">
                                                        <b class="mb-2">Visit us at:</b><br>
                                                        <i class="fa fa-map-marker text-danger" aria-hidden="true"></i>
                                                        {{-- {{ $doc_data->area }} ,
                                                        {{ $doc_data->colony }} , --}}
                                                        {{ $doc_data->pincode }} ,<br>
                                                        {{ $doc_data->city_name }} ,
                                                        {{ $doc_data->state }} ,
                                                        {{ $doc_data->country_name }}
                                                    </address>
                                                    <br>
                                                    {{-- <a class="btn btn-outline-success btn-sm mt-3"
                                                        href="{{ $doc_data->website }}" target="_blank"
                                                        title="visit here">Website</a> --}}
                                                </div>
                                                <div class="col-sm-3 col-md-4">
                                                    <a class="btn-sm align-middle"
                                                        href="{{ $doc_data->fb_profile ?? '#' }}" target="_blank"
                                                        title="visit fb"
                                                        style="position:relative; color: {{ $doc_data->fb_profile ? 'rgb(41, 41, 224)' : 'gray' }}; pointer-events: {{ $doc_data->fb_profile ? 'auto' : 'none' }};">
                                                        <i class="fab fa-facebook" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm align-middle"
                                                        href="{{ $doc_data->twitter_profile ?? '#' }}" target="_blank"
                                                        title="visit twitter"
                                                        style="position:relative; color: {{ $doc_data->twitter_profile ? 'rgb(16, 153, 207)' : 'gray' }}; pointer-events: {{ $doc_data->twitter_profile ? 'auto' : 'none' }};">
                                                        <i class="fab fa-twitter" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm align-middle"
                                                        href="{{ $doc_data->linkedin_profile ?? '#' }}" target="_blank"
                                                        title="visit linkedin"
                                                        style="position:relative; color: {{ $doc_data->linkedin_profile ? 'rgb(33, 33, 176)' : 'gray' }}; pointer-events: {{ $doc_data->linkedin_profile ? 'auto' : 'none' }};">
                                                        <i class="fab fa-linkedin" aria-hidden="true"></i>
                                                    </a>
                                                    {{-- <a class="btn-sm mr-1 align-middle" href="{{ $doc_data->youtube_profile ?? '#' }}" target="_blank" title="visit Youtube" style="position:relative; color: {{ $doc_data->youtube_profile ? 'red' : 'gray' }}; pointer-events: {{ $doc_data->youtube_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-youtube" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm mr-1 align-middle" href="{{ $doc_data->instagram_profile ?? '#' }}" target="_blank" title="visit Instagram" style="position:relative; color: {{ $doc_data->instagram_profile ? 'rgb(188, 43, 43)' : 'gray' }}; pointer-events: {{ $doc_data->instagram_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-instagram" aria-hidden="true"></i>
                                                    </a>
                                                    <br><br>
                                                    <b>Accreditation:</b> {{ $doc_data->accreditation }}
                                                    <img src="{{ asset('images/verification.svg') }}" width="20px">  --}}
                                                    <br>
                                                    <b>Language:</b> {{ $doc_data->languages }}<br>
                                                    <b>Degree:</b> {{ $doc_data->degree }}<br>
                                                    <b>College:</b> {{ $doc_data->college }}<br>
                                                    <b>Opening Time:</b> 9am - 9pm
                                                    <br><br>
                                                    <button class="btn btn-primary mb-2 openClinicApptModal"
                                                        data-index="{{ $key }}" type="button">Book
                                                        Appointment</button>


                                                    <div class="modal fade" id="clinicAppointmentPopup{{ $key }}"
                                                        tabindex="-1" role="dialog"
                                                        aria-labelledby="clinicAppointmentLabel{{ $key }}"
                                                        aria-hidden="true">
                                                        <div class="modal-dialog modal-lg" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title"
                                                                        id="clinicAppointmentLabel{{ $key }}">
                                                                        Book Appointment</h5>
                                                                    <button type="button" class="close"
                                                                        data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body text-center">
                                                                    <h4>Book Appointment with
                                                                        {{ explode(',', $doc_data['name'])[0] }}</h4>
                                                                    <p>Place: {{ $doc_data['city_name'] ?? '' }},
                                                                        {{ $doc_data['country_name'] ?? '' }}</p>
                                                                    <h5>Available Slots:</h5>

                                                                    @if (!empty($doc_data['futureEvents']) && count($doc_data['futureEvents']) > 0)
                                                                        @foreach ($doc_data['futureEvents'] as $event)
                                                                            @php
                                                                                $startDate = new DateTime(
                                                                                    $event['start'],
                                                                                );
                                                                                $endDate = !empty($event['end'])
                                                                                    ? new DateTime($event['end'])
                                                                                    : $startDate;
                                                                                $allDayStr = $event['all_day']
                                                                                    ? 'Yes'
                                                                                    : 'No';
                                                                                $startDateStr = $startDate->format(
                                                                                    'l, d M Y',
                                                                                );
                                                                                $endDateStr = $endDate->format(
                                                                                    'l, d M Y',
                                                                                );
                                                                                $startTimeStr = $startDate->format(
                                                                                    'h:i A',
                                                                                );
                                                                                $endTimeStr = $endDate->format('h:i A');
                                                                            @endphp
                                                                            <div class="border rounded p-3 shadow-sm mb-3">
                                                                                <div class="row align-items-center">
                                                                                    <div class="col-md-4">
                                                                                        <h5 class="mb-1 fw-semibold">
                                                                                            {{ $event['title'] }}
                                                                                        </h5>
                                                                                        <p class="mb-0 text-secondary"
                                                                                            style="font-size:0.9rem;">
                                                                                            Date: <span
                                                                                                class="fw-medium">{{ $startDateStr }}{{ $startDateStr !== $endDateStr ? ' - ' . $endDateStr : '' }}</span>
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-3">
                                                                                        <p class="mb-0 text-secondary"
                                                                                            style="font-size:0.9rem;">
                                                                                            Time: <span
                                                                                                class="fw-medium">{{ $startTimeStr }}
                                                                                                -
                                                                                                {{ $endTimeStr }}</span>
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="col-md-2">
                                                                                        <p class="mb-0 text-secondary"
                                                                                            style="font-size:0.9rem;">
                                                                                            All Day: <span
                                                                                                class="fw-medium">{{ $allDayStr }}</span>
                                                                                        </p>
                                                                                    </div>
                                                                                    <div
                                                                                        class="col-md-3 d-flex justify-content-end">
                                                                                        <button
                                                                                            class="btn btn-primary bookSlot"
                                                                                            type="button"
                                                                                            data-index="{{ $key }}"
                                                                                            data-event-id="{{ $event['id'] }}"
                                                                                            data-event-title="{{ $event['title'] }}"
                                                                                            data-event-date="{{ $startDateStr }}{{ $startDateStr !== $endDateStr ? ' - ' . $endDateStr : '' }}"
                                                                                            data-event-time="{{ $startTimeStr }} - {{ $endTimeStr }}">
                                                                                            Book Slot
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <p class="text-muted">No available slots at the
                                                                            moment. Please check
                                                                            again later.</p>
                                                                    @endif

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

                                                    <!-- Booking Modal -->
                                                    <div class="modal fade" id="BookApmt{{ $key }}"
                                                        tabindex="-1" role="dialog"
                                                        aria-labelledby="BookApmtLabel{{ $key }}"
                                                        aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <form class="bookAppointmentForm"
                                                                data-index="{{ $key }}" novalidate>
                                                                <input type="hidden" name="doctor_email"
                                                                    value="{{ $doc_data['email'] ?? '' }}">
                                                                <input type="hidden" name="event_id" value="">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title"
                                                                            id="BookApmtLabel{{ $key }}">Book
                                                                            Appointment with {{ $doc_data['name'] }}</h5>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body text-center">
                                                                        <div class="mb-4 p-3 border rounded bg-light">
                                                                            <h6 class="mb-2 fw-semibold"
                                                                                id="eventTitle{{ $key }}">
                                                                                Event Title --</h6>
                                                                            <p class="mb-1"
                                                                                id="eventDate{{ $key }}">
                                                                                <strong>Date:</strong> --
                                                                            </p>
                                                                            <p class="mb-0"
                                                                                id="eventTime{{ $key }}">
                                                                                <strong>Time:</strong> --
                                                                            </p>
                                                                        </div>
                                                                        <div class="form-group text-left">
                                                                            <label for="name{{ $key }}">Your
                                                                                Name:</label>
                                                                            <input type="text" class="form-control"
                                                                                id="name{{ $key }}"
                                                                                name="name"
                                                                                placeholder="Enter your name" required>
                                                                            <small class="text-danger"
                                                                                id="nameError{{ $key }}"></small>
                                                                        </div>
                                                                        <div class="form-group text-left">
                                                                            <label for="phone{{ $key }}">Phone
                                                                                Number:</label>
                                                                            <input type="tel" pattern="[0-9]{10}"
                                                                                class="form-control"
                                                                                id="phone{{ $key }}"
                                                                                name="phone"
                                                                                placeholder="Enter your phone number"
                                                                                required>
                                                                            <small class="text-danger"
                                                                                id="phoneError{{ $key }}"></small>
                                                                        </div>
                                                                        <div class="form-group text-left">
                                                                            <label for="email{{ $key }}">Email
                                                                                Address:</label>
                                                                            <input type="email" class="form-control"
                                                                                id="email{{ $key }}"
                                                                                name="email"
                                                                                placeholder="Enter your email" required>
                                                                            <small class="text-danger"
                                                                                id="emailError{{ $key }}"></small>
                                                                        </div>

                                                                        <div class="form-group text-left"
                                                                            style="display:none;">
                                                                            <label for="drEmail{{ $key }}">Doctor
                                                                                Email:</label>
                                                                            <input type="email" class="form-control"
                                                                                id="drEmail{{ $key }}"
                                                                                value="{{ $doc_data['email'] ?? '' }}"
                                                                                name="drEmail" readonly>
                                                                            <small class="text-danger"
                                                                                id="emailError{{ $key }}"></small>
                                                                        </div>
                                                                        <div class="form-group">

                                                                            <div class="g-recaptcha"
                                                                                data-sitekey="{{ '6LeSHVckAAAAAEy29JRI6f733mMcmlqp7woB9KGc' }}">
                                                                            </div>
                                                                            @if ($errors->has('g-recaptcha-response'))
                                                                                <span
                                                                                    class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary"
                                                                            data-dismiss="modal">Close</button>
                                                                        <button type="submit"
                                                                            class="btn btn-primary submit-book-apmt"
                                                                            data-index="{{ $key }}">Submit</button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                </div>
                {{-- {{ $doc_data_cate->links('pagination::bootstrap-4') }} --}}

                <div class="col-12">
                    {{-- Desktop View: Show full pagination --}}
                    <div class="d-none d-md-block">
                        {{ $doc_data_cate->links('pagination::bootstrap-4') }}
                    </div>

                    {{-- Mobile View: Show only 4 pagination buttons --}}
                    <div class="d-block d-md-none text-center">
                        <nav>
                            <ul class="pagination justify-content-center">
                                {{-- Previous button --}}
                                @if ($doc_data_cate->onFirstPage())
                                    <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $doc_data_cate->previousPageUrl() }}"
                                            rel="prev">&laquo;</a>
                                    </li>
                                @endif

                                {{-- Current page --}}
                                <li class="page-item active"><span
                                        class="page-link">{{ $doc_data_cate->currentPage() }}</span></li>

                                {{-- Next page --}}
                                @if ($doc_data_cate->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $doc_data_cate->nextPageUrl() }}" rel="next">
                                            {{ $doc_data_cate->currentPage() + 1 }}
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $doc_data_cate->nextPageUrl() }}"
                                            rel="next">&raquo;</a>
                                    </li>
                                @else
                                    <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                </div>
                @endif
            </div>
        </section>
    </div>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.js"></script>
    <script>
        $.sidebar.initSideBar();
        $.sp_globals.toggleSPLoadingSpinner(false);
    </script>
    <script src="{{ asset('js/blade-components/hospital_profile_filter.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Add a click event listener to the 'Submit' button
            $('#SubmitBookApmt').on('click', function(e) {
                e.preventDefault(); // Prevent the form from submitting normally

                // Get the values from the form
                var name = $('#name').val();
                var phone = $('#phone').val();
                var email = $('#email').val();
                var drEmail = $('#drEmail').val();
                // Check if the email and drEmail are the same
                if (email === drEmail) {
                    // Show an error message
                    alert("You can't book an appointment with the same email");
                    return; // Exit the function to prevent the AJAX request
                }

                // Create a data object to send in the AJAX request
                var data = {
                    name: name,
                    phone: phone,
                    email: email,
                    drEmail: drEmail
                };



                var url = "{{ route('doctor.appointment', ':drEmail') }}";
                url = url.replace(':drEmail', drEmail);
                // console.log('AJAX request URL:', url);

                // Send an AJAX POST request to the specified URL
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        // Handle the success response here
                        // console.log('AJAX request successful');
                        // console.log(response);

                        // You can do further processing or show a success message to the user
                        Swal.fire({
                            title: "Success!",
                            text: "Appointment booked successfully!",
                            icon: "success"
                        });
                        $('#BookApmt').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        // Handle any errors that occur during the AJAX request
                        console.error('AJAX request error');
                        console.error(xhr, status, error);

                        // You can show an error message to the user
                        alert("Please fill the form correctly.");
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // console.log("✅ Document is ready.");

            function filterDoctors() {
                // console.log("🔍 filterDoctors function called.");

                var value = $('#doctorSearch').val().toLowerCase().trim();
                // console.log("🔎 Search input value:", value);

                var anyMatch = false; // Track if any doctor is found

                $('.doctor-card').each(function(index) {
                    // console.log("➡️ Checking doctor-card index:", index);

                    var doctorName = $(this).find('.doctor-name').text().toLowerCase().trim();
                    // console.log("👨‍⚕️ Doctor name found:", doctorName);

                    var isMatch = doctorName.includes(value);
                    // console.log("✅ Match found?", isMatch);

                    $(this).toggle(isMatch);

                    if (isMatch) {
                        anyMatch = true; // At least one match found
                    }
                });

                if (!anyMatch) {
                    // console.log("❌ No doctors match the search query.");
                    $('#noDoctorsMessage').show(); // Show "No Hospitals found" message
                    $('.pagination').hide(); // Hide pagination
                } else {
                    // console.log("✅ Some doctors match the search query.");
                    $('#noDoctorsMessage').hide(); // Hide the "No Hospitals found" message
                    $('.pagination').show(); // Show pagination when hospitals are found
                }

                // console.log("🔍 filterDoctors function execution finished.");
            }

            // Search on typing
            $('#doctorSearch').on('keyup', function() {
                // console.log("⌨️ 'keyup' event detected on #doctorSearch.");
                filterDoctors();
            });

            // Search on button click
            $('#searchDoctorBtn').on('click', function() {
                // console.log("🖱️ 'click' event detected on #searchDoctorBtn.");
                filterDoctors();
            });

            // console.log("✅ Event listeners attached.");
        });
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        $(document).on('click', '.openClinicApptModal', function() {
            var i = $(this).data('index');
            console.log('[openClinicApptModal] Button clicked, index:', i);
            $('#clinicAppointmentPopup' + i).modal('show');
            console.log('[openClinicApptModal] Modal shown:', '#clinicAppointmentPopup ' + i);
        });

        $(document).on('click', '.bookSlot', function() {
            console.log('[bookSlot] Button clicked');
            console.log('bookSlot clicked');
            var i = $(this).data('index');
            console.log('[bookSlot] Index:', i);
            console.log('Index:', i);


            var eventId = $(this).data('event-id');
            console.log('Event ID:', eventId);
            var eventTitle = $(this).data('event-title') || 'N/A';
            console.log('Event Title:', eventTitle);
            var eventDate = $(this).data('event-date') || '--';
            console.log('Event Date:', eventDate);
            var eventTime = $(this).data('event-time') || '--';
            console.log('Event Time:', eventTime);

            // Set event_id hidden input
            $('#BookApmt' + i).find('input[name="event_id"]').val(eventId);
            console.log('Set event_id in booking form');

            // Set event details in booking modal
            $('#eventTitle' + i).text(eventTitle);
            $('#eventDate' + i).html('<strong>Date:</strong> ' + eventDate);
            $('#eventTime' + i).html('<strong>Time:</strong> ' + eventTime);
            console.log('Updated event details in booking modal');

            // Hide clinic appointment modal and show booking modal
            $('#clinicAppointmentPopup' + i).modal('hide');
            console.log('Closed clinic appointment modal:', i);
            $('#BookApmt' + i).modal('show');
            console.log('[bookSlot] Updated event details in booking modal:', i);
        });

        // for (var i = 0; i < dataLen; i++) {
        //     console.log('Setting up event listeners for modal ' + i);
        //     var recaptchaWidgetIds = [];

        //     $('#BookApmt' + i).on('shown.bs.modal', function() {
        //         var modalIndex = $(this).attr('id').replace('BookApmt', '');
        //         console.log('[modal shown] Modal', modalIndex, 'shown, resetting reCAPTCHA');

        //         // console.log('Modal ' + modalIndex + ' shown, resetting reCAPTCHA');

        //         // if (recaptchaWidgetIds[modalIndex] !== undefined) {
        //         //     grecaptcha.reset(recaptchaWidgetIds[modalIndex]);
        //         // } else {
        //         //     recaptchaWidgetIds[modalIndex] = grecaptcha.render('recaptcha' + modalIndex, {
        //         //         'sitekey': '6LeSHVckAAAAAEy29JRI6f733mMcmlqp7woB9KGc'
        //         //     });
        //         // }
        //     });


        //     if (!data[i].state_id) {
        //         console.log('Skipping modal ' + i + ' because state_id is missing');
        //         continue;
        //     }

        //     console.log('Attaching click handler for SubmitBookApmt' + i);


        // }

        $(document).on('click', '.submit-book-apmt', function(e) {
            var $btn = $(this); // Store reference to the button
            console.log('[submit-book-apmt] Button clicked');
            if ($btn.prop('disabled')) {
                console.log('[submit-book-apmt] Button already disabled, ignoring click');
                return; // If already disabled, ignore further clicks
            }

            $btn.prop('disabled', true); // Disable button immediately
            var index = $btn.data('index'); // Get data-index
            console.log('[submit-book-apmt] Processing submission for index:', index);
            handleBookApmtSubmit(index, e, $btn); // Pass button reference to handler
        });

        console.log('Attaching click handler for SubmitBookApmtSubmitBookApmt ');

        function handleBookApmtSubmit(index, e, $btn) {
            e.preventDefault();
            console.log('[handleBookApmtSubmit] Submit handler called for index:', index);
            $.sp_globals.toggleSPLoadingSpinner(true);

            if (validateForm(index)) {
                console.log('[handleBookApmtSubmit] Validation passed for index:', index);
                submitBookApmtData(index, $btn); // Pass button reference to submit function
            } else {
                console.log('[handleBookApmtSubmit] Validation failed for index:', index);
                $.sp_globals.toggleSPLoadingSpinner(false);
                $btn.prop('disabled', false); // Re-enable button on validation failure
            }
        }


        function createSubmitHandler(index) {
            console.log('Creating submit handler for index ' + index);
            return function(e) {
                e.preventDefault();
                console.log('Submit button clicked for index ' + index);
                $.sp_globals.toggleSPLoadingSpinner(true);

                if (validateForm(index)) {
                    console.log('Form validation passed for index ' + index);
                    submitBookApmtData(index);
                } else {
                    // console.log('Form validation failed for index ' + index);
                    $.sp_globals.toggleSPLoadingSpinner(false);
                }
            };
        }


        function validateForm(i) {
            console.log('Validating form for modal ' + i);


            // Clear all previous error messages
            $("#nameError" + i).text("");
            $("#phoneError" + i).text("");
            $("#emailError" + i).text("");
            // $("#recaptchaError" + i).text("");

            var isValid = true;

            var name = $("#name" + i).val();
            var phone = $("#phone" + i).val();
            var email = $("#email" + i).val();
            var drEmail = $("#drEmail" + i).val();
            console.log('[validateForm] Form data:', {
                name,
                phone,
                email,
                drEmail
            });
            // var recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetIds[i]);
            // console.log('Form data - Name: ' + name + ', Phone: ' + phone + ', Email: ' + email + ', Doctor Email: ' + drEmail + ', Recaptcha Response: ' + recaptchaResponse);

            if (name === "") {
                $("#nameError" + i).text("Please enter your name.");
                isValid = false;
            }

            if (!/^\d{10}$/.test(phone)) {
                $("#phoneError" + i).text("Please enter a valid 10-digit phone number.");
                isValid = false;
            }

            if (!validateEmail(email)) {
                $("#emailError" + i).text("Please enter a valid email address.");
                isValid = false;
            }

            if (email === drEmail) {
                $("#emailError" + i).text("You can't book an appointment using the doctor's email.");
                isValid = false;
            }

            // if (!recaptchaResponse) {
            //     $("#recaptchaError" + i).text("Please complete the reCAPTCHA verification.");
            //     isValid = false;
            // }

            if (!isValid) {
                console.log('Validation failed for modal ' + i);
            } else {
                console.log('Validation passed for modal ' + i);
            }

            return isValid;
        }

        function validateEmail(email) {
            console.log('Validating email format: ' + email);
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            var isValid = emailRegex.test(email);
            console.log('Email format valid: ' + isValid);
            return isValid;
        }

        function submitBookApmtData(i, $btn) {
            console.log('Submitting appointment data for modal ' + i);

            var name = $("#name" + i).val();
            var phone = $("#phone" + i).val();
            var email = $("#email" + i).val();
            var drEmail = $("#drEmail" + i).val();
            var eventId = $("#BookApmt" + i).find('input[name="event_id"]').val();
            // var recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetIds[i]);


            console.log('Data to be submitted:', {
                name: name,
                phone: phone,
                email: email,
                drEmail: drEmail,
                event_id: eventId
                // recaptcha_response: recaptchaResponse
            });

            var data = {
                name: name,
                phone: phone,
                email: email,
                drEmail: drEmail,
                event_id: eventId
                // recaptcha_response: recaptchaResponse
            };

            $.ajax({
                url: 'https://www.myhospitalnow.com/doctors/api/v1/doctor-api/j/doctor-submit-book-appointment/' +
                    drEmail,
                type: 'POST',
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(response) {
                    // console.log('Appointment booked successfully for modal ' + i);
                    Swal.fire({
                        title: "Success!",
                        text: "Appointment booked successfully!",
                        icon: "success"
                    });
                    $('#BookApmt' + i).modal('hide');
                    // grecaptcha.reset();
                },
                error: function(xhr, status, error) {
                    alert("Please! Fill the form correctly");
                    // grecaptcha.reset();
                    $btn.prop('disabled', false); // Re-enable button on AJAX failure
                }
            });

            $.sp_globals.toggleSPLoadingSpinner(false);
        }
    </script>
@endsection