@extends('transporter.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');
    $userName = auth()->user()->company_name ?: auth()->user()->name;

    // Active = everything except completed / rejected (matches API getList 'now' tab)
    $activeCount = ($stats['assigned'] ?? 0)
                 + ($stats['accepted'] ?? 0)
                 + ($stats['collected'] ?? 0)
                 + ($stats['intransit'] ?? 0)
                 + ($stats['arrived'] ?? 0);
@endphp

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

{{-- ========== ACTIVE DELIVERIES ALERT ========== --}}
@if($activeCount > 0)
    <div class="alert-simple">
        <i class="ri-truck-line"></i>
        <div class="msg">
            <strong>{{ $activeCount }}</strong>
            {{ \Illuminate\Support\Str::plural('delivery', $activeCount) }} in progress — manage them now
        </div>
        <a href="{{ route('transporter.deliveries.index') }}">
            View Deliveries
        </a>
    </div>
@endif

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

<div class="row g-3 mb-4">
    @php
        $deliveryCards = [
            ['Assigned',   'assigned',   'ri-inbox-archive-line',  'blue'],
            ['Accepted',   'accepted',   'ri-checkbox-circle-line','cyan'],
            ['Collected',  'collected',  'ri-archive-2-line',       'gray'],
            ['In Transit', 'intransit',  'ri-roadster-line',        'amber'],
            ['Arrived',    'arrived',    'ri-map-pin-2-line',       'gray'],
            ['Completed',  'completed',  'ri-check-double-line',    'green'],
            ['Rejected',   'rejected',   'ri-close-circle-line',    'red'],
        ];
    @endphp

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

{{-- ========== EARNINGS SNAPSHOT ========== --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="stat">
            <div class="icon green"><i class="ri-money-dollar-circle-line"></i></div>
            <div class="info">
                <div class="label">Total Transport Charges</div>
                <div class="value">
                    {{ number_format((float) ($stats['total_charges'] ?? 0), 2) }}
                    <span style="font-size:13px;color:#94a3b8;font-weight:600;margin-left:4px;">AED</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat">
            <div class="icon green"><i class="ri-hand-coin-line"></i></div>
            <div class="info">
                <div class="label">Completed Earnings</div>
                <div class="value">
                    {{ number_format((float) ($stats['completed_earnings'] ?? 0), 2) }}
                    <span style="font-size:13px;color:#94a3b8;font-weight:600;margin-left:4px;">AED</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat">
            <div class="icon cyan"><i class="ri-archive-2-line"></i></div>
            <div class="info">
                <div class="label">Total Items Handled</div>
                <div class="value">{{ number_format((int) ($stats['total_qty'] ?? 0)) }}</div>
            </div>
        </div>
    </div>
</div>

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

    {{-- Delivery pipeline --}}
    <div class="col-lg-4">
        <div class="panel">
            <div class="panel-body">
                <div class="section-head mb-2">
                    <h5>Delivery Pipeline</h5>
                </div>

                @php
                    $pipeline = [
                        ['Assigned',   'assigned',   '#3b82f6'],
                        ['Accepted',   'accepted',   '#06b6d4'],
                        ['Collected',  'collected',  '#64748b'],
                        ['In Transit', 'intransit',  '#f59e0b'],
                        ['Arrived',    'arrived',    '#8b5cf6'],
                        ['Completed',  'completed',  '#10b981'],
                        ['Rejected',   'rejected',   '#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>

    {{-- Active deliveries --}}
    <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;">Active Deliveries</h5>
                    <a href="{{ route('transporter.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>Cargo Company</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($activeDeliveries as $d)
                                <tr>
                                    <td>
                                        <a href="{{ route('transporter.deliveries.show', $d->id) }}" class="ref-link">
                                            {{ $d->tracking_number }}
                                        </a>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width:220px;">
                                            {{ $d->order?->cargoCompany?->company_name
                                                ?: ($d->order?->cargoCompany?->name ?: '—') }}
                                        </div>
                                    </td>
                                    <td>
                                        @php $ds = config('global.transporter_delivery_statuses')[$d->status] ?? ['text'=>'—','class'=>'secondary']; @endphp
                                        <span class="badge bg-{{ $ds['class'] }}-subtle text-{{ $ds['class'] }}">{{ $ds['text'] }}</span>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('transporter.deliveries.show', $d->id) }}"
                                           class="btn btn-sm btn-soft-primary">
                                            Manage
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="empty">
                                            <i class="ri-inbox-2-line"></i>
                                            <small>No active deliveries</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ========== RECENTLY COMPLETED ========== --}}
@if($recentCompleted->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;">Recently Completed</h5>
                    <a href="{{ route('transporter.deliveries.index', ['status' => TRANSPORTER_DELIVERY_COMPLETED]) }}"
                       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>Cargo Company</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Charges</th>
                                <th class="text-end">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentCompleted as $d)
                                <tr>
                                    <td>
                                        <a href="{{ route('transporter.deliveries.show', $d->id) }}" class="ref-link">
                                            {{ $d->tracking_number }}
                                        </a>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width:220px;">
                                            {{ $d->order?->cargoCompany?->company_name
                                                ?: ($d->order?->cargoCompany?->name ?: '—') }}
                                        </div>
                                    </td>
                                    <td class="text-end fw-semibold">
                                        {{ number_format((int) $d->quantity) }}
                                    </td>
                                    <td class="text-end fw-semibold">
                                        {{ number_format((float) $d->total_charges, 2) }}
                                        <span style="font-size:11px;color:#94a3b8;font-weight:600;margin-left:2px;">AED</span>
                                    </td>
                                    <td class="text-end text-muted fs-12">
                                        {{ web_date_in_timezone($d->created_at, 'M d, Y') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection