@extends('layouts.app_new')
@section('title', 'Price')
@section('style')
<style>
    .card-pricing.popular {
        z-index: 1;
        border: 3px solid #660066;
    }

    .card-pricing li {
        /* padding: .5rem 0; */
        color: #6c757d;
    }

    ul.timeline {
        list-style-type: none;
        position: relative;
    }
</style>
@if (app()->getLocale() == 'ar')
<style>
    ul.timeline:before {
        content: ' ';
        background: #d4d9df;
        display: inline-block;
        position: absolute;
        right: 29px;
        width: 2px;
        height: 100%;
        z-index: 400;
    }

    ul.timeline>li {
        margin: 20px 0;
        padding-right: 20px;
    }

    ul.timeline>li:before {
        content: ' ';
        background: white;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #660066;
        right: 20px;
        width: 20px;
        height: 20px;
        z-index: 400;
    }
</style>
@else
<style>
    ul.timeline:before {
        content: ' ';
        background: #d4d9df;
        display: inline-block;
        position: absolute;
        left: 29px;
        width: 2px;
        height: 100%;
        z-index: 400;
    }

    ul.timeline>li {
        margin: 20px 0;
        padding-left: 20px;
    }

    ul.timeline>li:before {
        content: ' ';
        background: white;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #d100d1;
        left: 20px;
        width: 20px;
        height: 20px;
        z-index: 400;
    }
</style>
@endif
@endsection
@section('content')
<div class="row flex-fill gutters justify-content-center">
    <div class="col-md-7 col-sm-12">
        <div class="row my-2 justify-content-center">
            @foreach ($data as $card)
            @if($card['price']!=0)
            <div class="col-md-6 col-sm-12 col-xs-12 mb-4">
                <div class="card card-pricing text-center mx-2 shadow" style="height: 100%;">
                    <span class="h5 w-60 mx-auto px-4 py-2 rounded-bottom bg-primary text-white shadow-sm">
                        {{ $card['type']->getTitle() }}</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h2 font-weight-normal text-primary text-center mb-0">
                            <span class="h6 text-muted ">{{ __('Total Price') }}:</span> <span class="price">
                                {{ $card['price'] }}</span> {{__("SYP")}}
                        </h1>
                    </div>
                    <div class="card-body pt-0">
                        <table class="table table-light text-center">
                            <tbody>
                                <tr>
                                    <th>{{ __('Birth Date') }}</th>
                                    <th> {{ __('price') }}</th>
                                </tr>
                                @foreach ($card['trav_price'] as $date => $val)
                                <tr>
                                    <td>{{$date}}</td>
                                    <td>{{$val}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <hr class="text-mute">
                        <ul class="list mb-4">
                            {{-- {{dd($card)}} --}}
                            @foreach ($card['type']->details as $dit)
                            <li class="text-start ms-2 p-1"><small class="text-dark fw-bold ms-1">{{ $dit->Label()}}
                                    :</small>
                                {{ $dit->Content() }}
                            </li>
                            @endforeach
                        </ul>
                        <a class="btn btn-outline-secondary mb-3 orderbtn" href="{{route('orders.create',['type'=>$card['type']->getTitle(),'price'=>$card['price'],'count'=>count($ages)])}}" >
                            {{__("Order now")}}
                        </a>

                    </div>
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>

    <div class="col-md-5 col-sm-12">
        <div class="bg-transparent card-header pt-3 border-0 ">
            <span class="h5 w-60 me-auto px-4 py-2 rounded-bottom bg-primary text-white shadow"> {{ __('Details') }} :
            </span>
        </div>
        <ul class="timeline text-start">
            <li>
                <div class="card card-pricing popular mx-2 shadow w-75">
                    <div class="bg-transparent card-header pt-2 border-0">
                        <h5 class="font-weight-normal text-primary">
                            <span>{{ __('pricing.NUMBER_OF_TRAVELERS')}} </span>
                            <span class="h6 text-secondary"> : {{count($ages)}}</span>
                        </h5>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-group list-group-flush">
                            @foreach ($ages as $age)
                            <li class="list-group-item"> <span class="rounded-circle mx-2">
                                    <i class="zmdi zmdi-account"></i>
                                </span> {{floor($age/12)}} {{__('Year')}} , {{$age%12}}{{__('Month')}}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <div class="card card-pricing popular mx-2 shadow w-50">
                    <div class="bg-transparent card-header pt-2 border-0">
                        <h5 class="font-weight-normal text-primary">
                            <span>{{__('pricing.DAYS_NUM')}}</span>
                            <span class="h6 text-secondary"> : {{$days}} {{__('days')}}</span>
                        </h5>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-group list-group-flush">

                            <li class="list-group-item"> <span class="rounded-circle mx-2"><span class="">{{ __('From') }}
                                        : </span>{{$trav_date}}</span></li>
                            <li class="list-group-item"> <span class="rounded-circle mx-2"><span class="">{{ __('To') }}
                                        : </span>{{date('Y-m-d', strtotime($trav_date. ' + '.($days-1).'days'))}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            @if ($is_family)
            <li>
                <div class="card card-pricing popular mx-2 shadow">
                    <div class="bg-transparent card-header pt-2 border-0">
                        <h5 class="font-weight-normal text-primary">
                            <span>{{__('is_family')}}</span>
                        </h5>
                    </div>
                </div>
            </li>
            @endif
            <li>
                <div class="card card-pricing popular mx-2 shadow">
                    <div class="bg-transparent card-header pt-2 border-0">
                        <h5 class="font-weight-normal text-primary">
                            <span>{{__('Group')}}</span>
                            <span class="h6 text-secondary"> : {{$group}}</span>
                        </h5>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
@endsection
{{--
@section('script')
<script>
   $('.orderbtn').on('click',(e)=>{
        // $('#modalTitle').html(e.target.dataset.order.type);
        console.log(e.target.dataset);
        $data=e.target.dataset;

        $('#hidden_inputs').empty();
        $('#hidden_inputs').html(
            `<input type="text" name="policy_type" value="${$data.orderType}">
            <span class="text-danger" id="policy_typeError"></span>
            <input type="text" name="price" value="${$data.orderPrice}">
            <span class="text-danger" id="priceError"></span>
            <input type="text" name="travelers_count" value="${$data.orderCount}">
            <span class="text-danger" id="travelers_countError"></span>`
        )
    });

    </script>
@endsection
 --}}