@extends('layouts.platform')
@section('title', 'Dashboard')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-extrabold text-white">Platform overview</h1>
        <p class="text-sm text-slate-400">Every property running on Epelcon Hospitality.</p>
    </div>

    <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
        <div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-5 text-slate-950">
            <p class="text-xs font-extrabold uppercase tracking-wide opacity-70">Monthly recurring revenue</p>
            <p class="mt-1 text-2xl font-extrabold sm:text-3xl">₦{{ number_format($stats['mrr']) }}</p>
            <p class="mt-1 text-xs font-bold opacity-70">₦{{ number_format($stats['collected_month']) }} collected this month</p>
        </div>
        <div class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
            <p class="text-xs font-bold uppercase text-slate-400">Properties</p>
            <p class="mt-1 text-3xl font-extrabold text-white">{{ $stats['hotels'] }}</p>
            <p class="mt-1 text-xs text-slate-400">{{ $stats['active'] }} active · {{ $stats['trials'] }} on trial</p>
        </div>
        <div class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
            <p class="text-xs font-bold uppercase text-slate-400">Locked / expired</p>
            <p class="mt-1 text-3xl font-extrabold {{ $stats['suspended'] ? 'text-rose-400' : 'text-white' }}">{{ $stats['suspended'] }}</p>
        </div>
        <div class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
            <p class="text-xs font-bold uppercase text-slate-400">Unpaid invoices</p>
            <p class="mt-1 text-3xl font-extrabold text-amber-400">{{ $stats['unpaid_invoices'] }}</p>
            <p class="mt-1 text-xs text-slate-400">₦{{ number_format($stats['unpaid_amount']) }} outstanding</p>
        </div>
    </div>

    <div class="mt-6 grid gap-5 lg:grid-cols-2">
        <div class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
            <h2 class="mb-3 font-bold text-white">⏳ Renewals due in 14 days</h2>
            <div class="divide-y divide-white/5">
                @forelse ($expiring as $hotel)
                    <div class="flex items-center justify-between py-2.5 text-sm">
                        <div>
                            <p class="font-bold text-white">{{ $hotel->name }}</p>
                            <p class="text-xs text-slate-400">{{ $hotel->plan->name ?? 'No plan' }} · {{ $hotel->statusLabel() }}</p>
                        </div>
                        <span class="text-xs font-bold text-amber-400">{{ ($hotel->status === 'trial' ? $hotel->trial_ends_at : $hotel->subscription_expires_at)?->diffForHumans() }}</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-500">Nothing expiring soon. 😌</p>
                @endforelse
            </div>
        </div>

        <div class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
            <h2 class="mb-3 font-bold text-white">Recent invoices</h2>
            <div class="divide-y divide-white/5">
                @forelse ($recentInvoices as $invoice)
                    <div class="flex items-center justify-between py-2.5 text-sm">
                        <div>
                            <p class="font-mono text-xs font-bold text-emerald-400">{{ $invoice->code }}</p>
                            <p class="text-xs text-slate-400">{{ $invoice->hotel->name ?? '—' }}</p>
                        </div>
                        <p class="font-bold text-white">₦{{ number_format($invoice->amount) }}</p>
                        <span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $invoice->status === 'paid' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-400' }}">{{ $invoice->status }}</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-500">No invoices yet.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="mt-6 rounded-2xl bg-white/5 p-5 ring-1 ring-white/10">
        <h2 class="mb-3 font-bold text-white">All properties</h2>
        <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            @foreach ($hotels as $hotel)
                <div class="rounded-xl bg-slate-900 p-4 ring-1 ring-white/10">
                    <div class="flex items-start justify-between">
                        <p class="font-bold text-white">{{ $hotel->name }}</p>
                        <span class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase {{ $hotel->isActive() ? 'bg-emerald-500/15 text-emerald-400' : 'bg-rose-500/15 text-rose-400' }}">{{ $hotel->statusLabel() }}</span>
                    </div>
                    <p class="mt-0.5 text-xs text-slate-400">{{ $hotel->slug }}.epelcon.com · {{ $hotel->plan->name ?? 'No plan' }}</p>
                    <a href="{{ route('platform.act_as', $hotel) }}" class="mt-2 inline-block rounded-lg bg-emerald-500/15 px-3 py-1.5 text-xs font-bold text-emerald-400 hover:bg-emerald-500/25">Open portal →</a>
                </div>
            @endforeach
        </div>
    </div>
@endsection
