@extends('layouts.hosting')
@section('title', 'Overview — Ladill Servers')
@section('content')
<div class="mx-auto max-w-5xl">
    <div class="flex items-center justify-between gap-3">
        <div class="min-w-0 flex-1">
            <h1 class="truncate text-lg font-semibold tracking-tight text-slate-900 lg:text-xl">Overview</h1>
            <p class="mt-0.5 hidden text-sm text-slate-500 sm:block">Your VPS and dedicated servers at a glance.</p>
        </div>
        <div class="flex shrink-0 items-center gap-2">
            @include('partials.mobile-header-btn', [
                'href' => route('servers.vps', ['order' => 1]),
                'label' => 'Order VPS',
                'variant' => 'primary',
            ])
            @include('partials.mobile-header-btn', [
                'href' => route('servers.dedicated', ['order' => 1]),
                'label' => 'Order dedicated',
                'variant' => 'outline',
                'showDesktopIcon' => false,
            ])
        </div>
    </div>

    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach([
            ['Active servers', $activeCount, route('servers.vps')],
            ['VPS', $vpsCount, route('servers.vps')],
            ['Dedicated', $dedicatedCount, route('servers.dedicated')],
            ['Pending orders', $pendingOrderCount, route('servers.vps')],
        ] as [$label, $value, $link])
            <a href="{{ $link }}" class="rounded-2xl border border-slate-200 bg-white p-5 transition hover:border-indigo-200">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $value }}</p>
            </a>
        @endforeach
    </div>

    <div class="mt-6 rounded-2xl border border-slate-200 bg-white">
        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3.5">
            <h2 class="text-sm font-semibold text-slate-900">Your servers</h2>
        </div>
        @if ($recent->isEmpty())
            <div class="px-5 py-12 text-center">
                <p class="text-sm font-semibold text-slate-700">No servers yet</p>
                <p class="mx-auto mt-1 max-w-sm text-xs text-slate-400">Deploy a VPS or dedicated server — configure region, image, and billing in minutes.</p>
                <div class="mt-5 flex flex-wrap justify-center gap-2">
                    <a href="{{ route('servers.vps', ['order' => 1]) }}" class="btn-primary">Order VPS</a>
                    <a href="{{ route('servers.dedicated', ['order' => 1]) }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Order dedicated</a>
                </div>
            </div>
        @else
            <div class="divide-y divide-slate-50">
                @foreach ($recent as $order)
                    @php
                        $panelUrl = $order->control_panel_url ?: route('servers.orders.show', $order);
                    @endphp
                    <a href="{{ $panelUrl }}" class="flex items-center justify-between px-5 py-3.5 transition hover:bg-slate-50">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium text-slate-900">{{ $order->domain_name ?: ($order->product?->name ?? 'Server') }}</p>
                            <p class="mt-0.5 text-xs text-slate-400">
                                {{ $order->product?->name ?? 'Server' }}
                                @if ($order->server_ip)
                                    · {{ $order->server_ip }}
                                @endif
                            </p>
                        </div>
                        <span @class([
                            'shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium capitalize',
                            'bg-emerald-50 text-emerald-700' => $order->status === 'active',
                            'bg-amber-50 text-amber-700' => in_array($order->status, ['pending_payment', 'pending_approval', 'approved', 'provisioning'], true),
                            'bg-slate-100 text-slate-600' => ! in_array($order->status, ['active', 'pending_payment', 'pending_approval', 'approved', 'provisioning'], true),
                        ])>{{ \App\Models\CustomerHostingOrder::customerFacingStatusLabelFor($order->status) }}</span>
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    @if ($pendingOrders->isNotEmpty())
        <div class="mt-6 rounded-2xl border border-slate-200 bg-white">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3.5">
                <h2 class="text-sm font-semibold text-slate-900">Pending orders</h2>
            </div>
            <div class="divide-y divide-slate-50">
                @foreach ($pendingOrders as $order)
                    <a href="{{ route('servers.orders.show', $order) }}" class="flex items-center justify-between px-5 py-3.5 transition hover:bg-slate-50">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium text-slate-900">{{ $order->domain_name ?: ($order->product?->name ?? 'Server order') }}</p>
                            <p class="mt-0.5 text-xs text-slate-400">{{ $order->product?->name ?? 'Server' }}</p>
                        </div>
                        <span class="shrink-0 rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-medium text-amber-700">
                            {{ \App\Models\CustomerHostingOrder::customerFacingStatusLabelFor($order->status) }}
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</div>
@endsection