@csrf
@php
    $isEdit = isset($preparation);
    $model = $isEdit ? $preparation : null;
    $existingItems = $isEdit
        ? $preparation->items->map(fn($item) => [
            'sales_invoice_item_id' => $item->sales_invoice_item_id,
            'product_id' => $item->product_id,
            'product_name' => $item->product?->name_ar ?? '-',
            'unit_id' => $item->unit_id,
            'unit_name' => $item->unit?->name_ar ?? '-',
            'requested_quantity' => (float) $item->requested_quantity,
            'prepared_quantity' => (float) $item->prepared_quantity,
            'equivalent_sheet_quantity' => (float) $item->equivalent_sheet_quantity,
            'product_sku' => $item->product?->sku,
            'specs' => collect([
                $item->product?->material?->name_ar,
                $item->product?->thickness?->name_ar,
                $item->product?->size?->name_ar,
                $item->product?->color?->name_ar,
            ])->filter()->implode(' | '),
            'notes_ar' => $item->notes_ar ?? '',
        ])
        : collect();
@endphp

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card mb-4">
            <div class="card-header"><h5 class="mb-0">1) مصدر الطلب وبيانات التشغيل</h5></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">فاتورة البيع</label>
                        <select name="sales_invoice_id" id="sales_invoice_id" class="form-select">
                            <option value="">بدون فاتورة - طلب خارجي</option>
                            @foreach($salesInvoices as $invoice)
                                <option value="{{ $invoice->id }}" @selected(old('sales_invoice_id', $model?->sales_invoice_id) == $invoice->id)>
                                    {{ $invoice->invoice_number }}{{ $invoice->customer?->name_ar ? ' - '.$invoice->customer->name_ar : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">رقم الطلب الخارجي</label>
                        <input type="text" name="order_reference" class="form-control" value="{{ old('order_reference', $model?->order_reference) }}" placeholder="يستخدم إذا لم تكن هناك فاتورة بيع">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">المخزن <span class="text-danger">*</span></label>
                        <select name="warehouse_id" class="form-select">
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" @selected(old('warehouse_id', $model?->warehouse_id) == $warehouse->id)>
                                    {{ $warehouse->name_ar }}{{ $warehouse->code ? ' - '.$warehouse->code : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">الموظف المسؤول <span class="text-danger">*</span></label>
                        <select name="prepared_by" class="form-select">
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" @selected(old('prepared_by', $model?->prepared_by ?? auth()->id()) == $employee->id)>{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">تاريخ التجهيز</label>
                        <input type="date" name="preparation_date" class="form-control" value="{{ old('preparation_date', $model?->preparation_date?->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">بداية التجهيز</label>
                        <input type="datetime-local" name="started_at" class="form-control" value="{{ old('started_at', $model?->started_at?->format('Y-m-d\TH:i')) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">نهاية التجهيز</label>
                        <input type="datetime-local" name="finished_at" class="form-control" value="{{ old('finished_at', $model?->finished_at?->format('Y-m-d\TH:i')) }}">
                    </div>

                    <div class="col-12">
                        <label class="form-label">ملاحظات التشغيل</label>
                        <textarea name="notes_ar" rows="3" class="form-control" placeholder="ملاحظات تخص القص أو التشكيل أو أولوية التسليم أو تعليمات الورشة">{{ old('notes_ar', $model?->notes_ar) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h6 class="mb-1">2) بنود التجهيز</h6>
                    <small class="text-muted">كل بند يعكس لوحًا أو صنفًا مطلوب تجهيزه داخل الورشة.</small>
                </div>
                <button type="button" id="add-item-row" class="btn btn-sm btn-outline-primary">إضافة بند يدوي</button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>الصنف والمواصفات</th>
                                <th>الوحدة</th>
                                <th>المطلوب</th>
                                <th>المجهز</th>
                                <th>ألواح مكافئة</th>
                                <th>ملاحظات البند</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="items-body"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2 flex-wrap">
            <button type="submit" class="btn btn-primary">حفظ أمر التجهيز</button>
            <a href="{{ route('admin.order_preparations.index') }}" class="btn btn-light">إلغاء</a>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card sticky-top" style="top: 90px;">
            <div class="card-header"><h5 class="mb-0">ملخص مباشر</h5></div>
            <div class="card-body">
                <div class="mb-3 p-3 rounded bg-light">
                    <div class="text-muted small">نوع المصدر</div>
                    <div class="fw-bold" id="summary-source">{{ old('sales_invoice_id', $model?->sales_invoice_id) ? 'مرتبط بفاتورة بيع' : 'طلب خارجي / يدوي' }}</div>
                </div>
                <div class="mb-3 p-3 rounded bg-light">
                    <div class="text-muted small">عدد البنود</div>
                    <div class="fw-bold fs-4" id="summary-items">0</div>
                </div>
                <div class="mb-3 p-3 rounded bg-light">
                    <div class="text-muted small">إجمالي المطلوب</div>
                    <div class="fw-bold" id="summary-requested">0.00</div>
                </div>
                <div class="mb-3 p-3 rounded bg-light">
                    <div class="text-muted small">إجمالي المجهز</div>
                    <div class="fw-bold" id="summary-prepared">0.00</div>
                </div>
                <div class="mb-0 p-3 rounded bg-light-success">
                    <div class="text-muted small">إجمالي الألواح المكافئة</div>
                    <div class="fw-bold text-success" id="summary-equivalent">0.00</div>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="item-template">
<tr class="item-row">
  <td class="row-no"></td>
  <td>
    <input type="hidden" class="sales-invoice-item-id" name="">
    <input type="hidden" class="product-id" name="">
    <input type="text" class="form-control form-control-sm product-name mb-1" readonly>
    <div class="small text-muted product-meta">بدون مواصفات</div>
  </td>
  <td>
    <input type="hidden" class="unit-id" name="">
    <input type="text" class="form-control form-control-sm unit-name" readonly>
  </td>
  <td><input type="number" step="0.01" min="0.0001" class="form-control form-control-sm requested-qty" name=""></td>
  <td><input type="number" step="0.01" min="0.0001" class="form-control form-control-sm prepared-qty" name=""></td>
  <td><input type="number" step="0.01" min="0.0001" class="form-control form-control-sm equivalent-sheet-qty" name=""></td>
  <td><input type="text" class="form-control form-control-sm item-notes" name=""></td>
  <td><button type="button" class="btn btn-sm btn-outline-danger remove-row">حذف</button></td>
</tr>
</template>

<script>
(function(){
  const existingItems = @json($existingItems);

  function refreshNames(){
    document.querySelectorAll('#items-body .item-row').forEach((row,i)=>{
      row.querySelector('.row-no').textContent = i + 1;
      row.querySelector('.sales-invoice-item-id').name = `items[${i}][sales_invoice_item_id]`;
      row.querySelector('.product-id').name = `items[${i}][product_id]`;
      row.querySelector('.unit-id').name = `items[${i}][unit_id]`;
      row.querySelector('.requested-qty').name = `items[${i}][requested_quantity]`;
      row.querySelector('.prepared-qty').name = `items[${i}][prepared_quantity]`;
      row.querySelector('.equivalent-sheet-qty').name = `items[${i}][equivalent_sheet_quantity]`;
      row.querySelector('.item-notes').name = `items[${i}][notes_ar]`;
    });
  }

  function formatNumber(value){
    return Number(value || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
  }

  function updateSummary(){
    let requested = 0;
    let prepared = 0;
    let equivalent = 0;
    let count = 0;

    document.querySelectorAll('#items-body .item-row').forEach((row)=>{
      if (row.querySelector('.product-id').value) {
        count++;
      }

      requested += parseFloat(row.querySelector('.requested-qty').value || 0);
      prepared += parseFloat(row.querySelector('.prepared-qty').value || 0);
      equivalent += parseFloat(row.querySelector('.equivalent-sheet-qty').value || 0);
    });

    document.getElementById('summary-items').textContent = count.toLocaleString('ar-EG');
    document.getElementById('summary-requested').textContent = formatNumber(requested);
    document.getElementById('summary-prepared').textContent = formatNumber(prepared);
    document.getElementById('summary-equivalent').textContent = formatNumber(equivalent);
    document.getElementById('summary-source').textContent = document.getElementById('sales_invoice_id').value ? 'مرتبط بفاتورة بيع' : 'طلب خارجي / يدوي';
  }

  function appendRow(data){
    const tpl = document.getElementById('item-template').content.cloneNode(true);
    const row = tpl.querySelector('tr');
    row.querySelector('.sales-invoice-item-id').value = data.sales_invoice_item_id || '';
    row.querySelector('.product-id').value = data.product_id || '';
    row.querySelector('.product-name').value = data.product_name || '-';
    row.querySelector('.product-meta').textContent = [data.product_sku ? `SKU: ${data.product_sku}` : null, data.specs || null].filter(Boolean).join(' | ') || 'بدون مواصفات';
    row.querySelector('.unit-id').value = data.unit_id || '';
    row.querySelector('.unit-name').value = data.unit_name || '-';
    row.querySelector('.requested-qty').value = data.requested_quantity || 1;
    row.querySelector('.prepared-qty').value = data.prepared_quantity || data.requested_quantity || 1;
    row.querySelector('.equivalent-sheet-qty').value = data.equivalent_sheet_quantity || data.prepared_quantity || data.requested_quantity || 1;
    row.querySelector('.item-notes').value = data.notes_ar || '';
    document.getElementById('items-body').appendChild(row);
    refreshNames();
    updateSummary();
  }

  document.getElementById('add-item-row').addEventListener('click', function(){
    appendRow({requested_quantity:1,prepared_quantity:1,equivalent_sheet_quantity:1});
  });

  document.addEventListener('click', function(e){
    if (e.target.classList.contains('remove-row')) {
      e.target.closest('.item-row').remove();
      refreshNames();
      updateSummary();
    }
  });

  document.addEventListener('input', function(e){
    if (e.target.classList.contains('requested-qty') || e.target.classList.contains('prepared-qty') || e.target.classList.contains('equivalent-sheet-qty')) {
      updateSummary();
    }
  });

  document.getElementById('sales_invoice_id').addEventListener('change', function(){
    const id = this.value;
    updateSummary();
    if (!id) return;

    $.get('{{ url('admin/order-preparations/invoice-items') }}/' + id, function(res){
      const body = document.getElementById('items-body');
      body.innerHTML = '';
      (res.data || []).forEach(row => appendRow(row));
      if ((res.data || []).length === 0) appendRow({requested_quantity:1,prepared_quantity:1,equivalent_sheet_quantity:1});
    });
  });

  document.addEventListener('DOMContentLoaded', function(){
    if (existingItems.length > 0) {
      existingItems.forEach(item => appendRow(item));
    } else {
      appendRow({requested_quantity:1,prepared_quantity:1,equivalent_sheet_quantity:1});
    }
    updateSummary();
  });
})();
</script>