@csrf
	<input type="hidden" name="accountId" value="{{env('accountId')}}" >
	<input type="hidden" name="pageType" value="{{isset($pageType) ? $pageType : 'address'}}" >

    @php
		$adreess_title = isset($address) ? explode(',',$address->customer_addresses_address) : [] ;

        $adreess_title_array = [];
        if(  isset($adreess_title) && sizeof($adreess_title) > 0){
            foreach($adreess_title as $key => $value){
                $adreess_title_array[$key] = $value ;
            }
        }

 	@endphp
    <div class="background_2 p-md-3 row mb-3">

        <div class=" col-md-12 col-12 order-1">
            <div class="row ">

                <div class="form-group col-md-6 col-12 row p-0 m-0">
                    <div class="col-md-12 col-form-label">
                        <div class="form-floating">
                            <input type="text" class="form-control" value="{{old('address_name',isset($address) ? $address->customer_addresses_name : '')}}" id="address_name" name="address_name"  placeholder="* {{__('lang.addressName')}}" required data-error-required="{{ __('validation.required', ['attribute'=>__('validation.attributes.address_name')]) }}">
                            <label for="address_name">* {{__('lang.addressName')}}</label>
                        </div>
                    </div>
                </div>

                <div class="form-group col-md-6 col-12 row p-0 m-0">
                    <div class="col-md-12 col-form-label" id="phone_div" dir="ltr">
                        <div class="input-group position-relative">
                            {{-- {{ $address->customer_addresses_country_code }} --}}
                            <input type="hidden" name="countryCode" id="countryCode" value="{{old('countryCode',isset($address) ? $address->customer_addresses_country_code :  session()->get('customer')->customers_country_code)}}">
                            <input type="hidden" name="phone" id="full_phone">
                            <input type="tel" class="form-control" value="{{old('countryCode',isset($address) ? $address->customer_addresses_country_code :  session()->get('customer')->customers_country_code)}}{{old('address_phone',isset($address) ? $address->customer_addresses_phone :  session()->get('customer')->customers_phone)}}" id="address_phone" name="address_phone"  placeholder="* {{__('lang.phone')}}" onkeyup="checkPhone()" required data-error-required="{{ __('validation.required', ['attribute'=>__('lang.phone')]) }}">
                             {{-- we comment this to not show verify code input To make things easier for the customer --}}
                            {{-- @if($account && $account->accounts_auth_type == 'phone')
                                <span class="input-group-text d-none main-btn cursor-pointer" id="verify_btn_send" onClick="sendverifyCodePhone()">{{ __('lang.verify') }}</span>
                            @endif --}}
                        </div>
                    </div>
                    <span id="valid-msg" class="hidden text-success">✓ {{ __('lang.Valid') }}</span>
                    <span id="error-msg" class="hidden text-danger"></span>
                </div>
                {{-- we comment this to not show verify code input To make things easier for the customer --}}
                {{-- @if($account && $account->accounts_auth_type == 'phone')
                <div id="activated_phone">
                    @if(isset($address))
                    <input type="hidden" value="1" name="{{ $address->customer_addresses_country_code }}{{ $address->customer_addresses_phone }}" id="{{ $address->customer_addresses_country_code }}{{ $address->customer_addresses_phone }}">
                    @endif
                    <input type="hidden" value="1" name="{{session()->get('customer')->customers_country_code. session()->get('customer')->customers_phone }}" id="{{ session()->get('customer')->customers_country_code .session()->get('customer')->customers_phone }}">
                </div>
                <div class="form-group col-md-12 col-12 row p-0 m-0 d-none" id="verify_code_div">
                    <div class="col-md-12 col-form-label">
                        <div class="input-group col-md-12 col-form-label"  id="code-dev">
                            <input type="text" class="form-control " value="" id="verify_code" name="verify_code"  placeholder="* {{__('lang.verify_code')}}" >
                            <span class="input-group-text main-btn cursor-pointer" id="verify_btn_check" onClick="verifyCodePhone()">{{ __('lang.check_code') }}</span>
                        </div>
                    </div>
                </div>
                @endif
            </div> --}}
        </div>
        <div class=" col-md-12 col-12 order-2">
            <div class="form-group form-float">
                <span style="color: black ">
                    <label for="location" class="font-20 fb-700 text_1">* {{ __('lang.client_address_location') }}</label>
                    <button class="btn btn-sm text_2 background_1 float-end" onClick="currentLocation()" type="button"> <i class="fas fa-dot-circle"></i>  {{ __('lang.currentLocation')}}</button>
                </span>
                {{-- <input id="pac-input" class="controls form-control addproduct-input mt-2 " placeholder= "{{__('lang.search')}}"> --}}
                <div class="col-md-12" id="map" style="width:100%;height:400px;"></div>
                <input type="hidden" name="address_gps" id="address_gps" value="" required data-error-required="{{ __('validation.required', ['attribute'=>__('validation.attributes.address_gps')]) }}" >
                <input type="hidden" name="lng" id="lng" value="" >
                <input type="hidden" name="lat" id="lat" value="" >

            </div><br/>
        </div>
        <div class=" col-md-12 col-12 order-3">
            <div class="row ">

                @if(isset($addresses_keys) && sizeof($addresses_keys) > 0)
                    @foreach($addresses_keys as $key => $value)
                        @if($value == 'country_code' )

                        <div class="form-group col-md-6 col-12 row p-0 m-0 ">
                            <div class="col-md-12 col-form-label">
                                @php
                                    if($value == 'country_code'){
                                        $value = 'country_iso_code';
                                    }
                                    $selectedCountry = old($value, isset($address) && isset($address->{'customer_addresses_' . $value}) ? $address->{'customer_addresses_' . $value} : ($adreess_title_array[$key] ?? ''));
                                @endphp

                                <select name="country_code" id="country_code" class="form-control country-select2" required data-error-required="{{ __('validation.required', ['attribute'=>__('validation.attributes.country_code')]) }}">
                                    @if(!empty($selectedCountry) && strlen($selectedCountry) == 2)
                                        <option value="{{ $selectedCountry }}" selected>{{ $selectedCountry }}</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        @else
                        <div class="form-group col-md-6 col-12 row p-0 m-0 ">
                            <div class="col-md-12 col-form-label">
                                <div class="form-floating">
                                    <input type="text" class="form-control" value="{{old($value,isset($address) && isset($address->{'customer_addresses_' . $value}) ? $address->{'customer_addresses_' . $value} : $adreess_title_array[$key] ?? '' ) }}" id="address_{{$value}}" name="{{$value}}"  placeholder="{{ !in_array($value,['floor','apartment_number']) ? '*' : '' }} {{ __('lang.'.$value)}}" {{ !in_array($value,['floor','apartment_number']) ? 'required' : ''}} @if(!in_array($value,['floor','apartment_number'])) data-error-required="{{ __('validation.required', ['attribute'=>__('validation.attributes.'.$value)]) }}" @endif>
                                    <label for="address_{{$value}}">{{ !in_array($value,['floor','apartment_number']) ? '*' : '' }} {{ __('lang.'.$value)}}</label>
                                </div>
                            </div>
                        </div>
                        @endif
                    @endforeach
                @endif
                <div class="form-group col-md-12 col-12 row   p-0 m-0">
                    <div class="col-md-12 col-form-label">
                        <div class="form-floating">
                            <input type="text" class="form-control" value="{{old('address_notes',isset($address) ? $address->customer_addresses_notes : '')}}" id="address_notes" name="address_notes"  placeholder="{{__('lang.notes')}}">
                            <label for="address_notes">{{__('lang.notes')}}</label>
                        </div>
                        <input type="hidden" class="form-control  " value="{{old('address_title',isset($address) ? $address->customer_addresses_address : '')}}" id="address_title" name="address_title"  placeholder="{{__('lang.address')}}">
                    </div>
                </div>

                <div class="form-group col-md-6 col-12 row p-0 m-0 ">
                    <label class="col-md-7 font-15 col-form-label">{{ __('lang.makeDefaultAddress') }}<span class="text-danger"> *</span></label>
                    <div class="col-md-5 col-form-label">
                        @php
                        $default = old('address_default', isset($address) ? $address->customer_addresses_default : 1);
                        @endphp
                        <div class="form-check form-check-inline mx-3">
                        <input class="form-check-input" id="yes" type="radio" value="1" name="address_default" {{ $default == 1 ? 'checked' : '' }}>
                        <label class="form-check-label p-0" for="yes">{{ __('lang.yes') }}</label>
                        </div>
                        <div class="form-check form-check-inline   mx-3">
                        <input class="form-check-input " id="no" type="radio" value="0" name="address_default" {{ $default == 0 ? 'checked' : '' }}>
                        <label class="form-check-label p-0" for="no">{{ __('lang.no') }}</label>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 text-end order-3" >
            <button type="button" onClick="submitAddressForm()"  class="btn py-2 px-md-5 px-4 main-btn">{{__('lang.save')}}</button>
            @if(isset($pageType) && $pageType == 'cart')
            <a aria-label="go to delivery information page" href="{{ route('cart') }}" class="btn light-btn px-md-5 px-4 py-2">{{ __('lang.back') }}</a>
            @endif
        </div>
    </div>


