@extends('layouts.app')
@section('title', $order->exists ? 'تعديل أمر تصنيع' : 'إضافة أمر تصنيع')
@section('page_heading', $order->exists ? 'تعديل أمر تصنيع' : 'إضافة أمر تصنيع')

@section('content')
@php
    $oldMaterials = old('materials', $materialRows->toArray());
    if (!count($oldMaterials)) $oldMaterials = [['raw_material_id'=>'','quantity'=>'']];
@endphp

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

{{-- Section 1: Basic Info --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:1.25rem">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-screwdriver-wrench" style="color:var(--c-primary);margin-inline-end:.4rem"></i>بيانات الأمر
        </div>
        <a href="{{ route('dashboard.manufacturing-orders.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-arrow-right"></i> أوامر التصنيع</a>
    </div>
    <div class="kpi-grid-3" style="padding:1.25rem">
        <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>
        <div>
            <label class="app-label">العميل</label>
            <select name="customer_id" class="app-input app-select">
                <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>
        </div>
        <div>
            <label class="app-label">نوع التصنيع</label>
            <select name="manufacturing_type" id="manufacturing_type" class="app-input app-select">
                <option value="shop_stock"          @selected(old('manufacturing_type', $order->manufacturing_type) === 'shop_stock')>تصنيع للمحل</option>
                <option value="customer_owned"      @selected(old('manufacturing_type', $order->manufacturing_type) === 'customer_owned')>تصنيع شخصي للعميل</option>
                <option value="customer_returnable" @selected(old('manufacturing_type', $order->manufacturing_type) === 'customer_returnable')>تصنيع للعميل ويرجع للمحل</option>
            </select>
        </div>
        <div>
            <label class="app-label">{{ __('dashboard.status_label') }}</label>
            <select name="status" class="app-input app-select">
                @foreach(['draft'=>'مسودة','in_progress'=>'قيد التنفيذ','completed'=>'مكتمل','canceled'=>'ملغي'] as $v=>$l)
                <option value="{{ $v }}" @selected(old('status', $order->status ?? 'draft') === $v)>{{ $l }}</option>
                @endforeach
            </select>
        </div>
        <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>
        <div>
            <label class="app-label">تكلفة اليد العاملة (ج.م)</label>
            <input type="number" step="0.01" min="0" name="labor_cost" class="app-input"
                   value="{{ old('labor_cost', $order->labor_cost ?? 0) }}">
        </div>
        <div>
            <label class="app-label">سعر البيع/الإيجار المستهدف (ج.م)</label>
            <input type="number" step="0.01" min="0" name="estimated_selling_price" class="app-input"
                   value="{{ old('estimated_selling_price', $order->estimated_selling_price ?? 0) }}">
        </div>
        @if($order->embroideryOrder)
        <div>
            <label class="app-label">طلب التطريز المصدر</label>
            <input type="text" class="app-input" value="{{ $order->embroideryOrder->reference_code }}" readonly style="background:var(--surface-50)">
            <input type="hidden" name="embroidery_order_id" value="{{ $order->embroidery_order_id }}">
        </div>
        @endif
        <div style="grid-column:1/-1">
            <label class="app-label">الوصف</label>
            <textarea name="description" class="app-input" rows="3" placeholder="وصف تفصيلي...">{{ old('description', $order->description) }}</textarea>
        </div>
        <div style="grid-column:1/-1">
            <label class="app-label">{{ __('dashboard.notes') }}</label>
            <textarea name="notes" class="app-input" rows="2" placeholder="ملاحظات إضافية...">{{ old('notes', $order->notes) }}</textarea>
        </div>
    </div>
</div>

{{-- Section 2: Output Product --}}
<div id="inventory_output_fields" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:1.25rem">
    <div style="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-box" style="color:#16a34a;margin-inline-end:.4rem"></i>بيانات المنتج الناتج
    </div>
    <div class="kpi-grid-2" style="padding:1.25rem">
        <div>
            <label class="app-label">اسم المنتج الناتج</label>
            <input type="text" name="output_product_name" class="app-input"
                   value="{{ old('output_product_name', $order->output_product_name) }}" placeholder="اسم المنتج">
        </div>
        <div>
            <label class="app-label">SKU المنتج الناتج</label>
            <input type="text" name="output_product_sku" class="app-input"
                   value="{{ old('output_product_sku', $order->output_product_sku) }}" placeholder="رمز المنتج">
        </div>
        <div>
            <label class="app-label">نوع المنتج</label>
            <select name="output_product_type" class="app-input app-select">
                <option value="">اختر</option>
                <option value="rent" @selected(old('output_product_type', $order->output_product_type) === 'rent')>إيجار</option>
                <option value="sale" @selected(old('output_product_type', $order->output_product_type) === 'sale')>بيع</option>
            </select>
        </div>
        <div>
            <label class="app-label">تصنيف المنتج</label>
            <select name="output_product_category_id" class="app-input app-select">
                <option value="">اختر التصنيف</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->id }}" @selected(old('output_product_category_id', $order->output_product_category_id) == $cat->id)>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>

