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

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

<form id="upgradeCheckoutForm" class="text-start mx-auto" style="max-width: 500px;">
    @csrf

    <div class="mb-3">
        <label for="card_name" class="form-label">Name on Card</label>
        <input type="text" class="form-control" id="card_name" name="card_name" placeholder="John Doe">
        <small class="text-danger error-msg" style="display:none;"></small>
    </div>

    <div class="mb-3">
        <label for="card_number" class="form-label">Card Number</label>
        <input type="text" class="form-control" id="card_number" name="card_number" placeholder="1234 5678 9012 3456"
            maxlength="19">
        <small class="text-danger error-msg" style="display:none;"></small>
    </div>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="expiry" class="form-label">Expiry</label>
            <input type="text" class="form-control" id="expiry" name="expiry" placeholder="MM/YY" maxlength="5">
            <small class="text-danger error-msg" style="display:none;"></small>
        </div>

        <div class="col-md-6 mb-3">
            <label for="cvv" class="form-label">CVV</label>
            <input type="text" class="form-control" id="cvv" name="cvv" placeholder="123" maxlength="4">
            <small class="text-danger error-msg" style="display:none;"></small>
        </div>
    </div>

    <button type="submit" id="payBtn" class="btn btn-success btn-lg w-100">
        <span id="btn-loading" class="spinner-border spinner-border-sm me-2" style="display:none;"></span>
        Upgrade for {{ $accountType->plan_price }} {{ $accountType->currency_code }}
    </button>
</form>

@section('after_scripts')
    @parent
    <script src="{{ $acceptJsUrl }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>

    <script>
        $(function() {
            dayjs.extend(dayjs_plugin_customParseFormat);

            const $form = $("#upgradeCheckoutForm");
            const $btn = $("#payBtn");

            // --- Utility helpers ---
            const showAlert = (title, text, icon = 'error') => {
                Swal.fire({
                    title,
                    text,
                    icon,
                    confirmButtonColor: icon === 'error' ? '#d33' : '#3085d6'
                });
            };

            const toggleProcessing = (show) => {
                if (show) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we process your payment.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                } else Swal.close();
                $btn.prop('disabled', show);
            };

            // --- Input formatting ---
            $("#card_number").on("input", function() {
                const val = $(this).val().replace(/\D/g, '');
                $(this).val(val.match(/.{1,4}/g)?.join(' ') || '');
            });

            $("#expiry").on("input", function() {
                let val = $(this).val().replace(/\D/g, '').slice(0, 4);
                if (val.length > 2) val = val.slice(0, 2) + '/' + val.slice(2);
                $(this).val(val);
            });

            // --- Validation ---
            const validators = {
                card_name: v => v.trim() ? '' : 'Name on card is required.',
                card_number: v => /^\d{13,19}$/.test(v.replace(/\s+/g, '')) ? '' : 'Invalid card number.',
                expiry: v => {
                    if (!/^\d{2}\/\d{2}$/.test(v)) return 'Expiry must be MM/YY.';
                    const [m, y] = v.split('/');
                    const date = dayjs(`${m}/01/20${y}`, 'MM/DD/YYYY', true);
                    if (!date.isValid()) return 'Invalid expiry date.';
                    if (date.endOf('month').isBefore(dayjs())) return 'Card has expired.';
                    return '';
                },
                cvv: v => /^\d{3,4}$/.test(v) ? '' : 'CVV must be 3 or 4 digits.'
            };

            const validateField = ($el) => {
                const error = validators[$el.attr('name')]?.($el.val()) || '';
                $el.siblings('.error-msg').toggle(!!error).text(error);
                return !error;
            };

            const validateAll = () => {
                let valid = true;
                $form.find('input').each(function() {
                    if (!validateField($(this))) valid = false;
                });
                return valid;
            };

            $form.find('input').on('keyup blur change', function() {
                validateField($(this));
            });

            // --- Form Submission ---
            $form.on('submit', function(e) {
                e.preventDefault();
                if (!validateAll()) return;

                if (typeof Accept === "undefined") {
                    showAlert('Error', 'Authorize.Net library failed to load. Please refresh the page.');
                    return;
                }

                toggleProcessing(true);

                const cardNumber = $("#card_number").val().replace(/\s+/g, '');
                const [expMonth, expYear] = $("#expiry").val().split('/');

                const secureData = {
                    authData: {
                        clientKey: "{{ $clientKey }}",
                        apiLoginID: "{{ $apiLoginID }}"
                    },
                    cardData: {
                        cardNumber,
                        month: expMonth,
                        year: "20" + expYear,
                        cardCode: $("#cvv").val(),
                        fullName: $("#card_name").val()
                    }
                };

                Accept.dispatchData(secureData, function(response) {
                    if (response.messages.resultCode === "Error") {
                        Swal.close();
                        showAlert('Error', response.messages.message[0].text);
                        $btn.prop('disabled', false);
                        return;
                    }

                    const fullName = $("#card_name").val().trim();
                    const nameParts = fullName.split(/\s+/);

                    const firstName = nameParts[0] || '';
                    const lastName = nameParts.slice(1).join(' ') || '';

                    const payload = {
                        plan_id: @json($accountType->id),
                        payment_type: "new-card",
                        payment_method_id: 3,
                        dataDescriptor: response.opaqueData.dataDescriptor,
                        dataValue: response.opaqueData.dataValue,
                        firstName: firstName,
                        lastName: lastName,
                        _token: "{{ csrf_token() }}"
                    };

                    $.ajax({
                        url: '/account/upgrade',
                        type: 'POST',
                        data: payload,
                        success: function(res) {
                            Swal.close();
                            Swal.fire({
                                icon: 'success',
                                title: 'Subscription Created!',
                                html: `
                                    <p>${res.message}</p>
                                    <p><strong>Subscription ID: <span style="color:#3085d6;">${res.subscription_id}</span></strong></p>
                                    <p id="swal-timer">Redirecting in <b>6</b> seconds...</p>
                                `,
                                showConfirmButton: false,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                timer: 3000, // 6 seconds
                                didOpen: () => {
                                    const timerElement = Swal
                                        .getHtmlContainer()
                                        .querySelector('#swal-timer');
                                    let timeLeft = 3;
                                    const interval = setInterval(() => {
                                        timeLeft -= 1;
                                        if (timerElement) {
                                            timerElement.innerHTML =
                                                `Redirecting in <b>${timeLeft}</b> seconds...`;
                                        }
                                    }, 1000);

                                    setTimeout(() => {
                                        clearInterval(interval);
                                        window.location.href = '/';
                                    }, 3000);
                                }
                            });
                            $btn.prop('disabled', false);
                        },
                        error: function(xhr) {
                            Swal.close();
                            const errorMsg = xhr.responseJSON?.message ||
                                'Something went wrong. Please try again later.';
                            showAlert('Error!', errorMsg);
                            $btn.prop('disabled', false);
                        }
                    });
                });
            });
        });
    </script>
@endsection