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

@section('content')
    @php
        $locale = app('translator')->getLocale() ?? 'en';
            $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';

            if (isset($global_symbol['from_website']) && $global_symbol['from_website']){
                if ($locale == 'en'){
                  if(isset($global_symbol['is_html']) && $global_symbol['is_html']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }else{
                   if(isset($global_symbol['is_html_ar']) && $global_symbol['is_html_ar']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }
            }
    @endphp
    <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%
            }
        }

         .btn-primary{
             background: linear-gradient( -90deg, #1f9b79, #26E5AF) !important;
             color:white !important;
         }

    </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>


            <div class="row" style="margin-top:20px">

                <div class="col ticket-col">
                    <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($hospital->NAME_EN)) $HospitalName = trans("web.on_site");
                                else{
                                if(app('translator')->getLocale() == "ar") $HospitalName = $hospital->NAME_AR;
                                else $HospitalName = $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($date))}} {{date("d",strtotime($date))}} {{date("F",strtotime($date))}} {{date("Y",strtotime($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($timeslot->FROM_TIME))}}</h3>



                        </section></article>
                </div>
            </div>
            @if(empty($hospital->NAME_EN))
            <div class="row" style="margin-top:20px">
                <div class="col">
                    <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.people_no")}}</p>
                    <input style="padding:15px" class="form-control" type="number" id="people_no" value="1" name="people_no" />
                </div>
            </div>
            <div class="row" style="margin-top:20px">
                <div class="col">
                    <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.city")}}</p>
                    <select style="width:100%;height: 50px;padding-top:13px;border-top-right-radius: 0;border-bottom-right-radius: 0;" class="form-control" type="text" id="city" name="city" >
                        @foreach($cities as $city)
                            <option value="{{$city->CITY_ID}}" >@if(app('translator')->getLocale() == "ar"){{$city->ARABIC_NAME}}@else{{$city->ENG_NAME}}@endif</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row" style="margin-top:30px;margin-bottom:10px;">
                <div class="col" style="text-align: center">
                    <h2 style="color:#0CC993;margin-top: 5px;">{{trans("web.address_info")}}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div id="map" style="width:100%;height:400px"></div>
                    <input id="pac-input" class="controls" placeholder="{{trans("web.search")}}"/>
                </div>
            </div>
            <div class="row">
                <div class="col" style="text-align: center;">
                    <div class="alert alert-danger" role="alert" style="@if(empty($error)) display: none; @endif">@if(!empty($error)) {{$error}} @endif</div>
                </div>
            </div>
            <div class="row" style="margin-top:20px">
                <div class="col">
                    <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.building_no")}}</p>
                    <input style="padding:15px" class="form-control" type="text" id="building_no" name="building_no" />
                </div>
            </div>

            <div class="row" style="margin-top:20px">
                <div class="col">
                    <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.nearest")}}</p>
                    <input style="padding:15px" class="form-control" type="text" id="nearest" name="nearest" />
                </div>
            </div>
            <div class="row" style="margin-top:20px">
                <div class="col">
                    <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.floor_no")}}</p>
                    <input style="padding:15px" class="form-control" type="number" id="floor_no" name="floor_no" />
                </div>
            </div>
            @else

                @if($followers->count())
                    <h3> {{trans("web.other_persons")}}</h3>
                    @foreach($followers as $follower)
                        <div class="row" style="margin-top:15px;">
                            <div class="col">
                                   <div class="card">
                                        <div class="card-container row">
                                            <div class="col-9">
                                                <h4>{{$follower->FULL_NAME}} - {{app('translator')->getLocale() == "ar" ? $follower->gENDER->NAME_AR : $follower->gENDER->NAME_EN}}</h4>
                                                <p style="color: #95989A;">{{app('translator')->getLocale() == "ar" ? $follower->nationality->ar_name : $follower->nationality->name}} - {{$follower->DATE_OF_BIRTH}}</p>
                                                <p style="color: #95989A;">{{trans("web.".$follower->IDENTIFICATION_TYPE)}} : {{$follower->IDENTIFICATION}}</p>
                                            </div>
                                            <div class="col-3" style="text-align: @if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk") left @else right @endif">
                                                <p style="margin-top: 32px;color: #95989A;"><img follower-id="{{$follower->ID}}" class="delete-follower" src="images/remove.png" style="margin-@if(app('translator')->getLocale() == "ar" || app('translator')->getLocale() == "pk")left @else right @endif:5px;width:20px"/></p>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>

                    @endforeach
                @endif


                <div class="row" style="overflow: inherit;margin-top:15px;">
                    <div class="col-12">

                        <a id="add-person" href="#" data-toggle="modal" data-target="#modal-lg">
                            <div class="card">
                                <div class="card-container row">
                                    <div class="col-12" style="text-align: center">
                                         <h3> {{trans("web.add_person")}}</h3>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            @endif
            <div class="row" style="text-align: center; margin-top:50px;margin-bottom: 10px;">
                <div class="col">
                    <a id="prev-confirmation" 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>
                    <a id="next-confirmation" style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;background: linear-gradient( -90deg, #1f9b79, #26E5AF);color:white;" class="ui button">{{trans("web.next")}}</a>
                </div>
            </div>



        </div>

    </div>

    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{trans("web.add_person")}}</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-person" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.full_name")}}</p>
                                <input style="padding:15px" class="form-control" type="text" id="full-name" name="full-name" />
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.identity_type")}}</p>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="col-4" style="padding:0">
                                            <select id="identification-type" class="form-control" name="" style="width:100%;height: 50px;padding-top:13px;border-top-right-radius: 0;border-bottom-right-radius: 0;">
                                                <option value="national_id" >{{trans("web.national_id")}}</option>
                                                <option value="res_no">{{trans("web.res_no")}}</option>
                                                <option value="border_no">{{trans("web.border_no")}}</option>
                                                <option value="gulf_id">{{trans("web.gulf_id")}}</option>
                                                <option value="passport_number">{{trans("web.passport_number")}}</option>
                                            </select>
                                        </div>
                                        <div class="col-8" style="padding:0">
                                            <input  style="width:100%;padding:15px;border-top-left-radius: 0;border-bottom-left-radius: 0;" type="text" class="form-control" name="identification" id="identification" value="" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.nationality")}}</p>
                                <select style="width:100%;height: 50px;padding-top:13px;border-top-right-radius: 0;border-bottom-right-radius: 0;" class="form-control" type="text" id="nationality" name="nationality" >
                                    @foreach($countries as $country)
                                        <option @if($country->id == 140) selected @endif value="{{$country->id}}" >@if(app('translator')->getLocale() == "ar"){{$country->ar_name}}@else{{$country->name}}@endif</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.dob")}}</p>
                                <input style="padding:15px" class="form-control" type="date" id="dob" name="dob" />
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.gender")}}</p>
                                <div class="btn-group btn-toggle gender" style="width:100%;background-color: #efefef;padding: 2px;">
                                    <input id="male" style="width:50%;padding: 15px;" type="button" name="gender" class="btn btn-primary active gender-btn" value="{{trans("web.male")}}">
                                    <input id="female" style="width:50%;padding: 15px;" type="button" name="gender" class="btn btn-default gender-btn" value="{{trans("web.female")}}">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button id="add-new-person" style="border-radius: 20px;border-color: white;padding:14px;font-size:15px;min-width:150px;background: linear-gradient( -90deg, #1f9b79, #26E5AF);color:white;" type="submit" class="btn btn-success">{!! $currency_code !!}</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection






<b></b>