@extends('front.layout.master')
@section('content')
    <!-- Start Order -->

    <div class="order mt-5 mb-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="right col-lg-7 mb-lg-0 mb-5">
                    <form action="{{route('added-address')}}" method="post" data-parsley-validate="">
                        @csrf
                        @method('post')
                        <section class="section">
                            <h5 class="mb-4"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('front.detailsUsers')</h5>
                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="name">@lang('front.name')</label>
                            <div class="input-group mb-3" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <i class="fas fa-user"></i>
                                <input id="name" type="text" name="user_name" class="form-control" value="">
                            </div>
                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="number">@lang('front.phone')</label>
                            <div class="input-group mb-3" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <i class="fas fa-phone-alt"></i>
                                <input id="number" type="number" class="form-control" name="phone" value="">
                            </div>


                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="number">@lang('front.secondphone')</label>
                            <div class="input-group mb-3" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <i class="fas fa-phone-alt"></i>
                                <input id="number" type="number" class="form-control" name="secondphone" value="">
                            </div>



                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="mail">@lang('front.email')</label>
                            <div class="input-group mb-3" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <i class="fas fa-envelope"></i>
                                <input id="mail" type="email" class="form-control" name="email" value="">
                            </div>

                            <div class="form-group">
                                <label for="exampleFormControlSelect1" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.countries')</label>
                                <select data-aos-delay="100" data-aos-duration="800" name="country_id"  data-url="{{route('clients-get-regions')}}" data-slug="country" data-aos="zoom-out-up" class="form-control mb-4" id="country_id">
                                    <option value=" ">Choose</option>
                                    @foreach(\App\Models\Country::where('status',1)->get() as $country)
                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                    @endforeach
                                </select>
                            </div>



                            <div class="form-group" style="display: none" id="governments_div">
                                <label for="exampleFormControlSelect1" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.governments')</label>
                                <select data-aos-delay="100" data-aos-duration="800"  name="governments_id" data-url="{{route('clients-get-regions')}}"  data-slug="governments" data-aos="zoom-out-up" class="form-control mb-4" id="government_id">
                                    <option value=" ">Choose</option>



                                </select>
                            </div>

                            <div id="civile_id" style="display: none">
                                <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="id" class="lbl_id">@lang('front.civilId')</label>
                                <div class="input-group mb-3" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                    <i class="fas fa-id-card"></i>
                                    <input id="id" type="number" class="form-control" name="civil_id" value="">
                                </div>
                            </div>

                        </section>
                        <section>
                            <h5 class="mb-4"data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('front.shippingAddress')</h5>

                            <div class="form-group" style="display: none" id="region_div">
                                <label for="exampleFormControlSelect2" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.regions')</label>
                                <select data-aos-delay="100" data-aos-duration="800" id="region_id" name="region_id"data-aos="zoom-out-up" class="form-control mb-4" >

                                </select>
                            </div>
                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_1">@lang('admin.block')</label>
                            <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <input id="street_1" type="text" class="form-control" placeholder="@lang('admin.block')"  name="block">
                            </div>
                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_2">@lang('admin.street_name')</label>
                            <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <input id="street_2" type="text" class="form-control" placeholder="@lang('admin.street_name')" name="Street_number">
                            </div>
                            <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_3">@lang('admin.gade')</label>
                            <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                <input id="street_3" type="text" class="form-control" placeholder="@lang('admin.gade')" name="gada">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="numm">@lang('admin.building') <span>(@lang('front.chooses'))</span></label>
                                    <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                        <input id="numm" type="text" class="form-control" placeholder="@lang('admin.building') " name="house_number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="home">@lang('admin.floor')  <span>(@lang('front.chooses'))</span></label>
                                    <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                        <input id="home" type="text" class="form-control" placeholder="@lang('admin.floor') " name="floor_number">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <textarea class="form-control w-100" id="exampleFormControlTextarea1" name="address" placeholder="@lang('front.addressDetials')" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up"></textarea>
                            </div>


                            <div class="form-group">
                                <textarea class="form-control w-100" id="exampleFormControlTextarea1" name="note" placeholder="@lang('front.note')" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up"></textarea>
                            </div>
                        </section>
                        <button class="submit" type="submit" data-aos-delay="100" data-aos-duration="800" data-aos="flip-down">@lang('front.save')</button>
                    </form>
                </div>
                <div class="col-lg-5">
                    <div class="left">
                        <div class="deliver d-flex justify-content-between" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                            <div>                    @lang('front.shippingCost')
                            </div>
                            <div>
                                0.00
                                @lang{{session('countryCode') != null ? session('countryCode') : trans('front.KD') }}
                            </div>
                        </div>
                        <div class="total d-flex justify-content-between" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                            <div>                    @lang('front.total')
                            </div>
                            <div>{{$coupons != false ? number_format($tot - $coupons->price + $coupons->discountprice , 3) : number_format($tot , 3) }}<span>{{session('countryCode') != null ? session('countryCode') : trans('front.KD') }}</span></div>

                        </div>
                        <a href="{{route('get-confirm')}}" class="pay" data-aos-delay="100" data-aos-duration="800" data-aos="flip-down">@lang('front.confirm')</a>
                        <ul class="mt-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                            <li><a href="#">@lang('front.terms')</a></li>
                            <hr>
{{--                            <li><a href="#">الاطلاع علي سياسة البيع</a></li>--}}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Order -->
    <!-- -------------------------------------------- -->
