@extends('layout.mainlayout-without-img')

@section('content')
    <style type="text/css">
        .fl-left{float: left;}

        .fl-right{float: right}



        .row{overflow: hidden;}

        .card-confirm
        {
            display: table-row;
            /* width: 49%; */
            width: 370px;
            background-color: #0CC993;
            color: white;
            margin-bottom: 10px;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            border-radius: 4px;
            position: relative;
        }

        .card-confirm + .card-confirm{margin-left: 2%}

        .date
        {
            /* display: table-cell; */
            width: 100%;
            /* position: relative; */
            /* height: 80px; */
            text-align: @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk")right @else left @endif;
            padding-bottom: 20px;
            padding-top: 0px;
            @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk")padding-right @else padding-left @endif: 15px;
            border-bottom: 2px dashed white;
        }

        .date:before,
        .date:after
        {
            content: "";
            display: block;
            width: 30px;
            height: 30px;
            background-color: white;
            position: absolute;
            top: 50px;
            @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") left: -15px; @else right: -15px; @endif;
            z-index: 1;
            border-radius: 50%;
        }

        .date:after
        {
            /* top: auto; */
            top: 50px;
            @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") right: -15px; @else left: -15px; @endif;
            position: absolute;
        }

        .date time
        {
            /* display: block; */
            /* position: absolute; */
            /* top: 50%; */
            /* left: 50%; */
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .date time span{display: block}

        .date time span:first-child
        {
            color: #2b2b2b;
            font-weight: 600;
            font-size: 250%
        }

        .date time span:last-child
        {
            text-transform: uppercase;
            font-weight: 600;
            margin-top: -10px
        }

        .card-confirm-cont
        {
            /* display: table-cell; */
            width: 50%;
            float: left;
            font-size: 85%;
            border-right: 1px solid white;
            padding: 0px 0px 0px 15px;
            @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") padding-right : 15px;padding-left:0; @endif;
            /* text-align: left; */
        }

        .card-confirm-cont h3
        {
            color: #3C3C3C;
            font-size: 15px;
        }

        .row:last-child .card-confirm:last-of-type .card-confirm-cont h3
        {
            text-decoration: line-through
        }

        .card-confirm-cont > div
        {
            display: table-row
        }

        .card-confirm-cont .even-date i,
        .card-confirm-cont .even-info i,
        .card-confirm-cont .even-date time,
        .card-confirm-cont .even-info p
        {
            display: table-cell
        }

        .card-confirm-cont .even-date i,
        .card-confirm-cont .even-info i
        {
            padding: 5% 5% 0 0
        }

        .card-confirm-cont .even-info p
        {
            padding: 30px 50px 0 0
        }

        .card-confirm-cont .even-date time span
        {
            display: block
        }

        .card-confirm-cont a
        {
            display: block;
            text-decoration: none;
            width: 80px;
            height: 30px;
            background-color: #D8DDE0;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border-radius: 2px;
            position: absolute;
            right: 10px;
            bottom: 10px
        }

        .row:last-child .card-confirm:first-child .card-confirm-cont a
        {
            background-color: #037FDD
        }

        .row:last-child .card-confirm:last-child .card-confirm-cont a
        {
            background-color: #F8504C
        }


        @media screen and (max-width: 860px)
        {
            .card-confirm
            {
                display: block;
                /* float: none; */
                width: 100%;
                margin-bottom: 10px;
            }

            .card-confirm + .card-confirm{margin-left: 0}

            .card-confirm-cont .even-date,
            .card-confirm-cont .even-info
            {
                font-size: 75%
            }
        }
    </style>
    <div class="album text-muted">

        <div class="container">

            <div class="row" style="margin-top:30px">
            <div class="col" style="text-align: center">
                <img src="images/reservation.png" />
                <h2 style="color:#0CC993;margin-top: 5px;">{{trans("web.res_info")}}</h2>
            </div>

            </div>


            @foreach($orders as $order)
            <div class="row" style="margin-top:20px">

                <div class="col ticket-col">
                    <a href="/reservation?id={{$order->ID}}">
                    <article class="card-confirm fl-left">
                        <section class="date" style="height: 65px;padding-top: 15px;">
                            <img src="images/center.png" style="@if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") padding-left @else padding-right @endif: 7px;padding-bottom: 8px;" /><span style="color: white;font-weight: 600;">
                              @php
                                  $HospitalName = "";
                                  if(empty($order->HOSPITAL->NAME_EN)) $HospitalName = trans("web.on_site");
                                  else{
                                  if(app('translator')->getLocale() == "ar") $HospitalName = $order->HOSPITAL->NAME_AR;
                                  else $HospitalName = $order->HOSPITAL->NAME_EN;
                                  }
                                  echo $HospitalName;
                              @endphp
                            </span>

                        </section>
                        <section class="card-confirm-cont" style="padding-top: 20px;">

                            <span style="color: white;font-weight: 600;"><img src="images/calendar-alt-wh.png" style="@if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") padding-left @else padding-right @endif: 7px;padding-bottom: 5px;" />{{date("l",strtotime($order->SCHEDULE_DATE))}} {{date("d",strtotime($order->SCHEDULE_DATE))}} {{date("F",strtotime($order->SCHEDULE_DATE))}} {{date("Y",strtotime($order->SCHEDULE_DATE))}}</span>



                        </section>
                        <section class="card-confirm-cont" style="height:65px;padding-top: 20px;">

                            <h3 style="color: white;font-weight: 600;"><img src="images/clock.png" style="@if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") padding-left @else padding-right @endif: 7px;padding-bottom: 5px;" />{{date('h:i A',strtotime($order->lABAVAILABLETIME->FROM_TIME))}}</h3>



                        </section></article>
                    </a>
                </div>
            </div>
            @endforeach

            <div class="row" style="text-align: center; margin-top:50px;margin-bottom: 10px;">
                <div class="col">
                    <a href="/" style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;color: #8D8D8D;font-weight:600" class="ui button"><span style="padding:5px;">{{trans("web.prev")}}</span></a>
                </div>
            </div>

        </div>

    </div>

@endsection






<b></b>