@extends('layouts.app')
@section('title', __('dashboard.embroidery_orders_title'))
@section('page_heading', __('dashboard.embroidery_orders_title'))

@section('content')
@php
    $statusBadge = [
        'draft'     => ['#f8fafc','#64748b', __('dashboard.status_draft')],
        'approved'  => ['var(--c-primary-bg)','var(--c-primary)', __('dashboard.status_approved')],
        'converted' => ['#f0fdf4','#16a34a', __('dashboard.status_converted')],
        'canceled'  => ['#fef2f2','#dc2626','ملغي'],
    ];
@endphp

<style>
.page-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.page-table tbody tr:hover { background: var(--surface-50); }
.page-th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
</style>

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-star',          '#eff6ff','#2563eb', $orders->total(),                                                                    'إجمالي الطلبات'],
        ['fa-solid fa-clock',         '#fffbeb','#d97706', $orders->getCollection()->whereIn('status',['draft','approved'])->count(),           'قيد التنفيذ'],
        ['fa-solid fa-circle-check',  '#f0fdf4','#16a34a', $orders->getCollection()->where('status','converted')->count(),                     'تم تحويلها'],
        ['fa-solid fa-coins',         '#faf5ff','#7c3aed', number_format($orders->sum('estimated_price'),2),                                   'إجمالي التقديري (ج.م)'],
    ] as [$ic,$bg,$cl,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.15rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:40px;height:40px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0"><i class="{{ $ic }}"></i></div>
        <div>
            <div style="font-size:1.2rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.73rem;font-weight:700;color:var(--text-muted);margin-top:.15rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

<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-star" 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($orders->total()) }}</span>
        </div>
        @can('create products')
        <a href="{{ route('dashboard.embroidery-orders.create') }}" class="app-btn app-btn--primary app-btn--sm">
            <i class="fa-solid fa-plus me-1"></i>إضافة طلب
        </a>
        @endcan
    </div>

    {{-- Filter --}}
    <form method="GET" action="{{ route('dashboard.embroidery-orders.index') }}"
          style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);display:flex;gap:.625rem;flex-wrap:wrap;align-items:flex-end">
        <input type="text" name="search" class="app-input app-input--sm" style="max-width:200px" value="{{ request('search') }}" placeholder="عنوان أو رقم مرجعي...">
        <select name="customer_id" class="app-input app-select app-input--sm" style="max-width:180px">
            <option value="">{{ __('dashboard.all_customers') }}</option>
            @foreach($customers as $c)
            <option value="{{ $c->id }}" @selected(request('customer_id')==$c->id)>{{ $c->name }}</option>
            @endforeach
        </select>
        <select name="status" class="app-input app-select app-input--sm" style="max-width:140px">
            <option value="">{{ __('dashboard.all_statuses') }}</option>
            <option value="draft"     @selected(request('status')==='draft')>مسودة</option>
            <option value="approved"  @selected(request('status')==='approved')>معتمد</option>
            <option value="converted" @selected(request('status')==='converted')>تم تحويله</option>
            <option value="canceled"  @selected(request('status')==='canceled')>ملغي</option>
        </select>
        <button type="submit" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-filter"></i></button>
        @if(request()->hasAny(['search','customer_id','status']))
        <a href="{{ route('dashboard.embroidery-orders.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-xmark"></i></a>
        @endif
    </form>

    @if($orders->isEmpty())
    <div style="padding:3rem;text-align:center">
        @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-star','title'=>'لا توجد طلبات تطريز','message'=>''])
    </div>
    @else
    <div style="overflow-x:auto">
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['المرجع','العنوان','العميل','الموعد','السعر التقديري',__('dashboard.status_label'),'التحويل',''] as $h)
                    <th class="page-th">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                @php [$sbg,$scl,$slbl] = $statusBadge[$order->status] ?? ['var(--border-subtle)','var(--text-muted)',$order->status]; @endphp
                <tr>
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $order->reference_code }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary)">{{ $order->title }}</td>
                    <td style="padding:.875rem 1.25rem;color:var(--text-secondary)">{{ $order->customer?->name ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted)">{{ optional($order->target_date)->format('Y-m-d') ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format((float)$order->estimated_price,2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $sbg }};color:{{ $scl }}">{{ $slbl }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($order->manufacturingOrder)
                        <a href="{{ route('dashboard.manufacturing-orders.show', $order->manufacturingOrder) }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-screwdriver-wrench me-1"></i>عرض التصنيع</a>
                        @elseif($order->status !== 'canceled')
                        <form method="POST" action="{{ route('dashboard.embroidery-orders.convert', $order) }}">
                            @csrf
                            <button type="submit" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-circle-arrow-right me-1"></i>تحويل لتصنيع</button>
                        </form>
                        @else
                        <span style="color:var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">إجراءات</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                <a href="{{ route('dashboard.embroidery-orders.show', $order) }}" class="custom-dropdown__item"><i class="fa-solid fa-eye me-2"></i>عرض</a>
                                <a href="{{ route('dashboard.embroidery-orders.edit', $order) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>تعديل</a>
                                @can('delete products')
                                <form action="{{ route('dashboard.embroidery-orders.destroy', $order) }}" method="POST">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="حذف هذا الطلب؟"><i class="fa-solid fa-trash me-2"></i>حذف</button>
                                </form>
                                @endcan
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">{{ $orders->appends(request()->query())->links() }}</div>
    @endif
</div>
@endsection