@php
    $form_id = '-' . uniqid();
    $haveBtnCta = $haveBtnCta ?? true;
    $labels = $labels ?? [];
@endphp

@once @push('script')
    <script>
        (function (glob) {
            var handler = function ($cta, callback_then, callback_catch, validate_postal = false, $popup = null) {
                $($cta).off('click').on('click', function (e){
                    doSubmitAddress(
                        e.currentTarget,
                        validate_postal,
                        @json([
                            'msg_fill_required_fields' => __('label.msg_fill_required_fields'),
                            'msg_invalid_postcode' => __('label.msg_invalid_postcode'),
                        ]),
                        $popup
                    ).then(function (response) {
                        callback_then && callback_then(response);
                    }).catch(function (res) {
                        callback_catch && callback_catch(res);
                    });
                });
            };

            var method = 'listenAddressSubmission';
            glob[method] || (glob[method] = handler);
        })(window);
    </script>
@endpush @endonce

<div class="text-left">
    @php
        $cc_list = json_decode(getCountryCallingCodes(), true) ?: [];
        try {
            $acc_country_short = app(\App\Models\BusinessAccounts::class)['country'] ?? null;
        } catch (\Throwable $e) {
            $acc_country_short = null;
        }
        $acc_call_code = null;
        foreach ($cc_list as $c) {
            if (($c['short_name'] ?? null) === $acc_country_short) {
                $acc_call_code = $c['call_code'] ?? null;
                break;
            }
        }
        $cc_seen = [];
        $cc_unique = [];
        foreach ($cc_list as $c) {
            $code = $c['call_code'] ?? '';
            if ($code === '' || isset($cc_seen[$code])) continue;
            $cc_seen[$code] = true;
            $cc_unique[] = $c;
        }
    @endphp

    <div class="form-group input-group-mobile">
        <label for="delivery-mobile-number{{$form_id}}">{{ __('label.mobile_number') }}</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text p-0 bg-white">
                    <select class="delivery-mobile-countrycode py-0 pr-4 border-0 custom-select"
                            id="delivery-mobile-countrycode{{$form_id}}"
                            style="height: 38px; width: auto;"
                            onchange="var g=this.closest('.input-group-mobile'),n=g.querySelector('.delivery-mobile-number'),h=g.querySelector('.delivery-mobile-input');h.value=n.value?(this.value+n.value):'';">
                        @foreach($cc_unique as $cc)
                            <option value="{{ $cc['call_code'] }}" {{ ($acc_call_code === $cc['call_code']) ? 'selected' : '' }}>+{{ $cc['call_code'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <input type="tel" inputmode="numeric" pattern="[0-9]*"
                   class="form-control required delivery-mobile-number"
                   id="delivery-mobile-number{{$form_id}}"
                   placeholder="Mobile Number" aria-describedby="mobileHelp"
                   oninput="this.value=this.value.replace(/[^0-9]/g,'');var g=this.closest('.input-group-mobile'),c=g.querySelector('.delivery-mobile-countrycode'),h=g.querySelector('.delivery-mobile-input');h.value=this.value?((c?c.value:'')+this.value):'';">
        </div>
        {{-- Combined "<country code><number>" value submitted by doSubmitAddress() as `mobile` --}}
        <input type="hidden" class="delivery-mobile-input" id="delivery-mobile-input{{$form_id}}">
    </div>

    <div class="form-group input-group-address">
        <label for="delivery-address-input{{$form_id}}">{{ __('label.address') }}</label>
        <input type="text" class="form-control required delivery-address-input" id="delivery-address-input{{$form_id}}" aria-describedby="addressHelp" placeholder="Address Line 1">
    </div>

    <div class="form-group input-group-address">
        <label for="delivery-address-input2{{$form_id}}">{{ __('label.address_line_2') }}</label>
        <input type="text" class="form-control delivery-address-input2" id="delivery-address-input2{{$form_id}}" aria-describedby="addressHelp" placeholder="Address Line 2">
    </div>

    @php
        $postcode_placeholder = '';
        for ($i=0, $max_digit=config('sys.postcode_digit'); $i<$max; ++$i) {
            $postcode_placeholder .= '0';
        }
    @endphp

    <div class="form-group input-group-post">
        <label for="delivery-postal-input{{$form_id}}">{{ __('label.postal_code') }}</label>
        <input id="delivery-postal-input{{$form_id}}" type="text" inputmode="numeric"
            maxlength="{{ $max_digit ?? '' }}"
            class="delivery-postal-input form-control required"
            placeholder="{{ $postcode_placeholder ?? '' }}"/>
    </div>

    <div class="form-group input-group-state">
        <label for="delivery-state-input{{$form_id}}">{{ __('label.state') }}</label>
        <input type="text" inputmode="text" class="delivery-state-input form-control required" id="delivery-state-input{{$form_id}}" placeholder="State">
    </div>

    <div class="form-group input-group-country">
        <label for="delivery-country-input{{$form_id}}">{{ data_get($labels, 'country', __('label.country')) }}</label>
        <div class="bingo_regform">
            <select class="js-states form-control required delivery-country-input"
                    id="delivery-country-input{{$form_id}}" style="width: 100%"></select>
        </div>
    </div>


</div>

@if($haveBtnCta)
    <!-- CTA BUTTONS -->
    <div class="btn-wrap">
        <a id="{{ $cta_id }}" class='btn btn-primary'>{{ __('label.btn_submit_pending_delivery_address') }}</a>
        <div class="message-container mt-2"><div class="message"></div></div>
    </div>
@endif