@extends('layouts.app')
@section('title', 'مواعيد التسليم')
@section('page_heading', 'مواعيد التسليم')

@section('content')

<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)">

    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-truck" style="color:var(--c-primary)"></i>
            مواعيد التسليم
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ number_format($reservations->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <a href="{{ route('dashboard.reservations.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-calendar-days me-1"></i>كل الحجوزات
            </a>
            <a href="{{ route('pickup-dates.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-calendar-check me-1"></i>مواعيد الاستلام
            </a>
        </div>
    </div>

    @if($reservations->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon'=>'fa-solid fa-truck','title'=>'لا توجد مواعيد تسليم','message'=>''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['#','العميل','المنتج','موعد التسليم','الحالة','السعر'] as $h)
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:end">الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($reservations as $r)
                @php
                    $statusMap = [
                        'finished' => ['#f0fdf4','#16a34a','منتهي'],
                        'canceled' => ['#fef2f2','#dc2626','ملغي'],
                        'ongoing'  => ['var(--c-primary-bg)','var(--c-primary)','جاري'],
                        'fitting'  => ['#f0f9ff','#0ea5e9','قياس'],
                        'pending'  => ['#fffbeb','#d97706','معلق'],
                        'delivered'=> ['#fffbeb','#d97706','تم التسليم'],
                    ];
                    [$bg,$color,$label] = $statusMap[$r->status] ?? ['var(--border-subtle)','var(--text-muted)',$r->status];
                    $img = $r->product->main_image ? asset('storage/'.$r->product->main_image) : asset('assets/media/svg/files/blank-image.svg');
                @endphp
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--border-subtle)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $r->id }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <a href="{{ route('dashboard.customers.show', $r->customer->id) }}" style="font-weight:800;color:var(--text-primary);text-decoration:none">{{ $r->customer->name }}</a>
                        <div style="font-size:.7rem;color:var(--text-muted)">{{ $r->customer->phone }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;align-items:center;gap:.625rem">
                            <img src="{{ $img }}" alt="" style="width:36px;height:36px;object-fit:cover;border-radius:8px;flex-shrink:0" onerror="this.src='{{ asset('assets/media/svg/files/blank-image.svg') }}'">
                            <div>
                                <a href="{{ route('dashboard.products.show', $r->product->id) }}" style="font-weight:800;color:var(--text-primary);text-decoration:none;font-size:.83rem">{{ $r->product->name }}</a>
                                <div style="font-size:.7rem;color:var(--text-muted)">{{ $r->product->sku }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $r->customer_pickup_date?->format('Y-m-d') ?? '—' }}</div>
                        <div style="font-size:.7rem;color:var(--text-muted)">{{ $r->customer_pickup_date?->format('H:i') }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $bg }};color:{{ $color }}">{{ $label }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($r->price, 2) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem;text-align:end">
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">الإجراءات</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                <a href="{{ route('dashboard.reservations.show', $r->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-eye me-2"></i>عرض</a>
                                <a href="{{ route('dashboard.reservations.edit', $r->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>تعديل</a>
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($reservations->hasPages())
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $reservations->links() }}
    </div>
    @endif
    @endif
</div>
@endsection