@section('externalcss')
<style>
 .form-select  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    }
    .form-select select::-ms-expand {
        display: none;
      }
      .chk_mark {
        list-style: none;
        }

        .chk_mark li:before {
        content: '✓';
        color:var(--dark-green-color);
        margin-left: 5px;
        position: relative;
        left: -8px;
        }
        .chk_mark li{
            font-size: var(--all-font-size);
            color: var(--body-fonts-color);
        }
        .security{
            display:block;
            text-align:center;
        }

</style>
@endsection

{{--ttm-bgcolor-darkgrey--}}
<div>
    <div class="ttm-page-title-row ttm-bg ttm-bgimage-yes  clearfix" style="height: 500px;">
        <div class="ttm-row-wrapper-bg-layer ttm-bg-layer"></div>
        <div class="layer-content">
            <div class="container">
                <div class="row">
                    <span class="d-flex justify-content-center fs-1"><b>Your home for health</b></span>

                    {{-- <div class="col-md-12">
                        <div class="title-box ttm-textcolor-white">
                            <div class="page-title-heading">
                                <h1 class="title">Doctors Available</h1>
                            </div><!-- /.page-title-captions -->
                            <div class="breadcrumb-wrapper text-end">
                                <div class="container">
                                    <div class="breadcrumb-wrapper-inner">
                                            <span>
                                                <a title="Go to YODR." href="{{ config('app.patient_site')}}" class="home"><i class="themifyicon ti-home"></i>&nbsp;&nbsp;Home</a>
                                            </span>
                                        <span class="ttm-bread-sep">&nbsp; | &nbsp;</span>
                                        <span class="ttm-textcolor-skincolor">Doctors Available</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.col-md-12 --> --}}
                </div><!-- /.row -->
                <div class="row" style="padding-top: 40px;">
                    <span class="d-flex justify-content-center fs-4"><b>Find and Book</b></span>
                </div>
                <div class="row d-flex justify-content-center pt-2">
                    <select class="form-select" wire:model="location_name" autocomplete="on"
                        style="border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0; width:300px;">
                        <option value="">Location</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location['city'] }}">{{ $location['city'] }}</option>
                        @endforeach

                    </select>
                    {{-- <input type="text" class="form-control search-slt" wire:model="search_data"
                        style=" display: block; width: 500px; font-size: 0.875rem; line-height: 1.5; color: #55595c; background-color: #fff; background-image: none; border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;"
                        placeholder="Search doctor, speciality, clinic, etc."> --}}
                        <input class="form-control search-slt" style=" display: block; width: 500px; font-size: 0.875rem; line-height: 1.5; color: #55595c; background-color: #fff; background-image: none; border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;"
                        placeholder="Search doctor, speciality, clinic, etc." list="drs" id="dr_data" name="dr_data" autocomplete="off" wire:model="search_data"/>
                            <!--end::Input-->
                            <datalist id="drs" >
                                <option value=""></option>
                                @if(sizeof($dr_search_data)>0)
                                    @foreach($dr_search_data as $dr_dt)
                                        <option value="{{$dr_dt}}"></option>
                                    @endforeach
                                @endif
                            </datalist>
                </div>
            </div><!-- /.container -->
        </div>
    </div><!-- page-title end-->
    <div class="row pt-5">
        <div class="col-md-6 p-4">
            <h1 class="d-flex justify-content-start">Safety of your data is our</h1>
            <h2 class="d-flex justify-content-start fs-1 text-lowercase"><b>top priority.</b></h2>
            <ul class="chk_mark" style="margin-left: -23px;">
                <li>Multi-level security checks</li>
                <li>Multiple data backups</li>
                <li>Stringent data privacy policies</li>

            </ul>
            <button class="btn mt-4" style="background-color: var(--dark-green-color); color:white;" type="submit">Read more</button>

        </div>
        <div class="col-md-6 p-4 d-flex justify-content-center align-items-center">
            <img src="{{ global_asset('assetsweb/images/security/security_guard.webp') }}"  width="250" height="250" />
        </div>
    </div>
    <div class="row d-flex justify-content-center">
        <div class="col-2 security">
            <img style="margin-bottom: 20px;" src="{{ global_asset('assetsweb/images/security/file_security.webp') }}"  width="65" height="65" /><br>
            <span>256-bit<br>encryption</span>

        </div>
        <div class="col-2 security">
            <img style="margin-bottom: 20px;" src="{{ global_asset('assetsweb/images/security/iso_certified.webp') }}"  width="65" height="65" /><br>
            <span>ISO 27001<br>certified</span>
        </div>
        <div class="col-2 security">
            <img style="margin-bottom: 20px;" src="{{ global_asset('assetsweb/images/security/hipa.webp') }}"  width="65" height="65" /><br>
            <span>HIPAA<br>compliant data centers</span>
        </div>
        <div class="col-2 security">
            <img style="margin-bottom: 20px;" src="{{ global_asset('assetsweb/images/security/dsci.webp') }}"  width="65" height="65" /><br>
            <span>DSCI<br>member</span>
        </div>
    </div>
    {{-- <div class="row">
        <div class="col-lg-12 col-md-12 pt-100">
            <div class="section-title">
                <div class="title-header">
                    <h3>MEET OUR CONNECTED DOCTORS</h3>
                    <h2 class="title">Doctors Available <b> in {{ session('session_city_name') }}</b> </h2>
                </div>
                <div class="title-desc">
                    <p>We are all work together to help our all patients for recovery</p>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 p-2">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control search-slt" wire:model="dr_name"
                                    style=" display: block; width: 100%; font-size: 0.875rem; line-height: 1.5; color: #55595c; background-color: #fff; background-image: none; border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;"
                                    placeholder="Doctor's Name">
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-2">
                        <div class="row">
                            <div class="col-lg-12 ">
                                <select class="form-select" wire:model="location_name"
                                    style="border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;">
                                    <option value="">Location</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location['city'] }}">{{ $location['city'] }}</option>
                                    @endforeach

                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-2">
                        <div class="row">
                            <div class="col-lg-12 ">
                                <select class="form-select" wire:model="specialist_name"
                                    style="border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;">
                                    <option value="">Speciality</option>
                                    @foreach ($specialists as $specialist)
                                        <option value="{{ $specialist['specialist_name'] }}">
                                            {{ $specialist['specialist_name'] }}</option>
                                    @endforeach

                                </select>
                            </div>
                        </div>

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

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

    <!-- row -->
    {{-- <div class="row multi-columns-row ttm-boxes-row-wrapper">
        @foreach ($doctors as $doctor)
            <div class="ttm-box-col-wrapper col-lg-3 col-md-6 col-6">
                <a wire:click="setdoctor('{{ $doctor['id'] }}')">
                    <div class="featured-imagebox
                    featured-imagebox-team style1">
                        <div class="featured-thumbnail">
                            @if ($doctor['image'])
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($doctor['image']) }}"
                                    width="100%" height="250" />
                            @else
                                <img src="{{ global_asset('assetsweb/images/doctor_with_stethoscope.webp') }}"
                                    width="100%" height="250" />
                            @endif
                        </div>
                        <div class="featured-content featured-content-team">
                            <div class="team-position">{{ $doctor['specialist_name'] }}</div>
                            <div class="featured-title">
                                <h3 style="font-size: 1.0rem;">{{ $doctor['doctor_name'] }}
                                </h3>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div> --}}

</div>