@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>
        <section class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12" id="profile-table" name="profile">
                    @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 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 }}
                                                    </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">
                                                <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>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::simple-bootstrap-4') }} --}}

                   
                        {{ $hosp_data_state->links('pagination::bootstrap-4') }}
                   
                </div>
                
                <!-- second card start extra information end -->
                {{-- <div class="col-sm-3 col-md-3">
                    <div class="card">
                        <div class="card-header">
                            Top Hospitals
                        </div>
                    </div>
                    <div class="sticky-top pt-5">
                        @foreach ($hospitals as $hospital)
                            @if ($hospital->avatar == 'hospital.png')
                                <div class="card text-center mt-2">
                                    <center><img class="card-img-top mt-2" src="/hospitals/images/{{ $hospital->avatar }}"
                                            alt="{{ $hospital->name }}"
                                            style="height: 100px;width: 100px;border-radius: 50%;"></center>
                                    <div class="card-body">
                                        <p class="card-text">{{ $hospital->name }}</p>
                                    </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">
                                        <p class="card-text">{{ $hospital->name }}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div> --}}
            </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>
@endsection