@extends('profile.layout')
@section('title', $menu->name)
@section('content')
<a href="{{ route('menus.index', $profileUser) }}" class="text-sm text-muted hover:text-ink mb-4 inline-flex items-center gap-1.5"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Menyulara qayıt') }}</a>
<h1 class="text-2xl font-bold text-ink mb-2">{{ $menu->name }}</h1>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
    {{-- Категории --}}
    <div class="card">
        <div class="flex justify-between items-center mb-4"><h3 class="font-semibold">{{ __('Kateqoriyalar') }}</h3>
            <form method="POST" action="{{ route('menus.categories.store', [$profileUser, $menu]) }}" class="flex gap-1">@csrf<input type="text" name="name" class="input text-sm" placeholder="{{ __('Yeni kateqoriya') }}" required><button type="submit" class="btn btn-primary" style="padding:6px 12px;font-size:12px;">+</button></form>
        </div>
        @foreach($menu->categories as $cat)
        <div class="flex justify-between items-center py-2 border-b text-sm" id="cat-row-{{ $cat->id }}">
            {{-- Display mode --}}
            <span id="cat-display-{{ $cat->id }}">{{ $cat->name }}</span>
            {{-- Edit mode (hidden) --}}
            <form method="POST" action="{{ route('menus.categories.update', [$profileUser, $menu, $cat]) }}" id="cat-edit-{{ $cat->id }}" style="display:none;" class="flex gap-1 flex-1 mr-2">
                @csrf @method('PUT')
                <input type="text" name="name" value="{{ $cat->name }}" class="input text-sm flex-1" style="padding:4px 8px;">
                <button type="submit" class="btn btn-primary" style="padding:4px 8px;font-size:11px;"><x-icon name="check" class="w-4 h-4" /></button>
                <button type="button" onclick="toggleCatEdit({{ $cat->id }})" class="btn btn-secondary" style="padding:4px 8px;font-size:11px;"><x-icon name="x" class="w-4 h-4" /></button>
            </form>
            <div class="flex gap-1" id="cat-actions-{{ $cat->id }}">
                <button onclick="toggleCatEdit({{ $cat->id }})" class="text-xs text-muted hover:text-primary" style="background:none;border:none;cursor:pointer;"><x-icon name="pencil" class="w-4 h-4" /></button>
                <form method="POST" action="{{ route('menus.categories.toggle', [$profileUser, $menu, $cat]) }}" class="inline">@csrf @method('PUT')<button class="badge {{ $cat->is_active?'badge-green':'badge-yellow' }}" style="cursor:pointer;border:none;">{{ $cat->is_active?__('Aktiv') : __('Deaktiv') }}</button></form>
                <form method="POST" action="{{ route('menus.categories.destroy', [$profileUser, $menu, $cat]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Товары --}}
    <div class="card">
        <div class="flex justify-between items-center mb-4"><h3 class="font-semibold">{{ __('Məhsullar') }}</h3>
            <button onclick="toggleProductForm()" class="btn btn-primary" style="padding:6px 12px;font-size:12px;">+ {{ __('Yeni məhsul') }}</button>
        </div>

        {{-- Add form --}}
        <div id="productForm" style="display:none;" class="mb-4 p-4 bg-surface2 rounded-xl border border-line">
            <h4 class="text-sm font-semibold mb-3" id="productFormTitle">{{ __('Yeni məhsul əlavə et') }}</h4>
            @if($errors->any())
                <div class="mb-3 p-2 bg-dangersoft border border-line rounded-lg text-xs text-danger">@foreach($errors->all() as $e)<p>{{ $e }}</p>@endforeach</div>
            @endif
            <form method="POST" action="{{ route('menus.products.store', [$profileUser, $menu]) }}" enctype="multipart/form-data" class="space-y-3" id="productAddForm">
                @csrf
                <input type="text" name="name" class="input" placeholder="{{ __('Məhsul adı') }}" value="{{ old('name') }}" required>
                <div class="grid grid-cols-2 gap-2">
                    <input type="number" name="price" class="input" placeholder="{{ __('Qiymət (AZN)') }}" step="0.01" min="0" value="{{ old('price') }}" required>
                    <select name="category_id" class="input">
                        <option value="">{{ __('Kateqoriya seçin') }}</option>
                        @foreach($menu->categories as $cat)<option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>@endforeach
                    </select>
                </div>
                <textarea name="description" class="input" rows="2" placeholder="{{ __('Təsvir') }}">{{ old('description') }}</textarea>
                <input type="file" name="image" class="input" accept="image/*">
                <button type="submit" class="btn btn-primary w-full">{{ __('Əlavə et') }}</button>
            </form>
        </div>

        @foreach($menu->products as $p)
        <div class="flex justify-between items-center py-2 border-b text-sm" id="prod-row-{{ $p->id }}">
            {{-- Display mode --}}
            <div class="flex items-center gap-2" id="prod-display-{{ $p->id }}">
                @if($p->image_url)<img src="{{ $p->image_url }}" class="w-8 h-8 rounded object-cover">@endif
                <div>
                    <span class="font-medium">{{ $p->name }}</span>
                    <span class="text-muted ml-2">{{ number_format($p->price,2) }} ₼</span>
                    @if($p->category)<span class="text-xs text-muted ml-1">({{ $p->category->name }})</span>@endif
                    @if($p->description)<div class="text-xs text-muted">{{ $p->description }}</div>@endif
                </div>
            </div>
            {{-- Edit mode (hidden) --}}
            <form method="POST" action="{{ route('menus.products.update', [$profileUser, $menu, $p]) }}" enctype="multipart/form-data" id="prod-edit-{{ $p->id }}" style="display:none;" class="flex-1 mr-2 space-y-2">
                @csrf @method('PUT')
                <div class="flex gap-3">
                    {{-- Current image + upload --}}
                    <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">
                            <input type="number" name="price" value="{{ $p->price }}" class="input text-sm" style="padding:4px 8px;width:90px;" step="0.01" 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>
                        </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="toggleProdEdit({{ $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>
            <div class="flex gap-1" id="prod-actions-{{ $p->id }}">
                <button onclick="toggleProdEdit({{ $p->id }})" class="text-xs text-muted hover:text-primary" style="background:none;border:none;cursor:pointer;"><x-icon name="pencil" class="w-4 h-4" /></button>
                <form method="POST" action="{{ route('menus.products.toggle', [$profileUser, $menu, $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('menus.products.destroy', [$profileUser, $menu, $p]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleProductForm(){document.getElementById('productForm').style.display=document.getElementById('productForm').style.display==='none'?'block':'none';}
function toggleCatEdit(id){
    document.getElementById('cat-display-'+id).style.display = document.getElementById('cat-display-'+id).style.display==='none'?'inline':'none';
    document.getElementById('cat-edit-'+id).style.display = document.getElementById('cat-edit-'+id).style.display==='none'?'flex':'none';
    document.getElementById('cat-actions-'+id).style.display = document.getElementById('cat-actions-'+id).style.display==='none'?'flex':'none';
}
function toggleProdEdit(id){
    document.getElementById('prod-display-'+id).style.display = document.getElementById('prod-display-'+id).style.display==='none'?'flex':'none';
    document.getElementById('prod-edit-'+id).style.display = document.getElementById('prod-edit-'+id).style.display==='none'?'block':'none';
    document.getElementById('prod-actions-'+id).style.display = document.getElementById('prod-actions-'+id).style.display==='none'?'flex':'none';
}
@if($errors->any()) document.addEventListener('DOMContentLoaded', function(){ document.getElementById('productForm').style.display='block'; }); @endif
</script>
@endpush