@extends('layouts.app')
@php
    use Illuminate\Support\Str;
@endphp

@section('content')


    <style>
        .footer-border {
            border-bottom: 1px solid #dcdcdc;
            /* padding: 2px 20px; */
        }

        .nav-tabs>li.nav-item>a:focus {
            color: #14bef0;
            font-weight: bold;
        }

        /* read more button in experience */
        .read-more-show {
            cursor: pointer;
            color: #ed8323;
        }

        .read-more-hide {
            cursor: pointer;
            color: #ed8323;
        }

        .hide_content {
            display: none;
        }
    </style>
    <style>
        .btn.disabled,
        .btn:disabled {
            pointer-events: none;
            opacity: 0.65;
        }

        /* Custom Styling */
        .story-item {
            background-color: #f3f7fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .story-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .story-title {

            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .story-image img {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        .story-footer {
            text-align: right;
        }

        .btn-primary {
            background-color: #4e73df;
            border: none;
            padding: 8px 12px;
            text-transform: uppercase;
            font-weight: bold;
        }

        .btn-primary:hover {
            background-color: #2e59d9;
            cursor: pointer;
        }

        .list-group-item {
            border: none;
            padding: 0;
        }

        .list-group {
            padding-left: 0;
        }
    </style>
    <style>
.claim-button {
    position: relative;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    width: 230px;
    transition: box-shadow 0.3s ease;
}

.claim-button:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.discount-oldprice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.discount-badge {
    background-color: #f7d23c;
    color: #222;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.old-price {
    font-size: 1rem;
    color: #ddd;
    text-decoration: line-through;
    font-weight: 600;
}

.price-section {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.price {
    font-family: 'Arial Black', Arial, sans-serif;
}

.per-month {
    font-size: 1rem;
    font-weight: 50;
    margin-left: 10px;
    color: #e4e4e4;
    white-space: nowrap;
    /* Prevent line break */
}

.term-info {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    text-align: center;
    line-height: 1.4;
}

.term-info div {
    margin: 4px 0;
}
</style>
    @include('includes.navbar')
    @if ($users->state_id == null)

        <div class="container mt-5 pt-5">
            <div class="row justify-content-center">
                <div class="col-lg-10">

                    <div class="card text-center">
                        <div class="card-body">
                            <img src="images/hospital-profile-edit.svg" alt="Hospital Profile is not updated"
                                style="position:relative; left:25px" width="200px">
                            <h3> Let’s complete your profile to unlock all the features and help you provide the best
                                care possible. </h3>
                            <a href="{{ url('/') }}" class="btn btn-outline-success">Back To Homepage</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="container">
            <div class="col-sm-12 col-md-12 mt-5 pt-5">
                <div class="pb-3">
                    <!-- <a href="{{ url()->previous() }}" class="btn btn-primary"><i class="fa fa-arrow-left" aria-hidden="true"></i>
                                                                                                           Back</a> -->
                    <!-- Breadcrumb starts -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <!-- hidden country state and city names -->
                            <input type="hidden" id="CountryId" value="{{ $users->country_id }}">
                            <input type="hidden" id="CountryName" value="{{ $users->country_name }}">
                            <input type="hidden" id="StateId" value="{{ $users->state_id }}">
                            <input type="hidden" id="StateName" value="{{ $users->state }}">
                            <input type="hidden" id="CityName" value="{{ $users->city_name }}">
                            <li class="breadcrumb-item"><a href="{{ url('https://www.myhospitalnow.com/') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ url('/') }}">Doctors</a></li>
                            <li class="breadcrumb-item"><a href="/doctors/{{ $country }}" onClick="getCountryID()"
                                    id="pubCountry">{{ $users->country_name }}</a></li>
                            <li class="breadcrumb-item"><a href="/doctors/{{ $country }}/{{ $state }}"
                                    onClick="getStateID()" id="pubState">{{ $users->state }}</a></li>
                            <li class="breadcrumb-item"><a
                                    href="/doctors/{{ $country }}/{{ $state }}/{{ $city }}"
                                    onClick="getCityName()" id="pubCity">{{ $users->city_name }}</a></li>
                            <li class="breadcrumb-item active text-capitalize" aria-current="page">{{ $users->name }}
                            </li>
                        </ol>
                    </nav>
                    <!-- Breadcrumb end -->

                </div>
            </div>
        </div>
        <section class="container">
            <div class="row">
                <div class="col-sm-9 col-md-8">

                    <div class="card">
                        <div class="card-body" id="profile-table" name="profile">
                            <div class="container text-center thumbnail checkout-thumbnail">
                                <!-- row 1st start -->
                                <div class="row">

                                    <div class="col-sm-12 col-lg-4">
                                        <p class="">
                                            @if ($users->avatar == 'default.png')
                                                <img class="img-thumbnail" src='/doctors/images/default.png'
                                                    alt="{{ $users->name }}"
                                                    style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                            @else
                                                <img class="img-thumbnail"
                                                    src='/doctors/storage/users/{{ $users->avatar }}'
                                                    alt="{{ $users->name }}"
                                                    style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                            @endif
                                        </p>

                                        <a href="#" class="btn btn-primary mb-2" id="bookAppointmentBtn">Book
                                            Appointment</a>

                                        <!-- Video Consultation Button (Disabled) -->
                                        <button type="button" class="btn btn-secondary my-2" disabled>Video
                                            Consultation</button>

                                        <!-- Clinic Appointment Popup -->
                                        <div id="clinicAppointmentPopup" class="modal fade" tabindex="-1" role="dialog">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Clinic Appointment</h5>
                                                        <button type="button" class="close"
                                                            data-dismiss="modal">&times;</button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h4>Book Appointment with {{ explode(',', $users->name)[0] }} </h4>
                                                        <p>City {{ $users->city_name }}</p>

                                                        <h5>Available Slots:</h5>



                                                        <div>

                                                            @if ($doctor_events->isEmpty())
                                                                <p class="text-muted">No available slots at the moment.
                                                                    Please check again later.</p>
                                                            @else
                                                                <div class="d-flex flex-column gap-3">
                                                                    @foreach ($doctor_events as $event)
                                                                        @php
                                                                            $startDate = \Carbon\Carbon::parse(
                                                                                $event->start,
                                                                            )->format('l, d M Y');
                                                                            $endDate = $event->end
                                                                                ? \Carbon\Carbon::parse(
                                                                                    $event->end,
                                                                                )->format('l, d M Y')
                                                                                : $startDate;

                                                                            $startTime = \Carbon\Carbon::parse(
                                                                                $event->start,
                                                                            )->format('h:i A');
                                                                            $endTime = $event->end
                                                                                ? \Carbon\Carbon::parse(
                                                                                    $event->end,
                                                                                )->format('h:i A')
                                                                                : $startTime;

                                                                            $allDay = $event->all_day ? 'Yes' : 'No';
                                                                        @endphp

                                                                        <div
                                                                            class="border border-3 rounded-3 p-3 shadow-sm">
                                                                            <div class="row">
                                                                                <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">
                                                                                            {{ $startDate }}
                                                                                            @if ($startDate !== $endDate)
                                                                                                - {{ $endDate }}
                                                                                            @endif
                                                                                        </span>
                                                                                    </p>
                                                                                </div>
                                                                                <div class="col-md-3">
                                                                                    <p class="mb-0 text-secondary"
                                                                                        style="font-size: 0.9rem;">
                                                                                        Time:
                                                                                        <span
                                                                                            class="fw-medium">{{ $startTime }}
                                                                                            - {{ $endTime }}</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">{{ $allDay }}</span>
                                                                                    </p>
                                                                                </div>
                                                                                <div
                                                                                    class="col-md-3 d-flex align-items-center justify-content-end">
                                                                                    <button
                                                                                        class="btn btn-primary btn-sm bookSlot"
                                                                                        type="button"
                                                                                        data-event-id="{{ $event->id }}"
                                                                                        data-event-title="{{ $event->title }}"
                                                                                        data-event-date="{{ \Carbon\Carbon::parse($event->start)->format('l, d M Y') }}{{ $event->end ? ' - ' . \Carbon\Carbon::parse($event->end)->format('l, d M Y') : '' }}"
                                                                                        data-event-time="{{ \Carbon\Carbon::parse($event->start)->format('h:i A') }}{{ $event->end ? ' - ' . \Carbon\Carbon::parse($event->end)->format('h:i A') : '' }}">
                                                                                        Book Slot
                                                                                    </button>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            @endif
                                                        </div>




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





                                        <!-- Modal -->
                                        <div class="modal fade" id="BookApmt" tabindex="-1" role="dialog"
                                            aria-labelledby="BookApmtLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <form id="bookAppointmentForm" method="POST" action="#">
                                                    @csrf
                                                    <input type="hidden" name="event_id" value="">
                                                    <input type="hidden" name="doctor_email"
                                                        value="{{ $users->email ?? '' }}">

                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="BookApmtLabel">Book Appointment
                                                                with {{ $users->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">
                                                            <!-- Event details -->
                                                            <div class="mb-4 p-3 border rounded bg-light">
                                                                <h6 class="mb-2 fw-semibold" id="eventTitle">Event Title
                                                                </h6>
                                                                <p class="mb-1" id="eventDate"><strong>Date:</strong> --
                                                                </p>
                                                                <p class="mb-0" id="eventTime"><strong>Time:</strong> --
                                                                </p>
                                                            </div>

                                                            <!-- Booking form -->
                                                            <div class="form-group text-left">
                                                                <label for="name">Your Name:</label>
                                                                <input type="text" class="form-control" id="name"
                                                                    name="name" placeholder="Enter your name" required>
                                                            </div>

                                                            <div class="form-group text-left">
                                                                <label for="phone">Phone Number:</label>
                                                                <input type="tel" pattern="[0-9]{10}"
                                                                    class="form-control" id="phone" name="phone"
                                                                    placeholder="Enter your phone number" required>
                                                            </div>

                                                            <div class="form-group text-left">
                                                                <label for="email">Email Address:</label>
                                                                <input type="email" class="form-control" id="email"
                                                                    name="email" placeholder="Enter your email"
                                                                    required>
                                                            </div>

                                                            <div class="form-group">
                                                                <div id="recaptcha" 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"
                                                                id="SubmitBookApmt">Submit</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>



                                    </div>



                                    <div class="col-sm-6 col-lg-4 text-left">
                                        <a href="/doctors/{{ $users->slug }}" class="u-color--primary">
                                            <h2 data-qa-id="hospital_name"
                                                class="u-title-font u-c-pointer u-bold text-capitalize">
                                                {{ $users->name }}
                                            </h2>
                                        </a>
                                        <p class="p-0 m-0">Specialization:
                                            @foreach ($user_cat as $key => $cats)
                                                @php
                                                    // Convert the category name to a slug
                                                    $slugCategory = strtolower(str_replace(' ', '-', $cats->category));
                                                @endphp
                                                <span class="badge badge-primary col-sm-6 col-lg-12"
                                                    title="{{ $cats->category }}"
                                                    style="display: inline-block; 
                                                         max-width: 150px; /* Adjust width as needed */
                                                         white-space: nowrap; 
                                                         overflow: hidden; 
                                                         text-overflow: ellipsis; 
                                                         cursor: pointer;">
                                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => $slugCategory]) }}"
                                                        onclick="addStaticParam(event, '{{ $city }}', '{{ $slugCategory }}')"
                                                        style="color: white;">
                                                        {{ $cats->category }}
                                                    </a>
                                                    <a href="{{ route('doctors_cat.filterlist', ['category' => $slugCategory]) }}"
                                                        onclick="addStaticParam(event, '{{ $city }}', '{{ $slugCategory }}')"
                                                        style="color: white; display: none;">
                                                        {{ $cats->category }}
                                                    </a>

                                                </span>
                                                <h3 hidden class="p-0 m-0">{{ $cats->category }}</h3>
                                            @endforeach
                                        </p>
                                        <span><small>{{ $users->degree }}</small></span><br>
                                        <span><small>{{ $users->eduexperience }} years experience
                                                overall</small></span><br>
                                        <span><i class="fa fa-check-circle text-success" aria-hidden="true"></i>
                                            <small>Medical
                                                Registration Verified</small></span><br>
                                        {{-- <span><i class="fa fa-thumbs-up text-success" aria-hidden="true">82%</i>
                                            <small>(220
                                                votes)</small></span> --}}
                                    </div>
                                    <div class="col-sm-12 col-lg-4 text-left">
                                        <address style="display: block; font-style: italic;">
                                            <b>Address</b>:
                                            <!-- {{ $users->area }} ,
                                                                                            {{ $users->colony }}
                                                                                            <br><b>Pincode </b>: {{ $users->pincode }} -->
                                            <br><b>City </b>: {{ $users->city_name }}<br>
                                            <b>State </b>: {{ $users->state }}<br>
                                            <b>Country</b> : {{ $users->country_name }}


                                        </address>

                                        <a class="btn-sm align-middle" href="{{ $users->fb_profile ?? '#' }}"
                                            target="_blank" title="visit fb"
                                            style="position:relative; color: {{ $users->fb_profile ? 'rgb(41, 41, 224)' : 'gray' }}; pointer-events: {{ $users->fb_profile ? 'auto' : 'none' }};">
                                            <i class="fab fa-facebook-official fa-2x" aria-hidden="true"></i>
                                        </a>

                                        <a class="btn-sm align-middle" href="{{ $users->twitter_profile ?? '#' }}"
                                            target="_blank" title="visit twitter"
                                            style="position:relative; color: {{ $users->twitter_profile ? 'rgb(16, 153, 207)' : 'gray' }}; pointer-events: {{ $users->twitter_profile ? 'auto' : 'none' }};">
                                            <i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
                                        </a>

                                        <a class="btn-sm align-middle" href="{{ $users->linkedin_profile ?? '#' }}"
                                            target="_blank" title="visit linkedin"
                                            style="position:relative; color: {{ $users->linkedin_profile ? 'rgb(33, 33, 176)' : 'gray' }}; pointer-events: {{ $users->linkedin_profile ? 'auto' : 'none' }};">
                                            <i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-outline-primary btn-sm mt-2" href="#"
                                            id="download_doctor_cv" file-id="" name="filename" title="Download CV"
                                            style=""
                                            onClick="$.DoctorCVdownload.downloadCVFileById('{{ $users->email }}')">Download
                                            CV</a>


                                             @php
                                                $discountPercentInr = 0;
                                                if ($realPriceInr > 0 && $discountedInr > 0 && $realPriceInr >
                                                $discountedInr) {
                                                $discountPercentInr = round((($realPriceInr - $discountedInr) /
                                                $realPriceInr) * 100);
                                                }

                                                $discountPercentUsd = 0;
                                                if ($realPriceUsd > 0 && $discountedUsd > 0 && $realPriceUsd >
                                                $discountedUsd) {
                                                $discountPercentUsd = round((($realPriceUsd - $discountedUsd) /
                                                $realPriceUsd) * 100);
                                                }
                                                @endphp

                                                @if(strtolower($users->country_name) == 'india')
                                                {{-- INR Button --}}
                                                <button type="button" id="claimNowDoctor" class="claim-button mt-2"
                                                    data-usermy-id="{{ $users->id }}">
                                                    <div class="discount-oldprice">
                                                        @if($discountPercentInr > 0)
                                                        <span class="discount-badge">SAVE
                                                            {{ $discountPercentInr }}%</span>
                                                        @endif
                                                        <span class="old-price">₹
                                                            {{ number_format($realPriceInr, 2) }}</span>
                                                    </div>
                                                    <div class="price-section">
                                                        <span class="price">₹
                                                            {{ number_format($discountedInr, 2) }}</span>
                                                    </div>
                                                    <div class="term-info">
                                                        <div>One time Own This Listing?</div>
                                                        <div>Claim Now</div>
                                                    </div>
                                                </button>
                                                @else
                                                {{-- USD Button --}}
                                                <button type="button" id="claimNowDoctor" class="claim-button mt-2"
                                                    data-usermy-id="{{ $users->id }}">
                                                    <div class="discount-oldprice">
                                                        @if($discountPercentUsd > 0)
                                                        <span class="discount-badge">SAVE
                                                            {{ $discountPercentUsd }}%</span>
                                                        @endif
                                                        <span class="old-price">$
                                                            {{ number_format($realPriceUsd, 2) }}</span>
                                                    </div>
                                                    <div class="price-section">
                                                        <span class="price">$
                                                            {{ number_format($discountedUsd, 2) }}</span>
                                                    </div>
                                                    <div class="term-info">
                                                        <div>One time Own This Listing?</div>
                                                        <div>Claim Now</div>
                                                    </div>
                                                </button>
                                                @endif
                                    </div>

                                </div>
                                <!-- internal row end -->
                            </div>
                        </div>

                    </div>


                    <!-- Existing code for the doctor profile -->
                    @if (isset($advertisements) && !empty($advertisements))
                        @foreach ($advertisements as $ad)
                            @if ($ad['status'] == 1 && $ad['ad_type'] == 'doctor')
                                <!-- Filter for doctor -->
                                <div class="card mt-2 p-3 shadow-lg rounded">
                                    <hr>
                                    {{-- <h5 class="text-primary font-weight-bold">Doctor Advertisement</h5> --}}
                                    <div class="advertisement p-3 mb-3 border rounded bg-light">
                                        {{-- <h6 class="text-dark font-weight-bold">{!! $ad['ad_content'] !!}</h6> --}}
                                        <p class="text-muted">{!! $ad['ad_content'] !!}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @else
                        <p class="text-danger">No advertisements available.</p>
                    @endif


                    <div class="card mt-2">
                        <div class="card-">

                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#info">Info</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#stories">Stories</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#consultqa">Consult Q&A</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#healthfeed">Healthfeed</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" id="commentsLink" value='{{ $users->slug }}'
                                        href="#commentsystem">Comments</a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div id="info" class="container tab-pane active"><br>
                                    <h5 class="font-weight-bold">Bibliography</h5>
                                    <p class="text-muted">{!! $users->bibliography !!}</p>
                                    <!-- row start for information tab -->
                                    <div class="row">
                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <p>
                                                <label class="font-weight-bold">Available Days:</label>
                                                <span>
                                                    {{-- {!! $users->days ? $users->days : '<em>No days available</em>' !!} --}}
                                                </span>
                                                <br>
                                                <label class="font-weight-bold">Time:</label>
                                                <span>
                                                    {{-- {!! ($users->start_time && $users->end_time) ? $users->start_time . ' - ' .
                                            $users->end_time : '<em>No time available</em>' !!} --}}
                                                </span>
                                            </p>
                                        </div>

                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <label class="font-weight-bold">Price for Consultation:</label>
                                            <span>
                                                {{-- {!! ($users->price && $users->currencyfee) ? $users->price . ' ' .
                                        $users->currencyfee : '<em>Price not available</em>' !!} --}}
                                            </span>
                                            <span>
                                                {{-- @if ($users->price && $users->currencyfee)
                                        <i class="fa fa-exclamation-circle text-danger" data-toggle="tooltip"
                                            data-placement="right" title="This Fee is indicative & might vary."></i>
                                        @endif --}}
                                            </span>
                                        </div>


                                        <div>
                                            <hr>
                                        </div>
                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <p class="mt-2"><span class="font-weight-bold"> Specializations</span>
                                            </p>
                                            <ul>
                                                <li class=""><small>{{ $users->specialization }}</small></li>
                                            </ul>

                                        </div>
                                        <!-- education section start -->
                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <p class="mt-2"><span class="font-weight-bold"> Education</span>
                                            </p>
                                            <ul>
                                                <li class=""><small>{{ $users->college }},
                                                        {{ $users->degree }},
                                                        {{ $users->completion }}</small></li>
                                            </ul>
                                        </div>
                                        <!-- Experience section start -->
                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <p><span class="font-weight-bold"> Experience</span>
                                            </p>
                                            <ul>
                                                <li class="">
                                                    @if (strlen($users->pro_experience) > 100)
                                                        {{ strip_tags(substr($users->pro_experience, 0, 100)) }}
                                                        <span class="read-more-show hide_content">More<i
                                                                class="fa fa-angle-down"></i></span>
                                                        <span class="read-more-content">
                                                            {{ strip_tags(substr($users->pro_experience, 100, strlen($users->pro_experience))) }}
                                                            <span class="read-more-hide hide_content">Less <i
                                                                    class="fa fa-angle-up"></i></span> </span>
                                                    @else
                                                        {{ strip_tags($users->pro_experience) }}
                                                    @endif
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- Experience section end -->
                                        <!-- Registration details start -->
                                        <div class="col-sm-4 col-md-6 footer-border">
                                            <p><span class="font-weight-bold"> Registrations</span>
                                            </p>
                                            <ul>
                                                <li class=""><small>{{ $users->regcouncil }},
                                                        {{ $users->regyear }}</small></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- row end for information tab -->

                                </div>

                                <div id="stories" class="container tab-pane fade"><br>
                                    @if (!$stories->isEmpty())
                                        <ul class="list-group">
                                            @foreach ($stories as $storry)
                                                <li
                                                    class="list-group-item story-item d-flex flex-column flex-md-row align-items-center mb-3">
                                                    <!-- Image Section (Left) -->
                                                    <div class="story-image mb-3 mb-md-0"
                                                        style="flex: 0 0 150px; max-width: 150px; margin-right: 15px;">
                                                        @if (!empty($storry->imagePath))
                                                            <a href="https://www.myhospitalnow.com/stories/storage/{{ $storry->imagePath }}"
                                                                class="image-popup">
                                                                <img src="https://www.myhospitalnow.com/stories/storage/{{ $storry->imagePath }}"
                                                                    alt="Story Image" class="img-fluid"
                                                                    style="width: 100%; height: auto;">
                                                            </a>
                                                        @endif
                                                    </div>

                                                    <!-- Text Section (Right) -->
                                                    <div class="story-text text-break">
                                                        <!-- Display story text -->
                                                        <p class="story-title">{!! $storry->storyText !!}
                                                        </p>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <div class="text-center mt-4">
                                                        <a href="{{ route('stories.index', ['slug' => $users->slug]) }}"
                                                            class="btn btn-success">Go to All Stories</a>
                                                    </div>
                                    @else
                                        <p>No Story yet.</p>
                                    @endif
                                </div>







                                <div id="consultqa" class="container tab-pane fade"><br>
                                    {{-- <h2 class="text-center font-weight-bold text-primary">🌐 Recent Discussions</h2> --}}

                                    <div class="row g-4">

                                        <!-- My Discussions -->
                                        <div class="col-md-12">
                                            <div class="card shadow-lg border-0 rounded-4">
                                                <div class="card-header text-white"
                                                    style="background-color: #009ca4; border-top-left-radius: 12px; border-top-right-radius: 12px;">
                                                    <h4 class="text-center mb-0">My Discussions</h4>
                                                </div>
                                                <div class="card-body">
                                                    @if (!$flarumDiscussions->isEmpty())
                                                        <ul class="list-group list-group-flush">
                                                            @foreach ($flarumDiscussions as $discussion)
                                                                @if ($discussion->comment_count > 0)
                                                                    @php
                                                                        $slug = Str::slug($discussion->title);
                                                                    @endphp
                                                                    <li
                                                                        class="list-group-item rounded-3 mb-2 border-light shadow-sm">
                                                                        <a href="https://www.myhospitalnow.com/forum/d/{{ $discussion->id }}-{{ $slug }}"
                                                                            target="_blank" class="text-primary fw-bold">
                                                                            {{ $discussion->title }}
                                                                        </a>
                                                                        <br>
                                                                        <small class="text-muted">📅 Created At:
                                                                            {{ $discussion->created_at }}</small>
                                                                    </li>
                                                                @endif
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <div class="alert alert-warning text-center rounded-3">
                                                            <h5>No discussions found.</h5>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Latest Global Discussions -->
                                        <div class="col-md-6">
                                            <div class="card shadow-lg border-0 rounded-4">
                                                <div class="card-header text-white"
                                                    style="background-color: #28A745; border-top-left-radius: 12px; border-top-right-radius: 12px;">
                                                    <h4 class="text-center mb-0">Latest Discussions</h4>
                                                </div>
                                                <div class="card-body">
                                                    @if (!$flarumLatestDiscussions->isEmpty())
                                                        <ul class="list-group list-group-flush">
                                                            @foreach ($flarumLatestDiscussions as $discussion)
                                                                @php
                                                                    $slug = Str::slug($discussion->title);
                                                                @endphp
                                                                <li
                                                                    class="list-group-item rounded-3 mb-2 border-light shadow-sm">
                                                                    <a href="https://www.myhospitalnow.com/forum/d/{{ $discussion->id }}-{{ $slug }}"
                                                                        target="_blank" class="text-success fw-bold">
                                                                        {{ $discussion->title }}
                                                                    </a>
                                                                    <br>
                                                                    <small class="text-muted">📅 Created At:
                                                                        {{ $discussion->created_at }}</small>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <div class="alert alert-warning text-center rounded-3">
                                                            <h5>No discussions found.</h5>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Discussions with Comments -->
                                        <div class="col-md-6">
                                            <div class="card shadow-lg border-0 rounded-4">
                                                <div class="card-header text-white"
                                                    style="background-color: #FFC107; border-top-left-radius: 12px; border-top-right-radius: 12px;">
                                                    <h4 class="text-center mb-0">Discussions with Comments</h4>
                                                </div>
                                                <div class="card-body">
                                                    @if (!$flarumCommentedDiscussions->isEmpty())
                                                        <ul class="list-group list-group-flush">
                                                            @foreach ($flarumCommentedDiscussions as $discussion)
                                                                @php
                                                                    $slug = Str::slug($discussion->title);
                                                                @endphp
                                                                <li
                                                                    class="list-group-item rounded-3 mb-2 border-light shadow-sm">
                                                                    <a href="https://www.myhospitalnow.com/forum/d/{{ $discussion->id }}-{{ $slug }}"
                                                                        target="_blank" class="text-warning fw-bold">
                                                                        {{ $discussion->title }}
                                                                    </a>
                                                                    <br>
                                                                    <small class="text-muted">💬 Comments:
                                                                        {{ $discussion->comment_count }}</small>
                                                                    <br>
                                                                    <small class="text-muted">📅 Created At:
                                                                        {{ $discussion->created_at }}</small>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <div class="alert alert-warning text-center rounded-3">
                                                            <h5>No discussions with comments found.</h5>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>



                                <div id="healthfeed" class="container tab-pane fade">
                                    <h2>Posts</h2>
                                    @if ($wp_posts->isEmpty())
                                        <p>No Posts yet.</p>
                                    @else
                                        <ul class="list-group">
                                            @foreach ($wp_posts->unique('ID') as $post)
                                                <!-- Ensure unique posts by ID -->
                                                <li class="list-group-item">
                                                    <a href="https://www.myhospitalnow.com/cms-optimization/{{ Str::slug($post->post_title) }}"
                                                        target="_blank">
                                                        <strong>{{ $post->post_title }}</strong>

                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>



                                <div id="commentsystem" class="container tab-pane fade"><br>
                                    {{-- <h2>this is test</h2> --}}
                                    <!-- Button to fetch data -->
                                    <p class="text-center">
                                    <div class="container">
                                        <div class="comment-form">
                                            <h2>Leave a Comment</h2>
                                            {{-- Success Message --}}


                                            <form action="{{ route('comments.store') }}" method="POST"
                                                id="create-comment-for-user">
                                                @csrf
                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="name">Name:</label>
                                                        <input type="text" name="name" class="form-control"
                                                            required>
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label for="email">Email:</label>
                                                        <input type="email" name="email" class="form-control"
                                                            required>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="comment">Comment:</label>
                                                    <textarea name="comment" class="form-control" rows="5" required></textarea>
                                                </div>
                                                <div class="form-group" style="display: none;">
                                                    <label for="comment_author_url">Comment Pages url:</label>
                                                    <input type="hidden" name="comment_author_url"
                                                        value="{{ url()->current() }}" class="form-control" required>
                                                </div>
                                                <div class="form-group ">
                                                    <div id="recaptchaCMT" class="g-recaptcha"
                                                        data-sitekey="{{ '6LeSHVckAAAAAEy29JRI6f733mMcmlqp7woB9KGc' }}">
                                                    </div>
                                                    @if ($errors->has('g-recaptcha-response-cmt'))
                                                        <span
                                                            class="text-danger">{{ $errors->first('g-recaptcha-response-cmt') }}</span>
                                                    @endif
                                                </div><br>

                                                <button type="submit" class="btn btn-primary"
                                                    id="create-comment-submit">Submit</button>

                                            </form>
                                        </div>
                                        <hr>

                                        <div class="comments-section">
                                            <h2>Comments</h2>
                                            @if ($comments->isEmpty())
                                                <p>No comments yet.</p>
                                            @else
                                                <ul class="list-group">
                                                    @foreach ($comments as $comment)
                                                        <li class="list-group-item">
                                                            <strong>{{ $comment->comment_author }}</strong>
                                                            ({{ $comment->comment_author_email }})
                                                            <br>
                                                            {{ $comment->comment_content }}<br>
                                                            <small>Global Time:{{ $comment->comment_date }}</small><br>
                                                            <small>Local Time: {{ $comment->local_date }}</small>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                                  <div class="text-center mt-4">
                                                    {{-- <a href="{{  $users->slug/stories }}"
                                                            class="btn btn-success"> --}}
                                                    <a href="{{ route('comments.index', ['slug' => $users->slug]) }}"
                                                        class="btn btn-success">Go to All Comments</a>
                                                </div>
                                            @endif

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


                                </div>

                                {{-- <div class="col-sm-4 col-md-6 footer-border">
                                    <p class="mt-2"><span class="font-weight-bold"> Specializations</span>
                                    </p>
                                    <ul>
                                        <li class=""><small>{{ $users->specialization }}</small></li>
                        </ul>

                    </div> --}}
                                <!-- education section start -->
                                {{-- <div class="col-sm-4 col-md-6 footer-border">
                                    <p class="mt-2"><span class="font-weight-bold"> Education</span>
                                    </p>
                                    <ul>
                                        <li class=""><small>{{ $users->college }},
                    {{ $users->degree }},
                    {{ $users->completion }}</small></li>
                    </ul>
                </div> --}}
                                <!-- Experience section start -->
                                {{-- <div class="col-sm-4 col-md-6 footer-border">
                                    <p><span class="font-weight-bold"> Experience</span>
                                    </p>
                                    <ul>
                                        <li class="">
                                            @if (strlen($users->pro_experience) > 100)
                                                {{ strip_tags(substr($users->pro_experience, 0, 100)) }}
                <span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
                <span class="read-more-content">
                    {{ strip_tags(substr($users->pro_experience, 100, strlen($users->pro_experience))) }}
                    <span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>
                @else
                {{ strip_tags($users->pro_experience) }}
                @endif
                </li>
                </ul>
            </div> --}}
                                <!-- Experience section end -->
                                <!-- Registration details start -->
                                {{-- <div class="col-sm-4 col-md-6 footer-border">
                                    <p><span class="font-weight-bold"> Registrations</span>
                                    </p>
                                    <ul>
                                        <li class=""><small>{{ $users->regcouncil }},
            {{ $users->regyear }}</small></li>
            </ul>
        </div> --}}
                            </div>
                            <!-- row end for information tab -->

                        </div>






                        <!-- 2nd card end -->
                        <!-- 3rd card start -->
                        <div class="mt-5">
                            <p><span class="font-weight-bold">Top Doctors In {{ $users->city_name }}</span></p>
                            <ul>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'dental-care']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'dental-care')">
                                        Doctors For Dental Care Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'ear-nose-throat-or-ent']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'ear-nose-throat-or-ent')">
                                        Doctors For Ear, Nose & Throat Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'gynaecology']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'gynaecology')">
                                        Doctors For Gynaecology Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'physiotherapist']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'physiotherapist')">
                                        Doctors For Physiotherapist Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'dietitian']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'dietitian')">
                                        Doctors For Diabetes Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'herbal-treatment']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'herbal-treatment')">
                                        Doctors For Herbal Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'physiotherapist']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'physiotherapist')">
                                        Doctors For Physical therapist Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'urology']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'urology')">
                                        Doctors For Urology Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'dermatology']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'dermatology')">
                                        Doctors For Dermatology Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'pediatrician']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'pediatrician')">
                                        Doctors For Pediatrician Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('doctors.filter', ['city_new' => $city, 'category' => 'oncology-or-cancer']) }}"
                                        onclick="addStaticParam(event, '{{ $users->city_name }}', 'oncology-or-cancer')">
                                        Doctors For Oncology or Cancer Treatment in {{ $users->city_name }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    @if (isset($advertisements) && !empty($advertisements))
                        @foreach ($advertisements as $ad)
                            @if ($ad['status'] == 1 && $ad['ad_type'] == 'doctor_footer')
                                <!-- Filter for doctor_footer -->
                                <div class="card mt-2 p-3 shadow-lg rounded">
                                    <hr>
                                    {{-- <h5 class="text-primary font-weight-bold">Doctor Footer Advertisement</h5> --}}
                                    <div class="advertisement p-3 mb-3 border rounded bg-light">
                                        {{-- <h6 class="text-dark font-weight-bold">{!! $ad['ad_content'] !!}</h6> --}}
                                        <p class="text-muted">{!! $ad['ad_content'] !!}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @else
                        <p class="text-danger">No advertisements available.</p>
                    @endif




                </div>

                <!-- 3rd card end -->

                <div class="col-sm-3 col-md-3">
                    <div class="card">
                        <div class="card-header text-center">
                            Top Doctors
                        </div>
                    </div>
                    <div class="sticky-top">
                        @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%;">
                                    </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%;">
                                    </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>
        </section>
    @endif

    <!-- CSS Start Here -->
    <style>
        #mhn_con_doctors {
            padding: 30px;
            margin-top: 20px;
            background: #fff;
        }

        .mhn-img-circle {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border: 1px solid #14bef0;
        }

        .mhn-img-circle:hover {
            border: 2px solid #4190ad;
        }

        #mhn_con_doctors .btn-col-sky {
            color: #14bef0;
        }

        .mhn-margin-top-10 {
            margin-top: 10px;
        }

        .mhn-t-uppercase {
            text-transform: uppercase;
        }

        .mhn-font-14 {
            font-size: 14px;
        }

        .mhn-font-12 {
            font-size: 12px;
        }

        .mhn-font-bold {
            font-weight: 700;
        }

        #mhn_con_doctors .mhn-link a {
            text-decoration: none;
        }

        .mhn-margin-less {
            margin-top: 0;
        }

        #consultButton {
            margin-bottom: 30px;
        }

        #header {
            text-transform: uppercase;
        }
    </style>
    <!-- CSS Ends Here -->
    <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">
                        @else
                            <img src="/hospitals/storage/hospital_profile/{{ $hospital['avatar'] }}"
                                alt="Acne ,Pimples or Skin Issues" class="mhn-img-circle">
                        @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
            <!-- column 1 end -->
            <!-- column 2 start -->
            {{-- <div class="col-sm-6 col-md-2">
            <img src="{{asset('images/home/cold-cough.svg')}}" alt="Cold, cough or fever" class="mhn-img-circle">
        <p class="mhn-font-14 mhn-font-bold">Cold, cough or <br>fever</p>
        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12">Consult Now</span>
    </div>
    <!-- column 2 end -->
    <!-- column 3 start -->
    <div class="col-sm-6 col-md-2">
        <img src="{{asset('images/homepage/depression.svg')}}" alt="Depression or anxiety" class="mhn-img-circle">
        <p class="mhn-font-14 mhn-font-bold">Depression or <br>anxiety</p>
        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12">Consult Now</span>
    </div>
    <!-- column 3 end -->
    <!-- column 4 start -->
    <div class="col-sm-6 col-md-2">
        <img src="{{asset('images/home/hair-transplant.svg')}}" alt="Hair Transplant" class="mhn-img-circle">
        <p class="mhn-font-14 mhn-font-bold">Hair<br> Transplant</p>
        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12">Consult Now</span>
    </div>
    <!-- column 4 end -->
    <!-- column 5 start -->
    <div class="col-sm-6 col-md-2">
        <img src="{{asset('images/home/breast.svg')}}" alt="Hair Transplant" class="mhn-img-circle">
        <p class="mhn-font-14 mhn-font-bold">Breast Augmentation Surgery</p>
        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12">Consult Now</span>
    </div>
    <!-- column 5 end -->
    <!-- column 6 start -->
    <div class="col-sm-6 col-md-2">
        <img src="{{asset('images/home/rhinoplasty.svg')}}" alt="Hair Transplant" class="mhn-img-circle">
        <p class="mhn-font-14 mhn-font-bold">Rhinoplasty <br>Surgery</p>
        <span class="btn-col-sky mhn-margin-top-10 mhn-t-uppercase mhn-font-12">Consult Now</span>
    </div> --}}
            <!-- column 6 end -->
        </div>
        <!-- row ends -->
    </section>

    <!-- 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 class="col-sm-6 col-md-4 float-left">
                <img src="{{asset('images/homepage/myhospitalnow-app-download.svg')}}" alt="Myhospitalnow App Download"
        id="preview-right"> --}}
        </div>
        </div>
        </div>
    </section>
    <!-- Download App Section End -->
    <!-- Modal Popup for Call Now -->
    <!-- Button trigger modal -->
    <!-- Modal -->
    <div class="modal fade" id="callNow" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">{{ $users->city_name }} Clinic</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">
                    <p><small>Phone number</small></p>
                    <span class="h4 text-info">1800 555 000</span>
                </div>
                <div class="modal-footer">
                    By calling this number, you agree to the Terms & Conditions .If you could not connectwith the center,
                    please write to contact@myhospitalnow.com
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- <script>
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script> -->

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        document.getElementById('claimNowDoctor').addEventListener('click', function() {
            var userId = this.getAttribute('data-usermy-id');
            var email = "{{ $users->email }}";
            var name = "{{ $users->name }}";
            var country = "{{ $users->country_name }}";
            var discountedInr = "{{ $discountedInr }}";
            var discountedUsd = "{{ $discountedUsd }}";

            var apiUrl = '/doctors/api/v1/doctor-api/j/check-doctors-claim/' + userId;

            fetch(apiUrl, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('h_u_a_b_t')
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'claimed') {
                        Swal.fire({
                            title: 'This hospital is already claimed by!',
                            text: data.message,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Do you reclaim it?',
                            cancelButtonText: 'Close'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // If user confirms, redirect to the payment page
                                submitForm(email, name, country, discountedInr,discountedUsd);
                            }
                        });
                    } else if (data.redirect) {
                        // If there's a redirect suggested, submit the form with the email securely
                        submitForm(email, name, country, discountedInr,discountedUsd);
                    } else {
                        // Handle other cases if needed
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: `Something went wrong with API: ${apiUrl}, please try again.`,
                        icon: 'error',
                        confirmButtonText: 'Close'
                    });
                });
        });


        function submitForm(email, name, country, discountedInr,discountedUsd) {
            var form = document.createElement('form');
            form.style.display = 'none'; // Hide the form visually
            form.method = 'POST';
            form.action = "{{ route('handleClaim') }}"; // The server route that handles the post

            // Create a hidden input field for the email to be submitted securely
            var emailInput = document.createElement('input');
            emailInput.type = 'hidden';
            emailInput.name = 'email';
            emailInput.value = email;
            form.appendChild(emailInput);

            // Name input
            var nameInput = document.createElement('input');
            nameInput.type = 'hidden';
            nameInput.name = 'name';
            nameInput.value = name;
            form.appendChild(nameInput);

            var countryInput = document.createElement('input');
            countryInput.type = 'hidden';
            countryInput.name = 'country';
            countryInput.value = country;
            form.appendChild(countryInput);

              // Use the same exact name as your Laravel input key!
    var realPriceInput = document.createElement('input');
    realPriceInput.type = 'hidden';
    realPriceInput.name = 'discountedInr'; // <--- fixed here
    realPriceInput.value = discountedInr;
    form.appendChild(realPriceInput);

    // Use the same exact name as your Laravel input key!
    var realPriceInputusd = document.createElement('input');
    realPriceInputusd.type = 'hidden';
    realPriceInputusd.name = 'discountedUsd'; // <--- fixed here
    realPriceInputusd.value = discountedUsd;
    form.appendChild(realPriceInputusd);

            // Include CSRF token for Laravel's CSRF protection
            var csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>

    <script type="text/javascript">
        $.sidebar.initSideBar();
        $.sp_globals.toggleSPLoadingSpinner(false);
    </script>

    <script>
        // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
        $('.read-more-content').addClass('hide_content')
        $('.read-more-show, .read-more-hide').removeClass('hide_content')

        // Set up the toggle effect:
        $('.read-more-show').on('click', function(e) {
            $(this).next('.read-more-content').removeClass('hide_content');
            $(this).addClass('hide_content');
            e.preventDefault();
        });

        // Changes contributed by @diego-rzg
        $('.read-more-hide').on('click', function(e) {
            var p = $(this).parent('.read-more-content');
            p.addClass('hide_content');
            p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"
            e.preventDefault();
        });
    </script>
    <script>
        // get countryid and pass it to get all hospital data 
        function getCountryName() {
            var pubcountryid = $("#CountryId").val();
            var pubcountryname = $("#CountryName").val();
            // console.log(pubcountryname);
            // console.log('ye aa raha countryID');
        }
        $('#pubCountry').on('click', function(e) {
            var country_id = $("#CountryId").val();
            var country_name = $("#CountryName").val();
            $.ajax({
                type: "GET",
                // url: 'get-all-doctors-by-countryname/' + country_name,
                data: null,
                success: function(response) {
                    // console.log('on click success me aa gaya !');
                    // console.log(response);
                    let data = response.data;

                    if (response.status === 'OK') {
                        // console.log('get value in data:');
                        // console.log(data);
                        // getDataByCountryId(data);
                        window.location.href = "/doctors/" + country_name.toLocaleLowerCase().split(' ')
                            .join('-');;
                    }
                },
                error: function(errorResponse) {}
            });
        });

        // get State ID via hidden input val
        function getStateID() {
            var statename = $("#StateName").val();
            // console.log('inside getStateId function');
            // console.log(statename);
        }
        // Get Hospital data by StateID
        $('#pubState').on('click', function(e) {
            var country_name = $("#CountryName").val();
            // console.log(country_name);
            // var state_id = $("#StateId").val();
            var state = $("#StateName").val();
            // console.log(state);
            $.ajax({
                type: "GET",
                // url: 'get-all-doctors-by-statename/' + country_name + '/' + state,
                data: null,
                success: function(response) {
                    // console.log('on click pubstate success me aa gaya !');
                    // console.log(response);
                    let data = response.data;

                    if (response.status === 'OK') {
                        // console.log('get value in data:');
                        // console.log(data);
                        // getDataByCountryId(data);
                        window.location.href = "/doctors/" + country_name.toLocaleLowerCase().split(' ')
                            .join('-') + '/' + state.toLocaleLowerCase().split(' ').join('-');
                    }
                },
                error: function(errorResponse) {}
            });
        });

        //get hospital data by city name
        function getCityName() {
            var pubcityname = $("#CityName").val();
            // console.log(pubcityname);
        }
        $('#pubCity').on('click', function(e) {

            var country_name = $("#CountryName").val();
            var state = $("#StateName").val();
            var city_name = $("#CityName").val();
            // console.log(country_name);
            // console.log(state);
            // console.log(city_name);
            $.ajax({
                type: "GET",
                // url: '/v1/doctor-api/j/get-all-doctors-by-cityname/' + country_name + '/' + state + '/' + city_name,
                data: null,
                success: function(response) {
                    // console.log('on click get data by City ke success me aa gaya !');
                    // console.log(response);
                    let data = response.data;

                    if (response.status === 'OK') {
                        // console.log('get value in data:');
                        // console.log(data);
                        // getDataByCountryId(data);
                        window.location.href = "/doctors/" + country_name.toLocaleLowerCase().split(' ')
                            .join('-') + '/' + state.toLocaleLowerCase().split(' ').join('-') + '/' +
                            city_name.toLocaleLowerCase().split(' ').join('-');
                    }
                },
                error: function(errorResponse) {}
            });
        }); <
        script src = "{{ asset('js/blade-components/html5lightbox.js') }}" >
    </script>
    <!-- gallery js start -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    </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();
                var recaptchaResponse = grecaptcha.getResponse(); // Get reCAPTCHA response

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

                // Validate reCAPTCHA
                if (recaptchaResponse.length === 0) {
                    alert("Please complete the reCAPTCHA.");
                    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,
                    'g-recaptcha-response': recaptchaResponse // Include reCAPTCHA token
                };

                // Send an AJAX POST request to the specified URL
                $.ajax({
                    url: 'doctor-submit-book-appointment/' + drEmail,
                    type: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        // Handle the success response here
                        // 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');

                        // Reset the reCAPTCHA
                        grecaptcha.reset();
                    },
                    error: function(xhr, status, error) {
                        // Handle any errors that occur during the AJAX request
                        console.error('AJAX request error:', error);

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

                        // Reset the reCAPTCHA in case of an error
                        grecaptcha.reset();
                    }
                });
            });
        });
    </script> --}}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        $.validator.addMethod("valueNotEquals", function(value, element, arg) {
            return arg !== value;
        }, "Value must not equal arg.");

        $.validator.addMethod("nameRegex", function(value, element, regexpr) {
            return regexpr.test(value);
        }, "Please enter your name having only alphabets and . , () -");

        $("#create-comment-for-user").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3,
                    maxlength: 50
                },
                email: {
                    required: true,
                    email: true
                },
                comment: {
                    required: true,
                    minlength: 5
                },
                'g-recaptcha-response-cmt': {
                    required: function() {
                        return grecaptcha.getResponse() === "";
                    }
                }
            },
            messages: {
                name: "Please enter your name (min 3 characters)",
                email: "Please enter a valid email address",
                comment: "Please enter a comment (min 5 characters)",
                'g-recaptcha-response-cmt': "Please verify that you are not a robot"
            },
            highlight: function(element) {
                $(element).closest('.form-control').addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            onfocusout: function(element) {
                this.element(element);
            }
        });

        $('#create-comment-submit').on('click', function(e) {
            if ($("#create-comment-for-user").valid() && grecaptcha.getResponse() !== "") {
                // Submit the form after validation
                $.sp_globals.toggleSPLoadingSpinner(true);
                $('#create-comment-for-user').submit();
            } else if (grecaptcha.getResponse() === "") {
                // Check if the message is already present
                if ($('#recaptchaCMT').next('.text-danger').length === 0) {
                    $('#recaptchaCMT').after(
                        '<div class="text-danger small">Please verify that you are not a robot.</div>'
                    );
                    console.log('Please verify reCAPTCHA');
                }
            }
        });
    </script>
    <script src="{{ asset('js/blade-components/downloadcv.js') }}"></script>
    <script src="{{ asset('js/blade-components/doctor_BookAptmt.js') }}"></script>
    {{-- <script>
        $(document).ready(function() {
            $('#bookAppointmentBtn').click(function() {
                $('#clinicAppointmentPopup').modal('show');
            });
            $('.bookSlot').click(function() {
                $('#clinicAppointmentPopup').modal('hide');
                $('#BookApmt').modal('show');
            });
        });
    </script> --}}

    <script>
        // Initialize Magnific Popup on images
        $(document).ready(function() {
            $('.image-popup').magnificPopup({
                type: 'image', // Specifies that this is for image view
                gallery: {
                    enabled: true // Enables image gallery navigation if multiple images
                }
            });
        });
    </script>
    {{-- 
<script>
    document.getElementById('claimNowDoctor').addEventListener('click', function() {
        var userId = this.getAttribute('data-usermy-id');
        var email = "{{ $users->email }}";
        var name = "{{ $users->name }}";
        var country = "{{ $users->country_name }}";
    
        fetch(`${localStorage.getItem('mhn_hosp_app_server_root')}/api/v1/doctor-api/j/check-doctor-claim/${userId}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + localStorage.getItem('h_u_a_b_t')
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
    
            .then(data => {
                if (data.status === 'claimed') {
                    Swal.fire({
                        title: 'This hospital is already claimed by!',
                        text: data.message,
                        type: 'warning', // Use type instead of icon
                        showCancelButton: true,
                        confirmButtonText: 'Do you reclaim it?',
                        cancelButtonText: 'Close'
                    }).then((result) => {
                        if (!result.isConfirmed) {
                            // If user confirms, redirect to the payment page
                            window.location.href = "{{ route('payment.page') }}";
                        }
                    });
                } else if (data.redirect) {
                    // If there's a redirect suggested, submit the form with the email securely
                    submitForm(email, name, country);
                } else {
                    // Handle other cases if needed
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'Something went wrong, please try again.',
                    icon: 'error',
                    confirmButtonText: 'Close'
                });
            });
    });
    
    function submitForm(email, name, country) {
        var form = document.createElement('form');
        form.style.display = 'none'; // Hide the form visually
        form.method = 'POST';
        form.action = "{{ route('handleClaim') }}"; // The server route that handles the post
    
        // Create a hidden input field for the email to be submitted securely
        var emailInput = document.createElement('input');
        emailInput.type = 'hidden';
        emailInput.name = 'email';
        emailInput.value = email;
        form.appendChild(emailInput);
    
        // Name input
        var nameInput = document.createElement('input');
        nameInput.type = 'hidden';
        nameInput.name = 'name';
        nameInput.value = name;
        form.appendChild(nameInput);
    
        var countryInput = document.createElement('input');
        countryInput.type = 'hidden';
        countryInput.name = 'country';
        countryInput.value = country;
        form.appendChild(countryInput);
    
        // Include CSRF token for Laravel's CSRF protection
        var csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = '{{ csrf_token() }}';
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
    </script> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

@endsection