@extends('layouts.admin', ['title' => 'Payment Method - Booklio', 'pageTitle' => 'Payment Method', 'active' => 'subscription'])

@php($activeTab = 'payment')

@section('content')
    <div class="space-y-5">
        @include('admin.subscription.partials.nav', ['activeTab' => $activeTab])

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Saved Payment Method" description="Dummy card details for UI preview only.">
                <div class="rounded-xl bg-gradient-to-br from-blue-600 to-sky-500 p-5 text-white shadow-card">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-bold">Booklio Billing</span>
                        <x-ui.icon name="credit-card" class="h-6 w-6" />
                    </div>
                    <p class="mt-8 text-2xl font-extrabold tracking-widest">•••• •••• •••• 4242</p>
                    <div class="mt-6 flex items-center justify-between text-sm font-semibold">
                        <span>Sarah Johnson</span>
                        <span>08/29</span>
                    </div>
                </div>
                <div class="mt-5 grid gap-3 sm:grid-cols-2">
                    <x-ui.button data-booklio-placeholder="Payment method updates will be connected to Stripe/PayPal billing tokens later.">Update payment method</x-ui.button>
                    <x-ui.button variant="secondary" data-booklio-placeholder="Stored payment method removal will be connected after recurring billing is implemented.">Remove card</x-ui.button>
                </div>
            </x-ui.card>

            <x-ui.card title="Billing Contact" description="Used for subscription invoices.">
                <div class="space-y-4">
                    <x-form.input name="billing_name" label="Billing name" value="Sarah Johnson" />
                    <x-form.input name="billing_email" label="Billing email" value="billing@glow.test" />
                    <x-form.input name="billing_address" label="Billing address" value="24 Bluewater Avenue, Miami, FL" />
                    <x-ui.button class="w-full" data-booklio-placeholder="Billing contact persistence is prepared for the billing backend phase.">Save billing contact</x-ui.button>
                </div>
            </x-ui.card>
        </div>
    </div>
@endsection