@extends('admin.layouts.app')
@section('title', 'Menus')
@section('page-title', 'Menus')

@section('content')
<div x-data="menusManager()" x-init="init()">
    <div class="flex justify-end mb-6">
        <button @click="showCreate = !showCreate"
                class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            New Menu
        </button>
    </div>

    <div x-show="showCreate" x-cloak class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 mb-5">
        <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Create Menu</h3>
        <div class="flex flex-col sm:flex-row gap-3">
            <input type="text" x-model="newName" placeholder="Menu name" @keydown.enter="create()"
                   class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            <input type="text" x-model="newLocation" placeholder="Location (optional)"
                   class="sm:w-40 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            <div class="flex gap-2">
                <button @click="create()" :disabled="creating || !newName.trim()"
                        class="flex-1 sm:flex-none px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
                        x-text="creating ? 'Creating...' : 'Create'"></button>
                <button @click="showCreate = false"
                        class="flex-1 sm:flex-none px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</button>
            </div>
        </div>
    </div>

    <template x-if="loading">
        <div class="flex items-center justify-center py-16 gap-2 text-gray-400">
            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
            Loading...
        </div>
    </template>

    <template x-if="!loading">
        <div class="space-y-4">
            <template x-if="menus.length === 0">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-12 text-center text-gray-400">No menus yet.</div>
            </template>
            <template x-for="menu in menus" :key="menu.id">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 flex items-center justify-between">
                    <div>
                        <h3 class="font-semibold text-gray-900 dark:text-white" x-text="menu.name"></h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            <span x-text="menu.items_count"></span> items ·
                            Location: <span x-text="menu.location"></span>
                        </p>
                    </div>
                    <div class="flex gap-2">
                        <a :href="menu.edit_url"
                           class="px-3 py-1.5 text-sm text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20">Edit</a>
                        <button type="button" @click="deleteMenu(menu.id)" :disabled="deletingId === menu.id"
                                class="px-3 py-1.5 text-sm text-red-500 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-1.5 disabled:opacity-50">
                            <svg x-show="deletingId === menu.id" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            <span x-text="deletingId === menu.id ? 'Deleting...' : 'Delete'"></span>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection
