@extends('layouts.cmsapp')

@section('cms_content')

    <div class="main-content">

        <div class="row">
            <div class="col-lg-8">
                <h1 class="page-title">Edit 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>Edit 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>

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

                        <form method="POST" action="{{ route('submenu.update', $submenu->id) }}" class="form-horizontal">
                            @csrf
                            @method('PUT')

                            {{-- 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>
                                        @foreach ($menus as $menu)
                                            <option value="{{ $menu->id }}" {{ $submenu->menu_id == $menu->id ? 'selected' : '' }}>
                                                {{ $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 }}" {{ (int) $submenu->parent_id === (int) $parentSubmenu->id ? 'selected' : '' }}>
                                                {{ $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"
                                        value="{{ $submenu->submenu_title }}" 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" value="{{ $submenu->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" {{ $submenu->target_type === 'page' ? 'selected' : '' }}>
                                            CMS Page
                                        </option>
                                        <option value="route" {{ $submenu->target_type === 'route' ? 'selected' : '' }}>
                                            Laravel Route
                                        </option>
                                        <option value="external" {{ $submenu->target_type === 'external' ? 'selected' : '' }}>
                                            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" value="{{ $submenu->route }}">
                                </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" {{ $submenu->open_in_new_tab ? 'checked' : '' }}>
                                        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"
                                        value="{{ $submenu->priority }}" required>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">
                                        Update 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