@php
    use App\Enum\MenuTypeEnum;
@endphp

@if (session('warning'))
    <div class="bg-yellow-100 text-yellow-800 border border-yellow-300 p-4 rounded-md mb-2 ">
        {{ session('warning') }}
    </div>
@endif

<!-- Slug Display -->
<div class="mb-4">
    <div class="inline-block bg-blue-50 border border-blue-500 rounded-lg px-4 py-2 shadow-sm">
        <span class="text-sm font-semibold text-gray-600">Slug:</span>
        <span id="slug"
            class="text-sm font-bold text-blue-600 ">{{ old('slug', isset($menuData) ? $menuData->slug : '') }}</span>
    </div>
    <input type="hidden" name="slug" value="{{  old('slug', isset($menuData) ? $menuData->slug : '') }}">
</div>

<!-- Form Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- type -->
    <div>
        <label for="type" class="block text-sm font-medium text-gray-700">Type <span
                class="text-red-600">*</span></label>
        <select name="type" id="type"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
            @foreach ($menuTypes as $type)
                <option value="{{ $type->value }}"
                    {{ old('type') == $type->value ? 'selected' : (isset($menuData) && $menuData->type == $type->value ? 'selected' : '') }}>
                    {{ MenuTypeEnum::map($type->value) }}</option>
            @endforeach
        </select>

        @error('type')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- External link (Slug Input) -->
    <div class="col-span-2 hidden" id="externalLinkSpace">
        <label for="externalLink" class="block text-sm font-medium text-gray-700">External Link <span
                class="text-red-600">*</span></label>
        <input type="url" name="external_link" id="externalLink"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('external_link') border-red-500 @enderror"
            value="{{ old('external_link', isset($menuData) ? $menuData->external_link : '') }}">

        @error('external_link')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Parent -->
    <div>
        <label for="parentId" class="block text-sm font-medium text-gray-700">Parent</label>
        <select name="parent_id" id="parentId"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('parent_id') border-red-500 @enderror">
            <option value="">Select Parent</option>
            @foreach ($menus as $menu)
                <option value="{{ $menu->id }}"
                    {{ old('parent_id', isset($menuData) && $menuData->parent_id == $menu->id ? 'selected' : '') }}>
                    {{ $menu->name_en . (isset($menu->name_np) ? ' | ' . $menu->name_np : '') }}</option>
            @endforeach
        </select>
        @error('parent_id')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Name EN -->
    <div>
        <label for="name_en" class="block text-sm font-medium text-gray-700">Name En <span
                class="text-red-600">*</span></label>
        <input type="text" id="name_en" name="name_en"
            value="{{ old('name_en', isset($menuData) ? $menuData->name_en : null) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name_en') border-red-500 @enderror">

        @error('name_en')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Name NP -->
    <div>
        <label for="name_np" class="block text-sm font-medium text-gray-700">Name Np</label>
        <input type="text" id="name_np" name="name_np"
            value="{{ old('name_np', isset($menuData) ? $menuData->name_np : null) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name_np') border-red-500 @enderror">

        @error('name_np')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- type -->
    <div>
        <label for="type_id" class="block text-sm font-medium text-gray-700">Type</label>
        <select name="type_id" id="type_id"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('type_id') border-red-500 @enderror">
            <option value="">Select Type</option>
            @foreach ($types as $type)
                <option value="{{ $type->id }}"
                    {{ old('type_id', isset($menuData) && $menuData->type_id == $type->id ? 'selected' : '') }}>
                    {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}</option>
            @endforeach
        </select>
        @error('type_id')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Display Order -->
    <div>
        <label for="display_order" class="block text-sm font-medium text-gray-700">Display Order <span
                class="text-red-600">*</span></label>
        <input type="number" id="display_order" name="display_order" min="1"
            value="{{ old('display_order', isset($menuData) ? $menuData->display_order : $displayOrder ?? 0) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('display_order') border-red-500 @enderror">

        @error('display_order')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Is Published -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Is Published? <span
                class="text-red-600">*</span></label>
        <div class="flex space-x-6 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" name="is_published" value="1" class="form-radio text-blue-600"
                    {{ isset($menuData) ? ($menuData->is_published == 1 ? 'checked' : '') : 'checked' }}>
                <span class="ml-2 text-gray-700">Yes</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" name="is_published" value="0" class="form-radio text-blue-600"
                    {{ isset($menuData) ? ($menuData->is_published == 0 ? 'checked' : '') : '' }}>
                <span class="ml-2 text-gray-700">No</span>
            </label>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            type = @json(old('type')) ? @json(old('type')) : $('#type').val();

            checkType(type);
        });

        $('#type').change(function(e) {
            e.preventDefault();
            type = $('#type').val();

            checkType(type);
        });

        $(document).on('input', '#name_en', function() {
            let nameEnValue = $(this).val();
            let slug = generateSlug(nameEnValue);
            $('input[name=slug]').val(slug);
            $('#slug').text(slug);
        });

        function generateSlug(text) {
            return text
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');
        }

        function checkType(type) {
            if (type == @json(MenuTypeEnum::SLUG->value)) {
                $('#slugSpace').removeClass('hidden');
                $('#externalLinkSpace').val('').addClass('hidden');

                nameEn = $('#name_en').val();
                if (nameEn != '') {
                    let slug = generateSlug(nameEn);
                    $('input[name=slug]').val(slug);
                    $('#slug').text(slug);

                }
            } else {
                $('#externalLinkSpace').removeClass('hidden');
                $('#slugSpace').addClass('hidden');
                $('input[name=slug]').val('');
                $('#slug').text('');
            }
        }
    </script>
@endpush