@extends('cargo_company.templates.layout')

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

    .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-simple {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        background: #eef2ff;
        border: 1px solid #c7d2fe;
        border-radius: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    .alert-simple i { font-size: 20px; color: #4338ca; flex-shrink: 0; }
    .alert-simple .msg {
        flex: 1;
        font-size: 13.5px;
        color: #1e293b;
        font-weight: 500;
        min-width: 180px;
    }
    .alert-simple .msg strong { color: #1e3a8a; font-weight: 700; }
    .alert-simple a {
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
        background: #4338ca;
        padding: 7px 14px;
        border-radius: 8px;
        text-decoration: none;
        white-space: nowrap;
    }
    .alert-simple a:hover { background: #3730a3; color: #fff; }

    .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 {
        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.violet  { background: #eef2ff; color: #4338ca; }

    .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 {
        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-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;
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-size: 12.5px;
    }
    .ref-link:hover { color: #1e40af; text-decoration: underline; }

    .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');
    $displayName = auth()->user()->name ?? 'Warehouse';
@endphp

<div class="greeting">
    <h2>{{ $greeting }}, <span class="name">{{ $displayName }}</span> 👋</h2>
    <p>Here's what's coming into the warehouse today.</p>
</div>

@if(($stats['verification_pending'] ?? 0) > 0)
    <div class="alert-simple">
        <i class="ri-qr-scan-2-line"></i>
        <div class="msg">
            <strong>{{ $stats['verification_pending'] }}</strong>
            {{ \Illuminate\Support\Str::plural('delivery', $stats['verification_pending']) }}
            awaiting verification
        </div>
        <a href="{{ route('cargo_company.warehouse.deliveries.index') }}">
            Verify Now
        </a>
    </div>
@endif

<div class="section-head">
    <h5>Today's Overview</h5>
    <a href="{{ route('cargo_company.warehouse.deliveries.index') }}">View All Deliveries</a>
</div>

<div class="row g-3 mb-4">
    @php
        $statCards = [
            ["Today's Expected",     'todays_expected',      'ri-calendar-check-line',  'violet'],
            ['Arriving',             'arriving',             'ri-truck-line',           'blue'],
            ['Arrived',              'arrived',              'ri-inbox-archive-line',   'amber'],
            ['Verification Pending', 'verification_pending', 'ri-qr-scan-line',         'cyan'],
            ['Completed',            'completed',            'ri-check-double-line',    'green'],
        ];
    @endphp

    @foreach($statCards as [$label, $key, $icon, $color])
        <div class="col-xl col-md-6 col-6">
            <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((int) ($stats[$key] ?? 0)) }}</div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <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</h5>
                    <a href="{{ route('cargo_company.warehouse.deliveries.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>Tracking</th>
                                <th>Order</th>
                                <th>Transporter</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Est. Arrival</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent as $d)
                                @php
                                    $dInfo = $d->status_info
                                        ?? (config("global.transporter_delivery_statuses.{$d->status}")
                                            ?? ['text' => '—', 'class' => 'secondary']);
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('cargo_company.warehouse.deliveries.show', $d->id) }}"
                                           class="ref-link">
                                            {{ $d->tracking_number }}
                                        </a>
                                    </td>
                                    <td>
                                        <span class="ref-link" style="color:#334155;">
                                            {{ $d->order?->order_reference ?? '—' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($d->transporter)
                                            <div class="text-truncate" style="max-width:200px;">
                                                {{ $d->transporter->name ?: '—' }}
                                            </div>
                                            <div class="text-muted fs-12 font-monospace">
                                                {{ $d->transporter->user_code ?? '' }}
                                            </div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td class="text-end fw-semibold">
                                        {{ number_format((int) $d->quantity) }}
                                    </td>
                                    <td class="text-end text-muted fs-12">
                                        {{ $d->arrival_estimate ? web_date_in_timezone($d->arrival_estimate, 'M d, Y') : '—' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $dInfo['class'] }}-subtle text-{{ $dInfo['class'] }}">
                                            {{ $dInfo['text'] }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('cargo_company.warehouse.deliveries.show', $d->id) }}"
                                           class="btn btn-sm btn-soft-info">
                                            <i class="ri-scan-line"></i> Verify
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">
                                        <div class="empty">
                                            <i class="ri-inbox-2-line"></i>
                                            <small>No deliveries yet</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection