@extends('layouts.user_type.auth')

@section('content')

<style>
    .credit-card {
        background: linear-gradient(135deg, #1f1c2c, #928DAB);
        color: white;
        border-radius: 20px;
        padding: 35px;
        position: relative;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s ease;
    }

    .credit-card:hover {
        transform: scale(1.03);
    }

    .credit-card .brand {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 1.5rem;
        font-weight: bold;
        opacity: 0.85;
        text-transform: uppercase;
    }

    .credit-card .bank-name {
        font-size: 1.7rem;
        font-weight: bold;
        margin-bottom: 25px;
    }

    .credit-card .card-number {
        font-size: 1.8rem;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .credit-card .card-info {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        margin-top: 20px;
    }

    .credit-card .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        opacity: 0.7;
    }
    /* .alert-danger {
        background-image: linear-gradient(310deg, #ea0606 0%, #ff3d59 100%);
        display: none;
    } */
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <h3 class="mb-4">Payment Details </h3>

            @if ($paymentProfiles && count($paymentProfiles) > 0)
                @php
                    $firstProfile = $paymentProfiles[0] ?? null;
                    $cardNumber = $firstProfile ? $firstProfile->getPayment()->getCreditCard()->getCardNumber() : '•••• •••• •••• ••••';
                    $cardName = $firstProfile ? $firstProfile->getBillTo()->getFirstName() . ' ' . $firstProfile->getBillTo()->getLastName() : '';
                    $expiryDate = $firstProfile ? $firstProfile->getPayment()->getCreditCard()->getExpirationDate() : 'MM/YY';
                    $brand = 'Card';
                    if (Str::startsWith($cardNumber, '4')) $brand = 'Visa';
                    elseif (Str::startsWith($cardNumber, ['51', '52', '53', '54', '55'])) $brand = 'MasterCard';
                    elseif (Str::startsWith($cardNumber, '34') || Str::startsWith($cardNumber, '37')) $brand = 'Amex';
                @endphp
                <div class="row">
                    <div class="col-md-8 col-lg-6 mb-4">
                        <div class="credit-card">
                            <div class="brand" id="preview_brand">{{ $brand }}</div>
                            <div class="bank-name">My Bank</div>
                            <div class="card-number" id="preview_card_number">{{ $cardNumber }}</div>
                            <div class="card-info">
                                <div>
                                    <div class="label">Card Holder</div>
                                    <div id="preview_cardholder_name">{{ $cardName }}</div>
                                </div>
                                <div>
                                    <div class="label">Expires</div>
                                    <div id="preview_expiry">{{ $expiryDate }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row">
                    <div class="col-md-8 col-lg-6 mb-4">
                        <div class="credit-card">
                            <div class="brand" id="preview_brand">Card</div>
                            <div class="bank-name">My Bank</div>
                            <div class="card-number" id="preview_card_number">•••• •••• •••• ••••</div>
                            <div class="card-info">
                                <div>
                                    <div class="label">Card Holder</div>
                                    <div id="preview_cardholder_name">FULL NAME</div>
                                </div>
                                <div>
                                    <div class="label">Expires</div>
                                    <div id="preview_expiry">MM/YY</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Update Card Form --}}
            <div class="card mt-5">
                <div class="card-body">
                    {{-- <h4 class="mb-3">Update Card Information</h4> --}}

                    {{-- @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @elseif (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif --}}

                    {{-- <form method="POST" action="{{ route('card.update', $user->id) }}"> --}}
                    <form action="{{ route('subscription.update', $user->id) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="card_number" class="form-label">Card Number</label>
                            <input type="text" name="card_number" id="card_number" maxlength="16" placeholder="1234123412341234"
                                   class="form-control" required value="{{ $paymentProfiles ? $cardNumber : '' }}">
                        </div>

                        <div class="mb-3">
                            <label for="cardholder_name" class="form-label">Card Holder Name</label>
                            <input type="text" name="cardholder_name" id="cardholder_name" placeholder="Full Name"
                                   class="form-control" required value="{{ $paymentProfiles ? $cardName : '' }}">
                        </div>

                        <div class="mb-3 row">
                            <div class="col-md-6">
                                <label for="expiry_date" class="form-label">Expiry Date (MM/YY)</label>
                                <input type="text" name="expiry_date" id="expiry_date" maxlength="5" placeholder="MM/YY"
                                       class="form-control" required value="{{ $paymentProfiles ? $expiryDate : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label for="cvv" class="form-label">CVV</label>
                                <input type="text" name="cvv" id="cvv" maxlength="3" placeholder="123"
                                       class="form-control" required value="">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary mt-3">Update Card</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const expiryInput = document.getElementById('expiry_date');
        const cardNumberInput = document.getElementById('card_number');
        const cardNameInput = document.getElementById('cardholder_name');

        const previewCardNumber = document.getElementById('preview_card_number');
        const previewCardName = document.getElementById('preview_cardholder_name');
        const previewExpiry = document.getElementById('preview_expiry');
        const previewBrand = document.getElementById('preview_brand');

        // Format expiry as MM/YY
        expiryInput.addEventListener('input', function (e) {
            let value = e.target.value.replace(/[^\d]/g, '');
            if (value.length >= 3) {
                value = value.slice(0, 2) + '/' + value.slice(2, 4);
            }
            e.target.value = value;
            previewExpiry.textContent = value;
        });

        cardNumberInput.addEventListener('input', function (e) {
            const number = e.target.value;
            previewCardNumber.textContent = number;

            // Set brand
            let brand = 'Card';
            if (number.startsWith('4')) brand = 'Visa';
            else if (/^5[1-5]/.test(number)) brand = 'MasterCard';
            else if (number.startsWith('34') || number.startsWith('37')) brand = 'Amex';

            previewBrand.textContent = brand;
        });

        cardNameInput.addEventListener('input', function (e) {
            previewCardName.textContent = e.target.value;
        });
    });

</script>

@endsection