@extends('restaurant.layout')
@section('title', 'صرف خامات ومواد للمطبخ')
@push('styles')
<style>
    .ta{position:relative}
    .ta .dd{position:absolute;top:100%;right:0;left:0;z-index:30;background:var(--card);border:1px solid var(--primary);border-radius:10px;max-height:260px;overflow:auto;box-shadow:var(--shadow);display:none}
    .ta .dd.show{display:block}
    .ta .dd div{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
    .ta .dd div:hover{background:var(--primary-soft)}
    .bal{display:inline-block;min-width:38px;text-align:center;padding:2px 10px;border-radius:8px;font-weight:800;background:var(--green-soft);color:var(--green)}
    .bal.zero{background:var(--red-soft);color:var(--red)}
</style>
@endpush
@section('content')
<div class="hero">
    <div><h2>🥩 صرف خامات ومواد للمطبخ</h2><p>صرف المواد الأولية (لحوم، دجاج، زيت، بهارات...) من المستودع للمطبخ وخصمها من المخزون</p></div>
    <div class="actions"><a class="btn ghost" href="{{ route('restaurant.kitchen_issues.index') }}">← سجل أذون الصرف</a></div>
</div>

@if($errors->any())<div class="alert bad">@foreach($errors->all() as $e)<div>• {{ $e }}</div>@endforeach</div>@endif

<form method="post" action="{{ route('restaurant.kitchen_issues.store') }}" id="issue-form">
    @csrf
    <div class="card">
        <div class="card-title">بيانات إذن الصرف</div>
        <div class="form-row fr4">
            <div><label>الفرع / المستودع *</label>
                <select name="branch_id" id="branch" class="inp" required>@foreach($branches as $b)<option value="{{ $b->id }}" @selected(old('branch_id', $branchId) == $b->id)>{{ $b->name }}</option>@endforeach</select></div>
            <div><label>تاريخ الصرف *</label><input type="date" name="issue_date" class="inp" required value="{{ old('issue_date', $date) }}"></div>
            <div><label>الجهة / الشيف المستلم</label><input name="received_by" class="inp" value="{{ old('received_by', 'مطبخ المطعم') }}"></div>
            <div><label>رقم الإذن المتوقع</label><input class="inp" readonly value="{{ $expected }}" dir="ltr"></div>
        </div>
        <div class="form-row"><div><label>ملاحظات عامة على الصرف</label><textarea name="notes" rows="2" class="inp" placeholder="أضف أي ملاحظات أو أسباب تخص صرف هذه الخامات...">{{ old('notes') }}</textarea></div></div>
    </div>

    <div class="card">
        <div class="card-title">قائمة المواد الخام المصروفة <button type="button" class="btn sm soft" style="margin-right:auto" onclick="IS.add()">+ إضافة صنف خام</button></div>
        <p class="muted small" style="margin-top:-6px">اختر الأصناف والكميات المصروفة؛ سيتم خصم هذه الكميات فوراً من رصيد المستودع عند الاعتماد.</p>
        <div class="tbl-wrap" style="overflow:visible"><table class="tbl">
            <thead><tr><th style="min-width:280px">المادة الخام (المنتج) *</th><th>الرصيد بالمستودع</th><th>الكمية المصروفة *</th><th>سعر التكلفة (ر.س)</th><th>إجمالي التكلفة</th><th></th></tr></thead>
            <tbody id="rows"></tbody>
        </table></div>
        <div style="display:flex;justify-content:space-between;background:var(--bg);border-radius:12px;padding:12px 16px;margin-top:12px;font-weight:700">
            <span>عدد الأصناف: <b id="cnt">0</b></span><span>إجمالي تكلفة الخامات المصروفة: <b class="num text-blue" id="total">0.00</b> ر.س</span>
        </div>
    </div>

    <div style="display:flex;gap:10px;justify-content:flex-end">
        <a class="btn lg ghost" href="{{ route('restaurant.kitchen_issues.index') }}">إلغاء</a>
        <button class="btn lg" id="submit">✓ اعتماد الصرف وخصم المخزون</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
const IS = (function () {
    const URL = @json(route('restaurant.kitchen_issues.products'));
    const $ = id => document.getElementById(id);
    const initial = @json(old('items', []));
    let n = 0;

    function add(d) {
        d = d || {};
        const i = n++;
        const tr = document.createElement('tr');
        tr.dataset.i = i;
        tr.innerHTML = `
          <td><div class="ta"><input type="text" class="inp s" placeholder="🔍 ابحث بالاسم أو الكود..." autocomplete="off" value="${RS.esc(d.product_name || '')}">
              <input type="hidden" name="items[${i}][product_id]" class="pid" value="${d.product_id || ''}"><input type="hidden" name="items[${i}][product_name]" class="pnm" value="${RS.esc(d.product_name || '')}"><div class="dd"></div></div>
              <input class="inp" style="margin-top:6px;font-size:12px" name="items[${i}][notes]" placeholder="ملاحظة على الصنف..." value="${RS.esc(d.notes || '')}"></td>
          <td><span class="bal zero st">—</span> <span class="muted small un"></span></td>
          <td><input class="inp q" type="number" step="0.001" min="0.001" name="items[${i}][quantity]" value="${d.quantity || 1}" style="min-width:90px"></td>
          <td><input class="inp c" type="number" step="0.0001" min="0" name="items[${i}][unit_cost]" value="${d.unit_cost ?? 0}" style="min-width:90px"></td>
          <td class="num fw lt">0.00 ر.س</td>
          <td><button type="button" class="btn sm ghost text-red rm">حذف</button></td>`;
        $('rows').appendChild(tr);
        wire(tr); calc();
    }

    function wire(tr) {
        const s = tr.querySelector('.s'), dd = tr.querySelector('.dd'), pid = tr.querySelector('.pid');
        let t;
        const search = () => {
            RS.api(URL + '?branch_id=' + $('branch').value + '&q=' + encodeURIComponent(s.value.trim())).then(r => {
                dd.innerHTML = r.products.length ? r.products.map(p => `<div data-p='${RS.esc(JSON.stringify(p))}'><span>${RS.esc(p.name)} <small class="muted">${RS.esc(p.code || '')}</small></span><b class="num">${p.stock}</b></div>`).join('') : '<div class="muted">لا توجد نتائج في مخزن هذا الفرع</div>';
                dd.classList.add('show');
            });
        };
        s.addEventListener('focus', search);
        s.addEventListener('input', () => { pid.value = ''; clearTimeout(t); t = setTimeout(search, 250); });
        dd.addEventListener('mousedown', e => {
            const el = e.target.closest('[data-p]'); if (!el) return;
            const p = JSON.parse(el.dataset.p);
            s.value = p.name; pid.value = p.id; tr.querySelector('.pnm').value = p.name;
            const st = tr.querySelector('.st'); st.textContent = p.stock; st.classList.toggle('zero', p.stock <= 0);
            tr.querySelector('.un').textContent = p.unit || '';
            tr.querySelector('.c').value = p.cost; tr.dataset.stock = p.stock;
            dd.classList.remove('show'); calc();
        });
        s.addEventListener('blur', () => setTimeout(() => dd.classList.remove('show'), 150));
        tr.querySelector('.q').addEventListener('input', calc);
        tr.querySelector('.c').addEventListener('input', calc);
        tr.querySelector('.rm').addEventListener('click', () => { tr.remove(); calc(); });
    }

    function calc() {
        let total = 0, count = 0;
        document.querySelectorAll('#rows tr').forEach(tr => {
            const q = parseFloat(tr.querySelector('.q').value) || 0, c = parseFloat(tr.querySelector('.c').value) || 0;
            tr.querySelector('.lt').textContent = RS.money(q * c) + ' ر.س';
            total += q * c; count++;
            const over = tr.dataset.stock !== undefined && q > parseFloat(tr.dataset.stock);
            tr.querySelector('.q').style.borderColor = over ? 'var(--red)' : '';
        });
        $('cnt').textContent = count; $('total').textContent = RS.money(total);
    }

    $('branch').addEventListener('change', () => { $('rows').innerHTML = ''; add(); });
    $('issue-form').addEventListener('submit', e => {
        if (![...document.querySelectorAll('.pid')].length || [...document.querySelectorAll('.pid')].some(x => !x.value)) {
            e.preventDefault(); RS.toast('اختر المادة الخام من القائمة في كل صف', 'bad');
        }
    });

    if (initial.length) initial.forEach(add); else add();
    return {add};
})();
</script>
@endpush