@extends('layout.mainlayout')

@section('content')
@if(app('translator')->getLocale() == "ar")
        <style>
                .page-main.time-date .main-section .date-side .side-title::before{
                        content: 'اولا';
                }
                .page-main.time-date .main-section .time-side .side-title::before{
                        content: 'ثانيا';
                }
        </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">
                                        <div class="col">
                                                <div class="date-side">
                                                        <div class="heading-side">
                                                                <h4 class="side-title">{{trans("web.date")}}</h4>
                                                        </div> <!-- End Heading Side -->
                                                        <div class="slider owl-carousel" style="margin-top:20px;">
                                                                @foreach($period as $date)
                                                                        <a style="color: #1F3E61" href="/confirm?date={{$date->format('Y-m-d')}}#booking-header" >
                                                                                <div id="{{$date->format('Y-m-d')}}" class="card item @if($selected_date == $date->format('Y-m-d')) card-selected @endif">
                                                                                        <div class="content" style="padding: 10px 20px;">
                                                                                                <p style="text-align: center;margin: 10px 0;">@if($date->format('Y-m-d') == date("Y-m-d", strtotime('+3 hours'))) Today @else {{$date->format('l')}} @endif<br />{{$date->format('M d')}}</p>

                                                                                        </div>
                                                                                </div>
                                                                        </a>
                                                                @endforeach

                                                        </div>
                                                </div>
                                        </div> <!-- End Single Column (Date Side) -->
                                </div>
                                <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.time")}}</h4>
                                                        </div> <!-- End Heading Side -->
                                                </div>
                                        </div>
                                </div>
                                <div class="row">
                                                <div class="col-md-2"></div>
                                                <div class="time-side col-md-8" style="padding:0;">

                                                                <div class="time-select">
                                                                        <div class="time-buttons">
                                                                                <h5 style="color:var(--blazma-text)">{{trans("web.morning")}}</h5>
                                                                                @if(empty($morning))
                                                                                        <p style="color:#a7a7a7">{{trans("web.no_timeslot")}}</p>
                                                                                @endif
                                                                                <div class="timeslot-slider owl-carousel">
                                                                                        @foreach($morning as $timeslot)

                                                                                                <a @if($type == 2) href="/map?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @else href="/order?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @endif class="btn time-btn available" >
                                                                                                        <span class="time">{{date('h:i A',strtotime($timeslot->FROM_TIME))}}</span>
                                                                                                </a>
                                                                                        @endforeach
                                                                                </div>
                                                                                <h5 style="color:var(--blazma-text)">{{trans("web.afternoon")}}</h5>
                                                                                @if(empty($morning))
                                                                                        <p style="color:#a7a7a7">{{trans("web.no_timeslot")}}</p>
                                                                                @endif
                                                                                <div class="timeslot-slider owl-carousel">
                                                                                        @foreach($afternoon as $timeslot)

                                                                                                <a @if($type == 2) href="/map?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @else href="/order?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @endif class="btn time-btn available" >
                                                                                                        <span class="time">{{date('h:i A',strtotime($timeslot->FROM_TIME))}}</span>
                                                                                                </a>
                                                                                        @endforeach
                                                                                </div>

                                                                                <h5 style="color:var(--blazma-text)">{{trans("web.evening")}}</h5>
                                                                                @if(empty($morning))
                                                                                        <p style="color:#a7a7a7">{{trans("web.no_timeslot")}}</p>
                                                                                @endif
                                                                                <div class="timeslot-slider owl-carousel">
                                                                                        @foreach($evening as $timeslot)

                                                                                                <a @if($type == 2) href="/map?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @else href="/order?date={{$selected_date}}&timeslotId={{$timeslot->ID}}" @endif class="btn time-btn available" >
                                                                                                        <span class="time">{{date('h:i A',strtotime($timeslot->FROM_TIME))}}</span>
                                                                                                </a>
                                                                                        @endforeach
                                                                                </div>



                                                                        </div>
                                                                </div>

                                                </div>
                                        <div class="col-md-2"></div>
                                </div>
                                <div class="btn-div text-center py-5">

                                </div>
                        </div> <!-- End Container -->
                </section> <!-- End Mian Section -->
                <!-- Start Footer Page -->
        </main>
                <!-- Start Footer Page -->
@endsection