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


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
<a href="{{ route('dashboard.raw-materials.index') }}" class="app-btn app-btn--secondary app-btn--sm">
    <i class="fa-solid fa-arrow-right"></i> المواد الخام
</a>
</div>


<form id="purchase_form" method="POST" action="{{ route('dashboard.raw-materials.bulk-purchase') }}" enctype="multipart/form-data">
@csrf

{{-- Header --}}
<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="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-truck" style="color:var(--c-primary);margin-inline-end:.4rem"></i>بيانات الطلب
    </div>
    <div style="padding:1.25rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem">
        <div>
            <label class="app-label required">المورد</label>
            <select name="supplier_id" class="app-input app-select @error('supplier_id') app-input--invalid @enderror" required>
                <option value="">اختر المورد</option>
                @foreach($suppliers as $s)
                <option value="{{ $s->id }}" @selected(old('supplier_id')==$s->id)>{{ $s->name }}</option>
                @endforeach
            </select>
            @error('supplier_id')<div class="app-field-error">{{ $message }}</div>@enderror
        </div>
        <div>
            <label class="app-label">الخصم (ج.م)</label>
            <input type="number" step="0.01" min="0" name="discount" class="app-input" value="{{ old('discount',0) }}">
        </div>
        <div>
            <label class="app-label">فاتورة المورد</label>
            <input type="file" name="invoice_file" class="app-input" accept=".pdf,.jpg,.jpeg,.png">
        </div>
        <div style="grid-column:1/-1">
            <label class="app-label">ملاحظات</label>
            <input type="text" name="notes" class="app-input" value="{{ old('notes') }}" placeholder="ملاحظات على الطلب...">
        </div>
    </div>
</div>

{{-- 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_row" class="app-btn app-btn--secondary app-btn--sm">
            <i class="fa-solid fa-plus me-1"></i>إضافة مادة
        </button>
    </div>
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['المادة الخام','الرصيد الحالي','الكمية المطلوبة','سعر الوحدة (ج.م)','الإجمالي',''] as $h)
                    <th style="padding:.65rem 1.25rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody id="materials_body">
                <tr class="material-row">
                    <td style="padding:.5rem .75rem;min-width:220px">
                        <select name="items[0][raw_material_id]" class="app-input app-select material-select" required>
                            <option value="">اختر مادة</option>
                            @foreach($rawMaterials as $m)
                            <option value="{{ $m->id }}" data-stock="{{ $m->stock }}" data-cost="{{ $m->unit_cost }}">
                                {{ $m->name }} ({{ $m->unitOfMeasure->name }})
                            </option>
                            @endforeach
                        </select>
                    </td>
                    <td style="padding:.5rem .75rem;min-width:100px">
                        <span class="stock-display" style="font-weight:700;color:var(--text-muted)">—</span>
                    </td>
                    <td style="padding:.5rem .75rem;min-width:120px">
                        <input type="number" step="0.01" min="0.01" name="items[0][quantity]" class="app-input qty-input" value="1" required>
                    </td>
                    <td style="padding:.5rem .75rem;min-width:130px">
                        <input type="number" step="0.01" min="0" name="items[0][unit_cost]" class="app-input cost-input" value="0">
                    </td>
                    <td style="padding:.5rem .75rem;min-width:120px">
                        <span class="line-total" style="font-weight:800;color:var(--text-primary)">0.00</span>
                    </td>
                    <td style="padding:.5rem .75rem">
                        <button type="button" class="app-btn app-btn--danger app-btn--sm remove-row"><i class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr style="background:var(--border-subtle);border-top:2px solid var(--border)">
                    <td colspan="4" style="padding:.75rem 1.25rem;font-size:.8rem;font-weight:800;color:var(--text-muted)">الإجمالي قبل الخصم</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-primary)" id="grand_total">0.00</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

{{-- Actions --}}
<div style="display:flex;justify-content:flex-end;gap:.75rem">
    <a href="{{ route('dashboard.raw-materials.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>تسجيل الطلب وتحديث المخزون
    </button>
