<div class="modal fade" id="menuItemModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="menuItemForm">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('admin/menus.item_modal_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="item_id" value="">
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#mit-general">{{ __('admin/menus.tab_general') }}</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#mit-label">{{ __('admin/menus.tab_label') }}</a></li>
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#mit-mega">{{ __('admin/menus.tab_mega') }}</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="mit-general">
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/menus.fields_link_type') }}</label>
                                <select name="link_type" class="form-select">
                                    <option value="url">URL</option>
                                    <option value="route">Route</option>
                                    <option value="post">Post (Announcement / KB / Blog)</option>
                                    <option value="product_index">Product Index</option>
                                    <option value="product_group">Product Group</option>
                                    <option value="product">Product</option>
                                </select>
                            </div>
                            <div id="linkTargetFields"></div>
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/menus.fields_icon') }}</label>
                                <input type="text" name="icon" class="form-control" placeholder="fas fa-home">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/menus.fields_visible_when') }}</label>
                                <select name="visible_when" class="form-select">
                                    <option value="always">{{ __('admin/menus.visible_when_always') }}</option>
                                    <option value="authenticated">{{ __('admin/menus.visible_when_authenticated') }}</option>
                                    <option value="guest">{{ __('admin/menus.visible_when_guest') }}</option>
                                </select>
                                <div class="form-text small">{{ __('admin/menus.visible_when_help') }}</div>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" name="target_blank" class="form-check-input" id="mit-target-blank" value="1">
                                <label class="form-check-label" for="mit-target-blank">{{ __('admin/menus.fields_target_blank') }}</label>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="mit-label">
                            @foreach($languages as $lang)
                                <div class="mb-3">
                                    <label class="form-label">{{ $lang->native_name }} ({{ $lang->a2_iso }})
                                        @if($lang->a2_iso === config('app.fallback_locale')) <span class="text-danger">*</span>@endif
                                    </label>
                                    <input type="text" name="translations[label][{{ $lang->a2_iso }}]" class="form-control" maxlength="120">
                                </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="mit-mega">
                            <div class="form-check form-switch mb-3">
                                <input type="checkbox" name="is_mega" class="form-check-input" id="mit-is-mega" value="1">
                                <label class="form-check-label" for="mit-is-mega">{{ __('admin/menus.fields_is_mega') }}</label>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/menus.fields_mega_columns') }}</label>
                                <input type="number" name="mega_columns" min="1" max="4" value="1" class="form-control" style="width: 100px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin/common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
