<?php
$pageName = "Apply for Card";
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/header.php");

require_once($_SERVER['DOCUMENT_ROOT'] . "/include/Function/cardFunction.php");

$user_id = userDetails('id');
$applyResult = null;

// Handle form submission
if (isset($_POST['apply_card'])) {
    $applyResult = applyForCard($conn, $user_id, $_POST, $row, [
        'sendMail'      => $sendMail ?? null,
        'email_message' => $email_message ?? null,
        'APP_NAME'      => defined('WEB_TITLE') ? WEB_TITLE : '',
        'APP_URL'       => defined('WEB_URL') ? WEB_URL : '',
        'page'          => $page ?? [],
    ]);

    if ($applyResult['success']) {
        toast_alert('success', $applyResult['message'], 'Success');
        $showRedirect = true;
    } else {
        toast_alert('error', $applyResult['message']);
    }
}

$cardFees = getCardFees();
?>
<!-- Main Content Area -->
<main class="pt-10 md:pt-14 pb-24 md:pb-8 min-h-screen lg:ml-80 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="space-y-6">

            <?php if (!empty($showRedirect)): ?>
                <script>
                    setTimeout(function() {
                        window.location.href = '<?= $web_url ?>/user/cards.php';
                    }, 2000);
                </script>
                <div class="bg-green-50 border border-green-200 text-green-800 px-5 py-4 rounded-xl text-sm">
                    <i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i>
                    Application submitted! Redirecting to your cards...
                </div>
            <?php endif; ?>

            <!-- Header -->
            <div class="flex items-center gap-3">
                <a href="<?= $web_url ?>/user/cards.php"
                   class="w-9 h-9 rounded-lg bg-white border border-slate-200 flex items-center justify-center hover:bg-slate-100 transition-colors">
                    <i data-lucide="arrow-left" class="w-4 h-4 text-slate-600"></i>
                </a>
                <div>
                    <h1 class="text-xl md:text-2xl font-semibold text-slate-900">Apply for Virtual Card</h1>
                    <p class="text-sm text-slate-500">Choose your card level and complete the application</p>
                </div>
            </div>

            <form method="POST" x-data="{
                selectedLevel: 'Standard',
                selectedType: 'Visa',
                fees: <?= json_encode($cardFees) ?>,
                cardholderName: '<?= htmlspecialchars(strtoupper(($row['firstname'] ?? '') . ' ' . ($row['lastname'] ?? '')), ENT_QUOTES) ?>',
                get shortName() {
                    return this.cardholderName.split(' ')[0] || 'YOUR NAME';
                }
            }">
                <input type="hidden" name="apply_card" value="1">

                <div class="grid lg:grid-cols-3 gap-6">
                    <!-- Application Form -->
                    <div class="lg:col-span-2 space-y-5">

                        <!-- Card Level Selection -->
                        <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-5">
                            <h2 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
                                <i data-lucide="layers" class="w-4 h-4 text-slate-500"></i>
                                Select Card Level
                            </h2>

                            <div class="grid grid-cols-2 gap-3">
                                <!-- Standard -->
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="card_level" value="Standard" x-model="selectedLevel" class="peer sr-only" required>
                                    <div class="border border-slate-300 peer-checked:border-primary-500 peer-checked:bg-primary-50 rounded-lg p-3 sm:p-4 transition-colors hover:border-slate-400 bg-white min-h-[130px] sm:min-h-[150px] flex flex-col">
                                        <div class="flex flex-col gap-0.5 mb-2">
                                            <span class="font-medium text-slate-900 text-sm">Standard</span>
                                            <span class="text-xs font-medium text-slate-500"><?= $currency ?><?= number_format($cardFees['Standard'], 2) ?></span>
                                        </div>
                                        <p class="text-xs text-slate-500 mb-2">Perfect for everyday use</p>
                                        <div class="mt-auto space-y-1">
                                            <p class="text-[10px] sm:text-xs text-slate-500 flex items-center gap-1">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Basic features</span>
                                            </p>
                                            <p class="text-[10px] sm:text-xs text-slate-500 flex items-center gap-1">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Standard limits</span>
                                            </p>
                                        </div>
                                    </div>
                                </label>

                                <!-- Gold -->
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="card_level" value="Gold" x-model="selectedLevel" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-amber-400 peer-checked:bg-amber-50 rounded-lg p-3 sm:p-4 transition-colors hover:border-slate-400 bg-white min-h-[130px] sm:min-h-[150px] flex flex-col">
                                        <div class="flex flex-col gap-0.5 mb-2">
                                            <span class="font-medium text-slate-900 flex items-center gap-1.5 text-sm">
                                                <i data-lucide="star" class="w-3.5 h-3.5 text-amber-500 flex-shrink-0"></i>
                                                <span>Gold</span>
                                            </span>
                                            <span class="text-xs font-medium text-slate-500"><?= $currency ?><?= number_format($cardFees['Gold'], 2) ?></span>
                                        </div>
                                        <p class="text-xs text-slate-500 mb-2">Enhanced benefits</p>
                                        <div class="mt-auto space-y-1">
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Higher limits</span>
                                            </div>
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Priority support</span>
                                            </div>
                                        </div>
                                    </div>
                                </label>

                                <!-- Platinum -->
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="card_level" value="Platinum" x-model="selectedLevel" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-primary-500 peer-checked:bg-primary-50 rounded-lg p-3 sm:p-4 transition-colors hover:border-slate-400 bg-white min-h-[130px] sm:min-h-[150px] flex flex-col">
                                        <div class="flex flex-col gap-0.5 mb-2">
                                            <span class="font-medium text-slate-900 flex items-center gap-1.5 text-sm">
                                                <i data-lucide="gem" class="w-3.5 h-3.5 text-primary-500 flex-shrink-0"></i>
                                                <span>Platinum</span>
                                            </span>
                                            <span class="text-xs font-medium text-slate-500"><?= $currency ?><?= number_format($cardFees['Platinum'], 2) ?></span>
                                        </div>
                                        <p class="text-xs text-slate-500 mb-2">Premium experience</p>
                                        <div class="mt-auto space-y-1">
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Premium limits</span>
                                            </div>
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Exclusive perks</span>
                                            </div>
                                        </div>
                                    </div>
                                </label>

                                <!-- Black -->
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="card_level" value="Black" x-model="selectedLevel" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-slate-900 peer-checked:bg-slate-100 rounded-lg p-3 sm:p-4 transition-colors hover:border-slate-400 bg-white min-h-[130px] sm:min-h-[150px] flex flex-col">
                                        <div class="flex flex-col gap-0.5 mb-2">
                                            <span class="font-medium text-slate-900 flex items-center gap-1.5 text-sm">
                                                <i data-lucide="crown" class="w-3.5 h-3.5 text-slate-900 flex-shrink-0"></i>
                                                <span>Black</span>
                                            </span>
                                            <span class="text-xs font-medium text-slate-500"><?= $currency ?><?= number_format($cardFees['Black'], 2) ?></span>
                                        </div>
                                        <p class="text-xs text-slate-500 mb-2">Ultimate luxury</p>
                                        <div class="mt-auto space-y-1">
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>Maximum limits</span>
                                            </div>
                                            <div class="flex items-center gap-1 text-[10px] sm:text-xs text-slate-500">
                                                <i data-lucide="check" class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-500 flex-shrink-0"></i>
                                                <span>VIP treatment</span>
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Card Type Selection -->
                        <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-5">
                            <h2 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
                                <i data-lucide="credit-card" class="w-4 h-4 text-slate-500"></i>
                                Card Network
                            </h2>

                            <div class="grid grid-cols-4 gap-3">
                                <label class="cursor-pointer">
                                    <input type="radio" name="card_type" value="Visa" x-model="selectedType" class="peer sr-only" required>
                                    <div class="border border-slate-300 peer-checked:border-primary-500 peer-checked:bg-primary-50 rounded-lg p-4 flex items-center justify-center transition-colors hover:border-slate-400 bg-white">
                                        <svg class="h-8 w-12" viewBox="0 0 1000 324" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M433.334 318.516H348.568L403.315 5.01855H488.081L433.334 318.516Z" fill="#1434CB"/>
                                            <path d="M727.98 15.9043C712.039 9.56622 686.227 2.51855 653.355 2.51855C574.054 2.51855 519.055 45.5277 518.802 106.826C518.306 152.343 558.126 177.912 587.98 193.316C618.34 209.233 629.315 219.335 629.315 233.014C629.061 254.008 603.493 263.591 579.702 263.591C547.839 263.591 530.7 258.287 505.123 245.892L493.902 240.335L482.166 313.221C501.069 323.07 536.096 331.667 572.643 332.163C657.14 332.163 711.128 289.897 711.895 224.144C712.394 188.508 689.871 160.445 643.015 136.91C615.2 121.744 598.306 111.638 598.554 97.2356C598.554 84.5987 613.224 70.9167 648.747 70.9167C677.823 70.4206 699.053 77.7188 715.707 85.5144L726.681 90.8186L738.417 19.9214L727.98 15.9043Z" fill="#1434CB"/>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M841.897 5.01855H773.691C755.782 5.01855 742.397 10.0624 734.862 30.0238L630.236 318.516H715.464C715.464 318.516 729.143 280.806 732.429 272.002C742.901 272.002 822.706 272.002 835.844 272.002C838.373 283.215 845.93 318.516 845.93 318.516H922.667L841.897 5.01855ZM762.22 208.49C769.018 189.752 796.85 116.686 796.85 116.686C796.602 117.174 803.16 99.19 806.699 88.0899L812.02 114.188C812.02 114.188 829.775 192.026 833.061 208.49H762.22Z" fill="#1434CB"/>
                                            <path d="M251.994 5.01855L171.471 219.335L162.137 174.313C146.216 129.054 102.175 80.0894 52.8662 56.8035L126.462 318.02H212.215L336.832 5.01855H251.994Z" fill="#1434CB"/>
                                            <path d="M127.963 5.01855H0.66211L0.167969 10.3101C98.1497 31.7971 163.301 76.5646 190.132 129.298L162.633 13.5747C157.329 -0.60098 144.316 5.51465 127.963 5.01855Z" fill="#1434CB"/>
                                        </svg>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" name="card_type" value="Mastercard" x-model="selectedType" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-rose-400 peer-checked:bg-rose-50 rounded-lg p-4 flex items-center justify-center transition-colors hover:border-slate-400 bg-white">
                                        <svg class="h-8 w-12" viewBox="0 0 131.39 86.9" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M48.37 15.14h34.66v56.61H48.37z" fill="#ff5f00"/>
                                            <path d="M52.37 43.45a35.94 35.94 0 0113.75-28.3 36 36 0 100 56.61 35.94 35.94 0 01-13.75-28.31z" fill="#eb001b"/>
                                            <path d="M123.94 43.45a36 36 0 01-58 28.3 36 36 0 000-56.61 36 36 0 0158 28.3z" fill="#f79e1b"/>
                                        </svg>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" name="card_type" value="American Express" x-model="selectedType" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-primary-500 peer-checked:bg-primary-50 rounded-lg p-4 flex items-center justify-center transition-colors hover:border-slate-400 bg-white">
                                        <svg class="h-8 w-12" viewBox="0 0 128 80" xmlns="http://www.w3.org/2000/svg">
                                            <rect width="128" height="80" rx="12" fill="#2E77BC"/>
                                            <text x="50%" y="40%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">AMERICAN</text>
                                            <text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white">EXPRESS</text>
                                        </svg>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" name="card_type" value="Discover" x-model="selectedType" class="peer sr-only">
                                    <div class="border border-slate-300 peer-checked:border-amber-400 peer-checked:bg-amber-50 rounded-lg p-4 flex items-center justify-center transition-colors hover:border-slate-400 bg-white">
                                        <svg class="h-8 w-12" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
                                            <rect width="200" height="60" fill="#fff" rx="6"/>
                                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="28" fill="#000">DISC</text>
                                            <defs>
                                                <radialGradient id="discoverGrad" cx="50%" cy="50%" r="70%">
                                                    <stop offset="0%" stop-color="#ffb347"/>
                                                    <stop offset="60%" stop-color="#ff7a00"/>
                                                    <stop offset="100%" stop-color="#d85b00"/>
                                                </radialGradient>
                                            </defs>
                                            <circle cx="118" cy="30" r="22" fill="url(#discoverGrad)"/>
                                            <text x="138" y="50%" dominant-baseline="middle" text-anchor="start" font-family="Arial, sans-serif" font-weight="bold" font-size="28" fill="#000">VER</text>
                                        </svg>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Cardholder Information -->
                        <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-5">
                            <h2 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
                                <i data-lucide="user" class="w-4 h-4 text-slate-500"></i>
                                Cardholder Information
                            </h2>

                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm text-slate-700 mb-1.5">Full Name (as on card)</label>
                                    <input type="text" name="cardholder_name" x-model="cardholderName" required
                                        class="w-full px-4 py-2.5 bg-white border border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none rounded-lg text-slate-900 text-sm transition-colors uppercase"
                                        placeholder="JOHN DOE">
                                </div>

                                <div>
                                    <label class="block text-sm text-slate-700 mb-1.5">Billing Address</label>
                                    <input type="text" name="billing_address" value="<?= htmlspecialchars($row['acct_address'] ?? '', ENT_QUOTES) ?>" required
                                        class="w-full px-4 py-2.5 bg-white border border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none rounded-lg text-slate-900 text-sm transition-colors"
                                        placeholder="123 Main Street">
                                </div>

                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm text-slate-700 mb-1.5">City</label>
                                        <input type="text" name="billing_city" value="<?= htmlspecialchars($row['acct_city'] ?? '', ENT_QUOTES) ?>" required
                                            class="w-full px-4 py-2.5 bg-white border border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none rounded-lg text-slate-900 text-sm transition-colors"
                                            placeholder="New York">
                                    </div>
                                    <div>
                                        <label class="block text-sm text-slate-700 mb-1.5">ZIP Code</label>
                                        <input type="text" name="billing_zipcode" value="<?= htmlspecialchars($row['acct_zip'] ?? '', ENT_QUOTES) ?>" required
                                            class="w-full px-4 py-2.5 bg-white border border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none rounded-lg text-slate-900 text-sm transition-colors"
                                            placeholder="10001">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm text-slate-700 mb-1.5">Country</label>
                                    <input type="text" name="billing_country" value="<?= htmlspecialchars($row['acct_country'] ?? 'United States', ENT_QUOTES) ?>" required
                                        class="w-full px-4 py-2.5 bg-white border border-slate-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none rounded-lg text-slate-900 text-sm transition-colors"
                                        placeholder="United States">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Summary Sidebar -->
                    <div class="lg:col-span-1">
                        <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-5 sticky top-8">
                            <h2 class="text-sm font-semibold text-slate-900 mb-4">Application Summary</h2>

                            <!-- Preview Card -->
                            <div class="mb-5 rounded-lg p-5 text-white relative overflow-hidden"
                                :class="{
                                    'bg-gradient-to-br from-slate-700 to-slate-800': selectedLevel === 'Standard',
                                    'bg-gradient-to-br from-amber-700 to-amber-900': selectedLevel === 'Gold',
                                    'bg-gradient-to-br from-primary-700 to-primary-900': selectedLevel === 'Platinum',
                                    'bg-gradient-to-br from-slate-900 to-black border border-slate-700': selectedLevel === 'Black'
                                }">
                                <div class="relative z-10">
                                    <p class="text-xs opacity-70" x-text="selectedType"></p>
                                    <p class="text-[10px] opacity-50" x-text="selectedLevel"></p>
                                    <p class="text-sm font-mono tracking-wider mt-5">**** **** **** ****</p>
                                    <div class="mt-3 flex justify-between items-end">
                                        <div>
                                            <p class="text-[10px] opacity-50">Cardholder</p>
                                            <p class="font-medium text-xs truncate max-w-[120px]" x-text="shortName"></p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-[10px] opacity-50">Expires</p>
                                            <p class="font-medium text-xs">--/--</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Balance Check -->
                            <div class="bg-slate-50 border border-slate-200 rounded-lg p-3 mb-4">
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-slate-500">Your Balance</span>
                                    <span class="font-semibold text-slate-900"><?= $currency ?><?= number_format($row['acct_balance'] ?? 0, 2) ?></span>
                                </div>
                            </div>

                            <!-- Fee Breakdown -->
                            <div class="space-y-2.5 mb-5">
                                <div class="flex justify-between text-sm">
                                    <span class="text-slate-500">Card Level</span>
                                    <span class="font-medium text-slate-900" x-text="selectedLevel"></span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-slate-500">Network</span>
                                    <span class="font-medium text-slate-900" x-text="selectedType"></span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-slate-500">Issuance Fee</span>
                                    <span class="font-medium text-slate-900" x-text="'<?= $currency ?>' + fees[selectedLevel].toFixed(2)"></span>
                                </div>
                                <div class="border-t border-slate-200 pt-2.5 flex justify-between">
                                    <span class="text-sm font-medium text-slate-900">Total to Pay</span>
                                    <span class="text-base font-semibold text-primary-600" x-text="'<?= $currency ?>' + fees[selectedLevel].toFixed(2)"></span>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit"
                                    class="w-full px-6 py-3 rounded-lg bg-primary-500 hover:bg-primary-600 transition-colors font-medium text-white text-sm flex items-center justify-center gap-2 shadow-sm hover:shadow-md">
                                <i data-lucide="check-circle" class="w-4 h-4"></i>
                                <span>Submit Application</span>
                            </button>

                            <p class="text-xs text-slate-500 mt-3 text-center flex items-center justify-center gap-1">
                                <i data-lucide="shield" class="w-3 h-3"></i>
                                Fee will be deducted from your account balance
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>

<script>
    lucide.createIcons();
    document.addEventListener('alpine:init', () => {
        Alpine.effect(() => {
            setTimeout(() => lucide.createIcons(), 0);
        });
    });
</script>

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
?>