@php
    $Anet = \App\Helpers\Wallet\WalletHelper::getAnetClientKeyLoginId();
    $apiLoginID = $Anet['AUTHORIZENET_API_LOGIN_ID'];
    $clientKey = $Anet['AUTHORIZENET_CLIENT_KEY'];
    $authorizeNetMode = $Anet['AUTHORIZENET_MODE'];

    $acceptJsUrl =
        $authorizeNetMode === 'sandbox'
            ? 'https://jstest.authorize.net/v1/Accept.js'
            : 'https://js.authorize.net/v1/Accept.js';
@endphp

<div class="container mt-3 payment-plugin">
    <div class="row">
        <div class="col-xl-12 text-center">
            <img class="img-fluid" src="{{ url('images/authorizenet/payment.png') }}"
                title="{{ trans('authorizenet::messages.Payment with Authorize.Net') }}">
        </div>
    </div>

    <div class="row mb-3 g-3">
        {{-- First Name --}}
        <div class="col-md-4">
            <label for="first_name">First Name <sup>*</sup></label>
            <input id="first_name" name="first_name" class="form-control" placeholder="First Name" autocomplete="off">
            <small class="text-danger error-msg d-block" style="min-height:18px;"></small>
        </div>

        {{-- Last Name --}}
        <div class="col-md-4">
            <label for="last_name">Last Name <sup>*</sup></label>
            <input id="last_name" name="last_name" class="form-control" placeholder="Last Name">
            <small class="text-danger error-msg d-block" style="min-height:18px;"></small>
        </div>

        {{-- Card Number --}}
        <div class="col-md-4">
            <label for="card_number">Card Number <sup>*</sup></label>
            <input id="card_number" name="card_number" class="form-control" maxlength="19"
                placeholder="XXXX XXXX XXXX XXXX">
            <small class="text-danger error-msg d-block" style="min-height:18px;"></small>
        </div>

        {{-- Expiration --}}
        <div class="col-md-3">
            <label for="exp_date">Exp. Date <sup>*</sup></label>
            <input id="exp_date" name="exp_date" type="month" class="form-control" value="{{ date('Y-m') }}"
                min="{{ date('Y-m') }}">
            <small class="text-danger error-msg d-block" style="min-height:18px;"></small>
        </div>

        {{-- CVV --}}
        <div class="col-md-3">
            <label for="cvv">CVV <sup>*</sup></label>
            <input id="cvv" name="cvv" class="form-control" maxlength="4" placeholder="CVV">
            <small class="text-danger error-msg d-block" style="min-height:18px;"></small>
        </div>
        <div class="col-md-3 d-flex justify-content-between">
            {{-- Save For Future --}}
            <div class="col-md-12 d-flex flex-column justify-content-center">
                <div class="form-check">
                    <input name="save_for_future" type="checkbox" value="1" class="form-check-input"
                        id="save_for_future">
                    <label class="form-check-label fw-normal" for="save_for_future">
                        Save For Future
                    </label>
                </div>
            </div>

            {{-- Recurring Payment --}}
            <div class="col-md-12 d-flex flex-column justify-content-center">
                <div class="form-check">
                    <input name="recurring_payment" type="checkbox" value="1" class="form-check-input"
                        id="recurring_payment">
                    <label class="form-check-label fw-normal" for="recurring_payment">
                        Recurring Payment
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

