@if (EcommerceHelper::isValidToProcessCheckout())
    <button id="checkoutButton" class="btn payment-checkout-btn w-100 mb-2 p-2" data-processing-text="Processing..."
            type="button" onclick="handleCheckoutButtonClick()" style="font-size: 16px; font-weight: 600;">
        {{ __('Place Order') }}
    </button>
@else
    {{-- This button is shown if checkout conditions are not met (e.g., cart is empty) --}}
    <button class="btn payment-checkout-btn payment-checkout-btn-step w-100 mb-2 p-2 disabled"
            data-processing-text="{{ __('Processing. Please wait...') }}" data-error-header="{{ __('Error') }}" type="submit"
            onclick="return validateCheckoutForm(this)" style="font-size: 16px; font-weight: 600; width: 100%;">
        {{ __('Place Order') }}
    </button>
@endif

{{-- BPOINT Payment Modal --}}
<div class="modal fade" id="bpointModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 900px;">
        <div class="modal-content payment-modal">
            <div class="modal-header bg-bpoint text-white">
                <h5 class="modal-title">
                    <i class="fas fa-lock me-2"></i>Secure Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <style>
                .payment-modal {
                    border-radius: 10px;
                    overflow: hidden;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                }
                
                .payment-info-section {
                    border-bottom: 1px solid #dee2e6;
                }
                
                .card-logo {
                    padding: 5px 10px;
                    background-color: white;
                    border-radius: 5px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 45px;
                }
                
                .security-badge {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 10px;
                }
                
                .modal-header.bg-bpoint {
                    background: linear-gradient(135deg, #4b79a1 0%, #283e51 100%) !important;
                }


                
                #paymentLoading {
                    background-color: #f8f9fa;
                    min-height: 200px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                
                .modal-footer {
                    border-top: 1px solid #dee2e6;
                }
                
                @media (max-width: 768px) {
                    .card-logo img {
                        height: 25px;
                    }
                    
                    .security-badge {
                        padding: 5px;
                    }
                    
                    .security-badge i {
                        font-size: 1.5rem;
                    }
                }
                .card-logo {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    background: #fff;
                    transition: all 0.2s ease-in-out;
                }

                .card-logo img {
                    height: 40px;
                    object-fit: contain;
                    display: block;
                    width: 45px;
                }

                .card-logo:hover {
                    border-color: #999;
                    background: #f5f5f5;
                    transform: translateY(-2px);
                }

                .payment-card-wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                }
            </style>
            <div class="modal-body p-0">
                <!-- Payment Info Section -->
                <div class="payment-info-section p-4 bg-light">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <h6 class="mb-3">Secure Payment Processing</h6>
                            <p class="text-muted small mb-3">Your payment information is encrypted and secure. We accept the following payment methods:</p>
                            <div class="d-flex flex-wrap gap-2">
                                <div class="card-logo">
                                    <img src="https://www.svgrepo.com/show/303248/mastercard-2-logo.svg" 
                                        alt="Mastercard">
                                </div>

                                <div class="card-logo">
                                    <img src="https://www.svgrepo.com/show/452128/visa.svg" 
                                        alt="Visa">
                                </div>

                                <div class="card-logo">
                                    <img src="https://www.svgrepo.com/show/361978/amex.svg" 
                                        alt="American Express">
                                </div>

                                <div class="card-logo">
                                    <img src="https://www.svgrepo.com/show/508420/diners-club-international.svg" 
                                        alt="Diners Club">
                                </div>

                                <div class="card-logo">
                                    <img src="https://www.svgrepo.com/show/328140/jcb.svg" 
                                        alt="JCB">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                <!-- Loading state shown while the iframe is being prepared -->
                <div id="paymentLoading" class="text-center p-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Initializing secure payment form...</p>
                    <p class="text-muted small">Please wait while we connect to our secure payment gateway</p>
                </div>

                <!-- The BPOINT payment iframe is loaded in here -->
                <iframe id="bpointFrame" src="" frameborder="0" width="100%" height="250" style="display: none; border: none;margin-top: 10px"></iframe>
            </div>
            
        </div>
    </div>
</div>

<script>
$('#created_order_id').val({{ $created_order_id ?? '' }});
$('#payment_amount_total').val(parseFloat('{{ $orderAmount ?? 0 }}'));

 // Check if the payment functions are already defined to avoid redeclaration on dynamic page loads (e.g., Livewire)
