@php
    use App\Enum\LinkTypeEnum;
    use App\Enum\MenuTypeEnum;
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- 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($link) ? $link->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($link) ? $link->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>

    <!-- link type -->
    <div>
        <label for="link_type" class="block text-sm font-medium text-gray-700">Link Type <span
                class="text-red-600">*</span></label>
        <select name="link_type" id="link_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 ($linkTypes as $type)
                <option value="{{ $type->value }}"
                    {{ old('link_type') == $type->value ? 'selected' : (isset($link) && $link->link_type == $type->value ? 'selected' : '') }}>
                    {{ LinkTypeEnum::map($type->value) }}</option>
            @endforeach
        </select>

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

    <!-- 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 ($types as $type)
                <option value="{{ $type->value }}"
                    {{ old('type') == $type->value ? 'selected' : (isset($link) && $link->type == $type->value ? 'selected' : '') }}>
                    {{ MenuTypeEnum::linkMap($type->value) }}</option>
            @endforeach
        </select>

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

    <!-- menu -->
    <div class="hidden" id="menuSection">
        <label for="menu_id" class="block text-sm font-medium text-gray-700">Menu</label>
        <select name="menu_id" id="menu_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('menu_id') border-red-500 @enderror">
            <option value="">Select Menu</option>
            @foreach ($menus as $menu)
                <option value="{{ $menu->id }}"
                    {{ old('menu_id', isset($link) && $link->menu_id == $menu->id ? 'selected' : '') }}>
                    {{ $menu->name_en . (isset($menu->name_np) ? ' | ' . $menu->name_np : '') }}</option>
            @endforeach
        </select>
        @error('menu_id')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

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

        @error('url')
            <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($link) ? $link->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($link) ? ($link->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($link) ? ($link->is_published == 0 ? 'checked' : '') : '' }}>
                <span class="ml-2 text-gray-700">No</span>
            </label>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            checkType();
        });

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

            checkType();
        });

        function checkType() {
            type = $('#type').val();

            if (type == @json(MenuTypeEnum::SLUG->value)) {
                $('#menuSection').removeClass('hidden');
                $('#urlSection').addClass('hidden');

                $('#url').val(null);
            } else {
                $('#menuSection').addClass('hidden');
                $('#urlSection').removeClass('hidden');

                $('#menu_id').val('').trigger('change');
            }
        }
    </script>
@endpush