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


    <main>


        <!-- ---------- Start breadcrumb ----------- -->
        @include('web.pages.components.header.header')

        <!-- ---------- profile page ----------- -->
        <section class="profile-pg pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        @include('web.pages.profile.layout.sidebar')
                    </div>
                    <div class="col-lg-9">
                        <div class="adress-tab">
                            <div class="line-title mb-4"> <h5 class="bg-white pe-3"> <i class="far fa-map-marker small me-2"></i> {{__('web.address_details')}} </h5> </div>
                            <div class="adress-steps">
                                <form method="post" id="form" action="{{$action}}" onsubmit="formAction(this)">
                                @if(isset($address))
                                    @method('PUT')
                                @endif
                                @CSRF
                                <div class="step step2">
                                    <div class="adress-form">
                                        <div class="row gx-0">
                                            <div class="col-lg-4">
                                                <input type="hidden" name="latitude" id="latitude" value="{{$address->latitude ?? ''}}">
                                                <input type="hidden" name="longitude" id="longitude" value="{{$address->longitude ?? ''}}">
                                                <div  id="map" class="map-form">
                                                </div>
                                            </div>
                                            <div class="col-lg-8">
                                                <div class="form">
                                                    <div class="form-group">
                                                        <h6> {{__('web.address')}} </h6>
                                                        <input type="text" name="address" value="{{$address->address ?? ''}}" class="form-control" placeholder="">
                                                    </div>
                                                    <div class="form-group">
                                                        <h6> {{__('web.phone')}} </h6>
                                                        <div class="form-inputs d-flex">
                                                            <input type="text" name="phone" value="{{$address->phone ?? ''}}" class="form-control" placeholder="">

                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <h6>{{__('web.country_id')}} </h6>
                                                        <div class="form-inputs d-flex">
                                                            <select onchange="selectCountry(this)" name="country_id" class="form-control" >
                                                                <option value="">{{__('web.select')}} </option>
                                                                @foreach($countries as $row)
                                                                    <option {{ ($address->country_id ?? null) == $row->id  ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                                                @endforeach
                                                            </select>

                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <h6>{{__('web.region_id')}} </h6>
                                                        <div class="form-inputs d-flex">
                                                            <select onchange="selectRegion(this)" name="region_id" id="regions" class="form-control" >
                                                                <option value="">{{__('web.select')}} </option>
                                                                @foreach($regions as $row)
                                                                    <option {{ ($address->region_id ?? null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                                                @endforeach
                                                            </select>

                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <h6>{{__('web.city_id')}} </h6>
                                                        <div class="form-inputs d-flex">
                                                            <select name="city_id" id="cities" class="form-control" >
                                                                <option value="">{{__('web.select')}} </option>
                                                                @foreach($cities as $row)
                                                                    <option {{ ($address->city_id ?? null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                                                @endforeach
                                                            </select>

                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <h6>{{__('web.user_name')}} </h6>
                                                        <input type="text" name="user_name" value="{{$address->user_name ?? ''}}" class="form-control" placeholder="">
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="d-flex align-items-center">
                                                            <h6> {{__('web.delivery_status')}} </h6>
                                                            <div class="select-btns ms-4">
                                                                @foreach($statuses as $row)
                                                                    <div class="form-check form-check-inline">
                                                                        <input class="form-check-input" type="radio" {{ ($address->delivery_status ?? null) == $row ? 'checked' : ''}} value="{{$row}}" name="delivery_status" id="size{{$row}}">
                                                                        <label class="form-check-label" for="size{{$row}}">
                                                                            <i class="fal fa-building me-1"></i> <span class="txt"> {{__('web.addresses_status.'.$row)}} </span>
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" {{ ($address->id ?? null) == $user->address_id ? 'checked' : ''}} name="setDefault" value="1" id="flexCheckDefault">
                                                            <label class="form-check-label" for="flexCheckDefault">
                                                                {{__('web.default_address')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <a onclick="sendCodeAddress(this)" style="cursor: pointer" method="get" action="{{route('web.address.send.code')}}" class="butn col-lg-6 mx-auto d-block mt-4" data-bs-toggle="modal" data-bs-target="#modal-code">
                                                        <span> <i class="far fa-plus me-2"></i> {{__('web.send_code_verify')}} </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    <div class="modal fade modal-verify" id="modal-verify" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content bg-light1">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-6" id="exampleModalLabel">{{__('web.enter_code')}}</h1>
                                                    <button type="button" class="btn-close small" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body p-0">
                                                    <div class="mod-content p-4">

                                                            <div class="title-wrapper mb-4 text-center">
                                                                <div class="text ">{{__('web.code_sent')}} </div>
                                                            </div>

                                                            <div class="code-group">
                                                                <input type="text" name="code_1" class="item codeItem" maxlength="1" placeholder="">
                                                                <input type="text" name="code_2" class="item codeItem" maxlength="1" placeholder="">
                                                                <input type="text" name="code_3" class="item codeItem" maxlength="1" placeholder="">
                                                                <input type="text" name="code_4" class="item codeItem" maxlength="1" placeholder="">
                                                            </div>
                                                            <div class="text text-center mt-3">
                                                                {{__('web.ask_code_after')}}
                                                                <span class="code-countdown cr-blue ms-2"></span>
                                                                <button type="button" onclick="resendCodeAddress(this)" action="{{route('web.address.send.code')}}" class="resend-btn cr-blue text-decoration-underline d-none" id="resend-btn"> {{__('web.resend_code')}} </button>
                                                            </div>
                                                            <div class="button_su w-100 mt-4">
                                                                <span class="su_button_circle bg-dark1 desplode-circle"></span>
                                                                <button type="submit" class="butn button_su_inner bg-blue py-2 w-100">
                                                                    <span class="button_text_container"> {{__('web.sure_address')}} </span>
                                                                </button>
                                                            </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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


    </main>


@endsection
@section('inject_js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
    <script>
        let url_fetch_areas = "{{route('web.fetch.areas')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/relation.js"></script>
    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! isset($address) ? ($address->latitude ?? '21.4989').', '.($address->longitude ?? '39.2509') : '21.4989, 39.2509' !!});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            var div = document.createElement('div');
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latitude").val(function() {
                return  a.latLng.lat().toFixed(4);
            });
            $("#longitude").val(function() {
                return  a.latLng.lng().toFixed(4);
            });
        });

    </script>
@endsection