@extends('cargo_company.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; }

    /* ========== 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');
    $displayName = auth()->user()->company_name ?: auth()->user()->name;
@endphp

{{-- ========== GREETING ========== --}}
<div class="greeting">
    <h2>{{ $greeting }}, <span class="name">{{ $displayName }}</span> 👋</h2>
    <p>Here's your cargo operations overview for today.</p>
</div>

{{-- ========== PENDING QUOTES ALERT ========== --}}
@if(($stats['pending'] ?? 0) > 0)
    <div class="alert-simple">
        <i class="ri-alert-line"></i>
        <div class="msg">
            <strong>{{ $stats['pending'] }}</strong>
            {{ \Illuminate\Support\Str::plural('shipment', $stats['pending']) }} awaiting your quote submission
        </div>
        <a href="{{ route('cargo_company.shipments.index', ['status' => 'new']) }}">
            Review Now
        </a>
    </div>
@endif

{{-- ========== SHIPMENTS SNAPSHOT ========== --}}
<div class="section-head">
    <h5>My Shipments</h5>
    <a href="{{ route('cargo_company.shipments.index') }}">View All</a>
</div>

<div class="row g-3 mb-4">
    @php
        $shipmentCards = [
            ['Total Shipments', 'total_shipments', 'ri-ship-2-line',          'blue'],
            ['Pending Quotes',  'pending',         'ri-time-line',            'amber'],
            ['Accepted',        'accepted',        'ri-checkbox-circle-line', 'cyan'],
            ['In Transit',      'intransit',       'ri-roadster-line',        'gray'],
            ['Delivered',       'delivered',       'ri-check-double-line',    'green'],
            ['Cancelled',       'cancelled',       'ri-close-circle-line',    'red'],
        ];
    @endphp

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

{{-- ========== DELIVERY OPERATIONS ========== --}}
<div class="section-head">
    <h5>Delivery Operations</h5>
    <a href="{{ route('cargo_company.deliveries.index') }}">View All</a>
</div>

<div class="row g-3 mb-4">
    @php
        $deliveryCards = [
            ['Total Deliveries',     'total_deliveries',     'ri-route-line',           'blue'],
            ['Active Deliveries',    'active_deliveries',    'ri-truck-line',           'amber'],
            ['Completed Deliveries', 'completed_deliveries', 'ri-checkbox-circle-line', 'green'],
        ];
    @endphp

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

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

    {{-- Pipeline (order.status breakdown) --}}
    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-body">
                <div class="section-head mb-2">
                    <h5>Shipment Pipeline</h5>
                </div>

                @php
                    $pipeline = [
                        ['Pending',    'pending',   '#f59e0b'],
                        ['Accepted',   'accepted',  '#06b6d4'],
                        ['In Transit', 'intransit', '#3b82f6'],
                        ['Delivered',  'delivered', '#10b981'],
                        ['Cancelled',  'cancelled', '#ef4444'],
                    ];
                @endphp

                @foreach($pipeline as [$name, $key, $color])
                    <div class="status-item">
                        <span class="dot" style="background:{{ $color }};"></span>
                        <span class="name">{{ $name }}</span>
                        <span class="count">{{ number_format((int) ($stats[$key] ?? 0)) }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Recent shipments --}}
    <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 Shipments</h5>
                    <a href="{{ route('cargo_company.shipments.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 class="text-end">Items</th>
                                <th>Status</th>
                                <th class="text-end">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentShipments as $o)
                                <tr>
                                    <td>
                                        <a href="{{ route('cargo_company.shipments.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 class="text-end fw-semibold">
                                        {{ number_format((int) ($o->total_items_quantity ?? 0)) }}
                                    </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="5">
                                        <div class="empty">
                                            <i class="ri-inbox-2-line"></i>
                                            <small>No shipments yet</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ========== SHIPMENTS AWAITING QUOTE ========== --}}
@if($pendingQuotes->count())
<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;">Shipments Awaiting Your Quote</h5>
                    <a href="{{ route('cargo_company.shipments.index', ['status' => 'new']) }}"
                       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 class="text-end">Items</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pendingQuotes as $o)
                                <tr>
                                    <td>
                                        <a href="{{ route('cargo_company.shipments.show', $o->id) }}" class="ref-link">
                                            {{ $o->order_reference }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ $o->merchant?->company_name ?: ($o->merchant?->name ?: '—') }}
                                    </td>
                                    <td class="text-end fw-semibold">
                                        {{ number_format((int) ($o->total_items_quantity ?? 0)) }}
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('cargo_company.shipments.show', $o->id) }}"
                                           class="btn btn-sm btn-soft-primary">
                                            Submit Quote
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection