@extends('layouts.user')

@section('content')

<div class="app-container">
    <header>
        <div class="logo">Apply Credit Card</div>
        <button class="back-btn" onclick="window.location.href='{{route('card.cards')}}';">
            <i class="fas fa-list"></i> Card List
        </button>
    </header>
<style>
.back-btn{
    padding:7px;width:120px;border-radius:12px;
    background:#01905a;border-color:white;color:white;
}
.fonter{font-size:13px;}
</style>

<section class="credit-card-application">
    <div class="credit-card-display">
        <div class="credit-card">
            <div class="card-front">
                <div class="card-logo"><img src="{{ $siteLogo }}" width="60" height="29"></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" id="cardNumberDisplay">**** **** **** ****</div>
                <div class="card-details">
                    <div class="card-holder" id="cardHolderDisplay">{{ $user->name }}</div>
                    <div class="card-expiry" id="cardExpiryDisplay">MM/YY</div>
                </div>
            </div>
        </div>
    </div>

    <form class="credit-card-form" action="{{ route('new.card.submit') }}" method="POST">
        @csrf
        <div class="input-group">
            <label>Card Holder Name</label>
            <input type="text" readonly value="{{ $user->name }}" placeholder="{{ $user->name }}">
        </div>

        <div class="input-group">
            <label>Card Number</label>
            <div class="input-with-generate">
                <input type="text" id="cardNumber" name="card_number" maxlength="19" placeholder="1234 5678 9012 3456" required>
                <button type="button" class="btn-generate" id="generateCardBtn"><i class="fas fa-random"></i></button>
            </div>
        </div>

        <div class="card-details-group">
            <div class="input-group">
                <label>CVV</label>
                <input type="text" id="cardCVV" name="card_cvv" maxlength="3" placeholder="123" required>
            </div>
            <div class="input-group">
                <label>Expiry Date</label>
                <input type="text" id="cardExpiry" name="card_exp_number" maxlength="5" placeholder="MM/YY" required>
            </div>
        </div>

        <div class="input-group" style="display:none;">
            <label>Card PIN</label>
            <input type="password" id="cardPin" maxlength="4" value="1234">
        </div>

        <div class="input-group">
            <label>Card Type</label>
            <select id="cardType" name="card_type" required>
                <option value="">--Select Card Type--</option>
                <option value="MasterCard">MasterCard</option>
                <option value="VisaCard">VisaCard</option>
                <option value="Premium">Premiumcard</option>
            </select>
        </div>

        <div class="input-group">
            <p class="fonter">
                <span>
                    The {{ $siteName }} (Card) combines quantum security and blockchain technology.<br>
                    <strong>Card Charges ${{ $settings->cardfees }}</strong>
                </span>
            </p>
        </div>

        <button type="submit" class="btn-apply-card">Apply for Card</button>
    </form>
</section>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const cardNumber = document.getElementById('cardNumber');
    const cardCVV = document.getElementById('cardCVV');
    const cardExpiry = document.getElementById('cardExpiry');
    const cardPin = document.getElementById('cardPin');
    const cardType = document.getElementById('cardType');
    const generateCardBtn = document.getElementById('generateCardBtn');

    // Format card number
    cardNumber.addEventListener('input', e=>{
        let value = e.target.value.replace(/\D/g,'').substring(0,16);
        value = value.replace(/(\d{4})(?=\d)/g,'$1 ');
        e.target.value=value;
        document.getElementById('cardNumberDisplay').textContent=value||'**** **** **** ****';
    });

    // Format expiry date
    cardExpiry.addEventListener('input', e=>{
        let v=e.target.value.replace(/\D/g,'').substring(0,4);
        if(v.length>=2) v=v.substring(0,2)+'/'+v.substring(2);
        e.target.value=v;
        document.getElementById('cardExpiryDisplay').textContent=v||'MM/YY';
    });

    cardCVV.addEventListener('input', e=>{
        e.target.value=e.target.value.replace(/\D/g,'').substring(0,3);
    });

    cardPin.addEventListener('input', e=>{
        e.target.value=e.target.value.replace(/\D/g,'').substring(0,4);
    });

    generateCardBtn.addEventListener('click', ()=>{
        const cardTypes=['MasterCard','VisaCard','Discover'];
        cardType.value=cardTypes[Math.floor(Math.random()*cardTypes.length)];
    });
});
</script>

<style>
.credit-card-application{padding:20px;}
.credit-card-display{display:flex;justify-content:center;margin-bottom:30px;}
.credit-card{width:300px;height:190px;perspective:1000px;}
.card-front{background:linear-gradient(135deg,#02C076 0%,#00784C 100%);border-radius:15px;padding:20px;color:var(--text-primary);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 30px rgba(2,192,118,0.3);}
.card-logo{text-align:right;font-size:18px;}
.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;}
.credit-card-form{background-color:var(--card-background);border-radius:15px;padding:20px;}
.input-group{margin-bottom:20px;}
.card-details-group{display:flex;gap:15px;}
.card-details-group .input-group{flex:1;}
.input-group label{display:block;margin-bottom:10px;color:rgba(255,255,255,0.7);}
.input-group input,.input-group select{width:100%;padding:15px;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--text-primary);}
.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 3px rgba(2,192,118,0.2);}
.btn-apply-card{width:100%;padding:15px;background-color:var(--accent-green);color:var(--text-primary);border:none;border-radius:10px;font-weight:bold;}
.btn-apply-card:hover{background-color:#01a866;transform:translateY(-2px);}
.input-with-generate{display:flex;align-items:center;background-color:rgba(255,255,255,0.05);border-radius:10px;overflow:hidden;}
.input-with-generate input{flex-grow:1;background:none;border:none;padding:15px;}
.btn-generate{background-color:var(--accent-green);color:var(--text-primary);border:none;padding:10px 15px;}
.btn-generate:hover{background-color:#01a866;}
</style>

@endsection
