

<?php $__env->startSection('title', 'Virtual Cards'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6" x-data="{ showFundModal: false, showWithdrawModal: false, selectedCard: null }">
    
    <!-- Header Section -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl md:text-3xl font-semibold text-[#0D1B23]">Virtual Cards</h1>
            <p class="text-sm text-[#7A7A7A] mt-1">Manage your virtual debit cards</p>
        </div>
        <a href="<?php echo e(route('cards.apply')); ?>" class="inline-flex items-center space-x-2 px-5 py-2.5 rounded-lg bg-[#49786B] hover:bg-[#3B645A] transition-colors text-sm font-medium text-white">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Apply for Card</span>
        </a>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="bg-white border border-[#E0E5E5] shadow-sm rounded-xl p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-[#7A7A7A]">Total Balance</p>
                    <h3 class="text-xl font-semibold text-[#0D1B23] mt-1"><?php echo e(Auth::user()->currency); ?><?php echo e(number_format($totalBalance, 2)); ?></h3>
                </div>
                <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                    <i data-lucide="wallet" class="w-4 h-4 text-[#49786B]"></i>
                </div>
            </div>
        </div>

        <div class="bg-white border border-[#E0E5E5] shadow-sm rounded-xl p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-[#7A7A7A]">Total Transactions</p>
                    <h3 class="text-xl font-semibold text-[#0D1B23] mt-1"><?php echo e($totalTransactions); ?></h3>
                </div>
                <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                    <i data-lucide="activity" class="w-4 h-4 text-[#49786B]"></i>
                </div>
            </div>
        </div>

        <div class="bg-white border border-[#E0E5E5] shadow-sm rounded-xl p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-[#7A7A7A]">Pending Applications</p>
                    <h3 class="text-xl font-semibold text-[#0D1B23] mt-1"><?php echo e($pendingCount); ?></h3>
                </div>
                <div class="w-9 h-9 rounded-lg bg-[#DFE5E5] flex items-center justify-center">
                    <i data-lucide="clock" class="w-4 h-4 text-[#EBBC46]"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    <?php if(session('success')): ?>
    <div class="bg-[#28A745]/10 border border-[#28A745]/20 text-[#28A745] p-4 rounded-lg">
        <p class="text-sm font-medium"><?php echo e(session('success')); ?></p>
    </div>
    <?php endif; ?>

    <?php if(session('error')): ?>
    <div class="bg-[#D55672]/10 border border-[#D55672]/20 text-[#D55672] p-4 rounded-lg">
        <p class="text-sm font-medium"><?php echo e(session('error')); ?></p>
    </div>
    <?php endif; ?>

    <!-- Cards Grid -->
    <?php if($cards->isEmpty()): ?>
    <div class="bg-white border border-[#E0E5E5] shadow-sm rounded-xl p-12 text-center">
        <div class="w-16 h-16 rounded-full bg-[#DFE5E5] flex items-center justify-center mx-auto mb-4">
            <i data-lucide="credit-card" class="w-8 h-8 text-[#7A7A7A]"></i>
        </div>
        <h3 class="text-lg font-semibold text-[#0D1B23] mb-1">No Cards Yet</h3>
        <p class="text-sm text-[#7A7A7A] mb-5">Apply for your first virtual card to get started</p>
        <a href="<?php echo e(route('cards.apply')); ?>" class="inline-flex items-center gap-2 bg-[#49786B] hover:bg-[#3B645A] text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Apply Now</span>
        </a>
    </div>
    <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        <?php $__currentLoopData = $cards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="group" x-data="{ flipped: false }">
            <div class="relative h-56 perspective-1000">
                <div class="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d" :class="flipped ? 'rotate-y-180' : ''">
                    
                    <!-- Card Front -->
                    <div class="absolute w-full h-full backface-hidden">
                        <div class="h-full rounded-xl p-5 text-white relative overflow-hidden
                            <?php echo e($card->card_level === 'Standard' ? 'bg-slate-700' : ''); ?>

                            <?php echo e($card->card_level === 'Gold' ? 'bg-amber-800' : ''); ?>

                            <?php echo e($card->card_level === 'Platinum' ? 'bg-blue-800' : ''); ?>

                            <?php echo e($card->card_level === 'Black' ? 'bg-slate-900 border border-slate-600' : ''); ?>">

                            <!-- Card Header -->
                            <div class="relative flex justify-between items-start">
                                <div>
                                    <!-- Card Type Logo -->
                                    <?php if($card->card_type === 'Visa'): ?>
                                    <svg class="h-5 w-9 mb-1.5" 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="white"/>
                                        <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="white"/>
                                        <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="white"/>
                                        <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="white"/>
                                        <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="white"/>
                                    </svg>
                                    <?php elseif($card->card_type === 'Mastercard'): ?>
                                    <svg class="h-5 w-9 mb-1.5" 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="M120.39 65.54V64.5h.48v-.24h-1.19v.24h.47v1.04zm2.31 0v-1.29h-.36l-.42.91-.42-.91h-.36v1.29h.26V64.9l.39.89h.27l.39-.89v.89z" fill="#f79e1b"/>
                                        <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>
                                    <?php elseif($card->card_type === 'American Express'): ?>
                                    <svg class="h-5 w-9 mb-1.5" viewBox="0 0 128 80" xmlns="http://www.w3.org/2000/svg">
                                        <rect width="128" height="80" rx="12" fill="white" fill-opacity="0.9"/>
                                        <path d="M20 50h88v-20H20v20zm5-15h10v10H25v-10zm15 0h10v10H40v-10zm15 0h10v10H55v-10zm15 0h10v10H70v-10zm15 0h10v10H85v-10z" fill="#2E77BC"/>
                                        <text x="50%" y="25%" dominant-baseline="middle" text-anchor="middle"
                                              font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2E77BC">
                                          AMERICAN
                                        </text>
                                        <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle"
                                              font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2E77BC">
                                          EXPRESS
                                        </text>
                                    </svg>
                                    <?php elseif($card->card_type === 'Discover'): ?>
                                    <svg class="h-5 w-9 mb-1.5" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
                                        <rect width="200" height="60" fill="#fff" rx="6" fill-opacity="0.9"/>
                                        <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<?php echo e($card->id); ?>" 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<?php echo e($card->id); ?>)" />
                                        <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>
                                    <?php endif; ?>
                                    <p class="text-[10px] opacity-50"><?php echo e($card->card_level); ?></p>
                                </div>
                                <div class="flex gap-2">
                                    <?php if($card->status === 'active'): ?>
                                    <span class="bg-[#28A745]/15 text-[#28A745] border border-[#28A745]/20 px-2 py-0.5 rounded text-[10px] font-medium">Active</span>
                                    <?php elseif($card->status === 'pending'): ?>
                                    <span class="bg-[#EBBC46]/15 text-[#EBBC46] border border-[#EBBC46]/20 px-2 py-0.5 rounded text-[10px] font-medium">Pending</span>
                                    <?php elseif($card->status === 'blocked'): ?>
                                    <span class="bg-[#D55672]/15 text-[#D55672] border border-[#D55672]/20 px-2 py-0.5 rounded text-[10px] font-medium">Blocked</span>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <!-- Card Number -->
                            <div class="relative mt-6">
                                <?php if($card->status === 'active'): ?>
                                <p class="text-lg font-mono tracking-wider"><?php echo e($card->masked_card_number); ?></p>
                                <?php else: ?>
                                <p class="text-sm text-white/40">Card details pending approval</p>
                                <?php endif; ?>
                            </div>

                            <!-- Card Footer -->
                            <div class="relative mt-auto pt-3 flex justify-between items-end">
                                <div>
                                    <p class="text-[10px] opacity-50">Cardholder</p>
                                    <p class="font-medium text-xs"><?php echo e(strtoupper($card->cardholder_name)); ?></p>
                                </div>
                                <?php if($card->status === 'active'): ?>
                                <div class="text-right">
                                    <p class="text-[10px] opacity-50">Expires</p>
                                    <p class="font-medium text-xs"><?php echo e($card->expiry); ?></p>
                                </div>
                                <?php endif; ?>
                            </div>

                            <!-- Balance Badge -->
                            <?php if($card->status === 'active'): ?>
                            <div class="absolute top-5 right-5 bg-white/10 px-2.5 py-1 rounded-md">
                                <p class="text-[10px] opacity-60">Balance</p>
                                <p class="font-semibold text-xs">$<?php echo e(number_format($card->balance, 2)); ?></p>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Card Back -->
                    <div class="absolute w-full h-full backface-hidden rotate-y-180">
                        <div class="h-full rounded-xl bg-slate-800 border border-slate-700/50 text-white relative overflow-hidden">
                            <div class="bg-slate-900 h-10 mt-5"></div>
                            <div class="p-5">
                                <div class="bg-white text-gray-800 px-3 py-1.5 rounded text-right mb-3">
                                    <?php if($card->status === 'active'): ?>
                                    <span class="font-mono text-sm"><?php echo e($card->cvv); ?></span>
                                    <?php else: ?>
                                    <span class="text-xs">---</span>
                                    <?php endif; ?>
                                </div>
                                <p class="text-[10px] text-gray-500 mb-3">For security, keep this CVV private</p>
                                <div class="text-[10px] text-gray-500 space-y-0.5">
                                    <p>Card Level: <?php echo e($card->card_level); ?></p>
                                    <p>Issued: <?php echo e($card->created_at->format('M Y')); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card Actions -->
            <div class="mt-3 grid grid-cols-2 gap-2">
                <?php if($card->status === 'active'): ?>
                <button @click="selectedCard = <?php echo e($card->id); ?>; showFundModal = true" class="bg-[#49786B] hover:bg-[#3B645A] text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="arrow-up-circle" class="w-3.5 h-3.5"></i>
                    Fund
                </button>
                <button @click="selectedCard = <?php echo e($card->id); ?>; showWithdrawModal = true" class="bg-[#0D1B23] hover:bg-[#0D1B23]/80 text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="arrow-down-circle" class="w-3.5 h-3.5"></i>
                    Withdraw
                </button>
                <a href="<?php echo e(route('cards.view', $card->id)); ?>" class="bg-[#DFE5E5] hover:bg-[#BFC9C9] text-[#0D1B23] px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                    View Details
                </a>
                <button @click="flipped = !flipped" class="bg-[#DFE5E5] hover:bg-[#BFC9C9] text-[#0D1B23] px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-1.5">
                    <i data-lucide="flip-horizontal" class="w-3.5 h-3.5"></i>
                    Flip Card
                </button>
                <?php elseif($card->status === 'pending'): ?>
                <div class="col-span-2 bg-[#EBBC46]/10 border border-[#EBBC46]/20 text-[#EBBC46] px-3 py-2 rounded-lg text-xs text-center">
                    <i data-lucide="clock" class="w-3.5 h-3.5 inline mr-1"></i>
                    Awaiting approval
                </div>
                <?php elseif($card->status === 'blocked'): ?>
                <div class="col-span-2 bg-[#D55672]/10 border border-[#D55672]/20 text-[#D55672] px-3 py-2 rounded-lg text-xs text-center">
                    <i data-lucide="shield-off" class="w-3.5 h-3.5 inline mr-1"></i>
                    Card blocked
                </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
    <?php endif; ?>

    <!-- Fund Card Modal -->
    <div x-show="showFundModal" x-cloak class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showFundModal = false">
        <div class="bg-white border border-[#E0E5E5] shadow-lg rounded-xl max-w-md w-full p-5" @click.away="showFundModal = false">
            <h3 class="text-lg font-semibold text-[#0D1B23] mb-4">Fund Card</h3>
            <form :action="`<?php echo e(url('/dashboard/cards')); ?>/${selectedCard}/fund`" method="POST">
                <?php echo csrf_field(); ?>
                <div class="mb-4">
                    <label class="block text-sm text-[#4A4A4A] mb-1.5">Amount</label>
                    <input type="number" name="amount" step="0.01" min="1" required class="w-full px-4 py-2.5 bg-white border border-[#C8D1D1] rounded-lg focus:border-[#49786B] focus:ring-1 focus:ring-[#49786B]/20 text-[#0D1B23] text-sm transition-colors" placeholder="0.00">
                </div>
                <div class="flex gap-3">
                    <button type="button" @click="showFundModal = false" class="flex-1 bg-[#DFE5E5] hover:bg-[#BFC9C9] text-[#4A4A4A] py-2.5 rounded-lg text-sm font-medium transition-colors">Cancel</button>
                    <button type="submit" class="flex-1 bg-[#49786B] hover:bg-[#3B645A] text-white py-2.5 rounded-lg text-sm font-medium transition-colors">Fund Card</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Withdraw Modal -->
    <div x-show="showWithdrawModal" x-cloak class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showWithdrawModal = false">
        <div class="bg-white border border-[#E0E5E5] shadow-lg rounded-xl max-w-md w-full p-5" @click.away="showWithdrawModal = false">
            <h3 class="text-lg font-semibold text-[#0D1B23] mb-4">Withdraw from Card</h3>
            <form :action="`<?php echo e(url('/dashboard/cards')); ?>/${selectedCard}/withdraw`" method="POST">
                <?php echo csrf_field(); ?>
                <div class="mb-4">
                    <label class="block text-sm text-[#4A4A4A] mb-1.5">Amount</label>
                    <input type="number" name="amount" step="0.01" min="1" required class="w-full px-4 py-2.5 bg-white border border-[#C8D1D1] rounded-lg focus:border-[#49786B] focus:ring-1 focus:ring-[#49786B]/20 text-[#0D1B23] text-sm transition-colors" placeholder="0.00">
                </div>
                <div class="flex gap-3">
                    <button type="button" @click="showWithdrawModal = false" class="flex-1 bg-[#DFE5E5] hover:bg-[#BFC9C9] text-[#4A4A4A] py-2.5 rounded-lg text-sm font-medium transition-colors">Cancel</button>
                    <button type="submit" class="flex-1 bg-[#0D1B23] hover:bg-[#0D1B23]/80 text-white py-2.5 rounded-lg text-sm font-medium transition-colors">Withdraw</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    [x-cloak] { display: none !important; }
    .perspective-1000 { perspective: 1000px; }
    .transform-style-preserve-3d { transform-style: preserve-3d; }
    .backface-hidden { backface-visibility: hidden; }
    .rotate-y-180 { transform: rotateY(180deg); }
</style>

<script>
    lucide.createIcons();
</script>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.bankapp', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/swizzfx/fintech.swizzfx.pro/resources/views/user/cards/index.blade.php ENDPATH**/ ?>