@extends('layouts.app')

@section('content')
    <!-- gallery css start -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <style>
        /* Start Gallery CSS */
        .thumb {
            margin-bottom: 15px;
        }

        .thumb:last-child {
            margin-bottom: 0;
        }

        /* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */
        .thumb figure img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }

        .thumb figure:hover img {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
        }

        .thumb figure img {
            width: 350px;
            height: 250px;
        }
    </style>
    <!-- gallery css end -->
    <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>
    @include('includes.navbar')
    @if ($users->state_id == null)
    <!-- if profile is not updated -->
    <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 provide the best service
                            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 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">
                        <!-- pass hidden id for country state and city to show data by particular breadcrumb -->
                        <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 }}">
                        <input type="hidden" id="CateName" value="{{ $users->specialization }}">
                        <!-- pass hidden id for country state and city to show data by particular breadcrumb -->
                        <li class="breadcrumb-item"><a href="{{ url('https://www.myhospitalnow.com/') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Hospitals</a></li>
                        <li class="breadcrumb-item"><a href="/hospitals/{{ $country }}" onClick="getCountryID()"
                                id="pubCountry">{{ $users->country_name }}</a></li>
                        <li class="breadcrumb-item"><a href="/hospitals/{{ $country }}/{{ $state }}"
                                onClick="getStateID()" id="pubState">{{ $users->state }}</a></li>
                        <li class="breadcrumb-item"><a
                                href="/hospitals/{{ $country }}/{{ $state }}/{{ $city }}"
                                onClick="getCityName()" id="pubCity">{{ $users->city_name }}</a></li>
                        <!-- <li class="breadcrumb-item"><a href="/hospitals/{{ $city }}/{{ $cate }}" onClick="getCateName()" id="pubCate">{{ $users->specialization }}</a></li> -->
                        <!-- <li class="breadcrumb-item">
                                                <a href="{{ route('hospitals.filter', ['city_new' => $city, 'category' => $cate]) }}">
                                                    {{ $users->specialization }}
                                                </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-9" id="profile-table" name="profile">
                <div class="card">
                    <div class="card-body" id="profile-table" name="profile">
                        <div class="container thumbnail checkout-thumbnail">
                            <div class="row">
                                <div class="col-sm-12 col-md-12">
                                    <div class="row">
                                        <!-- logo column start -->
                                        <div class="col-sm-3 col-md-3">
                                            <p>
                                                @if ($users->avatar == 'hospital.png')
                                                    <img class="img-thumbnail" src='{{ asset('images/hospital.png') }}'
                                                        alt="{{ $users->name }}"
                                                        style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                @else
                                                    <img class="img-thumbnail"
                                                        src="/hospitals/storage/hospital_profile/{{ $users->avatar }}"
                                                        alt="{{ $users->name }}"
                                                        style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                @endif
                                            </p>
                                            <a class="btn btn-outline-primary btn-sm" href="{{ $users->website }}"
                                                target="_blank" title="visit website" style="position:relative; left:35px;">
                                                Visit Web</a> <br>
                                            <div class="row mt-3 ml-0">

                                                <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="fa fa-facebook" 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="fa fa-twitter" 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="fa fa-linkedin" aria-hidden="true"></i>
                                                </a>

                                                <a class="btn-sm mr-1 align-middle"
                                                    href="{{ $users->youtube_profile ?? '#' }}" target="_blank"
                                                    title="visit Youtube"
                                                    style="position:relative; color: {{ $users->youtube_profile ? 'red' : 'gray' }}; pointer-events: {{ $users->youtube_profile ? 'auto' : 'none' }};">
                                                    <i class="fa fa-youtube" aria-hidden="true"></i>
                                                </a>

                                                <a class="btn-sm mr-1 align-middle"
                                                    href="{{ $users->instagram_profile ?? '#' }}" target="_blank"
                                                    title="visit Instagram"
                                                    style="position:relative; color: {{ $users->instagram_profile ? 'rgb(188, 43, 43)' : 'gray' }}; pointer-events: {{ $users->instagram_profile ? 'auto' : 'none' }};">
                                                    <i class="fa fa-instagram" aria-hidden="true"></i>
                                                </a>

                                            </div>

                                        </div>
                                        <!-- logo column end -->
                                        <!-- personal details column start -->
                                        <div class="col-sm-6 col-md-5 text-left">
                                            <a href="/hospitals/{{ $users->slug }}"
                                                class="u-title-font u-c-pointer u-bold">
                                                <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)
      <span class="badge badge-primary">{{ $cats->category }}
                                   </span>
                                   <h3 hidden class=" p-0 m-0">{{ $cats->category }}</h3>
       @endforeach
                                 </p> -->

                                            <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">
                                                        <a href="{{ route('hospitals.filter', ['city_new' => $city, 'category' => $slugCategory]) }}"
                                                            onclick="addStaticParam(event, '{{ $city }}', '{{ $slugCategory }}')"
                                                            style="color: white;">
                                                            {{ $cats->category }}
                                                        </a>
                                                    </span>
                                                    <h3 hidden class="p-0 m-0">{{ $cats->category }}</h3>
                                                @endforeach
                                            </p>

                                            <address style="display: block; font-style: italic;">
                                                <b>Visit us at:</b> <br>
                                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                {{ $users->address1 }},
                                                {{ $users->address2 }}, <br>{{ $users->city_name }},
                                                {{ $users->state }}
                                                , {{ $users->country_name }}
                                            </address>
                                        </div>
                                        <!-- personal details column end -->
                                        <!-- extra medical details column start -->
                                        <div class="col-sm-3 col-md-4 text-left">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <p><b>Accreditation</b> :
                                                        @foreach ($user_acc as $key => $accs)
                                                            <span
                                                                class="badge badge-primary">{{ $accs->accridation }}</span>
                                                        @endforeach
                                                        <br><br> <span class="font-weight-bold">Doctors : </span>
                                                        @if ($users->no_of_doctors > 5)
                                                            <span class="text-success"> {{ $users->no_of_doctors }} <i
                                                                    class="fa fa-user-md"> </i></span>
                                                        @else
                                                            <span class="text-danger"> {{ $users->no_of_doctors }} <i
                                                                    class="fa fa-user-md"> </i></span>
                                                        @endif
                                                        <br>
                                                        <span class="font-weight-bold">Beds</span> :
                                                        {{ $users->no_of_beds }} <i class="fas fa-procedures"></i>
                                                        <br>
                                                        <b>Phone</b>: <a class="badge badge-pill badge-info"
                                                            href="tel:{{ $users->phone }}" title="Click to Call"> <i
                                                                class="fa fa-volume-control-phone" aria-hidden="true"></i>
                                                            {{ $users->phone }}</a>
                                                        <br><b>Fax</b> : <i class="fa fa-fax" aria-hidden="true"></i>
                                                        {{ $users->fax_number }}
                                                        <br><b>Languages</b>:
                                                        @foreach ($user_lang as $key => $lang)
                                                            <span class="badge badge-primary">{{ $lang->language }}</span>
                                                        @endforeach
                                                    </p>
                                                    {{-- <a href="#" class="btn btn-outline-primary btn-sm" id="brochure" class="original-filename sp-link" file-id="" style="position:relative; left:45px;">Download Browchure</a> --}}

                                                    <a class="btn btn-outline-primary btn-sm" href="#"
                                                        id="download_brochure_details" file-id="" name="filename"
                                                        title="Download Brochure" style=""
                                                        onClick="$.hospitalProfileFilter.downloadBrowchureFileById('{{ $users->email }}')">Download
                                                        Brochure</a>

                                                    <button type="button" id="claimNowButton"
                                                        class="btn btn-primary btn-sm mt-2"
                                                        style="position:relative; left:-10px;"
                                                        data-usermy-id="{{ $users->id }}">Own This Listing? Claim
                                                        Now</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- second card start extra information -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card mt-3">
                                <div class="card-body ml-1">
                                    <!-- 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="#videos">Videos</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#images">Images</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#testimonials">Testimonials</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>
                                            <!-- row start for information tab -->
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 footer-border">
                                                    <h5 class="font-weight-bold"><i
                                                            class="fa fa-address-card-o text-success"
                                                            aria-hidden="true"></i> About Us : </h5>
                                                    <span hidden>{!! $users->specialities !!}</span>

                                                    <span>{!! $users->about_us !!}</span>
                                                </div>
                                                <div class="col-sm-12 col-md-12 footer-border">
                                                    <h5 class="font-weight-bold"><i
                                                            class="fa fa-graduation-cap text-success"
                                                            aria-hidden="true"></i> Speciality</h5>
                                                    {!! $users->specialities !!}
                                                </div>
                                                <div>
                                                    <hr>
                                                </div>
                                                <div class="col-sm-12 col-md-12 footer-border">
                                                    <h5 class="font-weight-bold"><i class="fa fa-flag text-success"
                                                            aria-hidden="true"></i> Quality</h5>
                                                    {!! $users->quality !!}
                                                </div>



                                                <!-- education section start -->
                                                <div class="col-sm-12 col-md-12 footer-border">
                                                    <h5 class="font-weight-bold"><i class="fa fa-flag text-success"
                                                            aria-hidden="true"></i>Vision & Mission</h5>
                                                    {!! $users->vision_and_mission !!}
                                                </div>
                                                <!-- Awards and Recognition section start -->
                                                <div class="col-sm-12 col-md-12 footer-border">
                                                    <h5 class="font-weight-bold"><i class="fa fa-trophy text-success"
                                                            aria-hidden="true"></i>Awards & Recognition</h5>
                                                    {!! $users->awards_Recognitions !!}
                                                </div>
                                                <!-- Awards and Recognition section end -->
                                                <div class="col-sm-4 col-md-6 footer-border">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- row end for information tab -->
                                        <!-- videos section start -->
                                        <div id="videos" class="container tab-pane fade">
                                            <h4 class="mb-4">Hospital Videos</h4>
                                            <div class="row">
                                                @foreach ($user_vid as $key => $videos)
                                                    <div class="col-sm-4 col-md-4 col-lg-6 text-center">
                                                        <a href="{{ $videos->video_link }}" class="html5lightbox"
                                                            data-width="720" data-height="450" title=""><iframe
                                                                src="{{ $videos->video_link }}" class="img-fluid"
                                                                alt="YouTube Video Thumbnail"></iframe>
                                                            <div class="mt-2 text-center">
                                                                <span class="d-block p-2" style="white-space: normal;"
                                                                    background-color: #A2CEFC; color: #black;>
                                                                    {{ $videos->description }}
                                                                </span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <!-- videos section end -->
                                        <!-- Images section Start -->
                                        <div id="images" class="container tab-pane fade"><br>
                                            <h4>Hospital Beds & Infrastructure</h4>
                                            <div class="row gallery">
                                                @foreach ($hospital_images as $images)
                                                    <div class="col-lg-6 col-md-6 col-xs-6 thumb">
                                                        <a
                                                            href="https://www.myhospitalnow.com/file_managament/storage/photo_gallery_files/{{ $images['hospital_id'] }}_{{ $images['h_email'] }}/{{ $images['filename'] }}">
                                                            <figure><img class="img-fluid img-thumbnail"
                                                                    src="https://www.myhospitalnow.com/file_managament/storage/photo_gallery_files/{{ $images['hospital_id'] }}_{{ $images['h_email'] }}/{{ $images['filename'] }}"
                                                                    width="250px" height="250px" /> </figure>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <!-- Images section End -->
                                        <!-- Testimonials section Start -->
                                        <div id="testimonials" class="container tab-pane fade"><br>
                                            <p>
                                                {!! $users->testimonials !!}
                                            </p>
                                        </div>
                                        <!-- Testimonials section End -->
                                        <!-- comment section -->
                                        <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="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><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>{{ $comment->comment_date }}</small>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif

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


                                        </div>
                                        <!-- Comment section End -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- second card start extra information end -->
            <div class="col-sm-3 col-md-3">
                <div class="card">
                    <div class="card-header text-center">
                        Top Hospitals
                    </div>
                </div>
                <div class="sticky-top ">
                    @foreach (\App\Http\Controllers\HospitalNewController::getTopHospitals() as $hospital)
                        @if ($hospital->avatar == 'hospital.png')
                            <div class="card text-center mt-2">
                                <center><img class="card-img-top mt-2" src="{{ asset('images/hospital.png') }}"
                                        alt="{{ $hospital->name }}"
                                        style="height: 100px;width: 100px;border-radius: 50%;">
                                </center>
                                <div class="card-body">

                                    <a href="/hospitals/{{ $hospital['slug'] }}" target="_blank">
                                        <p class="card-text">{{ $hospital->name }}</p>
                                    </a>
                                </div>
                            </div>
                        @else
                            <div class="card text-center">
                                <center><img class="card-img-top mt-2"
                                        src="/hospitals/storage/hospital_profile/{{ $hospital->avatar }}"
                                        alt="{{ $hospital->name }}"
                                        style="height: 100px;width: 100px;border-radius: 50%;">
                                </center>
                                <div class="card-body">
                                    <a href="/hospitals/{{ $hospital['slug'] }}">
                                        <p class="card-text">{{ $hospital->name }}</p>
                                    </a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif

    <!-- mhn consult top doctors online section start -->
    <section class="" id="mhn_con_doctors">
        <h3>Consult top doctors online for any health concern</h3>
        <span><small class="mhn-margin-less">Private online consultations with verified doctors in all
                specialists</small></span>
        <!-- row starts -->
        <div class="row text-center mt-3">
            <!-- column 1 start -->
            @foreach (\App\Http\Controllers\PassportApi\DoctorManagementController::_getDoctors() as $key => $doctor)
                <div class="col-sm-6 col-md-2 mhn-link">
                    <a href="https://www.myhospitalnow.com/doctors/{{ $doctor['slug'] }}" target="_blank">
                        @if ($doctor['avatar'] == 'default.png')
                            <img src="{{ asset('images/default.png') }}" alt="{{ $doctor['name'] }}"
                                class="mhn-img-circle">
                        @else
                            <img src="/doctors/storage/users/{{ $doctor['avatar'] }}" alt="{{ $doctor['name'] }}"
                                class="mhn-img-circle">
                        @endif
                        <p class="mhn-font-14 mhn-font-bold">{{ $doctor['name'] }}</p>

                    </a>
                    <button type="button" class="btn btn-light text-center mb-2 rounded-pill border border-info"
                        data-toggle="modal" data-target="#BookApmt{{ $key }}">
                        Book Appointment
                    </button>
                    <hr>
                    <div class="modal" id="BookApmt{{ $key }}">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Book Appointment with {{ $doctor['name'] }}
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                <div class="modal-body">
                                    <form>
                                        <div class="form-group  text-left">
                                            <label for="name">Name:</label>
                                            <input type="text" class="form-control" required
                                                id="name{{ $key }}" placeholder="Enter your name">
                                        </div>

                                        <div class="form-group">
                                            <input type="text" hidden value="{{ $doctor['email'] }}"
                                                class="form-control" id="drEmail{{ $key }}">
                                        </div>

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

                                        <div class="form-group  text-left">
                                            <label for="email">Email:</label>
                                            <input type="email" class="form-control" required
                                                id="email{{ $key }}" placeholder="Enter your email">
                                        </div>
                                    </form>
                                </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{{ $key }}">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </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/home/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>
    <!-- mhn consult top doctors online section start -->

    <!-- 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/home/google_badge.webp') }}" alt="" id="playstore"></a>
                    <img src="{{ asset('images/home/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/home/google_badge.webp') }}" alt=""
                            id="playstore"></a>
                    <img src="{{ asset('images/home/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/home/google_badge.webp') }}" alt=""
                            id="playstore"></a>
                    <img src="{{ asset('images/home/appstore_badge.webp') }}" alt="" id="appstore">
                </div>
                <!--tab 3 End-->

                {{-- <div class="col-sm-6 col-md-4 float-left">
                <img src="{{asset('images/home/myhospitalnow-app-download.svg')}}" alt="Myhospitalnow App Download"
            id="preview-right"> --}}
            </div>
        </div>
        </div>
    </section>
    <!-- Download App Section End -->

    <script>
        function addStaticParam(event, city, category) {
            event.preventDefault();
            const staticParam = 'static_value';
            sessionStorage.setItem('static_param', staticParam);
            const url = '{{ route('hospitals.filter', ['city_new' => ':city', 'category' => ':category']) }}'
                .replace(':city', city)
                .replace(':category', category);
            window.location.href = url;
        }
    </script>
    <script>
        $(document).ready(function() {
            @foreach (\App\Http\Controllers\PassportAPI\DoctorManagementController::_getDoctors() as $key => $doctor)
                $('#SubmitBookApmt{{ $key }}').on('click', function() {
                    submitBookApmtData({{ $key }});
                });
            @endforeach

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

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

                // Send an AJAX POST request to the specified URL
                $.ajax({
                    url: 'api/v1/hospital-api/i/doctor-submit-book-appointment/' + drEmail,
                    type: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log('AJAX request successful');
                        // console.log(response);
                        alert("Appointment booked successfully!");
                        $('#BookApmt' + i).modal('hide');
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX request error');
                        console.error(xhr, status, error);
                        alert("Please fill the form correctly");
                    }
                });
            }
        });
    </script>
    <script>
        $.sidebar.initSideBar();
        $.sp_globals.toggleSPLoadingSpinner(false);
    </script>

    <script src="{{ asset('js/blade-components/hospital_list_country.js') }}"></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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.getElementById('claimNowButton').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/hospital-api/check-hospital-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>




    <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>
        // gallery js 
        $(document).ready(function() {
            $(".gallery").magnificPopup({
                delegate: "a",
                type: "image",
                tLoading: "Loading image #%curr%...",
                mainClass: "mfp-img-mobile",
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
                }
            });

        });

        // 		$('#' + 'download_browchure_details' + ' ' + '[name=filename]').on('click', function (e) {
        //     $.sp_globals.toggleSPLoadingSpinner(true);
        //     $.hospitalProfileFilter.downloadBrowchureFileById($(this).attr('file-id'));
        //   }),

        $($.sp_quote_req_file_manager.config.spQuoteReqFileManagerElId + ' .original-filename').on('click', function(e) {
            $.sp_globals.toggleSPLoadingSpinner(true);
            $.sp_quote_req_file_manager.downloadBrowchureFileById($(this).attr('file-id'));
        });


        function downloadFileById(fileId) {
            $.ajax({
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('p_u_a_b_t')
                },
                cache: false,
                type: 'GET',
                url: '/api/v1/hospital-api/i/get-download-browchure-file-by-id/' + fileId,
                contentType: false,
                processData: false,
                data: {},
                //xhrFields is what did the trick to read the blob to pdf
                xhrFields: {
                    responseType: 'blob'
                },
                success: function success(response, status, xhr) {

                    var filename = "";
                    var disposition = xhr.getResponseHeader('Content-Disposition');

                    if (disposition) {
                        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        var matches = filenameRegex.exec(disposition);
                        if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    var linkelem = document.createElement('a');
                    try {

                        var blob = new Blob([response], {
                            type: 'application/octet-stream'
                        });

                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                            window.navigator.msSaveBlob(blob, filename);
                        } else {
                            var URL = window.URL || window.webkitURL;
                            var downloadUrl = URL.createObjectURL(blob);

                            if (filename) {
                                // use HTML5 a[download] attribute to specify filename
                                var a = document.createElement("a");

                                // safari doesn't support this yet
                                if (typeof a.download === 'undefined') {
                                    window.location = downloadUrl;
                                } else {
                                    a.href = downloadUrl;
                                    a.download = filename;
                                    document.body.appendChild(a);
                                    a.target = "_blank";
                                    a.click();
                                }
                            } else {
                                window.location = downloadUrl;
                            }
                        }
                    } catch (ex) {
                        console.log(ex);
                    }
                    $.sp_globals.toggleSPLoadingSpinner(false);
                }
            });
        },
    </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': {
                    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': "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 ($('#recaptcha').next('.text-danger').length === 0) {
                    $('#recaptcha').after(
                        '<div class="text-danger small">Please verify that you are not a robot.</div>'
                    );
                    console.log('Please verify reCAPTCHA');
                }
            }
        });
    </script>

    <!-- gallery js end -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.js"></script>
    <script src="{{ asset('js/blade-components/hospital_profile_filter.js') }}"></script>
@endsection