@extends('layouts.app')
@section('title', __('dashboard.embroidery_order_ref') . ' ' . $order->reference_code)
@section('page_heading', $order->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','ملغي'],
    ];
    [$sbg,$scl,$slbl] = $statusBadge[$order->status] ?? ['var(--border-subtle)','var(--text-muted)',$order->status];
@endphp

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem">

    {{-- Order Details --}}
    <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;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <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>بيانات الطلب
            </div>
            <div style="display:flex;align-items:center;gap:.5rem">
                <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $sbg }};color:{{ $scl }}">{{ $slbl }}</span>
                <a href="{{ route('dashboard.embroidery-orders.edit', $order) }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-pen"></i> تعديل</a>
                <a href="{{ route('dashboard.embroidery-orders.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-arrow-right"></i> طلبات التطريز</a>
            </div>
        </div>
        <div style="padding:1.25rem;display:flex;flex-direction:column;gap:.875rem">
            @foreach([
                ['المرجع',         $order->reference_code],
                ['العميل',         $order->customer?->name ?? '—'],
                ['الموعد المستهدف',optional($order->target_date)->format('Y-m-d') ?? '—'],
                ['السعر التقديري', number_format((float)$order->estimated_price,2).' ج.م'],
                ['أنشئ بواسطة',   $order->creator?->name ?? '—'],
                ['تاريخ الإنشاء',  $order->created_at->format('Y-m-d H:i')],
            ] as [$lbl,$val])
            <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.875rem;border-bottom:1px solid var(--border-subtle)">
                <span style="font-size:.8rem;font-weight:700;color:var(--text-muted)">{{ $lbl }}</span>
                <span style="font-size:.83rem;font-weight:800;color:var(--text-primary)">{{ $val }}</span>
            </div>
            @endforeach
            @if($order->description)
            <div>
                <div style="font-size:.8rem;font-weight:700;color:var(--text-muted);margin-bottom:.4rem">الوصف</div>
                <div style="font-size:.83rem;color:var(--text-secondary);line-height:1.6">{{ $order->description }}</div>
            </div>
            @endif
            @if($order->notes)
            <div>
                <div style="font-size:.8rem;font-weight:700;color:var(--text-muted);margin-bottom:.4rem">{{ __('dashboard.notes') }}</div>
                <div style="font-size:.83rem;color:var(--text-secondary);line-height:1.6">{{ $order->notes }}</div>
            </div>
            @endif
        </div>
    </div>

    {{-- Manufacturing Conversion --}}
    <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;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-screwdriver-wrench" style="color:var(--c-primary)"></i>التحويل للتصنيع
        </div>
        <div style="padding:1.5rem">
            @if($order->manufacturingOrder)
            <div style="display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0;margin-bottom:1.25rem">
                <i class="fa-solid fa-circle-check" style="color:#16a34a;font-size:1.2rem"></i>
                <div>
                    <div style="font-size:.85rem;font-weight:800;color:#16a34a">تم إنشاء أمر تصنيع مرتبط</div>
                    <div style="font-size:.75rem;color:#16a34a;margin-top:.15rem">{{ $order->manufacturingOrder->title }}</div>
                </div>
            </div>
            <a href="{{ route('dashboard.manufacturing-orders.show', $order->manufacturingOrder) }}" class="app-btn app-btn--primary">
                <i class="fa-solid fa-screwdriver-wrench me-1"></i>فتح أمر التصنيع
            </a>
            @elseif($order->status === 'canceled')
            <div style="display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:12px;background:#fef2f2;border:1px solid #fecaca">
                <i class="fa-solid fa-circle-xmark" style="color:#dc2626;font-size:1.2rem"></i>
                <div style="font-size:.85rem;font-weight:800;color:#dc2626">الطلب ملغي ولا يمكن تحويله</div>
            </div>
            @else
            <p style="font-size:.83rem;color:var(--text-muted);margin-bottom:1.25rem;line-height:1.6">
                يمكن تحويل هذا الطلب مباشرة إلى أمر تصنيع، ثم تحديد المواد الخام وتكلفة اليد العاملة.
            </p>
            <form method="POST" action="{{ route('dashboard.embroidery-orders.convert', $order) }}">
                @csrf
                <button type="submit" class="app-btn app-btn--primary">
                    <i class="fa-solid fa-circle-arrow-right me-1"></i>تحويل إلى أمر تصنيع
                </button>
            </form>
            @endif
        </div>
    </div>
</div>
@endsection