@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_nric = false, $popup = null) {
            $($cta).off('click').on('click', function (e){
                doSubmitTransferDetails(
                    e.currentTarget,
                    validate_nric,
                    @json([
                        'msg_fill_required_fields' => __('label.msg_fill_required_fields'),
                        'msg_invalid_nric' => __('label.msg_invalid_nric'),
                    ]),
                    $popup
                ).then(function (response) {
                    callback_then && callback_then(response);
                }).catch(function (res) {
                    callback_catch && callback_catch(res);
                });
            });
        };

        var method = 'listenTransferDetailsSubmission';
        glob[method] || (glob[method] = handler);
        })(window);

        // clear all validation messages
        const clearMessages = () => {
            document.querySelectorAll('.message').forEach((messageContainer) => {
                messageContainer.textContent = '';
                messageContainer.classList.remove('text-danger');
            });
        };

        // show input-div by default first
        const toggleView = (showInput = true) => {
            document.querySelector('#input-div').style.display = showInput ? 'block' : 'none';
            document.querySelector('#confirmation-div').style.display = showInput ? 'none' : 'block';
            clearMessages();
        };

        document.addEventListener('DOMContentLoaded', () => {
            toggleView(true);

            document.querySelector('#proceed-to-confirm').addEventListener('click', () => {
                const transferNumber = document.querySelector('#transfer-number-input{{ $form_id }}').value;
                const transferName = document.querySelector('#transfer-name-input{{ $form_id }}').value;
                const transferNric = document.querySelector('#transfer-nric-input{{ $form_id }}').value;

                if (transferNumber && transferName && transferNric) {
                    document.querySelector('#confirm-transfer-number').textContent = transferNumber;
                    document.querySelector('#confirm-transfer-name').textContent = transferName;
                    document.querySelector('#confirm-transfer-nric').textContent = transferNric;

                    toggleView(false);
                } else {
                    const $inputMessage = document.querySelector('#input-div .message');
                    $inputMessage.textContent = "{{ __('label.msg_fill_required_fields') }}";
                    $inputMessage.classList.add('text-danger');
                }
            });

            document.querySelector('#previous-button').addEventListener('click', () => {
                toggleView(true);
            });
        });
    </script>
@endpush @endonce

<div id="input-div" class="text-left">
    <h4 style="text-align: center;">{{ __('heading.fund_transfer_details_title') }}</h4>
    <p style="text-align: center;"><b>{{ __('heading.fund_transfer_details_description') }}</b></p>

    <div class="form-group input-group-transfer-number">
        <label for="transfer-number-input{{$form_id}}">{{ __('heading.transfer_number') }}</label>
        <input type="text" class="form-control required transfer-number-input" id="transfer-number-input{{$form_id}}" aria-describedby="transfernumbersHelp" placeholder="{{ __('label.placeholder_transfer_number') }}">
    </div>

    <div class="form-group input-group-transfer-name">
        <label for="transfer-name-input{{$form_id}}">{{ __('heading.transfer_name') }}</label>
        <input type="text" class="form-control transfer-name-input" id="transfer-name-input{{$form_id}}" aria-describedby="transfernameHelp" placeholder="{{ __('label.placeholder_transfer_name') }}">
    </div>

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

    <div class="form-group input-group-nric">
        <label for="transfer-nric{{$form_id}}">{{ __('heading.transfer_nric') }}</label>
        <input id="transfer-nric-input{{$form_id}}" type="text"
               maxlength="{{ $max_digit ?? '' }}"
               class="transfer-nric-input form-control required"
               placeholder="{{ $transfer_nric_placeholder ?? '' }}"/>
    </div>

    <div class="btn-wrap" style="text-align: center; margin: 10px;">
        <button id="proceed-to-confirm" class="btn btn-primary">{{ __('label.transfer_detail_proceed_btn') }}</button>
    </div>

    <div class="message-container mt-2" style="text-align: center; margin:10px;"><div class="message"></div></div>

    <p style="text-align: center;">{!! __('label.fund_transfer_details_terms') !!}<span id="confirm-transfer-details-terms"></span></p>

</div>

<div id="confirmation-div" class="text-left">
    <h4 style="text-align: center;">{{ __('heading.transfer_details_confirmation_title') }}</h4>
    <p style="text-align: center;"><b>{{ __('heading.transfer_details_confirmation_desc') }}</b></p>

    <div class="confirmation-content" style="padding: 20px 30px 10px 30px;">
    <p><b>{{ __('label.transfer_number_confirmation') }}</b> <span id="confirm-transfer-number"></span></p>
    <p><b>{{ __('label.transfer_name_confirmation') }}</b> <span id="confirm-transfer-name"></span></p>
    <p><b>{{ __('label.transfer_nric_confirmation') }}</b> <span id="confirm-transfer-nric"></span></p>
    </div>

    @if($haveBtnCta)
        <!-- CTA BUTTONS -->
{{--        <div class="btn-wrap" style="display: flex; justify-content: center;">--}}
        <div class="btn-wrap">
            <button id="{{ $cta_id }}" class='btn btn-primary'>{{ __('label.btn_submit_fund_transfer_details') }}</button>
        </div>
    @endif

    <div class="previous-button-container" style="text-align: center; margin-bottom: 10px; margin-top: 10px;">
        <button id="previous-button" class="btn btn-primary">{{ __('label.transfer_details_previous_btn') }}</button>
    </div>

    <div class="message-container mt-2" style="text-align: center;"><div class="message"></div></div>

    <p style="text-align: center; margin-top: 20px;">{!! __('label.fund_transfer_details_confirm_terms') !!}<span id="confirm-transfer-details-terms"></span></p>
</div>