@extends('admin.layouts.app')

@section('page-title')
Menu builder
@endsection

@section('content')

<div class="container-xxl">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center gap-1">
                    <h4 class="card-title flex-grow-1">Menu builder :: <span class="text-primary">{{ $menu->name }}</span></h4>
                    <!-- <a href="{{ route('admin.menu.create') }}" class="btn btn-sm btn-primary">Add item</a> -->
                    <button type="button" class="btn btn-primary btn-sm" onclick="openMenuModal('menuItem')">Add item</button>
                    <a href="{{ route('admin.menu.index') }}" class="btn btn-sm btn-outline-secondary">Back to menu list</a>
                </div>
                <div class="card-body" id="">
                    <div id="menu-items" class="nested-sortable">
                        @foreach($menuItems as $item)
                        <x-admin.menu-item :item="$item" :level="1" />
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="menuModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addeditMenuLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="menuForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addeditMenuLabel">Add/Edit Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="parent_id" class="form-label">Parent menu</label>
                        <select name="parent_id" id="parent_id" class="form-select">
                            <option value=""></option>
                            @foreach($menuHierarchy as $itemmh)
                            <option value="{{ $itemmh['id'] }}" {{ isset($menuItem) && $menuItem->parent_id == $itemmh['id'] ? 'selected' : '' }}>
                                {{ $itemmh['title'] }}
                            </option>
                            @endforeach
                        </select>

                    </div>

                    @foreach (config('translatable.locales') as $locale)
                    <div class="col-lg-12">
                        <div class="mb-3">
                            <label for="title_{{ $locale }}" class="form-label"><strong class="text-primary">{{ Str::upper($locale) }}</strong> - Item title</label>
                            <input type="text" id="title_{{ $locale }}" name="{{ $locale }}[title]" class="form-control" placeholder="Item title"
                                value="{{ isset($menuitem) ? $menuitem->translate($locale)->title : old($locale.'.title') }}">
                        </div>
                    </div>
                    @endforeach

                    <div class="mb-3">
                        <label for="link_type" class="form-label">Link type</label>
                        <!--<select class="form-select" id="link_type" name="link_type">
                            <option value="static_url" {{ isset($item) && $item->link_type == 'static_url' ? 'selected' : '' }}>Static URL</option>
                            <option value="dynamic_url" {{ isset($item) && $item->link_type == 'dynamic_url' ? 'selected' : '' }}>Internal link</option>
                        </select> -->
                        <select class="form-select" name="type" id="link-type">
                            <option value="">-- Sélectionner un type --</option>
                            <option value="page" {{ isset($item) && $item->type == 'page' ? 'selected' : '' }}>Page</option>
                            <option value="category" {{ isset($item) && $item->type == 'category' ? 'selected' : '' }}>Category</option>
                            <option value="product" {{ isset($item) && $item->type == 'product' ? 'selected' : '' }}>Product</option>
                            <option value="route" {{ isset($item) && $item->type == 'route' ? 'selected' : '' }}>Route Laravel</option>
                            <option value="external" {{ isset($item) && $item->type == 'external' ? 'selected' : '' }}>External link</option>
                        </select>

                    </div>

                    {{-- Page --}}
                    <div class="mb-3 type-specific" id="page-select" style="display: none;">
                        <label for="page_id" class="form-label">Page</label>
                        <select class="form-select" name="page_id">
                            @foreach($pages as $page)
                            <option value="{{ $page->id }}">{{ Str::words($page->title, 7) }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Category --}}
                    <div class="mb-3 type-specific" id="category-select" style="display: none;">
                        <label for="category_id" class="form-label">Category</label>
                        <select class="form-select" name="category_id">
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ Str::words($category->name, 7) }}</option>
                            @endforeach
                        </select>
                    </div>                    

                    {{-- Product --}}
                    <div class="mb-3 type-specific" id="product-select" style="display: none;">
                        <label for="product_id" class="form-label">Produit</label>
                        <select class="form-select" name="product_id">
                            @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ Str::words($product->name, 7) }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Route --}}
                    <div class="mb-3 type-specific" id="route-select" style="display: none;">
                        <label for="route_name" class="form-label">Route Laravel</label>
                        <select class="form-select" name="route_name">
                            @foreach($routes as $route)
                            <option value="{{ $route }}">{{ $route }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- External --}}
                    <div class="mb-3 type-specific" id="external-select" style="display: none;">
                        <label for="url" class="form-label">URL externe</label>
                        <input type="url" name="url" class="form-control" placeholder="https://...">
                    </div>



                    <!-- <div class="mb-3 url-input">
                        <label for="url" class="form-label">URL</label>
                        <input type="text" class="form-control" id="url" name="url">
                    </div>
                    <div class="mb-3 route-input">
                        <label for="internal_url" class="form-label">Link destination</label>
                        <select class="form-select" id="internal_url" name="route_name">
                            <option value="">-- Select an option --</option>

                            {{-- Pages --}}
                            <optgroup label="Pages">
                                @foreach($pages as $page)
                                <option value="{{ route('page.show', $page->slug) }}">{{ Str::words($page->title, 7) }}</option>
                                @endforeach
                            </optgroup>
                            {{-- Products --}}
                            <optgroup label="Products">
                                @foreach($products as $product)
                                <option value="{{ route('admin.product.show', $product->slug) }}">{{ Str::words($product->name, 7) }}</option>
                                @endforeach
                            </optgroup>
                            {{-- Routes --}}
                            <optgroup label="Routes">
                                @foreach($routes as $route)
                                <option value="{{ $route }}">{{ $route }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div> -->
                    <div class="mb-3">
                        <label for="open_link_in" class="form-label">Open link in</label>
                        <select class="form-select" id="open_link_in" name="open_link_in">
                            <option value="_self" {{ isset($item) && $item->open_link_in == '_self' ? 'selected' : '' }}>Same tab/window</option>
                            <option value="_blank" {{ isset($item) && $item->open_link_in == '_blank' ? 'selected' : '' }}>New tab/window</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                            <label class="form-check-label" for="is_active">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="menu_id" name="menu_id" value="{{ $menu->id }}" />
                    <input type="hidden" id="id" name="id" value="" />
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>


@endsection

@section('scripts')
<script>
    // Define routes for use in menu-modal.js
    var routes = {
        menuEdit: "{{ route('admin.menu.edit', ':id') }}",
        menuUpdate: "{{ route('admin.menu.update', ':id') }}",
        menuStore: "{{ route('admin.menu.store') }}",
        menuItemEdit: "{{ route('admin.menuitem.edit', ':id') }}",
        menuItemUpdate: "{{ route('admin.menuitem.update', ':id') }}",
        menuItemStore: "{{ route('admin.menuitem.store') }}",
        menuItemUpdateOrder: "{{ route('admin.menuitem.updateOrder', $menu->id) }}"
    };
</script>
<script src="{{ asset('admin/assets/vendor/sortable/Sortable.js') }}" type="text/javascript"></script>
<script src="{{ asset('admin/assets/vendor/sortable/jquery-sortable.js') }}" type="text/javascript"></script>

<script src="{{ asset('admin/assets/js/pages/menu.js') }}" type="text/javascript"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const typeSelect = document.getElementById('link-type');
        const blocks = document.querySelectorAll('.type-specific');

        function toggleBlocks() {
            blocks.forEach(b => b.style.display = 'none');
            const selected = typeSelect.value;
            const toShow = document.getElementById(`${selected}-select`);
            if (toShow) toShow.style.display = 'block';
        }

        typeSelect.addEventListener('change', toggleBlocks);
        toggleBlocks(); // au chargement
    });
</script>

@endsection