@extends('profile.layout')
@section('title', __('Yeməklər'))
@section('content')

@php
    // Карта menu_id → категории для динамического селектора в форме добавления.
    $menuCategories = [];
    foreach ($menus as $m) {
        $menuCategories[$m->id] = $m->categories->map(fn($c) => ['id' => $c->id, 'name' => $c->name])->values()->toArray();
    }
@endphp

<h1 class="text-2xl font-bold text-ink mb-1">{{ __('Yeməklər') }}</h1>
<p class="text-sm text-muted mb-6">{{ __('QR menyu səhifələrinizin yeməkləri — hansı menyuya aid olduğuna görə qruplaşdırılıb.') }}</p>

@if(!$hasAccess)
<div class="card text-center py-16">
    <x-icon name="lock" class="w-8 h-8 mx-auto mb-3 text-muted" />
    <p class="text-lg font-semibold text-ink mb-1">{{ __('Bu səhifə tarifinizdə mövcud deyil.') }}</p>
    <p class="text-sm text-muted mb-4">
        {{ __('QR menyular və yeməklər hazırkı tarifinizdə mövcud deyil.') }}
        @if($unlockPlan){{ __('Bu funksiya') }} «{{ $unlockPlan }}» {{ __('tarifində mövcuddur.') }}@endif
    </p>
    <a href="{{ route('profile.plans', $profileUser) }}" class="btn btn-primary">{{ __('Tarifi dəyiş') }}</a>
</div>
@else

@if($menus->isEmpty())
    <div class="card text-center py-10 text-muted">
        <x-icon name="clipboard-list" class="w-8 h-8 mx-auto mb-2 text-muted" />
        <p class="mb-1">{{ __('Yemək əlavə etmək üçün əvvəlcə QR menyu yaratmalısınız.') }}</p>
        <p class="text-xs mb-4">{{ __('Yeməklər yalnız QR menyu səhifələrinə əlavə oluna bilər.') }}</p>
        <a href="{{ route('menus.index', $profileUser) }}" class="btn btn-primary">{{ __('Menyu yarat') }}</a>
    </div>
@else