</div>

</form>
@endsection

@section('scripts')
<script>
(function(){
    const body = document.getElementById('materials_body');
    const materials = @json($rawMaterials->map(fn($m)=>['id'=>$m->id,'name'=>$m->name,'unit'=>$m->unitOfMeasure->name,'stock'=>(float)$m->stock,'cost'=>(float)$m->unit_cost])->values());

    function buildOptions(selectedId = '') {
        return '<option value="">اختر مادة</option>' + materials.map(m =>
            `<option value="${m.id}" data-stock="${m.stock}" data-cost="${m.cost}" ${m.id==selectedId?'selected':''}>
                ${m.name} (${m.unit})
            </option>`
        ).join('');
    }

    function rowHtml(idx) {
        return `<tr class="material-row">
            <td style="padding:.5rem .75rem;min-width:220px">
                <select name="items[${idx}][raw_material_id]" class="app-input app-select material-select" required>${buildOptions()}</select>
            </td>
            <td style="padding:.5rem .75rem;min-width:100px"><span class="stock-display" style="font-weight:700;color:var(--text-muted)">—</span></td>
            <td style="padding:.5rem .75rem;min-width:120px">
                <input type="number" step="0.01" min="0.01" name="items[${idx}][quantity]" class="app-input qty-input" value="1" required>
            </td>
            <td style="padding:.5rem .75rem;min-width:130px">
                <input type="number" step="0.01" min="0" name="items[${idx}][unit_cost]" class="app-input cost-input" value="0">
            </td>
            <td style="padding:.5rem .75rem;min-width:120px"><span class="line-total" style="font-weight:800;color:var(--text-primary)">0.00</span></td>
            <td style="padding:.5rem .75rem"><button type="button" class="app-btn app-btn--danger app-btn--sm remove-row"><i class="fa-solid fa-trash"></i></button></td>
        </tr>`;
    }

    function updateTotals() {
        let grand = 0;
        body.querySelectorAll('.material-row').forEach(row => {
            const qty  = parseFloat(row.querySelector('.qty-input').value)  || 0;
            const cost = parseFloat(row.querySelector('.cost-input').value) || 0;
            const line = qty * cost;
            row.querySelector('.line-total').textContent = line.toLocaleString('en', {minimumFractionDigits:2, maximumFractionDigits:2});
            grand += line;
        });
        document.getElementById('grand_total').textContent = grand.toLocaleString('en', {minimumFractionDigits:2, maximumFractionDigits:2});
    }

    function reindex() {
        body.querySelectorAll('.material-row').forEach((row, i) => {
            row.querySelector('[name*="raw_material_id"]').name = `items[${i}][raw_material_id]`;
            row.querySelector('[name*="quantity"]').name        = `items[${i}][quantity]`;
            row.querySelector('[name*="unit_cost"]').name       = `items[${i}][unit_cost]`;
        });
    }

    document.getElementById('add_row').addEventListener('click', () => {
        const idx = body.querySelectorAll('.material-row').length;
        body.insertAdjacentHTML('beforeend', rowHtml(idx));
    });

    body.addEventListener('change', e => {
        const row = e.target.closest('.material-row');
        if (!row) return;
        if (e.target.classList.contains('material-select')) {
            const opt = e.target.selectedOptions[0];
            row.querySelector('.stock-display').textContent = opt.dataset.stock ?? '—';
            row.querySelector('.cost-input').value = opt.dataset.cost ?? 0;
        }
        updateTotals();
    });

    body.addEventListener('input', e => { if (e.target.closest('.material-row')) updateTotals(); });

    body.addEventListener('click', e => {
        if (e.target.closest('.remove-row')) {
            if (body.querySelectorAll('.material-row').length > 1) {
                e.target.closest('.material-row').remove();
                reindex();
                updateTotals();
            }
        }
    });
})();
</script>
@endsection