@extends('layouts.app')
@section('title', $order->exists ? __('dashboard.edit_embroidery_order') : __('dashboard.add_embroidery_order'))
@section('page_heading', $order->exists ? __('dashboard.edit_embroidery_order') : __('dashboard.add_embroidery_order'))

@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;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>
            {{ $order->exists ? {{ __('dashboard.edit_order_ref') }} . '#' . $order->reference_code : {{ __('dashboard.new_embroidery_order') }} }}
        </div>
        <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>

    <form method="POST" action="{{ $order->exists ? route('dashboard.embroidery-orders.update', $order) : route('dashboard.embroidery-orders.store') }}">
        @csrf
        @if($order->exists) @method('PUT') @endif

        <div class="kpi-grid-3" style="padding:1.5rem">

            {{-- Title - full width --}}
            <div style="grid-column:1/-1">
                <label class="app-label required">{{ __('dashboard.title') }}</label>
                <input type="text" name="title" class="app-input @error('title') app-input--invalid @enderror"
                       value="{{ old('title', $order->title) }}" required placeholder="عنوان طلب التطريز">
                @error('title')<div class="app-field-error">{{ $message }}</div>@enderror
            </div>

            {{-- Customer --}}
            <div>
                <label class="app-label">العميل</label>
                <select name="customer_id" class="app-input app-select @error('customer_id') app-input--invalid @enderror">
                    <option value="">بدون عميل</option>
                    @foreach($customers as $c)
                    <option value="{{ $c->id }}" @selected(old('customer_id', $order->customer_id) == $c->id)>{{ $c->name }}</option>
                    @endforeach
                </select>
                @error('customer_id')<div class="app-field-error">{{ $message }}</div>@enderror
            </div>

            {{-- Status --}}
            <div>
                <label class="app-label required">{{ __('dashboard.status_label') }}</label>
                <select name="status" class="app-input app-select">
                    @foreach(['draft'=>'مسودة','approved'=>'معتمد','converted'=>'تم تحويله','canceled'=>'ملغي'] as $v=>$l)
                    <option value="{{ $v }}" @selected(old('status', $order->status ?? 'draft') === $v)>{{ $l }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Target date --}}
            <div>
                <label class="app-label">الموعد المستهدف</label>
                <input type="date" name="target_date" class="app-input"
                       value="{{ old('target_date', optional($order->target_date)->format('Y-m-d')) }}">
            </div>

            {{-- Estimated price - full width on its row --}}
            <div>
                <label class="app-label">السعر التقديري (ج.م)</label>
                <input type="number" step="0.01" min="0" name="estimated_price" class="app-input"
                       value="{{ old('estimated_price', $order->estimated_price ?? 0) }}">
            </div>

            {{-- Description - full width --}}
            <div style="grid-column:1/-1">
                <label class="app-label">الوصف</label>
                <textarea name="description" class="app-input" rows="5"
                          placeholder="وصف تفصيلي لطلب التطريز، المقاسات، الألوان، التصميم المطلوب...">{{ old('description', $order->description) }}</textarea>
            </div>

            {{-- Notes - full width --}}
            <div style="grid-column:1/-1">
                <label class="app-label">{{ __('dashboard.notes') }}</label>
                <textarea name="notes" class="app-input" rows="3"
                          placeholder="ملاحظات إضافية...">{{ old('notes', $order->notes) }}</textarea>
            </div>
        </div>

        <div style="display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-subtle)">
            <a href="{{ route('dashboard.embroidery-orders.index') }}" class="app-btn app-btn--secondary">إلغاء</a>
            <button type="submit" class="app-btn app-btn--primary">
                <i class="fa-solid fa-check me-1"></i>{{ $order->exists ? 'حفظ التعديلات' : 'إنشاء الطلب' }}
            </button>
        </div>
    </form>
</div>
@endsection