@extends('admin.layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-black text-gray-900">Kelola Menu Dimsum</h1>
            <p class="text-xs text-gray-500">Tambah, ubah, hapus, dan atur ketersediaan stok dimsum.</p>
        </div>
        <button onclick="toggleModal('addMenuModal')" class="bg-orange-600 hover:bg-orange-700 text-white font-bold text-sm px-4 py-2.5 rounded-xl shadow-md flex items-center gap-2 transition-transform active:scale-95">
            <i class="fas fa-plus"></i> Tambah Menu Baru
        </button>
    </div>

    @if (session('success'))
        <div class="p-4 mb-4 text-sm text-green-800 bg-green-100 rounded-xl border border-green-200 font-bold">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="p-4 mb-4 text-sm text-red-800 bg-red-100 rounded-xl border border-red-200 font-bold">
            <p class="mb-2">Gagal memproses data! Periksa alasan berikut:</p>
            <ul class="list-disc list-inside font-medium text-xs">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- PERBAIKAN UTAMA: Menggunakan flex-wrap agar pas di layar dan tidak membuat scrollbar jebol -->
    <div class="flex flex-col gap-4 bg-white p-4 border border-gray-200 rounded-2xl shadow-xs text-[11px]">
        <div class="flex flex-wrap items-center gap-2 w-full">
            <a href="{{ route('admin.menus.index') }}" 
               class="px-3 py-2 rounded-xl border font-bold transition-all {{ !request('category') ? 'bg-orange-600 text-white border-orange-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50' }}">
                ✨ Semua Varian
            </a>
            @foreach(['Original Sauce', 'Mentai Original', 'Mentai Mozarella', 'Lava', 'Goreng', 'Platter', 'Kuah Creamy', 'Bakar', 'Hot BBQ'] as $cat)
                <a href="{{ route('admin.menus.index', ['category' => $cat]) }}" 
                   class="px-3 py-2 rounded-xl border font-bold whitespace-nowrap transition-all {{ request('category') == $cat ? 'bg-orange-600 text-white border-orange-600' : 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50' }}">
                    {{ $cat }}
                </a>
            @endforeach
        </div>

        <form action="{{ route('admin.menus.index') }}" method="GET" class="flex gap-2 w-full md:w-80">
            @if(request('category'))
                <input type="hidden" name="category" value="{{ request('category') }}">
            @endif
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama dimsum..." 
                   class="w-full bg-gray-50 border border-gray-200 rounded-xl p-2.5 focus:outline-none focus:border-orange-500 font-semibold text-xs">
            <button type="submit" class="bg-gray-900 text-white px-4 rounded-xl font-bold text-xs hover:bg-black transition-colors shrink-0">Cari</button>
        </form>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl shadow-xs overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 font-bold uppercase tracking-wider">
                        <th class="p-4 w-20">Foto</th>
                        <th class="p-4">Nama Menu</th>
                        <th class="p-4">Kategori</th>
                        <th class="p-4">Harga Modal</th>
                        <th class="p-4">Harga Jual</th>
                        <th class="p-4">Stok</th>
                        <th class="p-4">Status</th>
                        <th class="p-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 font-medium text-gray-700">
                    @forelse($menus as $menu)
                        <tr class="hover:bg-gray-50/50">
                            <td class="p-4">
                                <img src="{{ asset('images/menus/' . $menu->image) }}" class="w-12 h-12 object-cover rounded-lg border bg-gray-50">
                            </td>
                            <td class="p-4 font-bold text-gray-900 text-sm">{{ $menu->name }}</td>
                            <td class="p-4"><span class="bg-gray-100 text-gray-800 px-2 py-0.5 rounded text-[10px] uppercase font-bold">{{ $menu->category }}</span></td>
                            <td class="p-4 text-red-600">Rp{{ number_format($menu->cost_price, 0, ',', '.') }}</td>
                            <td class="p-4 text-emerald-600">Rp{{ number_format($menu->price, 0, ',', '.') }}</td>
                            <td class="p-4 font-bold">{{ $menu->stock }} Pcs</td>
                            <td class="p-4">
                                <span class="px-2 py-0.5 rounded-full font-bold text-[10px] uppercase {{ $menu->is_available && $menu->stock > 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    {{ $menu->is_available && $menu->stock > 0 ? 'Ready' : 'Habis' }}
                                </span>
                            </td>
                            <td class="p-4 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <button onclick="openEditModal({{ $menu }})" class="p-2 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors" title="Edit Menu">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <form action="{{ route('admin.menus.destroy', $menu->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus menu ini?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 bg-red-50 text-red-600 hover:bg-red-100 rounded-lg transition-colors" title="Hapus Menu">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="p-8 text-center text-gray-400">Belum ada menu. Klik tombol di kanan atas untuk menambahkan!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4 px-2">
        {{ $menus->links() }}
    </div>

    <div class="mt-12">
        <div>
            <h2 class="text-xl font-black text-gray-900">Ulasan & Rating Kepuasan Pelanggan</h2>
            <p class="text-xs text-gray-500 mb-4">Daftar rating bintang dan review yang diberikan pembeli secara live.</p>
        </div>

        <div class="bg-white border border-gray-200 rounded-2xl shadow-xs overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xs">
                    <thead>
                        <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 font-bold uppercase tracking-wider">
                            <th class="p-4">Nama Pelanggan</th>
                            <th class="p-4">Menu Dimsum</th>
                            <th class="p-4">Rating Kepuasan</th>
                            <th class="p-4">Isi Komentar / Ulasan</th>
                            <th class="p-4 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 font-medium text-gray-700">
                        @php
                            $allReviews = \App\Models\Review::with('menu')->orderBy('created_at', 'desc')->get();
                        @endphp

                        @forelse($allReviews as $review)
                            <tr class="hover:bg-gray-50/50">
                                <td class="p-4 font-bold text-gray-900">{{ $review->customer_name }}</td>
                                <td class="p-4 text-orange-600 font-bold">{{ $review->menu->name ?? 'Menu Dihapus' }}</td>
                                <td class="p-4 text-yellow-500 font-bold text-sm">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fa{{ $i <= $review->rating ? 's' : 'r' }} fa-star"></i>
                                    @endfor
                                    <span class="text-gray-600 text-xs ml-1">({{ $review->rating }}/5)</span>
                                </td>
                                <td class="p-4 text-gray-600 italic">"{{ $review->comment }}"</td>
                                <td class="p-4 text-center">
                                    <form action="{{ url('/admin/reviews/delete/' . $review->id) }}" method="POST" onsubmit="return confirm('Hapus ulasan ini?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-1.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-lg transition-colors">
                                            <i class="fas fa-trash"></i> Hapus
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-8 text-center text-gray-400">Belum ada review masuk. Tunggu simulasi transaksi berjalan otomatis!</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="addMenuModal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs hidden items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl p-6 border shadow-2xl">
        <div class="flex items-center justify-between mb-4 pb-2 border-b">
            <h3 class="font-black text-lg text-gray-900">Tambah Menu Dimsum Baru</h3>
            <button onclick="toggleModal('addMenuModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-lg"></i></button>
        </div>
        
        <form action="{{ route('admin.menus.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
            @csrf
            <div>
                <label class="block font-bold text-gray-700 mb-1">Nama Dimsum</label>
                <input type="text" name="name" required placeholder="Contoh: Dimsum Mentai Isi 6" class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Kategori Varian</label>
                <select name="category" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                    <option value="Original Sauce">Dimsum Original Sauce</option>
                    <option value="Mentai Original">Dimsum Mentai Original</option>
                    <option value="Mentai Mozarella">Dimsum Mentai Mozarella</option>
                    <option value="Lava">Dimsum Lava</option>
                    <option value="Goreng">Dimsum Goreng</option>
                    <option value="Platter">Dimsum MIX Platter</option>
                    <option value="Kuah Creamy">Dimsum Kuah Creamy</option>
                    <option value="Bakar">Dimsum Bakar</option>
                    <option value="Sauce">Extra Sauce</option>
                    <option value="Mentai Party">Dimsum Mentai Party</option>
                    <option value="Mentai Custom">Dimsum Mentai Custom</option>
                    <option value="Frozen">Dimsum Frozen</option>
                    <option value="Hot BBQ">Dimsum Hot BBQ</option>
                </select>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-gray-700 mb-1">Harga Modal (HPP)</label>
                    <input type="number" name="cost_price" required placeholder="Rp" class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                </div>
                <div>
                    <label class="block font-bold text-gray-700 mb-1">Harga Jual</label>
                    <input type="number" name="price" required placeholder="Rp" class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                </div>
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Jumlah Stok Awal</label>
                <input type="number" name="stock" value="10" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Upload Foto Menu</label>
                <input type="file" name="image" accept="image/*" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2">
            </div>

            <div class="pt-2 flex justify-end gap-2">
                <button type="button" onclick="toggleModal('addMenuModal')" class="bg-gray-100 text-gray-600 font-bold px-4 py-2 rounded-lg hover:bg-gray-200">Batal</button>
                <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white font-bold px-5 py-2 rounded-lg shadow-sm">Simpan Menu</button>
            </div>
        </form>
    </div>
</div>

<div id="editMenuModal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs hidden items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl p-6 border shadow-2xl">
        <div class="flex items-center justify-between mb-4 pb-2 border-b">
            <h3 class="font-black text-lg text-gray-900">Ubah / Edit Data Dimsum</h3>
            <button onclick="toggleModal('editMenuModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-lg"></i></button>
        </div>
        
        <form id="editForm" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
            @csrf
            @method('PUT')
            <div>
                <label class="block font-bold text-gray-700 mb-1">Nama Dimsum</label>
                <input type="text" id="edit_name" name="name" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Kategori Varian</label>
                <select id="edit_category" name="category" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                    <option value="Original Sauce">Dimsum Original Sauce</option>
                    <option value="Mentai Original">Dimsum Mentai Original</option>
                    <option value="Mentai Mozarella">Dimsum Mentai Mozarella</option>
                    <option value="Lava">Dimsum Lava</option>
                    <option value="Goreng">Dimsum Goreng</option>
                    <option value="Platter">Dimsum MIX Platter</option>
                    <option value="Kuah Creamy">Dimsum Kuah Creamy</option>
                    <option value="Bakar">Dimsum Bakar</option>
                    <option value="Sauce">Extra Sauce</option>
                    <option value="Mentai Party">Dimsum Mentai Party</option>
                    <option value="Mentai Custom">Dimsum Mentai Custom</option>
                    <option value="Frozen">Dimsum Frozen</option>
                    <option value="Hot BBQ">Dimsum Hot BBQ</option>
                </select>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-gray-700 mb-1">Harga Modal (HPP)</label>
                    <input type="number" id="edit_cost_price" name="cost_price" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                </div>
                <div>
                    <label class="block font-bold text-gray-700 mb-1">Harga Jual</label>
                    <input type="number" id="edit_price" name="price" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
                </div>
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Jumlah Stok</label>
                <input type="number" id="edit_stock" name="stock" required class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2.5 focus:outline-none focus:border-orange-500">
            </div>

            <div>
                <label class="block font-bold text-gray-700 mb-1">Ganti Foto Menu (Kosongkan jika tidak diganti)</label>
                <input type="file" name="image" accept="image/*" class="w-full bg-gray-50 border border-gray-200 rounded-lg p-2">
            </div>

            <div class="pt-2 flex justify-end gap-2">
                <button type="button" onclick="toggleModal('editMenuModal')" class="bg-gray-100 text-gray-600 font-bold px-4 py-2 rounded-lg hover:bg-gray-200">Batal</button>
                <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white font-bold px-5 py-2 rounded-lg shadow-sm">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

<script>
    function toggleModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal.classList.contains('hidden')) {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        } else {
            modal.classList.remove('flex');
            modal.classList.add('hidden');
        }
    }

    function openEditModal(menu) {
        document.getElementById('editForm').action = `/admin/menus/update/${menu.id}`;
        document.getElementById('edit_name').value = menu.name;
        document.getElementById('edit_category').value = menu.category;
        document.getElementById('edit_cost_price').value = menu.cost_price;
        document.getElementById('edit_price').value = menu.price;
        document.getElementById('edit_stock').value = menu.stock;
        toggleModal('editMenuModal');
    }
</script>
@endsection