@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Menus</h3>
                </div>
                <blockquote class="me-3 mx-3">
                    <p><b>Funcionamiento: </b>Arrastra desde las tres lineas horizontales el orden en el que se va a ver el menu y si se desea cambiar algun submenu de orden o de menu padre, arrastrandolo hasta la posicion deseada.</p>
                    <div class="form-group col-12 col-md-12 mb-2">
                        <label>
                            <i class="bx bx-font-size"></i> Tamaño de Fuente (px) (opcional)
                        </label>
                        <form id="form-menu">
                            <div class="input-group">
                                <input value="{{ $menu_tamano_fuente ?? "" }}" name="configuracion[seo][menu_tamano_fuente]" type="number" class="form-control" id="tamano_fuente" placeholder="Ej: 16">
                                <button type="button" data-form="form-menu" class="btn btn-primary guardar-configuracion">
                                    <i class="bx bx-check"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </blockquote>
                <div class="card-body">
                    <div id="menu-editor-container" class="p-0">
                        <ul id="treeview" class="sortable-list p-0">
                            @foreach ($arbolMenu as $menu)
                                <li data-id="{{ $menu['id'] }}">
                                    <div class="menu-item-content d-flex align-items-center p-2 border rounded mb-1 bg-light">
                                        <span class="drag-handle mr-2" style="cursor: move;">
                                            <i class="bx bx-menu"></i>
                                        </span>
                                        <label class="m-0 flex-grow-1">
                                            <a href="{{ url('backoffice/menus/gestionar/'.$menu['id']) }}" class="text-dark {{ isset($entidad['id']) && $entidad['id'] == $menu['id'] ? 'font-weight-bold' : '' }}">
                                                {{ $menu['nombre'] }}
                                            </a>
                                        </label>
                                    </div>
                                    @if(!empty($menu['sub_menu']))
                                        <ul class="sortable-list ml-4">
                                            @foreach ($menu['sub_menu'] as $subcat)
                                                <li data-id="{{ $subcat['id'] }}">
                                                    <div class="menu-item-content d-flex align-items-center p-2 border rounded mb-1 bg-white">
                                                        <span class="drag-handle mr-2" style="cursor: move;">
                                                            <i class="bx bx-menu"></i>
                                                        </span>
                                                        <label class="m-0 flex-grow-1">
                                                            <a href="{{ url('backoffice/menus/gestionar/'.$subcat['id']) }}" class="text-dark {{ isset($entidad['id']) && $entidad['id'] == $subcat['id'] ? 'font-weight-bold' : '' }}">
                                                                {{ $subcat['nombre'] }}
                                                            </a>
                                                        </label>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                        <button id="saveMenuOrderBtn" class="btn btn-primary btn-sm btn-flat mt-3">
                            <i class="bx bx-save me-1"></i> Guardar Orden
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Gestión Menus</h3>
                </div>
                <div class="card-body">
                    <form id="menu_form">
                        <div class="row">
                            <input type="hidden" value="{{ $entidad['id'] ?? '' }}" name="entity"/>
                            <div class="col-sm-12">
                                <div class="form-group mb-2">
                                    <label><i class="bx bx-edit"></i> Nombre</label>
                                    <input value="{{ $entidad['nombre'] ?? '' }}" name="nombre" type="text" class="form-control system_validador_vacio" id="nombre">
                                </div>
                            </div>
                            <div class="form-group col-12 col-md-12 mb-2">
                                <label><i class="bx bx-menu-alt-left"></i> Menu padre</label>
                                <select name="menu_padre" id="menu_padre" class="form-select">
                                    <option value="">Menu Principal</option>
                                    @foreach ($arbolMenu as $menu)
                                        @if(!empty($entidad['id']))
                                            @if($entidad['id'] != $menu['id'])
                                                <option value="{{ $menu['id'] }}">{{ $menu['nombre'] }}</option>
                                            @endif
                                        @else
                                            <option value="{{ $menu['id'] }}">{{ $menu['nombre'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-2">
                                <label><i class="bx bx-link"></i> Tipo de enlace</label>
                                <select name="tipo_enlace" id="tipo_enlace" class="form-select system_validador_vacio">
                                    <option value="">Seleccione...</option>
                                    <option value="categoria">Categoria</option>
                                    <option value="cms">Cms</option>
                                    <option value="landing_page">Landing page</option>
                                    <option value="libre">Libre</option>
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-2">
                                <div id="div_tipo_enlace_categoria" class="div_tipo_enlace_opciones" style="display: none;">
                                    <label><i class="bx bx-category"></i> Categoría</label>
                                    <select name="tipo_enlace_categoria" id="tipo_enlace_categoria" class="form-select">
                                        <option value="">Seleccione...</option>
                                        @foreach ($arbolCat as $menu)
                                            <option value="{{ $menu['id_categoria'] }}">{{ $menu['nombre'] }}</option>
                                            @if(!empty($menu['sub_cat']))
                                                @foreach ($menu['sub_cat'] as $subcat)
                                                    <option value="{{ $subcat['id_categoria'] }}">{{ $menu['nombre'] . " / " . $subcat['nombre'] }}</option>
                                                @endforeach
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div id="div_tipo_enlace_cms" class="div_tipo_enlace_opciones" style="display: none;">
                                    <label><i class="bx bx-cms"></i> Cms</label>
                                    <select name="tipo_enlace_cms" id="tipo_enlace_cms" class="form-select">
                                        <option value="">Seleccione...</option>
                                        @foreach ($listadoCms as $cms)
                                            <option value="{{ $cms['id_cms'] }}">{{ $cms['titulo'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="div_tipo_enlace_landing_page" class="div_tipo_enlace_opciones" style="display: none;">
                                    <label><i class="bx bx-purchase-tag-alt"></i> Landing Page</label>
                                    <select name="tipo_enlace_landing_page" id="tipo_enlace_landing_page" class="form-select">
                                        <option value="">Seleccione...</option>
                                        @foreach ($listadoLanding as $landing)
                                            <option value="{{ $landing['id'] }}">{{ $landing['titulo'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-2">
                                <label><i class="bx bx-window"></i> Abrir en</label>
                                <select name="abrir_en" id="abrir_en" class="form-select system_validador_vacio">
                                    <option value="misma_pagina">La misma pagina</option>
                                    <option value="nueva_pagina">Nueva pagina</option>
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6 mb-2">
                                <label><i class="bx bx-toggle-on"></i> Estado</label>
                                <select name="estado" id="estado" class="form-select system_validador_vacio">
                                    <option value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                </select>
                            </div>
                            <div class="col-sm-12 div_tipo_enlace_opciones" id="url_div" style="display: none;">
                                <div class="form-group mb-2">
                                    <label><i class="bx bx-link-alt"></i> URL</label>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox" id="usar_dominio">
                                        <label class="form-check-label" for="usar_dominio">
                                            Usar dominio dinámico (Si necesitas ir hacia un lugar de tu pagina, esto te permitira que no tengas que poner https...)
                                        </label>
                                    </div>
                                    <input value="{{ $entidad['url'] ?? '' }}" name="url" id="url" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer d-flex">
                    <div>
                        @if (isset($entidad['id']))
                            <button type="button" id="btn_actualizar" class="btn btn-primary btn-sm btn-flat">
                                <i class="bx bx-refresh me-1"></i> Actualizar
                            </button>
                            <a href="{{ url('backoffice/menus/gestionar/') }}">
                                <button type="button" class="btn btn-secondary btn-sm btn-flat me-1">
                                    <i class="bx bx-arrow-back me-1"></i> Volver
                                </button>
                            </a>
                        @else
                            <button type="button" id="btn_guardar_menu" class="btn btn-primary btn-sm btn-flat">
                                <i class="bx bx-save me-1"></i> Guardar
                            </button>
                        @endif
                    </div>

                    @if (isset($entidad['id']))
                        <div class="ml-auto">
                            <button type="button" data-id="" id="btn_eliminar" class="btn_eliminar btn btn-danger btn-sm btn-flat">
                                <i class="bx bx-trash me-1"></i> Eliminar
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <style>
        .sortable-ghost {
            opacity: 0.6;
            background: #c8ebfb;
        }

        .drag-handle {
            font-size: 1.2em;
            color: #777;
        }

        #menu-editor-container ul.sortable-list {
            list-style-type: none !important;
        }


    </style>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        let id_menu_padre = "{{ $entidad['id_menu_padre'] ?? "" }}";
        let tipo_enlace = "{{ $entidad['tipo_enlace'] ?? "" }}";
        let tipo_enlace_id = "{{ $entidad['tipo_enlace_id'] ?? "" }}";
        let abrir_en = "{{ $entidad['abrir_en'] ?? "" }}";
        let estado = "{{ $entidad['estado'] ?? 1 }}";
        let entidad_id = "{{ $entidad['id'] ?? "" }}";
        let url = "{{ $entidad['url'] ?? "" }}";

        let tamano_fuente = "{{ $entidad['tamano_fuente'] ?? "" }}";
    </script>
@endsection