@extends('layouts.user')

@section('content')
<div class="app-container">
    <header>
        <div class="logo">My Cards</div>
    </header>

    <section class="credit-card-list-section">
        <div class="credit-cards-container">

            @foreach ($cards as $card)
            @php
                // Choose style class based on type
                $typeClass = match(strtolower($card->card_type)){
                    'mastercard' => 'mastercard-style',
                    'visacard'   => 'visacard-style',
                    'premium'    => 'platinum-style',
                    default      => 'default-style'
                };
                // Choose logo image based on type
                $typeLogo = match(strtolower($card->card_type)){
                    'mastercard' => asset('images/mastercard-logo.png'),
                    'visacard'   => asset('images/visa-logo.png'),
                    'premium'    => asset('images/premium-logo.png'),
                    default      => $siteLogo
                };
            @endphp

            <div class="credit-card-item">
                <div class="credit-card-inner">
                    <!-- FRONT -->
                    <div class="credit-card-front {{ $typeClass }}">
                        <div class="card-logo">
                            <img src="{{ $typeLogo }}" width="60" height="29" alt="{{ $card->card_type }}">
                        </div>
                        <div class="card-chip">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40">
                                <rect width="60" height="40" rx="10" fill="#F0F0F0"/>
                                <rect x="10" y="10" width="40" height="20" rx="5" fill="#D0D0D0"/>
                                <circle cx="25" cy="20" r="6" fill="#A0A0A0"/>
                            </svg>
                        </div>
                        <div class="card-number">{{ $card->card_number }}</div>
                        <div class="card-details">
                            <div class="card-holder">
                                {{ $user->name }} <br>
                                @if($card->card_status == '1')
                                  <div class="btn bg-light-success border-light-success text-success">Active</div>
                                @elseif($card->card_status == '2')
                                  <div class="btn bg-light-warning border-light-warning text-warning">Pending</div>
                                @elseif($card->card_status == '3')
                                  <div class="btn bg-light-danger border-light-danger text-danger">Canceled</div>
                                @elseif($card->card_status == '4')
                                  <div class="btn bg-light-warning border-light-warning text-warning">Closed</div>
                                @endif
                            </div>
                            <div class="card-expiry">{{ $card->card_exp_number }}</div>
                        </div>
                    </div>
                    <!-- BACK -->
                    <div class="credit-card-back {{ $typeClass }}">
                        <div class="card-magnetic-strip"></div>
                        <div class="card-cvv-section">
                            <label>CVV</label>
                            <div class="card-cvv">{{ $card->card_cvv }}</div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            {{ $cards->links() }}
        </div>
    </section>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.credit-card-item').forEach(card=>{
        card.addEventListener('mouseenter',()=>card.querySelector('.credit-card-inner').classList.add('flipped'));
        card.addEventListener('mouseleave',()=>card.querySelector('.credit-card-inner').classList.remove('flipped'));
    });
});
</script>

<style>
.credit-card-list-section{padding:20px;}
.credit-cards-container{display:flex;flex-direction:column;gap:20px;}
.credit-card-item{perspective:1000px;width:100%;height:250px;}
.credit-card-inner{width:100%;height:100%;position:relative;transition:transform .8s;transform-style:preserve-3d;}
.credit-card-inner.flipped{transform:rotateY(180deg);}
.credit-card-front,.credit-card-back{
    position:absolute;width:100%;height:100%;backface-visibility:hidden;
    border-radius:15px;display:flex;flex-direction:column;
    justify-content:space-between;padding:20px;color:#fff;
}
.credit-card-back{transform:rotateY(180deg);align-items:center;justify-content:center;}
.card-chip{width:50px;margin-bottom:15px;}
.card-number{font-size:22px;letter-spacing:2px;margin-bottom:15px;}
.card-details{display:flex;justify-content:space-between;}
.card-holder,.card-expiry{font-size:14px;}
.card-magnetic-strip{width:100%;height:50px;background-color:rgba(0,0,0,.7);margin-bottom:20px;}
.card-cvv{font-size:24px;letter-spacing:4px;background:rgba(255,255,255,.2);padding:10px 20px;border-radius:5px;}

/* === UNIQUE CARD STYLES === */

/* MasterCard - Classic Red/Orange gradient */
.mastercard-style {
    background: linear-gradient(135deg,#EB001B 0%,#F79E1B 50%,#FF5F00 100%);
    box-shadow:0 8px 20px rgba(235,0,27,0.4);
}

/* VisaCard - Royal blue with animated shine */
.visacard-style {
    background: linear-gradient(160deg,#1a1f71 0%,#0033a0 50%,#0077c8 100%);
    border:2px solid rgba(255,255,255,0.2);
    box-shadow:0 10px 25px rgba(0,50,120,0.6), inset 0 0 10px rgba(255,255,255,0.1);
    position:relative;
    overflow:hidden;
}
.visacard-style::after {
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(120deg,rgba(255,255,255,0.25)0%,rgba(255,255,255,0.05)40%,transparent 70%);
    transform:rotate(25deg);
    animation:visaShine 5s linear infinite;
}
@keyframes visaShine {
    0% {transform:translateX(-100%) rotate(25deg);}
    100%{transform:translateX(100%) rotate(25deg);}
}

/* Premium -> Platinum Black */
.platinum-style {
    background: linear-gradient(135deg,#000000 0%,#1a1a1a 50%,#434343 100%);
    border:1px solid rgba(255,255,255,0.2);
    box-shadow:0 8px 30px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.05);
    position:relative;
    overflow:hidden;
}
.platinum-style::before {
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(120deg,rgba(255,255,255,0.2)0%,rgba(255,255,255,0.05)40%,transparent 70%);
    transform:rotate(25deg);
    animation:platinumShine 6s linear infinite;
}
@keyframes platinumShine {
    0% {transform:translateX(-100%) rotate(25deg);}
    100%{transform:translateX(100%) rotate(25deg);}
}

/* Default */
.default-style {
    background:linear-gradient(135deg,#02C076 0%,#00784C 100%);
}

/* Status badge styles */
.bg-light-success{background:#e8f5e9;}
.border-light-success{border:1px solid #81c784;}
.text-success{color:#388e3c;}
.bg-light-warning{background:#fff8e1;}
.border-light-warning{border:1px solid #ffb74d;}
.text-warning{color:#f57c00;}
.bg-light-danger{background:#ffebee;}
.border-light-danger{border:1px solid #e57373;}
.text-danger{color:#d32f2f;}
</style>
@endsection
