@extends('admin.settings.sidebar')
@section('title', __('personalization.menu_links.title'))
@section('scripts')
    <script>
        document.querySelector('select[name="link_type"]').addEventListener('change', function() {
            const value = this.value;
            if (value == 'dropdown') {
                document.querySelector('input[name="url"]').value = '#';
            }
        });
    </script>
@endsection
@section('setting')
    <div class="card">
        <div class="card-heading">
            <div>
                <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">

                    {{ __('personalization.menu_links.title') }}
                </h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {{ __('personalization.menu_links.description') }}
                </p>
            </div>
        </div>
        <form action="{{ route($routePath . '.update', ['menulink' => $item]) }}" method="POST">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                @csrf
                @method('PUT')

                <div>
                    @include('admin/shared/select', ['name' => 'link_type', 'label' => __($translatePrefix .'.link_type'), 'options' => $linkTypes, 'value' => old('link_type', $item->link_type)])
                </div>
                <div>
                    @include('admin/shared/input', ['name' => 'name', 'label' => __('global.name'), 'value' => old('name', $item->name), 'translatable' => true])
                </div>
                <div>
                    @include('admin/shared/input', ['name' => 'url', 'label' => __('global.url'), 'value' => old('url', $item->url), 'translatable' => true])
                </div>
                <div>
                    @include('admin/shared/input', ['name' => 'icon', 'label' => __('personalization.icon'), 'value' => old('icon', $item->icon)])
                </div>
                <div>
                    @include('admin/shared/input', ['name' => 'badge', 'label' => __('personalization.badge'), 'value' => old('badge', $item->badge), 'translatable' => true])
                </div>
                @if($supportDropDropdown)
                <div>
                    @include('admin/shared/select', ['name' => 'parent_id', 'label' => __($translatePrefix . '.parent'), 'options' => $menus, 'value' => old('parent_id', $item->parent_id ?? 'none')])
                </div>
                @endif
                <div>
                    @include('admin/shared/select', ['name' => 'allowed_role', 'label' => __($translatePrefix . '.allowed_role'), 'options' => $roles, 'value' => old('allowed_role', $item->allowed_role)])
                </div>
                @if ($item->parent_id)
                <div>
                    @include('admin/shared/input', ['name' => 'description', 'label' => __('global.description'), 'value' => old('description', $item->description), 'translatable' => true])
                </div>
                @endif
            </div>

            @if (staff_has_permission('admin.manage_metadata'))
                <button class="btn btn-secondary text-left mt-2" type="button" data-hs-overlay="#metadata-overlay">
                    <i class="bi bi-database mr-2"></i>
                    {{ __('admin.metadata.title') }}
                </button>
            @endif
            <button type="submit" class="btn btn-primary mt-2">{{ __('global.save') }}</button>
        </form>
        </div>
    </div>
    @include('admin/translations/overlay', ['item' => $item])
    @include('admin/metadata/overlay', ['item' => $item])

@endsection