@endsection
@push('js')
    <script>
        $('body').on('change','#country_id',function(e){
            e.preventDefault();
            var id = $(this).val();
            var url = $(this).data('url');
            var lang = $(this).data('lang');
            var slug = $(this).data('slug');


            if(id  != 1){
                $('#civile_id').show();
            }else{
                $('#civile_id').hide();

            }
            // alert(url);
            $.ajax({
                url: url,
                method: "get",
                data: {
                    id:id,
                    slug:slug,
                },
                context:this,
                dataType: 'json',
                //
                // cache       : false,
                // contentType : false,
                // processData : false,

                success: function (response) {
                    // console.log(response);
                    $('#governments_div').hide();
                    $('#government_id').empty();

                    $('#region_div').hide();
                    $('#region_id').empty();

                    if(response.status == false){

                        toastr.warning("لايوجد  محافظات");

                    }else {
                        if (response.status == true) {


                                $('#governments_div').show();
                                $('#government_id').empty();
                                $('#government_id').append(`<option value=" ">اختر محافظتك</option>`);
                                $.each(response.data,function (key,value) {

                                    $('#government_id').append(`
                                      <option value="${value.id}">${value.name}</option>
                                        `);
                                });



                        }

                    }

                    // window.location.reload();
                },

            });


        });

        $('body').on('change','#government_id',function(e){
            e.preventDefault();
            var id = $(this).val();
            var url = $(this).data('url');
            var lang = $(this).data('lang');
            var slug = $(this).data('slug');

            // alert(url);
            $.ajax({
                url: url,
                method: "get",
                data: {
                    id:id,
                    slug:slug,
                },
                context:this,
                dataType: 'json',
                //
                // cache       : false,
                // contentType : false,
                // processData : false,

                success: function (response) {
                    // console.log(response);
                    $('#region_div').hide();
                    $('#region_id').empty();
                    if(response.status == false){
                        toastr.warning("لايوجد  مناطق");

                    }else {
                        if (response.status == true) {



                                $('#region_div').show();
                                $('#region_id').empty();
                                $('#region_id').append(`<option value=" ">اختر منطقتك</option>`);
                                $.each(response.data,function (key,value) {

                                    $('#region_id').append(`
                                      <option value="${value.id}">${value.name}</option>
                                        `);
                                });



                        }

                    }

                    // window.location.reload();
                },

            });


        });





        $('body').on('click','.others',function(e){
            // e.preventDefault();
            var val = $(this).val();

            if(val == "flat"){
                $('#showed').show();
            }

            if(val == "office"){
                $('#showed').show();

            }

            if(val == "home"){
                $('#showed').hide();

            }
        })

        $("body").on('click','.custom-map-control-button',function (e){
            e.preventDefault();
            // alert('asd');
        })

    </script>
@endpush