@extends('master-admin')

@section('content')
<section class="py-8">
    <div class="max-w-4xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow p-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
                <a href="{!! url('/admin/menus/create') !!}" class="inline-block px-5 py-2 bg-indigo-600 text-white rounded-lg font-semibold shadow hover:bg-indigo-700 transition">Add Menu</a>
                <form class="flex flex-col md:flex-row gap-2 items-center w-full md:w-auto" method="GET">
                    @csrf
                    <label class="font-medium text-gray-700 mr-2">Select Role:</label>
                    <select name="role" class="form-select border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900" onchange="$(this).closest('form').submit();" aria-label="Select role">
                        <option value="user" {!! empty($selectedRole) || $selectedRole == 'user' ? 'selected' : '' !!}>User</option>
                        <option value="admin" {!! $selectedRole == 'admin' ? 'selected' : '' !!}>Admin</option>
                        <option value="manager" {!! $selectedRole == 'manager' ? 'selected' : '' !!}>Manager</option>
                        <option value="guest" {!! $selectedRole == 'guest' ? 'selected' : '' !!}>Guest</option>
                    </select>
                    <button class="ml-2 px-4 py-2 bg-indigo-500 text-white rounded-md font-semibold hover:bg-indigo-600 transition">Change</button>
                </form>
            </div>
            <ul id="sortable-menu" class="space-y-4">
                @foreach ($menus as $menu)
                    <li id="menu_{{ $menu->id }}" class="bg-gray-50 rounded-lg shadow flex flex-col md:flex-row md:items-center justify-between px-4 py-3">
                        <div class="flex-1">
                            <span class="inline-flex items-center gap-2 font-semibold text-indigo-700"><span class="inline-block bg-indigo-100 text-indigo-700 rounded px-2 py-1 text-xs font-bold">{{ $menu->order }}</span> {{ $menu->name }}</span>
                            <p class="text-xs text-gray-500 mt-1">{!! url($menu->url) !!}</p>
                        </div>
                        <div class="flex gap-2 mt-2 md:mt-0">
                            <a class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition text-xs font-semibold" href="{{ route('menus.edit', $menu->id) }}">Edit</a>
                            <form action="{{ route('menus.destroy', $menu->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                @csrf
                                @method('DELETE')
                                <button class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition text-xs font-semibold" type="submit">Delete</button>
                            </form>
                        </div>
                        @if ($menu->children->isNotEmpty())
                            <ul class="ml-6 mt-2 space-y-2 border-l-2 border-indigo-100 pl-4">
                                @foreach ($menu->children as $child)
                                    <li id="menu_{{ $child->id }}" class="bg-white rounded flex flex-col md:flex-row md:items-center justify-between px-3 py-2 shadow-sm">
                                        <div class="flex-1">
                                            <span class="inline-flex items-center gap-2 font-semibold text-indigo-700"><span class="inline-block bg-indigo-100 text-indigo-700 rounded px-2 py-1 text-xs font-bold">{{ $child->order }}</span> {{ $child->name }}</span>
                                            <p class="text-xs text-gray-500 mt-1">{!! url($child->url) !!}</p>
                                        </div>
                                        <div class="flex gap-2 mt-2 md:mt-0">
                                            <a class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition text-xs font-semibold" href="{{ route('menus.edit', $child->id) }}">Edit</a>
                                            <form action="{{ route('menus.destroy', $child->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                                @csrf
                                                @method('DELETE')
                                                <button class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition text-xs font-semibold" type="submit">Delete</button>
                                            </form>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>
@endsection

@push('head_end')
<link rel="stylesheet" href="{{ getAssetPath('assets/css/jquery-ui.min.css') }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endpush

@push('post_js')
<script src="{!! getAssetPath('assets/js/jquery-ui.min.js') !!}"></script>
<script src="{!! getAssetPath('assets/js/jquery.mjs.nestedSortable.js') !!}"></script>
@endpush