if (typeof window.handleCheckoutButtonClick === 'undefined') {

    // ---------- CONFIG ----------
    // The origin of the BPOINT iframe. IMPORTANT for security.
    if (typeof window.BPOINT_IFRAME_ORIGIN === 'undefined') {
        window.BPOINT_IFRAME_ORIGIN = "https://www.bpoint.com.au";
    }

    // ---------- STATE ----------
    let isPaymentProcessing = false;
    let modalInstance = null;
    let paymentInitialized = false;
    let paymentSubmitted = false;
    let formValidated = false;

    // Main function to handle checkout button click
    window.handleCheckoutButtonClick = function() {
        console.log('handleCheckoutButtonClick called');
        
        // Prevent multiple clicks
        if (isPaymentProcessing) {
            console.log('Payment is already processing, ignoring click.');
            return false;
        }

        // Clear any previous error messages
        clearValidationErrors();

        // First, validate all required form fields
        if (!validateAllRequiredFields()) {
            console.log('Form validation failed');
            return false;
        }

        // Get the selected payment method
        const paymentMethod = document.querySelector('input[name="payment_method"]:checked')?.value ||
                              document.getElementById('payment-method-input')?.value || 'bpoint';

        // If payment method is COD, submit the form directly without showing the payment modal
        if (paymentMethod === 'bank_transfer' || paymentMethod === 'cod') {
            console.log('Cash on Delivery selected, submitting form directly.');
            document.getElementById('payment-status-input').value = 'pending';
            document.getElementById('checkout-form').submit();
            return false;
        }

        // Set flag that form has been validated
        formValidated = true;

        // For other methods (like BPOINT), proceed with the modal flow
        const amount = $('#payment_amount_total').val();
        const token = "{{ $token ?? '' }}";

        
        if (!amount || amount <= 0) {
            showError("Invalid order amount. Please refresh the page and try again.");
            return false;
        }

        // Set payment status to pending before initiating payment
        const statusField = document.getElementById('payment-status-input');
        if (statusField) statusField.value = 'pending';
       var createdOrderId = $('#created_order_id').val();
        window.openPaymentModal(amount, token, createdOrderId);
        return false;
    };

    /**
     * Validates all required form fields
     */
    function validateAllRequiredFields() {
        let isValid = true;
        let firstErrorElement = null;

        // Check if shipping address form is visible and validate its fields
        const shippingForm = document.querySelector('[data-bb-toggle="checkout-shipping-address"]');
        if (shippingForm && shippingForm.offsetParent !== null) {
            // Validate name
            const nameField = document.getElementById('address_name');
            if (!nameField || !nameField.value.trim()) {
                showFieldError(nameField, 'Name is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = nameField;
            }

            // Validate phone
            const phoneField = document.getElementById('address_phone');
            if (!phoneField || !phoneField.value.trim()) {
                showFieldError(phoneField, 'Phone number is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = phoneField;
            }

            // Validate email
            const emailField = document.getElementById('address_email');
            if (!emailField || !emailField.value.trim()) {
                showFieldError(emailField, 'Email is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = emailField;
            } else if (emailField && !validateEmail(emailField.value.trim())) {
                showFieldError(emailField, 'Please enter a valid email address');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = emailField;
            }

            // Validate address
            const addressField = document.getElementById('address_address');
            if (!addressField || !addressField.value.trim()) {
                showFieldError(addressField, 'Address is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = addressField;
            }

            // Validate city
            const cityField = document.getElementById('address_city');
            if (!cityField || !cityField.value.trim()) {
                showFieldError(cityField, 'City is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = cityField;
            }

            // Validate state
            const stateField = document.getElementById('address_state');
            if (!stateField || !stateField.value.trim()) {
                showFieldError(stateField, 'State is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = stateField;
            }

            // Validate country
            const countryField = document.getElementById('address_country');
            if (!countryField || !countryField.value) {
                showFieldError(countryField, 'Country is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = countryField;
            }

            // Validate postcode
            const postcodeField = document.getElementById('address_postcode');
            if (!postcodeField || !postcodeField.value.trim()) {
                showFieldError(postcodeField, 'Postcode is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = postcodeField;
            }
        }

        // Check if billing address form is visible and validate its fields
        const billingForm = document.querySelector('[data-bb-toggle="checkout-billing-address"]');
        if (billingForm && billingForm.offsetParent !== null && !document.getElementById('use_same_address')?.checked) {
            // Validate name
            const nameField = document.getElementById('billing_address_name');
            if (!nameField || !nameField.value.trim()) {
                showFieldError(nameField, 'Name is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = nameField;
            }

            // Validate phone
            const phoneField = document.getElementById('billing_address_phone');
            if (!phoneField || !phoneField.value.trim()) {
                showFieldError(phoneField, 'Phone number is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = phoneField;
            }

            // Validate email
            const emailField = document.getElementById('billing_address_email');
            if (!emailField || !emailField.value.trim()) {
                showFieldError(emailField, 'Email is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = emailField;
            } else if (emailField && !validateEmail(emailField.value.trim())) {
                showFieldError(emailField, 'Please enter a valid email address');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = emailField;
            }

            // Validate address
            const addressField = document.getElementById('billing_address_address');
            if (!addressField || !addressField.value.trim()) {
                showFieldError(addressField, 'Address is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = addressField;
            }

            // Validate city
            const cityField = document.getElementById('billing_address_city');
            if (!cityField || !cityField.value.trim()) {
                showFieldError(cityField, 'City is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = cityField;
            }

            // Validate state
            const stateField = document.getElementById('billing_address_state');
            if (!stateField || !stateField.value.trim()) {
                showFieldError(stateField, 'State is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = stateField;
            }

            // Validate country
            const countryField = document.getElementById('billing_address_country');
            if (!countryField || !countryField.value) {
                showFieldError(countryField, 'Country is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = countryField;
            }

            // Validate postcode
            const postcodeField = document.getElementById('billing_address_postcode');
            if (!postcodeField || !postcodeField.value.trim()) {
                showFieldError(postcodeField, 'Postcode is required');
                isValid = false;
                if (!firstErrorElement) firstErrorElement = postcodeField;
            }
        }

        // Validate shipping method if visible
        const shippingMethods = document.querySelector('[data-bb-toggle="checkout-shipping-methods-area"]');
        if (shippingMethods && shippingMethods.offsetParent !== null) {
            const shippingMethodSelected = document.querySelector('input[name="shipping_method"]:checked');
            if (!shippingMethodSelected) {
                showError('Please select a shipping method');
                isValid = false;
            }
        }

        // Validate payment method if visible
        const paymentMethods = document.querySelector('[data-bb-toggle="checkout-payment-methods-area"]');
        if (paymentMethods && paymentMethods.offsetParent !== null) {
            const paymentMethodSelected = document.querySelector('input[name="payment_method"]:checked');
            if (!paymentMethodSelected) {
                showError('Please select a payment method');
                isValid = false;
            }
        }

        // Validate terms and conditions if visible
        const termsCheckbox = document.getElementById('agree_terms_and_policy');
        if (termsCheckbox && termsCheckbox.offsetParent !== null && !termsCheckbox.checked) {
            showFieldError(termsCheckbox, 'You must agree to the Terms and Privacy Policy');
            isValid = false;
            if (!firstErrorElement) firstErrorElement = termsCheckbox;
        }

        // If validation failed, scroll to the first error
        if (!isValid && firstErrorElement) {
            firstErrorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        return isValid;
    }

    function  validateCheckoutForm(button) {
    // Check if payment modal is open - skip validation
    const paymentModal = document.getElementById('paymentModal');
    if (paymentModal && paymentModal.classList.contains('show')) {
        return true;
    }
    
    const form = button.closest('form');
    const formData = new FormData(form);
    
    // Show processing state
    const originalText = button.textContent;
    button.textContent = button.getAttribute('data-processing-text') || 'Processing...';
    button.disabled = true;
    
    // Clear previous errors
    clearFormErrors(form);
    
    // Validate form via AJAX before submission
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(data => {
                throw { status: response.status, data: data };
            });
        }
        return response.json();
    })
    .then(data => {
        // Success - handle response
        if (data.checkoutUrl) {
            window.location.href = data.checkoutUrl;
        } else if (data.next_url) {
            window.location.href = data.next_url;
        } else {
            // Reset button and allow normal form submission
            button.textContent = originalText;
            button.disabled = false;
            button.onclick = null; // Remove validation to prevent loop
            button.click(); // Submit normally
        }
    })
    .catch(error => {
        // Reset button state
        button.textContent = originalText;
        button.disabled = false;
        
        // Handle validation errors
        if (error.status === 422 && error.data.errors) {
            // Check for credit limit error - show as toast
            if (error.data.errors.credit_limit_check) {
                showToastError(error.data.errors.credit_limit_check[0]);
                return;
            }
            // Show validation errors and scroll to first error
            showFormValidationErrors(form, error.data.errors);
        } else if (error.data && error.data.message) {
            // Show general error message at top of form
            showGeneralError(form, error.data.message);
        } else {
            // Fallback error message
            showGeneralError(form, 'Please check your form and try again.');
        }
    });
    
    return false; // Prevent default form submission
}
 
function showToastError(message) {
    if (typeof Botble !== 'undefined' && Botble.showError) {
        Botble.showError(message);
        return;
    }
    
    const toast = document.createElement('div');
    toast.className = 'alert alert-danger alert-dismissible fade show position-fixed';
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `<button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>Error:</strong> ${message}`;
    document.body.appendChild(toast);
    setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); }, 5000);
}



// Show validation errors and scroll to first error
function showFormValidationErrors(form, errors) {
    let firstErrorField = null;
    
    Object.keys(errors).forEach(fieldName => {
        const messages = Array.isArray(errors[fieldName]) ? errors[fieldName] : [errors[fieldName]];
        const field = findFormField(form, fieldName);
        
        if (field) {
            // Mark field as invalid
            field.classList.add('is-invalid');
            const formGroup = field.closest('.form-group');
            if (formGroup) {
                formGroup.classList.add('field-is-invalid');
            }
            
            // Add error message
            const errorDiv = document.createElement('div');
            errorDiv.className = 'invalid-feedback';
            errorDiv.textContent = messages[0]; // Show first error message
            field.parentNode.appendChild(errorDiv);
            
            // Remember first error field for scrolling
            if (!firstErrorField) {
                firstErrorField = field;
            }
        }
    });
    
    // Scroll to first error field
    if (firstErrorField) {
        scrollToField(firstErrorField);
    } else {
        // If no specific field found, scroll to top of form
        scrollToTop(form);
    }
}

// Show general error message at top of form
function showGeneralError(form, message) {
    const errorAlert = document.createElement('div');
    errorAlert.className = 'alert alert-danger checkout-error-alert';
    errorAlert.innerHTML = `
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>Error:</strong> ${message}
    `;
    
    // Insert at top of form
    form.insertBefore(errorAlert, form.firstChild);
    
    // Scroll to top of form
    scrollToTop(form);
}



    /**
     * Helper function to validate email format
     */
    function validateEmail(email) {
        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    /**
     * Shows an error message for a specific field
     */
    function showFieldError(field, message) {
        if (!field) return;
        
        // Add error class to field
        field.classList.add('is-invalid');
        
        // Create or update error message
        let errorElement = field.parentNode.querySelector('.invalid-feedback');
        if (!errorElement) {
            errorElement = document.createElement('div');
            errorElement.className = 'invalid-feedback';
            field.parentNode.appendChild(errorElement);
        }
        errorElement.textContent = message;
    }



    /**
     * Shows a general error message
     */
    function showError(message) {
        // Create error container if it doesn't exist
        let errorContainer = document.getElementById('checkout-error-container');
        if (!errorContainer) {
            errorContainer = document.createElement('div');
            errorContainer.id = 'checkout-error-container';
            errorContainer.className = 'alert alert-danger mb-3';
            const form = document.getElementById('checkout-form');
            if (form) {
                form.insertBefore(errorContainer, form.firstChild);
            }
        }
        errorContainer.textContent = message;
        errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    /**
     * Clears all validation error messages
     */
    function clearValidationErrors() {
        // Remove field error classes and messages
        document.querySelectorAll('.is-invalid').forEach(field => {
            field.classList.remove('is-invalid');
        });
        document.querySelectorAll('.invalid-feedback').forEach(error => {
            error.remove();
        });
        
        // Remove general error container
        const errorContainer = document.getElementById('checkout-error-container');
        if (errorContainer) {
            errorContainer.remove();
        }
    }

    /**
     * Opens the payment modal and initiates the BPOINT session.
     */
    window.openPaymentModal = function(amount, token, createdOrderId) {
        console.log('Opening payment modal for amount:', amount, 'with token:', token, 'createdOrderId: ', createdOrderId);
        
        // Check if form has been validated
        if (!formValidated) {
            console.error('Form has not been validated. Please validate the form first.');
            return false;
        }
        
        isPaymentProcessing = true;
        paymentInitialized = false;
        paymentSubmitted = false;

        // Set payment status to pending when opening payment modal
        const statusField = document.getElementById('payment-status-input');
        if (statusField) statusField.value = 'pending';

        const button = document.getElementById('checkoutButton');
        if (button) {
            button.dataset.originalText = button.textContent;
            button.textContent = button.dataset.processingText || 'Processing...';
            button.disabled = true;
        }

        // Show bootstrap modal
        const modalEl = document.getElementById('bpointModal');
        modalInstance = new bootstrap.Modal(modalEl, {
            backdrop: 'static', // Prevent closing by clicking backdrop
            keyboard: false     // Prevent closing by pressing Esc
        });

        // Reset modal content
        document.getElementById('paymentLoading').style.display = 'block';
        document.getElementById('bpointFrame').style.display = 'none';
        document.getElementById('bpointFrame').src = ''; // Clear previous iframe

        modalInstance.show();

        // Request an auth key from our server to start the BPOINT session
        fetch("{{ route('public.checkout.bpoint.auth') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({ amount: amount, token: token, created_order_id: createdOrderId })
        })
        .then(async (res) => {
            if (!res.ok) {
                const txt = await res.text();
                throw new Error('Server error: ' + res.status + ' - ' + txt);
            }
            return res.json();
        })
        .then(data => {
            if (!data.success || !data.authKey) {
                throw new Error(data.message || 'Unable to initialize payment session. Please try again.');
            }

            // Store authKey & crn in hidden fields for the final form submission
            const authField = document.getElementById('bpoint-auth-key-input');
            const crnField = document.getElementById('bpoint-crn-input');
            if (authField) authField.value = data.authKey;
            if (crnField) crnField.value = data.crn || '';

            // Load the BPOINT iframe using the returned authKey
            const iframe = document.getElementById('bpointFrame');
            iframe.src = window.BPOINT_IFRAME_ORIGIN + "/webapi/v3/txns/iframe/" + encodeURIComponent(data.authKey);

            // Show iframe once it has loaded its content
            iframe.onload = function() {
                console.log('BPOINT iframe loaded successfully.');
                document.getElementById('paymentLoading').style.display = 'none';
                iframe.style.display = 'block';
                paymentInitialized = true;

                // Reset button state now that iframe is ready
                if (button) {
                    button.textContent = button.dataset.originalText || 'Place Order';
                    button.disabled = false;
                }
            };

            iframe.onerror = function() {
                console.error('Iframe failed to load.');
                alert('The payment form failed to load. Please try again or use another payment method.');
                window.cleanupAfterFailure();
            };
        })
        .catch(err => {
            console.error('Payment initialization error:', err);
            alert(err.message || 'Payment initialization failed. Please try again.');
            window.cleanupAfterFailure();
        });
    };

    /**
     * Resets the UI and state after a failure.
     */
    window.cleanupAfterFailure = function() {
        isPaymentProcessing = false;
        paymentInitialized = false;
        paymentSubmitted = false;
        formValidated = false; // Reset form validation flag
        
        // Set payment status to pending on failure
        const statusField = document.getElementById('payment-status-input');
        if (statusField) statusField.value = 'pending';
        
        if (modalInstance) modalInstance.hide();

        const button = document.getElementById('checkoutButton');
        if (button) {
            button.disabled = false;
            button.textContent = button.dataset.originalText || 'Place Order';
        }
    };

    /**
     * Listens for messages from the BPOINT iframe (via the callback page).
     * This is the most critical part of the client-side integration.
     */
    window.addEventListener("message", function(event) {
        // SECURITY: Always verify the origin of the message
        if (!event.origin || !event.data) return;
        
        // Accept messages from our own domain and BPOINT
        const allowedOrigins = [
            window.BPOINT_IFRAME_ORIGIN,
            window.location.origin
        ];
        
        if (!allowedOrigins.includes(event.origin)) {
            console.warn('Message origin mismatch:', event.origin, '- Ignoring.');
            return;
        }

        console.log('Message received:', event.data);

        // Only process payment result messages if the payment has been initialized
        if (!paymentInitialized) {
            console.log('Ignoring message - payment not yet initialized.');
            return;
        }

        // Handle custom actions from the callback page
        if (event.data.action === 'retry_payment') {
            window.tryAgain();
            return;
        }
        if (event.data.action === 'cancel_payment') {
            window.cancelPayment();
            return;
        }

        // The main success/failure logic is based on the responseCode and success flag
        const responseCode = event.data.responseCode;
        const isSuccess = event.data.success;
        const paymentStatus = event.data.payment_status || 'pending';

        // Update payment status based on the callback
        const statusField = document.getElementById('payment-status-input');
        if (statusField) statusField.value = paymentStatus;

        // A responseCode of '00' or '0' indicates a successful payment
        if ((responseCode === '00' || responseCode === '0' || responseCode === 0) || isSuccess === true) {
            console.log('Payment Successful! (responseCode:', responseCode, ', success:', isSuccess, ')', 'payment_status', paymentStatus);
            paymentSubmitted = true;

            // Update modal UI to show success message
            const modalBody = document.querySelector('#bpointModal .modal-body');
            if (modalBody) {
                modalBody.innerHTML = `
                    <div class="text-center p-5">
                        <div class="mb-3">
                            <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                        </div>
                        <h4 class="text-success">Payment Successful!</h4>
                        <p class="mt-3">Your payment has been processed successfully. Finalizing your order...</p>
                    </div>
                `;
            }

            // Submit the form to the backend to complete the order
            setTimeout(() => {
                window.submitFormAfterPayment();
            }, 1500); // Short delay to let the user see the success message
        }
        // Any other responseCode indicates a failure or decline
        else if (responseCode !== null && responseCode !== undefined) {
            console.log('Payment Failed. Response Code:', responseCode, 'Success:', isSuccess);
            paymentSubmitted = true;

            const modalBody = document.querySelector('#bpointModal .modal-body');
            if (modalBody) {
                modalBody.innerHTML = `
                    <div class="text-center p-5">
                        <div class="mb-3"><i class="fas fa-times-circle text-danger" style="font-size: 4rem;"></i></div>
                        <h4 class="text-danger">Payment Failed</h4>
                        <p class="mt-3">Your payment could not be processed. Please check your details and try again.</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="tryAgain()">Try Again</button>
                        <button type="button" class="btn btn-secondary mt-3 ms-2" onclick="cancelPayment()">Cancel</button>
                    </div>
                `;
            }
            // Reset processing flag so the user can try again
            isPaymentProcessing = false;
        }
    });

    /**
     * Submits the main checkout form after a successful payment.
     */
    window.submitFormAfterPayment = function() {
        console.log('Submitting form after successful payment.');
        const form = document.getElementById('checkout-form');

        if (form) {
            // Ensure payment status is set to completed before submitting
            const pField = document.getElementById('payment-status-input');
            if (pField) pField.value = 'completed';

            form.submit();
        } else {
            console.error('Checkout form not found!');
            alert('An error occurred. Could not finalize your order. Please contact support.');
        }
    };

    // When modal is hidden (e.g., by the cancel button), reset state
    document.getElementById('bpointModal').addEventListener('hidden.bs.modal', function () {
        isPaymentProcessing = false;
        paymentInitialized = false;
        paymentSubmitted = false;
        formValidated = false; // Reset form validation flag
        
        // Set payment status to pending when modal is closed without successful payment
        const statusField = document.getElementById('payment-status-input');
        if (statusField && statusField.value !== 'completed') {
            statusField.value = 'pending';
        }
    });

    /**
     * Retry payment after failure
     */
    window.tryAgain = function() {
        console.log('Retrying payment...');
        
        // Reset payment state but keep form validation
        paymentInitialized = false;
        paymentSubmitted = false;
        
        // Get amount and token again
        const amount = $('#payment_amount_total').val();
        const token = "{{ $token ?? '' }}";
        
        // Reopen payment modal
        window.openPaymentModal(amount, token);
    };

    /**
     * Cancel payment process
     */
    window.cancelPayment = function() {
        console.log('Cancelling payment...');
        
        // Reset all states
        isPaymentProcessing = false;
        paymentInitialized = false;
        paymentSubmitted = false;
        formValidated = false;
        
        // Set payment status to pending
        const statusField = document.getElementById('payment-status-input');
        if (statusField) statusField.value = 'pending';
        
        // Hide modal
        if (modalInstance) {
            modalInstance.hide();
        }
        
        // Reset button state
        const button = document.getElementById('checkoutButton');
        if (button) {
            button.disabled = false;
            button.textContent = button.dataset.originalText || 'Place Order';
        }
    };

    // Debug logging when page loads
    document.addEventListener('DOMContentLoaded', function() {
        console.log('BPOINT checkout page script loaded and ready.');
        
        // Initialize payment status to pending on page load
        const statusField = document.getElementById('payment-status-input');
        if (statusField && !statusField.value) {
            statusField.value = 'pending';
        }
    });
}
</script>
{{-- Minimal styles for the modal content --}}
<style>
    .modal .payment-checkout-btn { width: auto !important; font-weight: 400 !important; font-size: 14px !important; }
    .is-invalid { border-color: #dc3545 !important; }
    .invalid-feedback { color: #dc3545; font-size: 0.875em; margin-top: 0.25rem; }
</style>