@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold mb-6">Manage Credit Cards</h2>

    @foreach($creditCards as $card)
    <div class="bg-white rounded-lg shadow-md p-4 mb-4 flex justify-between items-center">
        <div>
            <p class="font-semibold">{{ $card->brand }} **** {{ $card->last_four }}</p>
            <p>Expires: {{ $card->expiration_month }}/{{ $card->expiration_year }}</p>
            @if($card->is_default)
                <span class="text-green-500">Default</span>
            @endif
        </div>
        @if(!$card->is_default)
        <form action="{{ route('profile.credit-cards.set-default', $card) }}" method="POST">
            @csrf
            <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
                Set as Default
            </button>
        </form>
        @endif
    </div>
    @endforeach

    <h3 class="text-2xl font-bold mt-8 mb-4">Add New Credit Card</h3>
    <form action="{{ route('profile.credit-cards.add') }}" method="POST">
        @csrf
        <div class="mb-4">
            <input type="text" name="card_number" placeholder="Card Number" class="w-full p-2 border rounded" required>
        </div>
        <div class="mb-4">
            <input type="text" name="expiration_date" placeholder="MM/YYYY" class="w-full p-2 border rounded" required>
        </div>
        <div class="mb-4">
            <input type="text" name="cvv" placeholder="CVV" class="w-full p-2 border rounded" required>
        </div>
        <button type="submit" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
            Add Credit Card
        </button>
    </form>
</div>
@endsection