@extends('restaurant.layout')
@section('title', 'قائمة الوجبات والأسعار')
@section('content')
<div class="hero">
    <div><h2>☕ قائمة وجبات المطعم والأسعار</h2><p>إدارة الوجبات، الصور، الأحجام المتعددة، والأسعار لكل حجم (الأسعار المسجلة بدون ضريبة)</p></div>
    <div class="actions">
        <a class="btn orange" href="{{ route('restaurant.pos') }}">شاشة الكاشير (POS) ←</a>
        <a class="btn ghost" href="{{ route('restaurant.categories.index') }}">أقسام المنيو</a>
        <form method="post" action="{{ route('restaurant.meals.demo') }}" style="display:inline" onsubmit="return confirm('إضافة منيو تجريبي (وجبات وأقسام وأسعار) للتجربة؟ لن يتكرر أي صنف موجود.')">@csrf<button class="btn ghost">🍔 تحميل وجبات تجريبية</button></form>
        <a class="btn" href="{{ route('restaurant.meals.create') }}">+ إضافة وجبة جديدة</a>
    </div>
</div>

<div class="card">
    <form method="get" class="filters">
        <div style="flex:2"><label>بحث</label><input name="q" value="{{ request('q') }}" class="inp" placeholder="ابحث باسم الوجبة أو الوصف..."></div>
        <div><label>القسم</label><select name="category_id" class="inp"><option value="">كل الأقسام</option>@foreach($categories as $c)<option value="{{ $c->id }}" @selected(request('category_id') == $c->id)>{{ $c->name_ar }}</option>@endforeach</select></div>
        <div><label>الحالة</label><select name="status" class="inp"><option value="">كل الحالات</option><option value="active" @selected(request('status')=='active')>متاح</option><option value="off" @selected(request('status')=='off')>موقوف</option></select></div>
        <div style="flex:0"><button class="btn navy">تصفية</button></div>
    </form>
</div>

<div class="tbl-wrap"><table class="tbl">
    <thead><tr><th style="width:70px">الصورة</th><th>اسم الوجبة</th><th>القسم</th><th>الأحجام والأسعار</th><th>الحالة</th><th>إجراءات</th></tr></thead>
    <tbody>
    @forelse($meals as $m)
        <tr>
            <td>@if($m->image_url)<img src="{{ $m->image_url }}" alt="" style="width:54px;height:54px;object-fit:cover;border-radius:10px">@else<div style="width:54px;height:54px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px">🍽️</div>@endif</td>
            <td><div class="fw">{{ $m->name_ar }}</div><div class="muted small">{{ $m->name_en }}</div>@if($m->description)<div class="muted small">{{ \Illuminate\Support\Str::limit($m->description, 70) }}</div>@endif</td>
            <td>@if($m->category)<span class="badge blue">{{ $m->category->name_ar }}</span>@else<span class="muted">—</span>@endif</td>
            <td>@foreach($m->sizes as $s)<span class="chip">{{ $s->name_ar }}: <b class="num">{{ number_format($s->price, 2) }}</b> ر.س</span>@endforeach</td>
            <td><span class="badge {{ $m->is_available ? 'green' : 'gray' }}">● {{ $m->is_available ? 'متاح' : 'موقوف' }}</span></td>
            <td class="nowrap">
                <a class="btn sm soft" href="{{ route('restaurant.meals.edit', $m) }}">تعديل</a>
                <form method="post" action="{{ route('restaurant.meals.toggle', $m) }}" style="display:inline">@csrf<button class="btn sm ghost">{{ $m->is_available ? 'إيقاف' : 'تفعيل' }}</button></form>
                <form method="post" action="{{ route('restaurant.meals.destroy', $m) }}" style="display:inline" onsubmit="return confirm('حذف هذه الوجبة؟ الفواتير القديمة لن تتأثر.')">@csrf @method('DELETE')<button class="btn sm red">حذف</button></form>
            </td>
        </tr>
    @empty
        <tr><td colspan="6" class="empty">لا توجد وجبات بعد. ابدأ بإضافة وجبتك الأولى.</td></tr>
    @endforelse
    </tbody>
</table></div>
<div style="margin-top:12px">{{ $meals->links() }}</div>
@endsection