@include('includes.intltel-config', ['coutryCodeField' => 'countryCode'])

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container{ width:100% !important; }
    .input-group{ height: fit-content !important; }

    #phone_div {
        position: relative;
    }
    #phone_div .iti {
        width: 100%;
    }
    #phone_div input[type="tel"] {
        width: 100%;
        padding-right: 140px;
    }
    #phone_div .iti input[type="tel"].is-invalid,
    #phone_div .iti input[type="tel"].is-valid{
        background-image: none !important;
        z-index: 0 !important;
    }
    #verify_btn_send {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex ;
        align-items: center;
        z-index: 2;
        white-space: nowrap;
        width: auto;
        height: auto;
    }
    .form-floating>.form-control, .form-floating>.form-select {
        height: calc(2.9rem + 2px);
        line-height: 1.25;
    }
    .form-floating>.form-control {
        padding: .375rem .75rem;
    }
</style>
@endpush

@push('js')
    <script>
        var verifyCodeSentForPhone = null;

        function buildFullPhoneKey(rawPhone){
            try{
                var phone = (rawPhone || '').toString().trim();
                if(!phone) return '';
                @if($account->accounts_multiple_countries)
                    return (document.querySelector('#countryCode') ? document.querySelector('#countryCode').value : '') + phone;
                @else
                    return "{{$account->accounts_country_code}}" + phone;
                @endif
            }catch(e){
                return '';
            }
        }

        function sendverifyCodePhone(){
            var phoneInput = document.querySelector('#address_phone');
            phoneNumber = phoneInput ? phoneInput.value : '';
            var isValidIntl = true;
            if (window.itiPhoneInput && typeof window.itiPhoneInput.isValidNumber === 'function') {
                isValidIntl = window.itiPhoneInput.isValidNumber();
            }
            validSmg = document.querySelector('#valid-msg');
            if(validSmg != undefined){ validSmg.remove();}
            // errorMsg = document.querySelector('#error-msg');
            // if(errorMsg != undefined){ errorMsg.remove();}

            if(phoneNumber && isValidIntl && phoneIsValid(phoneNumber)){
                var verifyBtnSend = document.getElementById('verify_btn_send');
                if (verifyBtnSend) {
                    verifyBtnSend.disabled = true;
                    verifyBtnSend.classList.add('disabled');
                    verifyBtnSend.innerHTML = `<img src="{{ asset('images/loading1.gif') }}" width="25" class="loadingIMG" alt="loading">`;
                }
                @if($account->accounts_multiple_countries)
                    phoneNumber = document.querySelector('#countryCode').value + phoneNumber ;
                @else
                    phoneNumber = "{{$account->accounts_country_code}}"+phoneNumber ;
                @endif
                var request = new XMLHttpRequest();

                url = "