@extends('layout.mainlayout')

@section('content')
        <style>
                #description {
                        font-family: Roboto;
                        font-size: 15px;
                        font-weight: 300;
                }

                #infowindow-content .title {
                        font-weight: bold;
                }

                #infowindow-content {
                        display: none;
                }

                #map #infowindow-content {
                        display: inline;
                }

                .pac-card {
                        margin: 10px 10px 0 0;
                        border-radius: 2px 0 0 2px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        outline: none;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                        background-color: #fff;
                        font-family: Roboto;
                }

                #pac-container {
                        padding-bottom: 12px;
                        margin-right: 12px;
                }

                .pac-controls {
                        display: inline-block;
                        padding: 5px 11px;
                }

                .pac-controls label {
                        font-family: Roboto;
                        font-size: 13px;
                        font-weight: 300;
                }

                #pac-input {
                        background-color: #fff;
                        font-family: Roboto;
                        font-size: 15px;
                        font-weight: 300;
                        padding: 0 11px 0 13px;
                        text-overflow: ellipsis;
                }

                #pac-input:focus {
                        border-color: #4d90fe;
                }

                #title {
                        color: #fff;
                        background-color: #4d90fe;
                        font-size: 25px;
                        font-weight: 500;
                        padding: 6px 12px;
                }

                #target {
                        width: 345px;
                }
                .pac-container {
                        z-index: 10000 !important;
                }
        </style>
        @if(app('translator')->getLocale() == "ar")
                <style>
                        .page-main.time-date .main-section .time-side .side-title::before{
                                content: 'حدد موقعك, ثم اضغط على استمرار';
                        }
                </style>
        @else
                <style>
                        .page-main.time-date .main-section .time-side .side-title::before{
                                content: 'Set your location, then click Continue';
                        }
                </style>
        @endif
        <main class="page-main time-date">
                <!-- Start Heading Div -->
                <div class="heading-div">
                        <div class="container">
                                <div class="lab-info d-flex justify-content-start align-items-center flex-nowrap">
                                        <div class="image-div">
                                                <img src="{{$hospital->WEBSITE_LOGO}}" alt="Lab Image" class="lab-image">
                                        </div>
                                        <div class="content-div px-3">
                                                <h4 class="lab-title">@if(app('translator')->getLocale() == "ar"){{$hospital->WEBSITE_NAME_AR}}@else{{$hospital->WEBSITE_NAME_EN}}@endif</h4>
                                                <p class="lab-desc mb-0">@if(app('translator')->getLocale() == "ar"){{$hospital->CITYSTATE->ARABIC_NAME}}@else{{$hospital->CITYSTATE->ENG_NAME}}@endif</p>
                                        </div>
                                </div>
                        </div>
                </div>
                <!-- End Heading Div  -->
                <!-- Start main sectoin -->
                <section class="main-section">
                        <div class="container">
                                <div class="row" style="margin-top:20px;">
                                        <div class="col-md-6 mt-5 mt-md-0">
                                                <div class="time-side">
                                                        <div class="heading-side">
                                                                <h4 class="side-title">{{trans("web.address_info")}}</h4>
                                                        </div> <!-- End Heading Side -->
                                                </div>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col">
                                                <div class="alert alert-danger alert-danger-person" role="alert" style="display: none;"></div>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-md-12">
                                                <label for="address-desc" class="d-block">{{trans("web.address_desc")}}</label>
                                                <input type="text" id="address-desc" class="d-block w-100 form-control" placeholder="{{trans("web.address_details")}}">
                                        </div>
                                </div>
                                <br />
                                <div class="row">
                                        <div class="col-md-12">
                                                <label for="address-desc" class="d-block">{{trans("web.address_map")}}</label>
                                                <div class="row">
                                                        <div class="col-md-2"></div>
                                                        <div class="col-md-8">
                                                                <div id="map" style="height:400px"></div>
                                                                <input id="pac-input" class="controls form-control" style="margin-top: 10px !important;left: 0 !important;" placeholder="{{trans("web.search")}}"/>
                                                        </div>
                                                        <div class="col-md-2"></div>
                                                </div>
                                        </div>
                                </div>

                                <div class="btn-div text-center py-3">
                                        <a id="map-continue" @if(!empty(config('services.PROFILE_ID'))) style="background: @if(!empty($profile) && $profile->COLOR) {{ $profile->COLOR }} @endif;width: 300px;border-radius: 25px;color: #FFF;font-size: 20px;" @else style="padding: .4rem 1.5rem;color: #FFF;font-weight: lighter;background: linear-gradient(140.37deg, var(--blazma-pastel) -59.16%, var(--blazma-primary) 49.95%);box-shadow: 0px 8px 34px rgba(0, 0, 0, 0.05);border-radius: 2rem;" @endif  href="/order-account" class="btn pay-btn pulse-button">{{trans("web.continue")}}</a>
                                </div>
                        </div> <!-- End Container -->
                </section> <!-- End Mian Section -->
                <!-- Start Footer Page -->
        </main>
                <!-- Start Footer Page -->
@endsection