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

    <header class="kyc_header">
        <div class="full_img img_cover">
            <img src="{{url('')}}/assets/web/images/kyc.png" alt="" class="main_img">
            <h1>  Got a Quote For Unit Lease </h1>
        </div>
    </header>
    <!--  end header  -->

    <main>


        <!-- ---------- kyc_content ----------- -->
        <section class="kyc_pg ">
            <div class="container">
                <form action="{{route('quote.store')}}" onsubmit="formAction(this)" method="post" role="form">
                @CSRF
                    <div class="form_box">
                        <div class="form-wizard">
                            <form action="" method="post" role="form">
                                <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->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" id="num_people">
                                            <div class="form-group">
                                                <label class="label">{{__('web.num_people')}}</label>
                                                <div class="select_num_people">
                                                    <div class="display_num">
                                                        <span id="adults">0</span> {{__('web.adult')}} - <span id="children">0</span> {{__('web.children')}}
                                                    </div>
                                                    <div class="selection_box">
                                                        <div class="item d-flex justify-content-between align-items-center">
                                                            <h6 class="sm_title fw-bold mb-0">{{__('web.adult')}} : </h6>
                                                            <div class="quantity-container">
                                                                <div class="add-more">
                                                                    <span class="qt-minus"><i class="fas fa-minus"></i></span>
                                                                    <span class="qt" id="adult_count">0</span>
                                                                    <span class="qt-plus" data-id='adult'><i class="fas fa-plus"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="item d-flex justify-content-between align-items-center">
                                                            <h6 class="sm_title fw-bold mb-0">{{__('web.children')}} : </h6>
                                                            <div class="quantity-container">
                                                                <div class="add-more">
                                                                    <span class="qt-minus"><i class="fas fa-minus"></i></span>
                                                                    <span class="qt" id="children_count">0</span>
                                                                    <span class="qt-plus" data-id='children'><i class="fas fa-plus"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button class="butn butn_borderd text-center mt-3 mb-2 w-100" type="button" id="submit_num_people">{{__('web.done')}}</button>
                                                    </div>
                                                </div>
                                            
                                        
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="label">{{__('web.contract_date')}}</label>
                                                <input class="form-control" name="date" min="{{date('Y-m-d')}}" 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->image}}"></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->title}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="label">{{__('web.type_id')}}</label>
                                                <select name="type_id" class="form-control form-select">
                                                    <option selected disabled>{{__('web.select')}}</option>
                                                    @foreach($types as $row)
                                                        <option value="{{$row->id}}">{{$row->name}}</option>
                                                    @endforeach
                                                </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>
                </form>
            </div>
        </section>

    </main>
    
    @section('inject_js')
        <script src="{{url('')}}/assets/web/js/actions/quote.js"></script>
        <script>
            const url_fetch_compound = "{{route('fetch.compound')}}",
                url_fetch_unit = "{{route('fetch.unit')}}";
            let max_adult = 0;
            let max_children = 0;
        </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js"></script>
        <script src="{{url('')}}/assets/web/js/custom/kyc.js"></script>
    @endsection
@stop