@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);

            $(function () {
                // 2 slides, one for inputting, the next for confirmation + submission
                $(document)
                    .off('click.addressFormNext')
                    .on('click.addressFormNext', '.btn-address-next', function (e) {
                        var $btn = $(this);
                        var $modalBody = $btn.closest('.modal-body');
                        var $steps = $btn.closest('.address-form-steps');
                        var $step1 = $steps.find('.address-step-1');
                        var $step2 = $steps.find('.address-step-2');

                        var labels = {
                            msg_fill_required_fields: @json(__('label.msg_fill_required_fields')),
                        };

                        var $message = $step1.find('.message');
                        $message.removeClass('text-danger').text('');
                        $modalBody.find('.input-group').removeClass('text-danger');

                        var sendForm = true;
                        $modalBody.find('.required').each(function () {
                            var $comp = $(this);
                            var comp_type = ($comp.prop('type') || '').toLowerCase();

                            // required check (full validation still happens on final submit)
                            if (comp_type === 'checkbox' && !$comp.is(':checked')) {
                                $message.text(labels.msg_fill_required_fields || 'Please fill in the required fields.');
                                sendForm = false;
                                return false;
                            }

                            if (!$.trim($comp.val())) {
                                $message.text(labels.msg_fill_required_fields || 'Please fill in the required fields.');
                                sendForm = false;
                                return false;
                            }
                        });

                        if (!sendForm) {
                            return;
                        }

                        // populate confirmation view
                        var address1 = $.trim($modalBody.find('.delivery-address-input').val());
                        var address2 = $.trim($modalBody.find('.delivery-address-input2').val());
                        var postcode = $.trim($modalBody.find('.delivery-postal-input').val());
                        var state = $.trim($modalBody.find('.delivery-state-input').val());
                        var $country = $modalBody.find('.delivery-country-input');
                        var country = $country.is('select')
                            ? $country.find('option:selected').text()
                            : $country.val();

                        $step2.find('.confirm-address-line-1').text(address1);
                        $step2.find('.confirm-address-line-2').text(address2);
                        $step2.find('.confirm-postcode').text(postcode);
                        $step2.find('.confirm-state').text(state);
                        $step2.find('.confirm-country').text(country);

                        $step1.addClass('d-none');
                        $step2.removeClass('d-none');
                    })

                    // slide 2 -> slide 1 (Back)
                    .off('click.addressFormBack')
                    .on('click.addressFormBack', '.btn-address-back', function () {
                        var $btn = $(this);
                        var $steps = $btn.closest('.address-form-steps');
                        var $step1 = $steps.find('.address-step-1');
                        var $step2 = $steps.find('.address-step-2');

                        $step2.addClass('d-none');
                        $step1.removeClass('d-none');
                    });
            });
        })(window);
    </script>
@endpush @endonce

<div class="address-form-steps">
    {{-- STEP 1: input fields --}}
    <div class="address-step address-step-1">
        <div class="text-left">

            <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)
            <div class="btn-wrap">
                <button type="button" class="btn btn-primary btn-address-next">
                    Next
                </button>
                <div class="message-container mt-2"><div class="message"></div></div>
            </div>
        @endif
    </div>

    {{-- STEP 2: confirmation + final submit --}}
    <div class="address-step address-step-2 d-none">
        <div class="text-center">
            <p><strong>{{ __('label.address') }}:</strong> <span class="confirm-address-line-1" style="font-weight: bold;"></span></p>
            <p><strong>{{ __('label.address_line_2') }}:</strong> <span class="confirm-address-line-2" style="font-weight: bold;"></span></p>
            <p><strong>{{ __('label.postal_code') }}:</strong> <span class="confirm-postcode" style="font-weight: bold;"></span></p>
            <p><strong>{{ __('label.state') }}:</strong> <span class="confirm-state" style="font-weight: bold;"></span></p>
            <p><strong>{{ data_get($labels, 'country', __('label.country')) }}:</strong> <span class="confirm-country" style="font-weight: bold;"></span></p>
        </div>

        @if($haveBtnCta)
            <!-- CTA BUTTONS -->
            <div class="btn-wrap">
                <a id="btn-address-back" class="btn btn-primary btn-address-back mb-2 mt-2">
                    Back
                </a>
                <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
    </div>
</div>