@extends('layouts.cmsapp')

@section('cms_content')

    <div class="main-content">

        <div class="row">
            <div class="col-lg-8">
                <h1 class="page-title">Add Submenu</h1>

                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{ route('home') }}">
                            <i class="fa fa-home"></i> Home
                        </a>
                    </li>
                    <li class="active"><strong>Add Submenu</strong></li>
                </ol>
            </div>

            <div class="col-lg-4">
                <a href="{{ route('submenu.index') }}" class="btn btn-success pull-right">
                    View Submenus
                </a>
            </div>
        </div>

        <div class="line-dashed"></div>

        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <form method="POST" action="{{ route('submenu.store') }}" class="form-horizontal">
                            @csrf

                            {{-- Parent Menu --}}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Parent Menu</label>
                                <div class="col-sm-6">
                                    <select name="menu_id" class="form-control" id="menu_id" required>
                                        <option value="">Select Menu</option>
                                        @foreach ($menus as $menu)
                                            <option value="{{ $menu->id }}">
                                                {{ $menu->menu_title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Parent Submenu</label>
                                <div class="col-sm-6">
                                    <select name="parent_id" class="form-control" id="parent_id">
                                        <option value="">None (Primary Submenu)</option>
                                        @foreach ($parentSubmenus as $parentSubmenu)
                                            <option value="{{ $parentSubmenu->id }}"
                                                data-menu-id="{{ $parentSubmenu->menu_id }}">
                                                {{ $parentSubmenu->submenu_title }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Choose parent submenu for secondary level (max 2 levels).</small>
                                </div>
                            </div>

                            {{-- Submenu Title --}}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Submenu Title</label>
                                <div class="col-sm-6">
                                    <input type="text" name="submenu_title" class="form-control" required>
                                </div>
                            </div>

                            {{-- Slug --}}
                            {{-- <div class="form-group">
                                <label class="col-sm-2 control-label">Slug</label>
                                <div class="col-sm-6">
                                    <input type="text" name="slug" class="form-control" placeholder="example-page-slug"
                                        required>
                                </div>
                            </div> --}}
                            {{-- Target Type --}}
                            {{-- <div class="form-group">
                                <label class="col-sm-2 control-label">Link Type</label>
                                <div class="col-sm-4">
                                    <select name="target_type" class="form-control" required>
                                        <option value="page">CMS Page</option>
                                        <option value="route">Laravel Route</option>
                                        <option value="external">External URL</option>
                                    </select>
                                </div>
                            </div> --}}

                            {{-- Route --}}
                            {{-- <div class="form-group">
                                <label class="col-sm-2 control-label">Route</label>
                                <div class="col-sm-6">
                                    <input type="text" name="route" class="form-control" placeholder="pages.view" value="">
                                </div>
                            </div> --}}
                            {{-- Open in New Tab --}}
                            {{-- <div class="form-group">
                                <label class="col-sm-2 control-label">Open in New Tab</label>
                                <div class="col-sm-6">
                                    <label>
                                        <input type="checkbox" name="open_in_new_tab" value="1">
                                        Yes
                                    </label>
                                </div>
                            </div> --}}

                            {{-- Priority --}}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Priority</label>
                                <div class="col-sm-2">
                                    <input type="number" name="priority" class="form-control" required>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">
                                        Save Submenu
                                    </button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        (function() {
            const menuSelect = document.getElementById('menu_id');
            const parentSelect = document.getElementById('parent_id');

            function filterParentOptions() {
                const selectedMenuId = menuSelect.value;
                Array.from(parentSelect.options).forEach((option, index) => {
                    if (index === 0) {
                        option.hidden = false;
                        return;
                    }
                    option.hidden = option.dataset.menuId !== selectedMenuId;
                });
                if (parentSelect.selectedOptions.length && parentSelect.selectedOptions[0].hidden) {
                    parentSelect.value = '';
                }
            }

            menuSelect.addEventListener('change', filterParentOptions);
            filterParentOptions();
        })();
    </script>

@endsection