@extends('merchant.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');
@endphp

{{-- ========== GREETING ========== --}}
<div class="greeting">
    <h2>{{ $greeting }}, <span class="name">{{ auth()->user()->company_name ?: auth()->user()->name }}</span> 👋</h2>
    <p>Here's your shipment overview for today.</p>
</div>

{{-- ========== QUOTES AWAITING ACTION ========== --}}
@if(($stats['pending_orders'] ?? 0) > 0)
    <div class="alert-simple">
        <i class="ri-alert-line"></i>
        <div class="msg">
            <strong>{{ $stats['pending_orders'] }}</strong>
            {{ \Illuminate\Support\Str::plural('order', $stats['pending_orders']) }} waiting for cargo company quote
        </div>
        <a href="{{ route('merchant.orders.index') }}">
            Review Now
        </a>
    </div>
@endif

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

<div class="row g-3 mb-4">
    @php
        $orderCards = [
            ['Total Orders',  'total_orders',     'ri-shopping-bag-3-line',  'blue'],
            ['Drafts',        'draft_orders',     'ri-draft-line',           'gray'],
            ['Pending',       'pending_orders',   'ri-time-line',            'amber'],
            ['Active',        'active_orders',    'ri-loader-4-line',        'cyan'],
            ['Completed',     'completed_orders', 'ri-checkbox-circle-line', 'green'],
            ['Cancelled',     'cancelled_orders', 'ri-close-circle-line',    'red'],
        ];
    @endphp

    @foreach($orderCards 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>

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

    {{-- Order status list --}}
    <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($statusBreakdown as $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('merchant.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>Cargo Company</th>
                                <th>Status</th>
                                <th class="text-end">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentOrders as $o)
                                <tr>
                                    <td>
                                        <a href="{{ route('merchant.orders.show', $o->id) }}" class="ref-link">
                                            {{ $o->order_reference }}
                                        </a>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width:220px;">
                                            {{ $o->cargoCompany->company_name ?? $o->cargoCompany->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>

{{-- ========== QUOTES AWAITING ACTION ========== --}}
@if($recentQuotes->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;">Quotes Awaiting Your Action</h5>
                    <a href="{{ route('merchant.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>Cargo Company</th>
                                <th>Quote Amount</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentQuotes as $q)
                                <tr>
                                    <td>
                                        <a href="{{ route('merchant.orders.show', $q->id) }}" class="ref-link">
                                            {{ $q->order_reference }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ $q->cargoCompany->company_name ?? $q->cargoCompany->name ?? '—' }}
                                    </td>
                                    <td class="fw-semibold">
                                        {{ number_format((float) ($q->activeQuote->total_amount ?? 0), 2) }} AED
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('merchant.orders.show', $q->id) }}"
                                           class="btn btn-sm btn-soft-primary">
                                            Review
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection