{{-- File: resources/views/selva/menu-type/index.blade.php --}}
@extends('selva.layout')

@section('title', 'Menu Type')

@section('content')
<div  x-data="menuType" class="mx-auto max-w-6xl px-4 py-10">
    <!-- Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Tipe Menu</h1>
            <p class="text-sm text-gray-500">Kelola tipe menu untuk tambah, edit, dan hapus data dengan mudah!</p>
        </div>
        <div x-data>
            <button @click="$dispatch('open-modal')"
                class="rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                + Tambah Tipe Menu
            </button>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="mb-6 rounded-md bg-green-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="mb-6 rounded-md bg-red-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Grid Card -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        @forelse($menuTypes as $menuType)
        <div
            class="relative bg-white rounded-lg border border-gray-200 p-5 shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow">
            <!-- Dropdown -->
            <div class="absolute top-3 right-3" x-data="{ open: false }">
                <button @click="open = !open" class="text-gray-400 hover:text-gray-600 focus:outline-none">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" />
                    </svg>
                </button>
                <div x-show="open" @click.outside="open = false" x-transition
                    class="absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded-md shadow-md z-20">
                    <a href="#" @click.prevent="$dispatch('open-edit-modal', {{ $menuType }}); open = false"
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Edit
                    </a>
                    <a href="#" @click.prevent="deleteMenuType({{ $menuType->id }}); open = false"
                        class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                        Hapus
                    </a>
                </div>
            </div>

            <!-- Content -->
            <div>
                <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ $menuType->name }}</h2>
                <p class="text-sm text-gray-500 mb-3">{{ $menuType->description }}</p>

                <!-- Kode -->
                <div class="flex items-center text-sm text-gray-500 gap-2">
                    <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2"
                        viewBox="0 0 24 24">
                        <path
                            d="M9 12h6m2 0a2 2 0 002-2V6a2 2 0 00-2-2H7a2 2 0 00-2 2v4a2 2 0 002 2m0 0a2 2 0 012 2v4a2 2 0 012 2h2a2 2 0 002-2v-4a2 2 0 012-2" />
                    </svg>
                    <span class="font-medium text-gray-700">Kode: {{ $menuType->code }}</span>
                </div>
            </div>

            <!-- Divider -->
            <hr class="my-4 border-t border-gray-200">

            <!-- Footer -->
            <div class="flex items-center justify-between">
                <!-- Detail Button -->
                <button @click.prevent="$dispatch('open-detail-modal', @json($menuType)); open = false"
                    class="text-sm text-indigo-600 hover:underline font-medium focus:outline-none">
                    Lihat Detail
                </button>

                <!-- Total Menu -->
                <span class="text-sm text-indigo-600 font-semibold">
                    Total Menu: {{ $menuType->menus()->count() }}
                </span>
            </div>
        </div>
        @empty
        <div class="col-span-full text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">Belum ada tipe menu</h3>
            <p class="mt-1 text-sm text-gray-500">Mulai dengan menambahkan tipe menu pertama Anda!</p>
            <div class="mt-6">
                <button @click="$dispatch('open-modal')"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    + Tambah Tipe Menu
                </button>
            </div>
        </div>
        @endforelse
    </div>

    <!-- Modal Component -->
    @include('components.modal-add')
</div>
@endsection

@push('scripts')
<script>
    // Global delete function
    window.deleteMenuType = function (id) {
        if (confirm('Apakah Anda yakin ingin menghapus tipe menu ini? Tindakan ini tidak dapat dibatalkan!')) {
            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/{{ env('SELA_ROUTE_PREFIX', 'sela') }}/menu-type/${id}`;

            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';

            const tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.name = '_token';
            tokenInput.value = '{{ csrf_token() }}';

            form.appendChild(methodInput);
            form.appendChild(tokenInput);
            document.body.appendChild(form);
            form.submit();
        }
    };

</script>
@endpush