{{-- Section 3: Raw Materials --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:1.25rem">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-boxes-stacked" style="color:#d97706;margin-inline-end:.4rem"></i>المواد الخام المستخدمة
        </div>
        <button type="button" id="add_material_row" class="app-btn app-btn--secondary app-btn--sm">
            <i class="fa-solid fa-plus me-1"></i>إضافة مادة
        </button>
    </div>
    <div style="padding:1.25rem">
        <div id="material_rows" style="display:flex;flex-direction:column;gap:.75rem">
            @foreach($oldMaterials as $index => $row)
            <div class="material-row" style="display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:end">
                <div>
                    <label style="display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:.3rem">المادة الخام</label>
                    <select name="materials[{{ $index }}][raw_material_id]" class="app-input app-select">
                        <option value="">اختر مادة</option>
                        @foreach($rawMaterials as $mat)
                        <option value="{{ $mat->id }}" @selected(($row['raw_material_id'] ?? '') == $mat->id)>
                            {{ $mat->name }} | رصيد: {{ number_format((float)$mat->stock,2) }} | تكلفة: {{ number_format((float)$mat->unit_cost,2) }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div style="min-width:120px">
                    <label style="display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:.3rem">الكمية</label>
                    <input type="number" step="0.01" min="0.01" name="materials[{{ $index }}][quantity]"
                           class="app-input" value="{{ $row['quantity'] ?? '' }}" placeholder="0.00">
                </div>
                <div>
                    <button type="button" class="app-btn app-btn--danger app-btn--sm remove-material-row" style="margin-top:1.5rem">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Actions --}}
<div style="display:flex;justify-content:flex-end;gap:.75rem">
    <a href="{{ route('dashboard.manufacturing-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>
@endsection

@section('scripts')
@php
    $materialOptions = $rawMaterials->map(fn($m) => [
        'id' => $m->id,
        'name' => $m->name,
        'stock' => number_format((float)$m->stock,2,'.',''),
        'unit_cost' => number_format((float)$m->unit_cost,2,'.',''),
    ])->values();
@endphp
<script>
(function(){
    const rowsContainer = document.getElementById('material_rows');
    const addButton     = document.getElementById('add_material_row');
    const mfgType       = document.getElementById('manufacturing_type');
    const outputFields  = document.getElementById('inventory_output_fields');
    const materials     = @json($materialOptions);

    function syncOutput() {
        outputFields.style.display = ['shop_stock','customer_returnable'].includes(mfgType.value) ? '' : 'none';
    }

    function buildOptions() {
        return '<option value="">اختر مادة</option>' + materials.map(m =>
            `<option value="${m.id}">${m.name} | رصيد: ${m.stock} | تكلفة: ${m.unit_cost}</option>`
        ).join('');
    }

    addButton.addEventListener('click', function() {
        const idx = rowsContainer.querySelectorAll('.material-row').length;
        const row = document.createElement('div');
        row.className = 'material-row';
        row.style.cssText = 'display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:end';
        row.innerHTML = `
            <div>
                <label style="display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:.3rem">المادة الخام</label>
                <select name="materials[${idx}][raw_material_id]" class="app-input app-select">${buildOptions()}</select>
            </div>
            <div style="min-width:120px">
                <label style="display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:.3rem">الكمية</label>
                <input type="number" step="0.01" min="0.01" name="materials[${idx}][quantity]" class="app-input" placeholder="0.00">
            </div>
            <div>
                <button type="button" class="app-btn app-btn--danger app-btn--sm remove-material-row" style="margin-top:1.5rem">
                    <i class="fa-solid fa-trash"></i>
                </button>
            </div>`;
        rowsContainer.appendChild(row);
    });

    rowsContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-material-row')) {
            e.target.closest('.material-row').remove();
        }
    });

    mfgType.addEventListener('change', syncOutput);
    syncOutput();
})();
</script>
@endsection