{{-- ============ Добавить блюдо ============ --}}
<div class="card mb-8">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold flex items-center gap-1.5"><x-icon name="clipboard-list" class="w-4 h-4" /> {{ __('Yeni yemək əlavə et') }}</h3>
        <button onclick="toggleDishForm()" type="button" class="btn btn-secondary" style="padding:6px 12px;font-size:12px;">{{ __('Yemək əlavə et') }}</button>
    </div>

    @if($errors->any())
        <div class="mb-3 p-3 bg-dangersoft border border-line rounded-lg text-xs text-danger">
            @foreach($errors->all() as $e)<p>{{ $e }}</p>@endforeach
        </div>
    @endif

    <form id="dishForm" method="POST" action="{{ route('profile.dishes.store', $profileUser) }}" enctype="multipart/form-data" class="space-y-3" style="@if(!$errors->any()) display:none; @endif">
        @csrf
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <label class="label">{{ __('Menyu') }}</label>
                <select name="menu_id" class="input" required onchange="updateDishCats(this.value, 'dishCategory')">
                    <option value="">{{ __('Menyu seçin') }}</option>
                    @foreach($menus as $menu)
                        <option value="{{ $menu->id }}" {{ old('menu_id') == $menu->id ? 'selected' : '' }}>{{ $menu->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label">{{ __('Kateqoriya') }}</label>
                <select name="category_id" id="dishCategory" class="input">
                    <option value="">{{ __('Kateqoriya seçin') }}</option>
                </select>
            </div>
            <div>
                <label class="label">{{ __('Yemək adı') }}</label>
                <input type="text" name="name" class="input" placeholder="{{ __('Yemək adı') }}" value="{{ old('name') }}" required>
            </div>
            <div>
                <label class="label">{{ __('Qiymət (AZN)') }}</label>
                <input type="number" name="price" class="input" placeholder="0.00" step="0.01" min="0" value="{{ old('price') }}" required>
            </div>
        </div>
        <div>
            <label class="label">{{ __('Şəkil') }}</label>
            <input type="file" name="image" class="input" accept="image/*">
        </div>
        <div>
            <label class="label">{{ __('Təsvir') }}</label>
            <textarea name="description" class="input" rows="2" placeholder="{{ __('Təsvir') }}">{{ old('description') }}</textarea>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" name="is_available" value="1" class="rounded" {{ old('is_available', 1) ? 'checked' : '' }}>
                <span>{{ __('Mövcuddur') }}</span>
            </label>
            <button type="submit" class="btn btn-primary w-full sm:w-auto"><x-icon name="plus" class="w-4 h-4" /> {{ __('Əlavə et') }}</button>
        </div>
    </form>
</div>

{{-- ============ Категории меню ============ --}}
<div class="card mb-8">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold flex items-center gap-1.5"><x-icon name="clipboard-list" class="w-4 h-4" /> {{ __('Kateqoriyalar') }}</h3>
        <button onclick="toggleCatAddForm()" type="button" class="btn btn-secondary" style="padding:6px 12px;font-size:12px;">{{ __('Kateqoriya əlavə et') }}</button>
    </div>
    <label class="label">{{ __('Menyu') }}</label>
    <select id="catMenuSelect" class="input mb-3" onchange="switchCatMenu(this.value)">
        @foreach($menus as $menu)
            <option value="{{ $menu->id }}">{{ $menu->name }}</option>
        @endforeach
    </select>
    @foreach($menus as $menu)
        <div class="cat-panel" data-menu="{{ $menu->id }}" @if(!$loop->first) style="display:none;" @endif>
            @include('profile._category_panel', ['owner' => $menu, 'type' => 'menu'])
        </div>
    @endforeach
</div>

{{-- ============ Блюда по меню ============ --}}
@if($totalDishes === 0)
    <div class="card text-center py-16 text-muted"><p>{{ __('Yemək yoxdur') }}.</p><p class="text-xs mt-1">{{ __('Yuxarıdakı formadan ilk yeməyi əlavə edin.') }}</p></div>
@else
    {{-- ============ Фильтр и поиск ============ --}}
    <div class="card mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="relative">
                <x-icon name="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
                <input type="text" id="dishSearch" class="input" style="padding-left:2rem;" placeholder="{{ __('Axtarış...') }}" oninput="applyDishFilter()">
            </div>
            <select id="dishMenuFilter" class="input" onchange="applyDishFilter()">
                <option value="">{{ __('Bütün menyular') }}</option>
                @foreach($menus as $menu)
                    <option value="{{ $menu->id }}">{{ $menu->name }}</option>
                @endforeach
            </select>
            <select id="dishStatusFilter" class="input" onchange="applyDishFilter()">
                <option value="">{{ __('Bütün statuslar') }}</option>
                <option value="active">{{ __('Aktiv') }}</option>
                <option value="inactive">{{ __('Deaktiv') }}</option>
            </select>
        </div>
    </div>

    <div id="dishEmpty" class="card text-center py-16 text-muted" style="display:none;"><p>{{ __('Axtarışa uyğun nəticə tapılmadı') }}.</p></div>

    @foreach($menus as $menu)
        @php $dishList = $grouped[$menu->id] ?? []; @endphp
        @if(count($dishList))
        <div class="card !p-0 overflow-hidden mb-6" data-dish-group>
            <div class="flex items-center justify-between px-4 py-3 border-b border-line bg-surface2">
                <div class="flex items-center gap-2">
                    <a href="{{ route('menus.show', [$profileUser, $menu]) }}" class="font-semibold text-ink hover:text-primary no-underline">{{ $menu->name }}</a>
                    <span class="badge badge-green">{{ __('QR menyu') }}</span>
                    <span class="text-xs text-muted">{{ count($dishList) }} {{ __('yemək') }}</span>
                </div>
            </div>

            @foreach($dishList as $p)
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-line last:border-0 text-sm" id="dish-row-{{ $p->id }}" data-dish-row data-search="{{ mb_strtolower($p->name . ' ' . $p->description) }}" data-group="{{ $menu->id }}" data-status="{{ $p->is_available ? 'active' : 'inactive' }}">
                {{-- Display --}}
                <div class="flex items-center gap-3 flex-1" id="dish-display-{{ $p->id }}">
                    @if($p->image_url)
                        <img src="{{ $p->image_url }}" class="w-10 h-10 rounded-lg object-cover border border-line flex-shrink-0">
                    @else
                        <div class="w-10 h-10 rounded-lg bg-surface2 border border-line flex items-center justify-center text-muted flex-shrink-0"><x-icon name="clipboard-list" class="w-5 h-5" /></div>
                    @endif
                    <div class="min-w-0">
                        <div class="font-medium text-ink truncate">{{ $p->name }}</div>
                        <div class="text-xs text-muted">{{ number_format($p->price, 2) }} ₼{{ $p->category ? ' · ' . $p->category->name : '' }}{{ $p->description ? ' · ' . mb_substr($p->description, 0, 60) : '' }}</div>
                    </div>
                </div>

                {{-- Edit form --}}
                <form method="POST" action="{{ route('profile.dishes.update', [$profileUser, $p]) }}" enctype="multipart/form-data" id="dish-edit-{{ $p->id }}" style="display:none;" class="flex-1 mr-2 space-y-2">
                    @csrf @method('PUT')
                    <div class="flex gap-3">
                        <div class="flex-shrink-0" style="width:60px;">
                            @if($p->image_url)
                                <img src="{{ $p->image_url }}" class="w-full h-14 object-cover rounded-lg border mb-1">
                            @else
                                <div class="w-full h-14 bg-surface2 rounded-lg border flex items-center justify-center text-xs text-muted">{{ __('yoxdur') }}</div>
                            @endif
                            <input type="file" name="image" class="input text-xs" accept="image/*" style="padding:2px;font-size:10px;width:60px;">
                        </div>
                        <div class="flex-1 space-y-2">
                            <input type="text" name="name" value="{{ $p->name }}" class="input text-sm" style="padding:4px 8px;" required>
                            <div class="flex gap-2 items-center">
                                <input type="number" name="price" value="{{ $p->price }}" class="input text-sm" style="padding:4px 8px;width:100px;" step="0.01" min="0" required>
                                <select name="category_id" class="input text-sm" style="padding:4px 8px;">
                                    <option value="">—</option>
                                    @foreach($menu->categories as $cat)<option value="{{ $cat->id }}" {{ $p->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>@endforeach
                                </select>
                                <label class="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
                                    <input type="checkbox" name="is_available" value="1" class="rounded" {{ $p->is_available ? 'checked' : '' }}> {{ __('Mövcud') }}
                                </label>
                            </div>
                            <textarea name="description" class="input text-sm" rows="1" style="padding:4px 8px;">{{ $p->description }}</textarea>
                        </div>
                    </div>
                    <div class="flex gap-1">
                        <button type="submit" class="btn btn-primary" style="padding:4px 10px;font-size:11px;"><x-icon name="check" class="w-4 h-4" /> {{ __('Saxla') }}</button>
                        <button type="button" onclick="toggleDishEdit({{ $p->id }})" class="btn btn-secondary" style="padding:4px 10px;font-size:11px;"><x-icon name="x" class="w-4 h-4" /></button>
                    </div>
                </form>

                {{-- Actions --}}
                <div class="flex items-center gap-1 flex-shrink-0" id="dish-actions-{{ $p->id }}">
                    <button onclick="toggleDishEdit({{ $p->id }})" class="text-xs text-muted hover:text-primary" style="background:none;border:none;cursor:pointer;" title="{{ __('Redaktə et') }}"><x-icon name="pencil" class="w-4 h-4" /></button>
                    <form method="POST" action="{{ route('profile.dishes.toggle', [$profileUser, $p]) }}" class="inline">@csrf @method('PUT')<button class="badge {{ $p->is_available?'badge-green':'badge-yellow' }}" style="cursor:pointer;border:none;">{{ $p->is_available?__('Aktiv') : __('Deaktiv') }}</button></form>
                    <form method="POST" action="{{ route('profile.dishes.destroy', [$profileUser, $p]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;" title="{{ __('Sil') }}"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    @endforeach
@endif

@endif
@endif
@endsection

@push('scripts')
<script>
var MENU_CATS = @json($menuCategories);

function toggleDishForm(){
    var f = document.getElementById('dishForm');
    f.style.display = f.style.display === 'none' ? 'block' : 'none';
}
function toggleDishEdit(id){
    var disp = document.getElementById('dish-display-'+id);
    var edit = document.getElementById('dish-edit-'+id);
    var act  = document.getElementById('dish-actions-'+id);
    var opening = edit && edit.style.display === 'none';
    if (disp) disp.style.display = opening ? 'none' : 'flex';
    if (edit) edit.style.display = opening ? 'block' : 'none';
    if (act)  act.style.display  = opening ? 'none' : 'flex';
}
function applyDishFilter(){
    var q = (document.getElementById('dishSearch').value || '').toLowerCase().trim();
    var menu = document.getElementById('dishMenuFilter').value;
    var status = document.getElementById('dishStatusFilter').value;
    var total = 0;
    document.querySelectorAll('[data-dish-row]').forEach(function(row){
        var name = (row.getAttribute('data-search') || '').toLowerCase();
        var okSearch = !q || name.indexOf(q) !== -1;
        var okMenu = !menu || row.getAttribute('data-group') === menu;
        var okStatus = !status || row.getAttribute('data-status') === status;
        var show = okSearch && okMenu && okStatus;
        row.style.display = show ? '' : 'none';
        if (show) total++;
    });
    document.querySelectorAll('[data-dish-group]').forEach(function(card){
        var rows = card.querySelectorAll('[data-dish-row]');
        var anyVisible = rows.length > 0 && Array.prototype.some.call(rows, function(r){ return r.style.display !== 'none'; });
        card.style.display = anyVisible ? '' : 'none';
    });
    var empty = document.getElementById('dishEmpty');
    if (empty) empty.style.display = total === 0 ? 'block' : 'none';
}
function switchCatMenu(id){
    document.querySelectorAll('.cat-panel').forEach(function(p){
        p.style.display = p.getAttribute('data-menu') === id ? '' : 'none';
    });
}
function toggleCatAddForm(){
    document.querySelectorAll('.cat-add-form').forEach(function(f){
        f.style.display = (f.style.display === 'none') ? 'flex' : 'none';
    });
}
function toggleCatEdit(id){
    var disp = document.getElementById('cat-display-'+id);
    var edit = document.getElementById('cat-edit-'+id);
    var act  = document.getElementById('cat-actions-'+id);
    var opening = edit && edit.style.display === 'none';
    if (disp) disp.style.display = opening ? 'none' : 'inline';
    if (edit) edit.style.display = opening ? 'flex' : 'none';
    if (act)  act.style.display  = opening ? 'none' : 'flex';
}
function updateDishCats(menuId, targetId){
    var sel = document.getElementById(targetId);
    if (!sel) return;
    var cats = MENU_CATS[menuId] || [];
    sel.innerHTML = '<option value="">{{ __('Kateqoriya seçin') }}</option>';
    cats.forEach(function(c){
        var o = document.createElement('option');
        o.value = c.id;
        o.textContent = c.name;
        sel.appendChild(o);
    });
}
// При ошибке валидации — восстановить категории и выбор.
document.addEventListener('DOMContentLoaded', function(){
    var menuSel = document.querySelector('[name="menu_id"]');
    if (menuSel && menuSel.value) {
        updateDishCats(menuSel.value, 'dishCategory');
        var catSel = document.getElementById('dishCategory');
        var oldCat = "{{ old('category_id') }}";
        if (oldCat && catSel) catSel.value = oldCat;
    }
});
</script>
@endpush