@extends('restaurant.layout')
@section('title', $meal->exists ? 'تعديل وجبة' : 'إضافة وجبة')
@section('content')
<div class="hero">
    <div><h2>{{ $meal->exists ? '✏️ تعديل الوجبة: ' . $meal->name_ar : '➕ إضافة وجبة جديدة' }}</h2><p>أدخل الأسعار بدون ضريبة؛ تُضاف ضريبة القيمة المضافة تلقائياً في شاشة الكاشير.</p></div>
    <div class="actions"><a class="btn ghost" href="{{ route('restaurant.meals.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" enctype="multipart/form-data" action="{{ $meal->exists ? route('restaurant.meals.update', $meal) : route('restaurant.meals.store') }}">
    @csrf @if($meal->exists) @method('PUT') @endif
    <div class="card">
        <div class="card-title">بيانات الوجبة</div>
        <div class="form-row fr3">
            <div><label>اسم الوجبة (عربي) *</label><input name="name_ar" class="inp" required value="{{ old('name_ar', $meal->name_ar) }}"></div>
            <div><label>الاسم بالإنجليزية</label><input name="name_en" class="inp" value="{{ old('name_en', $meal->name_en) }}" dir="ltr"></div>
            <div><label>القسم</label>
                <select name="category_id" class="inp"><option value="">— بدون قسم —</option>
                    @foreach($categories as $c)<option value="{{ $c->id }}" @selected(old('category_id', $meal->category_id) == $c->id)>{{ $c->name_ar }}</option>@endforeach
                </select></div>
        </div>
        <div class="form-row"><div><label>الوصف / المكونات</label><textarea name="description" rows="2" class="inp">{{ old('description', $meal->description) }}</textarea></div></div>
        <div class="form-row fr3">
            <div><label>صورة الوجبة</label><input type="file" name="image" accept="image/*" class="inp">
                @if($meal->image_url)<div style="margin-top:6px;display:flex;gap:10px;align-items:center"><img src="{{ $meal->image_url }}" style="width:60px;height:60px;object-fit:cover;border-radius:10px"><label style="margin:0"><input type="checkbox" name="remove_image" value="1"> حذف الصورة الحالية</label></div>@endif</div>
            <div><label>ترتيب الظهور</label><input type="number" min="0" name="sort_order" class="inp" value="{{ old('sort_order', $meal->sort_order ?? 0) }}"></div>
            <div><label>&nbsp;</label><label style="display:flex;gap:8px;align-items:center;margin-top:8px;font-size:14px;color:var(--text)"><input type="checkbox" name="is_available" value="1" @checked(old('is_available', $meal->is_available))> متاحة للبيع في الكاشير</label></div>
        </div>
    </div>

    <div class="card">
        <div class="card-title">الأحجام والأسعار <button type="button" class="btn sm soft" style="margin-right:auto" onclick="addSize()">+ إضافة حجم</button></div>
        <div id="sizes"></div>
        <p class="muted small">مثال: سنجل 22.00 — دبل 30.00 — كومبو 36.00. للوجبة ذات السعر الواحد اترك حجماً واحداً باسم "عادي".</p>
        <p class="muted small">تكلفة التحضير: تكلفة المكونات/الخامات لإعداد حجم واحد من الوجبة (اختياري) — تُستخدم في شاشة «ربحية الوجبات» لحساب الربح لكل وجبة مباعة.</p>
    </div>

    <div style="display:flex;gap:10px"><button class="btn lg green">💾 حفظ الوجبة</button><a class="btn lg ghost" href="{{ route('restaurant.meals.index') }}">إلغاء</a></div>
</form>
@endsection

@push('scripts')
@php
    $initialSizes = old('sizes') ?: ($meal->exists
        ? $meal->sizes->map(function ($s) { return ['id' => $s->id, 'name_ar' => $s->name_ar, 'name_en' => $s->name_en, 'price' => $s->price, 'cost' => $s->cost]; })->values()->all()
        : [['name_ar' => 'عادي', 'name_en' => '', 'price' => '', 'cost' => '']]);
@endphp
<script>
const VAT = {{ $vat }};
const initial = @json($initialSizes);
let idx = 0;
function addSize(s) {
    s = s || {name_ar: '', name_en: '', price: '', cost: ''};
    const i = idx++;
    const d = document.createElement('div');
    d.className = 'form-row fr5'; d.style.alignItems = 'end';
    d.innerHTML = `<input type="hidden" name="sizes[${i}][id]" value="${s.id || ''}">
        <div><label>اسم الحجم *</label><input name="sizes[${i}][name_ar]" class="inp" required value="${RS.esc(s.name_ar)}"></div>
        <div><label>بالإنجليزية</label><input name="sizes[${i}][name_en]" class="inp" dir="ltr" value="${RS.esc(s.name_en || '')}"></div>
        <div><label>السعر بدون ضريبة *</label><input name="sizes[${i}][price]" type="number" step="0.01" min="0" class="inp" required value="${s.price}" oninput="pv(this)"></div>
        <div><label>تكلفة التحضير</label><input name="sizes[${i}][cost]" type="number" step="0.01" min="0" class="inp" value="${s.cost || ''}" placeholder="0.00" oninput="pv(this)"></div>
        <div style="display:flex;gap:8px;align-items:center"><span class="muted small nowrap">شامل الضريبة: <b class="num pv">0.00</b> · الربح: <b class="num profit">0.00</b></span><button type="button" class="btn sm red" onclick="if(document.querySelectorAll('#sizes .form-row').length>1)this.closest('.form-row').remove()">حذف</button></div>`;
    document.getElementById('sizes').appendChild(d);
    pv(d.querySelector('input[type=number]'));
}
function pv(el) {
    const row = el.closest('.form-row');
    const price = parseFloat(row.querySelector('input[name*="[price]"]').value) || 0;
    const cost = parseFloat(row.querySelector('input[name*="[cost]"]').value) || 0;
    row.querySelector('.pv').textContent = RS.money(price * (1 + VAT / 100));
    row.querySelector('.profit').textContent = RS.money(price - cost);
}
initial.forEach(addSize);
</script>
@endpush