@extends('layouts.epelcon')
@section('title', 'Subscription & Billing')

@section('content')
    <div class="mb-5">
        <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Epelcon subscription</h1>
        <p class="text-sm text-slate-500">Your platform plan for {{ $hotel->name }}.</p>
    </div>

    <div class="grid gap-5 lg:grid-cols-3">
        <div class="lg:col-span-2">
            @if (! $hotel->isActive())
                <div class="mb-5 rounded-2xl border-2 border-rose-300 bg-rose-50 p-5">
                    <p class="font-extrabold text-rose-700">⚠️ Your portal is locked</p>
                    <p class="mt-1 text-sm text-rose-600">Your subscription has expired. Settle the open invoice below and everything unlocks instantly — none of your data has been removed.</p>
                </div>
            @endif

            @if ($openInvoice)
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <p class="font-mono text-xs font-bold text-slate-400">{{ $openInvoice->code }}</p>
                            <p class="text-lg font-extrabold text-slate-900">₦{{ number_format($openInvoice->amount, 2) }}</p>
                            <p class="text-xs text-slate-500">Covers {{ $openInvoice->period_start->format('j M') }} → {{ $openInvoice->period_end->format('j M Y') }}</p>
                        </div>
                        <form method="POST" action="{{ route('epelcon.billing.pay', $openInvoice) }}">@csrf
                            <button class="rounded-xl bg-emerald-600 px-6 py-3.5 text-sm font-extrabold text-white shadow-lg shadow-emerald-600/25 hover:bg-emerald-700" {{ $paystackReady ? '' : 'disabled' }}>
                                💳 Pay ₦{{ number_format($openInvoice->amount) }} with Paystack
                            </button>
                        </form>
                    </div>
                    @unless ($paystackReady)
                        <p class="mt-3 rounded-xl bg-amber-50 p-3 text-xs font-semibold text-amber-800">Card payment isn't configured yet — pay by bank transfer and the Epelcon team will confirm your invoice.</p>
                    @endunless
                </div>
            @else
                <div class="rounded-2xl bg-emerald-50 p-6 text-center ring-1 ring-emerald-200">
                    <p class="text-3xl">✅</p>
                    <p class="mt-2 font-extrabold text-emerald-800">No outstanding invoices</p>
                    <p class="text-sm text-emerald-700">You're all settled{{ $hotel->subscription_expires_at ? ' until ' . $hotel->subscription_expires_at->format('j M Y') : '' }}.</p>
                </div>
            @endif

            <div class="mt-5 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">Invoice history</h2>
                <div class="divide-y divide-slate-100">
                    @forelse ($invoices as $invoice)
                        <div class="flex items-center justify-between py-2.5 text-sm">
                            <div><p class="font-mono text-xs font-bold text-slate-400">{{ $invoice->code }}</p>
                                <p class="text-xs text-slate-500">{{ $invoice->period_start->format('j M') }} → {{ $invoice->period_end->format('j M Y') }}</p></div>
                            <p class="font-bold text-slate-900">₦{{ number_format($invoice->amount, 2) }}</p>
                            <span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $invoice->status === 'paid' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">{{ $invoice->status }}</span>
                        </div>
                    @empty
                        <p class="py-4 text-center text-sm text-slate-400">No invoices yet.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="h-fit rounded-2xl bg-slate-900 p-5 text-white shadow-lg">
            <h2 class="mb-4 font-bold">Your plan</h2>
            <p class="text-2xl font-extrabold text-emerald-400">{{ $hotel->plan->name ?? 'No plan' }}</p>
            @if ($hotel->plan)
                <p class="text-sm text-slate-300">₦{{ number_format($hotel->plan->price_monthly) }}/month · up to {{ $hotel->plan->max_rooms }} rooms</p>
                <ul class="mt-3 space-y-1.5 text-xs text-slate-400">
                    @foreach ($hotel->plan->features ?? [] as $feature)<li>✓ {{ $feature }}</li>@endforeach
                </ul>
            @endif
            <dl class="mt-4 space-y-2 border-t border-slate-700 pt-4 text-sm">
                <div class="flex justify-between"><dt class="text-slate-400">Status</dt><dd class="font-bold {{ $hotel->isActive() ? 'text-emerald-400' : 'text-rose-400' }}">{{ $hotel->statusLabel() }}</dd></div>
                @if ($hotel->status === 'trial')
                    <div class="flex justify-between"><dt class="text-slate-400">Trial ends</dt><dd class="font-bold">{{ $hotel->trial_ends_at?->format('j M Y') }}</dd></div>
                @else
                    <div class="flex justify-between"><dt class="text-slate-400">Paid until</dt><dd class="font-bold">{{ $hotel->subscription_expires_at?->format('j M Y') ?? '—' }}</dd></div>
                @endif
            </dl>
        </div>
    </div>
@endsection
