@extends('web.layouts.main')
@section('content')

<main>
        <!-- Start pg-header-->
        @include('web.pages.components.header',compact('title'))
        
        <!-- Start section -->
        <section class="checkout-pg section bg-light">
            <div class="container">
                    @if(settings('city_valid') == 'true')
                    <div class="alert alert-warning" role="alert">
                        {{__('web.jeddah_note')}}
                    </div>
                    @endif
                <form id="form" method="{{$method}}" action="{{$action}}" onsubmit="saveFormFirst(this)">
                    @CSRF
                    <div class="row wow text-focus-in">
                        <div class="col-lg-8">
                            <div class="lg_box mb-4">
                                <h3 class="subtitle_sec fw-bold color-primary mb-5">
                                    <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>     {{__('web.info_sub')}}       
                                </h3>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <label class="label">  {{__('web.type_package')}}  </label>
                                            <select name="type_id" onchange="typeSelect(this)" class="form-control form-select">
                                                <option selected disabled value="">{{__('web.select')}}</option>
                                                @foreach($types as $type)
                                                    <option value="{{$type->id}}">{{$type->descriptions()->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.package_info')}}  </label>
                                            <select name="package_id" onchange="packageSelect(this)" id="package_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.count_day')}}  </label>
                                            <select name="day_id" onchange="daySelect()"  id="day_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.delivery_time')}}    </label>
                                            <select name="delivery_id" class="form-control form-select">
                                                <option selected disabled value="">{{__('web.select')}}</option>
                                                @foreach($deliveries as $delivery)
                                                    <option value="{{$delivery->id}}">{{$delivery->descriptions()->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.city')}}    </label>
                                            <select name="city_id" onchange="citySelect(this)" class="form-control form-select">
                                                <option selected disabled value="">{{__('web.select')}}</option>
                                                @foreach($cities as $city)
                                                    <option value="{{$city->id}}">{{$city->descriptions()->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.area')}}    </label>
                                            <select name="area_id" id="area_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                          
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <label class="label"> {{__('web.address_details')}} </label>
                                            <input name="address" class="form-control " placeholder="{{__('web.write_here')}}" type="text"/>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="sm_box mb-4">
                                <h5 class="subtitle_sec fw-bold color-primary mb-4">
                                    <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>    {{__('web.discount')}}    
                                </h5>
                                <div class="copoun_box">
                                    <div class="form-group">
                                        <input class="form-control" id="cobon" name="cobon" onchange="cobonSelect()" placeholder="{{__('web.enter_cobon')}}" type="text"/>
                                        <button type="button" class="butn dark_butn apply_butn">{{__('web.implementation')}}</button>
                                        <p style="color:red;display:none" id="cobon_check">{{__('web.not_exist_cobon')}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="sm_box mb-4">
                                <h5 class="subtitle_sec fw-bold color-primary mb-4">
                                    <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>    {{__('web.payment_details')}}    
                                </h5>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="radio" name="way_pay" value="online" id="paymentRadio1">
                                    <label class="form-check-label" for="paymentRadio1">
                                        <img src="{{url('')}}/assets/web/images/icons/pay_2.png" alt="" class="sm_img me-2"/> {{__('web.online_payment')}}
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="radio" name="way_pay" value="tabby" id="paymentRadio2">
                                    <label class="form-check-label" for="paymentRadio2">
                                        <img src="{{url('')}}/assets/web/images/icons/pay_1.png" alt="" class="sm_img me-2"/> {{__('web.tabby')}}      
                                    </label>
                                </div>
                            </div>
                            <div class="sm_box summary-checkout pb-0">
                                <h5 class="subtitle_sec fw-bold color-primary mb-4">
                                    <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>    {{__('web.payment_details')}}
                                </h5>
                                <div class="footer-card p-0">
                                    <div class="summary_price card-body px-0">
                                        <div class="price_item" id="package_details">
                                            <p class="sm_title"> {{__('web.package_cost')}}  </p>
                                            <p class="price" id="package_cost">0 {{__('web.sar')}}</p>
                                        </div>
                                        <div class="price_item" id="tax_details" @if($tax_valid == 'false') style="display:none" @endif>
                                            <p class="sm_title"> {{__('web.tax_val')}}    </p>
                                            <p class="price" id="tax_val">0 {{__('web.sar')}}</p>
                                        </div>
                                        <div class="price_item" id="delivery_details" @if($delivery_valid == 'false') style="display:none" @endif>
                                            <p class="sm_title"> {{__('web.delivery_val')}}     </p>
                                            <p class="price" id="delivery_val">0 {{__('web.sar')}}</p>
                                        </div>
                                        <div class="price_item" id="cobon_details" style='display:none'>
                                            <p class="sm_title"> {{__('web.cobon_details')}}       </p>
                                            <p class="price" id="cobon_val">0 {{__('web.sar')}}</p>
                                        </div>
                                        <div class="price_item border-top pt-3">
                                            <p class="sm_title color-primary"><b>{{__('web.total')}}</b></p>
                                            <p class="price color-primary" id="total"><b>0 {{__('web.sar')}}</b></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="butn primary_butn px-5 m-auto mt-5 py-3">{{__('web.pay_continue')}} </button>

                        </div>
                    </div>
                </form>
            </div>
        </section>

        <!-- Start section -->
        @include('web.pages.components.mail')

    </main>
    
@push('js')
        <script>
            let url_type = {!! json_encode(url(getCurrentLocale().'/typeSelect')) !!}
            let url_package = {!! json_encode(url(getCurrentLocale().'/packageSelect')) !!}
            let url_city = {!! json_encode(url(getCurrentLocale().'/citySelect')) !!}
            let url_calculate = {!! json_encode(url(getCurrentLocale().'/calculatePackage')) !!}
            let select = '<option selected disabled value="">'+{!! json_encode(__('web.select')) !!}+'</option>'
            let sar = ' '+{!! json_encode(__('web.sar')) !!}
            if({!! json_encode(\Auth::user()) !!})
            {
               var check = 'not'
            }
            else
            {
               var check = 'login'
            }
        </script>
    <script src="{{url('')}}/assets/web/js/custom/subscribeAction.js"></script>
@endpush

@stop