@section('after_scripts')
    @parent
    <script src="{{ $acceptJsUrl }}" charset="utf-8"></script>
    <script>
        $(document).ready(function() {

            const fieldMap = {
                "E_WC_05": "card_number",
                "E_WC_06": "exp_date",
                "E_WC_07": "cvv",
                "E_WC_04": "first_name"
            };

            // --- Format Card Number ---
            $("input[name='card_number']").on("input", function() {
                const val = $(this).val().replace(/\D/g, '');
                const formatted = val.match(/.{1,4}/g);
                $(this).val(formatted ? formatted.join(' ') : '');
            });

            // --- Validate Single Field ---
            function validateField(el) {
                const name = el.attr('name');
                let val = el.val().trim();
                let errorMsg = '';
                let valid = true;

                if (name === 'card_number') val = val.replace(/\s+/g, '');

                switch (name) {
                    case 'first_name':
                        if (!val) {
                            valid = false;
                            errorMsg = 'First name is required.';
                        }
                        break;
                    case 'card_number':
                        if (!val) {
                            valid = false;
                            errorMsg = 'Card number is required.';
                        } else if (!/^\d{13,19}$/.test(val)) {
                            valid = false;
                            errorMsg = 'Card number must be 13-19 digits.';
                        }
                        break;
                    case 'exp_date':
                        if (!val) {
                            valid = false;
                            errorMsg = 'Expiration date is required.';
                        }
                        break;
                    case 'cvv':
                        if (!val) {
                            valid = false;
                            errorMsg = 'CVV is required.';
                        } else if (!/^\d{3,4}$/.test(val)) {
                            valid = false;
                            errorMsg = 'CVV must be 3-4 digits.';
                        }
                        break;
                }

                const errorEl = el.siblings('.error-msg');
                errorEl.toggle(!valid).text(errorMsg);
                return valid;
            }

            // --- Validate All Fields ---
            function validateAll() {
                let allValid = true;
                $("input[type!='checkbox']").each(function() {
                    if (!validateField($(this))) allValid = false;
                });
                return allValid;
            }

            // --- Real-time Field Validation ---
            $("input[type!='checkbox']").on('keyup blur change', function() {
                validateField($(this));
            });
            const btnLoading = $('#btn-loading');
            // --- Handle Payment ---
            $("#payBtn").on('click', function() {
                handlePayAction();
            });

            window.handlePayAction = function() {
                if (!validateAll()) return;

                const btnLoading = $('#btn-loading');
                const $btn = btnLoading.closest('button');

                $btn.prop('disabled', true);
                btnLoading.show();

                const [year, month] = $("input[name='exp_date']").val().split("-");
                const cardData = {
                    cardNumber: $("input[name='card_number']").val().replace(/\s+/g, ''),
                    month,
                    year,
                    cardCode: $("input[name='cvv']").val(),
                    fullName: `${$("input[name='first_name']").val()} ${$("input[name='last_name']").val()}`
                };
                const authData = {
                    clientKey: @json($clientKey),
                    apiLoginID: @json($apiLoginID),
                };

                Accept.dispatchData({
                    authData,
                    cardData
                }, function(response) {
                    $(".error-msg").hide();

                    if (response.messages.resultCode === "Error") {
                        response.messages.message.forEach(msg => {
                            const fieldName = fieldMap[msg.code];
                            if (fieldName) {
                                $(`input[name='${fieldName}']`).siblings('.error-msg').text(
                                    msg.text).show();
                            } else {
                                Swal.fire({
                                    title: 'Notice',
                                    text: msg.text,
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                        $btn.prop('disabled', false);
                        btnLoading.hide();
                        return;
                    }

                    const opaqueData = response.opaqueData.dataValue;
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = window.location.href;

                    // --- CSRF Token ---
                    const token = $('meta[name="csrf-token"]').attr('content');
                    if (token) form.appendChild(new Input('hidden', '_token', token));

                    // --- Add hidden inputs ---
                    form.appendChild(new Input('hidden', 'opaqueDataValue', opaqueData));
                    appendIfExists(form, 'payment_type', 'new-card');
                    appendIfExists(form, 'package_id', $("input[name=package_id]:checked").val());
                    appendIfExists(form, 'first_name', $("input[name='first_name']").val());
                    appendIfExists(form, 'last_name', $("input[name='last_name']").val());
                    appendIfExists(form, 'payment_method_id', $("select[name='payment_method_id']")
                        .val());
                    appendIfExists(form, 'g-recaptcha-response', $('#g-recaptcha-response').val());

                    // --- Add checkboxes ---
                    appendIfExists(form, 'save_for_future', $("input[name='save_for_future']").is(
                        ':checked') ? 1 : 0);
                    appendIfExists(form, 'recurring_payment', $("input[name='recurring_payment']")
                        .is(':checked') ? 1 : 0);

                    document.body.appendChild(form);
                    form.submit();
                });
            }

            // --- Helper Functions ---
            function Input(type, name, value) {
                const input = document.createElement('input');
                input.type = type;
                input.name = name;
                input.value = value;
                return input;
            }

            function appendIfExists(form, name, value) {
                if (value !== undefined && value !== null) form.appendChild(new Input('hidden', name, value));
            }

        });
    </script>
@endsection