@extends('web.layouts.main')
@section('content')
    <style>
        .input-group-addon.select-input {
      width: 20%;
      padding: 0;
    }
    
    .input-group-addon.select-input select {
      height: 30px;
    }
    
    </style>
    <header class="kyc_header">
        <div class="full_img img_cover">
            <img src="{{asset($page->image)}}" alt="" class="main_img">
            <h1>  {!! $page->descriptions()->title !!} </h1>
        </div>
    </header>
    <!--  end header  -->

    <main>


        <!-- ---------- kyc_content ----------- -->
        <section class="kyc_pg ">
            <div class="container">
                <div class="form_box">
                    <div class="form-wizard">
                        <form action="{{url(getCurrentLocale().'/quote')}}" onsubmit="saveForm(this)" method="post" role="form">
                            @CSRF
                            <div class="form-wizard-header">
                                <ul class="form-wizard-steps col-lg-7 m-auto mb-5 list-unstyled clearfix">
                                    <li class="active"><span>1</span></li>
                                    <li><span>2</span></li>
                                    <li><span>3</span></li>
                                </ul>
                            </div>
                            <fieldset class="wizard-fieldset show">
                                <h5 class="wuzard_title fs-2 mb-5">{{__('web.facilities_select')}}</h5>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.compound_name')}}</label>
                                            <select onchange="compoundSelect(this)" name="compound_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                                @foreach($compounds as $compound)
                                                    <option value="{{$compound->id}}">{{$compound->descriptions()->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.unit_type')}}</label>
                                            <select onchange="unitSelect(this)" id="units" name="unit_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.num_people')}}</label>
                                            <div class="select_num_people">
                                                <div class="display_num" id="people">
                                                    0 {{__('web.adult')}} - 0 {{__('web.children')}}
                                                </div>
                                            </div>
                                        
                                    
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.contract_date')}}</label>
                                            <input name="date" min="{{date('Y-m-d')}}" class="form-control" type="date">
                                        </div>
                                    </div>
                                </div>
                           
                                <div class="butns justify-content-center d-flex mt-5">
                                    <a href="javascript:;" class="form-wizard-next-btn butn">{{__('web.next')}}</a>
                                </div>
                            </fieldset>	
                            <fieldset class="wizard-fieldset">
                                <h5 class="wuzard_title fs-2 mb-5">{{__('web.personal_info')}}</h5>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="label">{{__('web.name_app')}}</label>
                                            <input class="form-control" name="name" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                           <label class="label">{{__('web.phone')}}</label>
                                           <div class="input-group">
                                                <div class="input-group-addon select-input">
                                                    <select name="country_id" class="selectpicker form-control form-select">
                                                        @foreach($countries as $country)
                                                            <option class="dropdown-item" value="{{$country->id}}">{{$country->key}} <img src="{{$country->getImageAttribute()}}"></option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <input  type="phone" name="phone" placeholder="{{__('web.write_here')}}" value='{{ old("phone", $store->phone ?? "") }}' class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.email')}}</label>
                                            <input class="form-control" type="email" name="email" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.nationality')}}</label>
                                            <select name="nationality_id" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}">{{$country->descriptions()->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.id_type')}}</label>
                                            <select name="id_type" class="form-control form-select">
                                                <option selected disabled>{{__('web.select')}}</option>
                                                <option value="passport">{{__('web.passport')}}</option>
                                                <option value="iqama_id">{{__('web.iqama_id')}}</option>
                                                <option value="saudi_national_id">{{__('web.saudi_national_id')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="butns justify-content-center d-flex mt-5">
                                    <a href="javascript:;" class="form-wizard-previous-btn">{{__('web.previous')}}</a>
                                    <a href="javascript:;" class="form-wizard-next-btn butn">{{__('web.next')}}</a>
                                </div>
                            </fieldset>	
                            <fieldset class="wizard-fieldset">
                                <h5 class="wuzard_title fs-2 mb-5">{{__('web.work_info')}}</h5>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="label">{{__('web.rental_payment')}}</label>
                                            <select onchange="rentalSelect(this)" name="rental_payment"  class="form-control form-select">
                                                <option value="company">{{__('web.company')}}</option>
                                                <option value="person">{{__('web.person')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.company_name')}}</label>
                                            <input class="form-control" name="company_name" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.company_phone')}}</label>
                                            <input class="form-control" name="company_phone" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.company_address')}}</label>
                                            <input class="form-control" name="company_address" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="label">{{__('web.job')}}</label>
                                            <input class="form-control" name="job" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group company">
                                            <label class="label">{{__('web.representative_name')}}</label>
                                            <input class="form-control" name="representative_name" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group company">
                                            <label class="label">{{__('web.representative_contact')}}</label>
                                            <input class="form-control" name="representative_contact" type="text" placeholder="{{__('web.write_here')}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="butns justify-content-center d-flex mt-5">
                                    <a href="javascript:;" class="form-wizard-previous-btn">{{__('web.previous')}}</a>
                                    <button type="submit"  class=" butn">{{__('web.submit')}}</button>
                                </div>
                            
                            </fieldset>	
                        </form>
                    </div>
                </div>
            </div>
        </section>

    </main>
    @push('js')
        <script src="{{url('')}}/assets/web/js/actions/quote.js"></script>
        <script>
            const url_compound = {!! json_encode(url(getCurrentLocale().'/compoundSelect')) !!},
                url_unit = {!! json_encode(url(getCurrentLocale().'/unitSelect')) !!},
                adult_count = {!! json_encode(__('web.adult')) !!},
                children_count = {!! json_encode(__('web.children')) !!};
        </script>
    @endpush
@stop