@extends('layouts.app')
@section('content')
<!-- 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>
    @foreach($hosp_data_state as $hosp_data)
    <div class="card shadow-lg p-3 mb-1 bg-white rounded">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-3 col-md-3">
                            <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="ml-4"><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}}
                                </addres>
                                <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">
                            <br><br><b>Accrediation:</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</p>
                            <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
    {{-- {{$hosp_data_state->links("pagination::bootstrap-4")}} --}}


    <div class="col-12">
        {{-- Desktop View: Show full pagination --}}
        <div class="d-none d-md-block">
            {{ $hosp_data_state->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_state->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_state->previousPageUrl() }}" rel="prev">&laquo;</a>
                        </li>
                    @endif
    
                    {{-- Current page --}}
                    <li class="page-item active"><span class="page-link">{{ $hosp_data_state->currentPage() }}</span></li>
    
                    {{-- Next page --}}
                    @if ($hosp_data_state->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $hosp_data_state->nextPageUrl() }}" rel="next">
                                {{ $hosp_data_state->currentPage() + 1 }}
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="{{ $hosp_data_state->nextPageUrl() }}" rel="next">&raquo;</a>
                        </li>
                    @else
                        <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                    @endif
                </ul>
            </nav>
        </div>
    </div>
</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>
    <script src="{{ asset('js/blade-components/hospital_profile_filter.js') }}"></script>
//$.sidebar.initSideBar();
$.sp_globals.toggleSPLoadingSpinner(false);
	
</script>

@endsection