@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>
 <div class="row">
            <!-- Doctors in Category and City Section (9-grid) -->
            <div class="col-md-9">
        <section class="container">
            <div class="row">
                <h1>Doctors for
                    {{ ucwords(str_replace('-', ' ', $category)) }}</h1>
                @if ($doc_data_cate->isEmpty())
                    <p>No doctors found in this category.</p>
                @else
                    <div class="col-sm-12 col-md-12" id="profile-table" name="profile">
                        <div id="all-doctors-container">
                            @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>


                                                        {{-- <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
                                                            Appointmenttt</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>
                    </div>
                    {{-- <div class="col-sm-12 col-md-12">
                        {{ $doc_data_cate->links('pagination::bootstrap-4') }}
                    </div> --}}


                    <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>
     <!-- Featured Doctor Section (3-grid) -->
            <div class="col-md-3 mt-5" style="position: sticky; top: 20px;">
                <div class="card">
                    <div class="card-header text-center">
                        Top Premium & Featured Doctor
                    </div>
                </div>
                <div class="sticky-top" style="margin-right: 0px;">
                    @foreach (\App\Http\Controllers\DoctorController::getTopDoctors() as $doctor)
                        @if ($doctor->avatar == 'default.png')
                            <div class="card text-center mt-2">
                                <center><img class="card-img-top mt-2" src="{{ asset('images/default.png') }}"
                                        alt="{{ $doctor->name }}"
                                        style="height: 100px;width: 100px;border-radius: 50%; object-fit: cover;">
                                </center>
                                <div class="card-body">
                                    <a href="/doctors/{{ $doctor['slug'] }}" target="_blank">
                                        <p class="card-text">{{ $doctor->name }}</p>
                                    </a>
                                </div>
                            </div>
                        @else
                            <div class="card text-center">
                                <center><img class="card-img-top mt-2" src="storage/users/{{ $doctor->avatar }}"
                                        alt="{{ $doctor->name }}"
                                        style="height: 100px;width: 100px;border-radius: 50%; object-fit: cover;">
                                </center>
                                <div class="card-body">
                                    <a href="/doctors/{{ $doctor['slug'] }}" target="_blank">
                                        <p class="card-text">{{ $doctor->name }}</p>
                                    </a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

      <section class="" style="Background-color: #FBFCFC;" id="mhn_con_doctors">
        <h3 id="header"><b>Consult top hospitals online for any health concern</b></h3>
        <span><small class="mhn-margin-less">Private online consultations with verified hospitals in all
                specialists</small></span>
        <!-- row starts -->
        <div class="row text-center mt-3">
            <!-- column 1 start -->
            @foreach (\App\Http\Controllers\PassportApi\HospitalManagementController::_getHospitals() as $hospital)
                <div class="col-sm-6 col-md-2 mhn-link">
                    <a href="/hospitals/{{$hospital['slug']}}" target="_blank"> 
                   <a href="/hospitals/{{ $hospital['slug'] }}" target="_blank">
                        @if ($hospital['avatar'] == 'hospital.png')
                            <img src="{{ asset('images/hospital.png') }}" alt="{{ $hospital['name'] }}"
                                class="mhn-img-circle" style=" object-fit: cover;">
                        @else
                            <img src="/hospitals/storage/hospital_profile/{{ $hospital['avatar'] }}"
                                alt="Acne ,Pimples or Skin Issues" class="mhn-img-circle" style=" object-fit: cover;">
                        @endif
                        <p class="mhn-font-14 mhn-font-bold">{{ $hospital['name'] }}</p>
                    </a>
                    <a href="https://www.myhospitalnow.com/get-started" target="_blank">
                        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12" id="consultButton">Quote
                            Now</span>
                    </a>
                    <hr>
                </div>
            @endforeach 
        
        </div>
        <!-- row ends -->
    </section>

    <!-- what our customers say section start -->
    <section>
        <div class="demo">
            <h2 class="text-center mb-3">What our users have to say</h2>
            <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <div id="testimonial-slider" class="owl-carousel">
                            <div class="testimonial">
                                <div class="testimonial-content">
                                    <div class="testimonial-icon">
                                        <i class="fa fa-quote-left"></i>
                                    </div>
                                    <p class="description">
                                        Very easy to book,maintain history. Hassle free from older versions of booking
                                        appointment via telephone.
                                    </p>
                                </div>
                                <h3 class="title">Mr. Rajmohan Desai</h3>
                            </div>

                            <div class="testimonial">
                                <div class="testimonial-content">
                                    <div class="testimonial-icon">
                                        <i class="fa fa-quote-left"></i>
                                    </div>
                                    <p class="description">
                                        Very good app. Well thought out about booking/rescheduling/canceling an appointment.
                                    </p>
                                </div>
                                <h3 class="title">Kristina</h3>
                            </div>

                            <div class="testimonial">
                                <div class="testimonial-content">
                                    <div class="testimonial-icon">
                                        <i class="fa fa-quote-left"></i>
                                    </div>
                                    <p class="description">
                                        Very helpful. Far easier than doing same things on computer. Allows quick and easy
                                        search with speedy booking.
                                    </p>
                                </div>
                                <h3 class="title">Mr. Ravi Sharma</h3>
                            </div>

                            <div class="testimonial">
                                <div class="testimonial-content">
                                    <div class="testimonial-icon">
                                        <i class="fa fa-quote-left"></i>
                                    </div>
                                    <p class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum dolor sit
                                        amet eros imperdiet.
                                    </p>
                                </div>
                                <h3 class="title">williamson</h3>
                            </div>

                            <div class="testimonial">
                                <div class="testimonial-content">
                                    <div class="testimonial-icon">
                                        <i class="fa fa-quote-left"></i>
                                    </div>
                                    <p class="description">
                                        Very easy to book. Hassle free from older versions of booking appointment via
                                        telephone. You should give a try.
                                    </p>
                                </div>
                                <h3 class="title">williamson</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- what our customers say section end -->

    <!-- Download App Section Start -->
    <section class="container-fluid mt-4" id="app_download" style="padding-bottom:10px;">
        <h1 class="text-center"><i class="fa fa-download" aria-hidden="true">&nbsp;&nbsp;<b>Download the MyHospitalNow
                    app</b></i></h1>
        <div class="row">
            <!--Tab 1 Start-->
            <div class="col-sm-12 col-md-4 mb-4">
                <div class="mhn-install text-center">
                    <p><strong>Are you Patient?</strong></p>
                    <ul class="list-unstyled">
                        <li>Free Surgery Cost Estimation</li>
                        <li>Free Consulting with Best Hospital</li>
                        <li>Free Consulting with Best Doctors</li>
                        <li>Lowest Treatment Cost</li>
                        <li>World Class Hospitals Options</li>
                        <li>Tour to your Dream Country</li>
                    </ul>
                    <a href="https://play.google.com/store/apps/details?id=cotocus.myhospitalnow"><img class=""
                            src="{{ asset('images/homepage/google_badge.webp') }}" alt="" id="playstore"></a>
                    <img src="{{ asset('images/homepage/appstore_badge.webp') }}" alt="" id="appstore">
                </div>
            </div>
            <!--tab 1 End-->
            <!--tab 2 Start-->
            <div class="col-sm-12 col-md-4 mb-4">
                <div class="mhn-install text-center">
                    <p><strong>Are you Hospital?</strong></p>
                    <ul class="list-unstyled">
                        <li>Free International Surgery Query</li>
                        <li>Free Hospital Profile</li>
                        <li>Directly Interact with Patients</li>
                        <li>Free Services/Offer Publishing</li>
                        <li>Free Medical Tourism IT Platform</li>
                        <li>Free Case Management Software</li>
                    </ul>
                    <a href="https://play.google.com/store/apps/details?id=cotocus.myhositalnowhospitalhospital"><img
                            class="" src="{{ asset('images/homepage/google_badge.webp') }}" alt=""
                            id="playstore"></a>
                    <img src="{{ asset('images/homepage/appstore_badge.webp') }}" alt="" id="appstore">
                </div>
            </div>
            <!--tab 2 End-->
            <!--tab 3 Start-->
            <div class="col-sm-12 col-md-4 mb-4">
                <div class="mhn-install text-center">
                    <p><strong>Are you Doctor?</strong></p>
                    <ul class="list-unstyled">
                        <li>Free International Surgery Query</li>
                        <li>Free Doctor Profile</li>
                        <li>Directly Interact with Patients</li>
                        <li>Free Services/Offer Publishing</li>
                        <li>Free Medical Tourism IT Platform</li>
                        <li>Free Case Management Software</li>
                    </ul>
                    <a href="https://play.google.com/store/apps/details?id=cotocus.myhositalnowhospitaldoctor"><img
                            class="" src="{{ asset('images/homepage/google_badge.webp') }}" alt=""
                            id="playstore"></a>
                    <img src="{{ asset('images/homepage/appstore_badge.webp') }}" alt="" id="appstore">
                </div>
            </div>
            <!--tab 3 End-->

        </div>
        </div>
    </section>
     <script>
        $(document).ready(function() {
            $("#testimonial-slider").owlCarousel({
                items: 3,
                itemsDesktop: [1000, 3],
                itemsDesktopSmall: [980, 2],
                itemsTablet: [768, 2],
                itemsMobile: [650, 1],
                pagination: true,
                navigation: false,
                slideSpeed: 1000,
                autoPlay: true
            });
        });
    </script>
    {{-- <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.");
                } else {
                    // console.log("✅ Some doctors match the search query.");
                }

                // 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