@extends('admin.templates.layout')

@section('head')
<style>
    :root {
        --ink-900: #0f172a;
        --ink-700: #334155;
        --ink-500: #64748b;
        --ink-400: #94a3b8;
        --line:    #e9edf2;
    }

    /* ========== GREETING ========== */
    .greeting { margin-bottom: 24px; }
    .greeting h2 { font-size: 24px; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; margin: 0 0 4px; }
    .greeting h2 .name { color: #1d4ed8; }
    .greeting p { font-size: 14px; color: var(--ink-500); margin: 0; }

    /* ========== ALERT ========== */
    .alert-simple { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; margin-bottom: 24px; flex-wrap: wrap; }
    .alert-simple i { font-size: 20px; color: #d97706; flex-shrink: 0; }
    .alert-simple .msg { flex: 1; font-size: 13.5px; color: #78350f; font-weight: 500; min-width: 180px; }
    .alert-simple .msg strong { color: #451a03; font-weight: 700; }
    .alert-simple a { font-size: 12.5px; font-weight: 600; color: #fff; background: #d97706; padding: 7px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
    .alert-simple a:hover { background: #b45309; color: #fff; }

    /* ========== SECTION HEAD ========== */
    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
    .section-head h5 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0; }
    .section-head a { font-size: 12.5px; font-weight: 600; color: #1d4ed8; text-decoration: none; }
    .section-head a:hover { color: #1e40af; text-decoration: underline; }

    /* ========== STAT CARD ========== */
    .stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; height: 100%; display: flex; align-items: center; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
    .stat:hover { border-color: #d5dde7; box-shadow: 0 8px 20px -14px rgba(15,23,42,.18); }
    .stat .icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
    .stat .icon.blue    { background: #e0e9ff; color: #1d4ed8; }
    .stat .icon.cyan    { background: #d7f0f9; color: #0891b2; }
    .stat .icon.amber   { background: #fef3d0; color: #b45309; }
    .stat .icon.green   { background: #d8f3e6; color: #047857; }
    .stat .icon.gray    { background: #e6eaf0; color: #475569; }
    .stat .icon.red     { background: #fde1e1; color: #b91c1c; }

    .stat .info { min-width: 0; flex: 1; }
    .stat .label { font-size: 11.5px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; line-height: 1; }
    .stat .value { font-size: 24px; font-weight: 700; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

    /* ========== PANEL ========== */
    .panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 100%; }
    .panel .panel-body { padding: 22px; }
    .panel .panel-body.p-0 { padding: 0; }

    /* ========== SIMPLE STATUS LIST ========== */
    .status-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f1f4f9; }
    .status-item:last-child { border-bottom: none; }
    .status-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .status-item .name { flex: 1; font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
    .status-item .count { font-size: 14px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

    /* ========== SIMPLE TABLE ========== */
    .simple-table { margin: 0; }
    .simple-table thead th { background: #fafbfd; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--ink-500); padding: 12px 22px; border-bottom: 1px solid #f1f4f9; white-space: nowrap; }
    .simple-table tbody td { padding: 14px 22px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid #f1f4f9; color: var(--ink-700); }
    .simple-table tbody tr:last-child td { border-bottom: none; }
    .simple-table tbody tr:hover { background: #fafbfd; }

    .ref-link { font-weight: 600; color: #1d4ed8; text-decoration: none; }
    .ref-link:hover { color: #1e40af; text-decoration: underline; }

    .avatar-initial { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }

    /* ========== EMPTY STATE ========== */
    .empty { text-align: center; padding: 40px 20px; color: var(--ink-400); }
    .empty i { font-size: 32px; display: block; margin-bottom: 8px; opacity: .5; }
    .empty small { font-size: 13px; }
</style>
@endsection

@section('content')

@php
    $hour = (int) now()->format('H');
    $greeting = $hour < 12 ? 'Good morning' : ($hour < 18 ? 'Good afternoon' : 'Good evening');
@endphp

{{-- GREETING --}}
<div class="greeting">
    <h2>{{ $greeting }}, <span class="name">{{ auth()->user()->name ?? 'Admin' }}</span> 👋</h2>
    <p>Here's what's happening on your platform today.</p>
</div>

{{-- PENDING APPROVAL ALERT --}}
<!-- @if(($stats['pending_accounts'] ?? 0) > 0)
    <div class="alert-simple">
        <i class="ri-alert-line"></i>
        <div class="msg">
            <strong>{{ $stats['pending_accounts'] }}</strong>
            {{ \Illuminate\Support\Str::plural('business', $stats['pending_accounts']) }} waiting for approval
        </div>
        <a href="{{ route('admin.merchants.index', ['status' => ACCOUNT_PENDING]) }}">
            Review Now
        </a>
    </div>
@endif -->

{{-- BUSINESSES --}}
<div class="section-head">
    <h5>Businesses</h5>
</div>

<div class="row g-3 mb-4">
    @php
        $bizCards = [
            ['Merchants',       'merchants',      'ri-store-2-line',   'blue',  route('admin.merchants.index')],
            ['Cargo Companies', 'cargo_companies','ri-truck-line',     'cyan',  route('admin.cargo_companies.index')],
            ['Transporters',    'transporters',   'ri-roadster-line',  'amber', route('admin.transporters.index')],
            ['Entrepreneurs',   'entrepreneurs',  'ri-user-star-line', 'green', route('admin.entrepreneurs.index')],
            ['End Users',       'end_users',      'ri-group-line',     'gray',  route('admin.users.index')],
        ];
    @endphp

    @foreach($bizCards as [$label, $key, $icon, $color, $link])
        <div class="col-xl col-md-4 col-6">
            <a href="{{ $link }}" class="text-decoration-none d-block h-100">
                <div class="stat">
                    <div class="icon {{ $color }}"><i class="{{ $icon }}"></i></div>
                    <div class="info">
                        <div class="label">{{ $label }}</div>
                        <div class="value">{{ number_format($stats[$key]) }}</div>
                    </div>
                </div>
            </a>
        </div>
    @endforeach
</div>

{{-- ORDERS --}}
<div class="section-head">
    <h5>Orders</h5>
    <a href="{{ route('admin.orders.index') }}">View All</a>
</div>

<div class="row g-3 mb-4">
    @php
        $orderCards = [
            ['Shipment Orders', 'total_orders',     'ri-shopping-bag-3-line',  'blue',  route('admin.orders.index')],
            ['Accepted','active_orders',   'ri-loader-4-line',        'cyan',  route('admin.orders.index', ['status_filter' => ORDER_ACCEPTED])],
            ['In Transit',      'in_transit',       'ri-truck-line',           'amber', route('admin.orders.index', ['status_filter' => ORDER_IN_TRANSIT])],
            ['Completed',       'completed_orders', 'ri-checkbox-circle-line', 'green', route('admin.orders.index', ['status_filter' => ORDER_DELIVERED])],
            ['Cancelled',       'cancelled_orders', 'ri-close-circle-line',    'red',   route('admin.orders.index', ['status_filter' => ORDER_CANCELLED])],
        ];
    @endphp

    @foreach($orderCards as [$label, $key, $icon, $color, $link])
        <div class="col-xl col-md-4 col-6">
            <a href="{{ $link }}" class="text-decoration-none d-block h-100">
                <div class="stat">
                    <div class="icon {{ $color }}"><i class="{{ $icon }}"></i></div>
                    <div class="info">
                        <div class="label">{{ $label }}</div>
                        <div class="value">{{ number_format($stats[$key]) }}</div>
                    </div>
                </div>
            </a>
        </div>
    @endforeach
</div>

{{-- DELIVERIES --}}
<div class="section-head">
    <h5>Deliveries</h5>
    <a href="{{ route('admin.orders.index') }}">View All</a>
</div>

<div class="row g-3 mb-4">
    @php
        $deliveryCards = [
            ['Total Deliveries', 'total_deliveries',        'ri-route-line',  'blue', route('admin.orders.index')],
            ['In Transit',       'in_transit_deliveries',   'ri-truck-line',  'amber', route('admin.orders.index', ['status_filter' => ORDER_IN_TRANSIT])],
            ['Arrived at Warehouse', 'arrived_deliveries', 'ri-archive-drawer-line', 'green', route('admin.orders.index', ['status_filter' => ORDER_ARRIVED])],
        ];
    @endphp

    @foreach($deliveryCards as [$label, $key, $icon, $color, $link])
        <div class="col-xl-3 col-md-4 col-6">
            <a href="{{ $link }}" class="text-decoration-none d-block h-100">
                <div class="stat">
                    <div class="icon {{ $color }}"><i class="{{ $icon }}"></i></div>
                    <div class="info">
                        <div class="label">{{ $label }}</div>
                        <div class="value">{{ number_format($stats[$key]) }}</div>
                    </div>
                </div>
            </a>
        </div>
    @endforeach
</div>

{{-- STATUS + RECENT ORDERS --}}
<div class="row g-3 mb-4">

    {{-- Status breakdown --}}
    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-body">
                <div class="section-head mb-2">
                    <h5>Order Status</h5>
                </div>

                @php
                    $colorMap = [
                        'warning' => '#f59e0b', 'info' => '#06b6d4', 'primary' => '#3b82f6',
                        'success' => '#10b981', 'danger' => '#ef4444', 'secondary' => '#64748b',
                    ];
                @endphp

                @foreach($orderStatusBreakdown as $status => $info)
                    <div class="status-item">
                        <span class="dot" style="background:{{ $colorMap[$info['class']] ?? '#64748b' }};"></span>
                        <span class="name">{{ $info['text'] }}</span>
                        <span class="count">{{ $info['total'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Recent orders --}}
    <div class="col-lg-8">
        <div class="panel">
            <div class="panel-body p-0">
                <div class="px-4 py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" style="font-size:15px;font-weight:700;">Recent Orders</h5>
                    <a href="{{ route('admin.orders.index') }}" style="font-size:12.5px;font-weight:600;color:#1d4ed8;text-decoration:none;">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table simple-table align-middle">
                        <thead>
                            <tr>
                                <th>Reference</th>
                                <th>Merchant</th>
                                <th>Status</th>
                                <th class="text-end">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentOrders as $o)
                                <tr>
                                    <td>
                                        <a href="{{ route('admin.orders.show', $o->id) }}" class="ref-link">
                                            {{ $o->order_reference }}
                                        </a>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width:220px;">
                                            {{ $o->merchant?->company_name ?: ($o->merchant?->name ?: '-') }}
                                        </div>
                                    </td>
                                    <td>{!! order_status_badge($o->status) !!}</td>
                                    <td class="text-end text-muted fs-12">
                                        {{ web_date_in_timezone($o->created_at, 'M d, Y') }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="empty">
                                            <i class="ri-inbox-2-line"></i>
                                            <small>No orders yet</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- RECENT DELIVERIES (Whom Assigned & Who Assigned) --}}
<div class="row mb-4">
    <div class="col-12">
        <div class="panel">
            <div class="panel-body p-0">
                <div class="px-4 py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" style="font-size:15px;font-weight:700;">Recent Deliveries (Assignments)</h5>
                    <a href="{{ route('admin.assignments.index') }}" style="font-size:12.5px;font-weight:600;color:#1d4ed8;text-decoration:none;">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table simple-table align-middle">
                        <thead>
                            <tr>
                                <th>Order Ref</th>
                                <th>Tracking #</th>
                                <th>Assigned To (Transporter)</th>
                                <th>Assigned By</th>
                                <th>Status</th>
                                <th class="text-end">Assigned At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentDeliveries as $delivery)
                                @php
                                    // Find the last order status change at or before the delivery was created.
                                    // That changer is the closest proxy for "who assigned this delivery".
                                    $assigner = optional(
                                        $delivery->order?->histories
                                            ?->filter(fn ($h) => $h->created_at <= $delivery->created_at)
                                            ->sortByDesc('created_at')
                                            ->first()
                                    )->changer;

                                    $assignerName = $assigner?->name ?? 'System / Admin';
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('admin.orders.show', $delivery->order_id) }}" class="ref-link">
                                            {{ $delivery->order?->order_reference ?? '-' }}
                                        </a>
                                    </td>
                                    <td class="text-muted">
                                        <code style="font-size:12px;">{{ $delivery->tracking_number ?: '-' }}</code>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2 text-truncate" style="max-width:240px;">
                                            <i class="ri-user-star-line text-muted"></i>
                                            <span>{{ $delivery->transporter?->company_name ?: ($delivery->transporter?->name ?: '-') }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-muted">{{ $assignerName }}</span>
                                    </td>
                                    <td>
                                        {!! transporter_delivery_status_badge($delivery->status) !!}
                                    </td>
                                    <td class="text-end text-muted fs-12">
                                        {{ web_date_in_timezone($delivery->created_at, 'M d, Y h:i A') }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="empty">
                                            <i class="ri-truck-line"></i>
                                            <small>No deliveries assigned yet</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- RECENT BUSINESSES --}}
<div class="row">
    <div class="col-12">
        <div class="panel">
            <div class="panel-body p-0">
                <div class="px-4 py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" style="font-size:15px;font-weight:700;">Recently Registered</h5>
                </div>
                <div class="table-responsive">
                    <table class="table simple-table align-middle">
                        <thead>
                            <tr>
                                <th>Business</th>
                                <th>Role</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th class="text-end">Registered</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $roleColor = [
                                    ROLE_MERCHANT      => '#3b82f6',
                                    ROLE_CARGO_COMPANY => '#06b6d4',
                                    ROLE_TRANSPORTER   => '#f59e0b',
                                    ROLE_ENTREPRENEUR  => '#10b981',
                                ];
                            @endphp
                            @forelse($recentBusinesses as $b)
                                @php $rc = $roleColor[$b->role] ?? '#64748b'; @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar-initial" style="background:{{ $rc }};">
                                                {{ name_initials($b->company_name ?: $b->name) }}
                                            </div>
                                            <div class="min-w-0">
                                                <div class="fw-semibold text-truncate" style="max-width:240px;">
                                                    {{ $b->company_name ?: $b->name }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span style="font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:{{ $rc }}1A;color:{{ $rc }};">
                                            {{ role_label($b->role) }}
                                        </span>
                                    </td>
                                    <td class="text-muted fs-13 text-truncate" style="max-width:220px;">
                                        {{ $b->email }}
                                    </td>
                                    <td>{!! account_status_badge($b->status) !!}</td>
                                    <td class="text-end text-muted fs-12">
                                        {{ web_date_in_timezone($b->created_at, 'M d, Y') }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        <div class="empty">
                                            <i class="ri-user-add-line"></i>
                                            <small>No businesses yet</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection