@extends('layouts.app')

@section('content')
    @include('includes.navbar')
    <!-- get all hospital data by State ID section start-->
    <div class="container mt-5 pt-5">
        <a class="btn btn-outline-primary mb-3" href="https://www.myhospitalnow.com/hospitals">Back to hospitals</a>
          <!-- Search Bar Section -->
          <div class="input-group mb-4">
            <input type="text" id="hospitalSearch" class="form-control" placeholder="Search Hospital by name...">
            <div class="input-group-append">
                <button class="btn btn-primary" id="searchHospitalBtn">Search</button>
            </div>
        </div>
        <section class="container">
            <div class="row">
                <h1>Hospitals in {{ ucwords(str_replace('-', ' ', $city_new)) }} for {{ ucwords(str_replace('-', ' ', $category)) }}</h1>
                <div class="col-sm-12 col-md-12" id="profile-table" name="profile">
                    <p id="noHospitalsMessage" style="display: none;">No Hospitals found in this category or city.</p>
                    @if ($hosp_data_cate->isEmpty())
                        <p>No Hospitals found in this category or city.</p>
                    @else
                        @foreach ($hosp_data_cate as $hosp_data)
                            <div class="card shadow-lg p-3 mb-1 bg-white rounded hospitals-card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-3 col-md-3 d-flex flex-column align-items-center">
                                                    <p>
                                                        @if ($hosp_data->avatar == 'hospital.png')
                                                            <img class="img-thumbnail"
                                                                src="{{ asset('images/hospital.png') }}"
                                                                alt="{{ $hosp_data->name }}"
                                                                style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                        @else
                                                            <img class="img-thumbnail"
                                                                src="/hospitals/storage/hospital_profile/{{ $hosp_data->avatar }}"
                                                                alt="{{ $hosp_data->name }}"
                                                                style="height: 150px;width: 150px;margin: 0 10px;border-radius: 50%;">
                                                        @endif
                                                    </p>
                                                    <span class="mt-2"><a href="/hospitals/{{ $hosp_data->slug }}" class="btn btn-outline-primary">View Profile</a></span>
                                                </div>
                                                <div class="col-sm-6 col-md-5 text-left">
                                                    <a href="/hospitals/{{ $hosp_data->slug }}" class="u-color--primary">
                                                        <h3 data-qa-id="hospital_name" class="u-title-font u-c-pointer u-bold" style="color: #14bef0">
                                                            {{ $hosp_data->name }} 
                                                        </h3>
                                                    </a>
                                                    <address style="display: block; font-style: italic;">
                                                        <b class="mb-2">Visit us at:</b><br>
                                                        <i class="fa fa-map-marker text-danger" aria-hidden="true"></i>
                                                        {{ $hosp_data->address1 }} ,
                                                        {{ $hosp_data->address2 }} ,<br>
                                                        {{ $hosp_data->city_name }} ,
                                                        {{ $hosp_data->state }} ,
                                                        {{ $hosp_data->country_name }}
                                                    </address>
                                                    <br>
                                                    <a class="btn btn-outline-success btn-sm mt-3" href="{{ $hosp_data->website }}" target="_blank" title="visit here">Website</a>
                                                </div>
                                                <div class="col-sm-3 col-md-4">
                                                    <a class="btn-sm align-middle" href="{{ $hosp_data->fb_profile ?? '#' }}" target="_blank" title="visit fb" style="position:relative; color: {{ $hosp_data->fb_profile ? 'rgb(41, 41, 224)' : 'gray' }}; pointer-events: {{ $hosp_data->fb_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-facebook" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm align-middle" href="{{ $hosp_data->twitter_profile ?? '#' }}" target="_blank" title="visit twitter" style="position:relative; color: {{ $hosp_data->twitter_profile ? 'rgb(16, 153, 207)' : 'gray' }}; pointer-events: {{ $hosp_data->twitter_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-twitter" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm align-middle" href="{{ $hosp_data->linkedin_profile ?? '#' }}" target="_blank" title="visit linkedin" style="position:relative; color: {{ $hosp_data->linkedin_profile ? 'rgb(33, 33, 176)' : 'gray' }}; pointer-events: {{ $hosp_data->linkedin_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-linkedin" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm mr-1 align-middle" href="{{ $hosp_data->youtube_profile ?? '#' }}" target="_blank" title="visit Youtube" style="position:relative; color: {{ $hosp_data->youtube_profile ? 'red' : 'gray' }}; pointer-events: {{ $hosp_data->youtube_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-youtube" aria-hidden="true"></i>
                                                    </a>
                                                    <a class="btn-sm mr-1 align-middle" href="{{ $hosp_data->instagram_profile ?? '#' }}" target="_blank" title="visit Instagram" style="position:relative; color: {{ $hosp_data->instagram_profile ? 'rgb(188, 43, 43)' : 'gray' }}; pointer-events: {{ $hosp_data->instagram_profile ? 'auto' : 'none' }};">
                                                        <i class="fa fa-instagram" aria-hidden="true"></i>
                                                    </a>
                                                    <br><br>
                                                    <b>Accreditation:</b> {{ $hosp_data->accreditation }}
                                                    <img src="{{ asset('images/verification.svg') }}" width="20px"><br>
                                                    <b>Language:</b>{{ $hosp_data->languages }}<br>
                                                    <b>Doctors:</b> {{ $hosp_data->no_of_doctors }}<br>
                                                    <b>Bed:</b> {{ $hosp_data->no_of_beds }}<br>
                                                    <b>Opening Time:</b> 9am - 9pm
                                                    <br><br>
                                                    <a class="btn btn-outline-primary btn-sm" href="#" id="download_brochure_details" file-id="" name="filename" title="Download Brochure" style="position:relative; left:45px;" onClick="$.hospitalProfileFilter.downloadBrowchureFileById('{{ $hosp_data->email }}')">Download Brochure</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                       
                    </div>
                    {{-- <div class="col-sm-12 col-md-12" >
                        {{ $hosp_data_cate->links('pagination::bootstrap-4') }}
                    </div> --}}


                    <div class="col-12">
                        {{-- Desktop View: Show full pagination --}}
                        <div class="d-none d-md-block">
                            {{ $hosp_data_cate->links('pagination::bootstrap-4') }}
                        </div>
                    
                        {{-- Mobile View: Show only 4 pagination buttons --}}
                        <div class="d-block d-md-none text-center">
                            <nav>
                                <ul class="pagination justify-content-center">
                                    {{-- Previous button --}}
                                    @if ($hosp_data_cate->onFirstPage())
                                        <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $hosp_data_cate->previousPageUrl() }}" rel="prev">&laquo;</a>
                                        </li>
                                    @endif
                    
                                    {{-- Current page --}}
                                    <li class="page-item active"><span class="page-link">{{ $hosp_data_cate->currentPage() }}</span></li>
                    
                                    {{-- Next page --}}
                                    @if ($hosp_data_cate->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $hosp_data_cate->nextPageUrl() }}" rel="next">
                                                {{ $hosp_data_cate->currentPage() + 1 }}
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $hosp_data_cate->nextPageUrl() }}" rel="next">&raquo;</a>
                                        </li>
                                    @else
                                        <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.js"></script>
    <script>
        $.sidebar.initSideBar();
        $.sp_globals.toggleSPLoadingSpinner(false);
    </script>
    <script src="{{ asset('js/blade-components/hospital_profile_filter.js') }}"></script>
    <script>
        $(document).ready(function() {
            // console.log("✅ Document is ready.");

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

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

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

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

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

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

                    $(this).toggle(isMatch);

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

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

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

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

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

            // console.log("✅ Event listeners attached.");
        });
    </script>
@endsection