@extends('layouts.admin')
@section('title', 'Menu de Navegacion')

@section('content')
@php
    $iconOptions = [
        'bi-house' => 'Inicio',
        'bi-layers' => 'Niveles',
        'bi-newspaper' => 'Noticias',
        'bi-calendar-event' => 'Eventos',
        'bi-people' => 'Docentes',
        'bi-images' => 'Galeria',
        'bi-play-btn' => 'Videos',
        'bi-file-earmark-text' => 'Documentos',
        'bi-envelope' => 'Contacto',
        'bi-pencil-square' => 'Admisiones',
        'bi-info-circle' => 'Informacion',
        'bi-mortarboard' => 'Colegio',
        'bi-star' => 'Destacado',
        'bi-globe2' => 'Web',
        'bi-question-circle' => 'Otro',
    ];
@endphp
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h5 class="fw-bold mb-1">Menu de Navegacion</h5>
        <p class="text-muted small mb-0">Arrastra paneles para reordenar menus. Arrastra submenus para reordenarlos o moverlos entre menus.</p>
    </div>
    <div class="d-flex gap-2">
        <form action="{{ route('nav-items.reset') }}" method="POST" data-confirm="Esto eliminara todos los enlaces y los restaurara al valor por defecto. Deseas continuar?">
            @csrf
            <button type="submit" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-repeat me-1"></i> Restaurar por defecto
            </button>
        </form>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#navModal" onclick="openCreate()">
            <i class="bi bi-plus-lg me-1"></i> Nuevo Enlace
        </button>
    </div>
</div>

<div class="card table-card">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="fw-bold mb-0"><i class="bi bi-menu-button-wide me-2 text-primary"></i>Estructura del Menu</h6>
    </div>
    <div class="card-body p-3">
        <div id="navPanels">
            @foreach($items as $item)
                @include('nav-items.panel', ['item' => $item])
            @endforeach
        </div>
        @if($items->isEmpty())
            <div class="text-center text-muted py-5">
                <i class="bi bi-inbox display-4 d-block mb-2"></i>
                <p class="mb-0">No hay enlaces. Crea el primero.</p>
            </div>
        @endif
    </div>
</div>

<div class="modal fade" id="navModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('nav-items.store') }}" id="navForm">
                @csrf
                <div class="modal-header">
                    <h6 class="fw-bold mb-0" id="navModalTitle">Nuevo Enlace</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Texto del enlace</label>
                        <input type="text" name="label" id="navLabel" class="form-control" required placeholder="Ej. Matricula">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">URL o Ruta</label>
                        <input type="text" name="url" id="navUrl" class="form-control" list="urlSuggestions" placeholder="Ej. #niveles, admissions o contacto">
                        <datalist id="urlSuggestions">
                            <option value="home">
                            <option value="#niveles">
                            <option value="#noticias">
                            <option value="#eventos">
                            <option value="documentos">
                            <option value="contacto">
                            <option value="admisiones">
                        </datalist>
                        <small class="text-muted">Ancla (#), ruta de la web o URL externa (https://...)</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Enlace padre (opcional)</label>
                        <select name="parent_id" id="navParent" class="form-select">
                            <option value="">Menu principal</option>
                            @foreach($parents as $parent)
                                <option value="{{ $parent->id }}">{{ $parent->label }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">Si eliges un padre, este enlace aparecera como sub menu.</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Icono</label>
                            <select name="icon" id="navIcon" class="form-select">
                                <option value="">Sin icono</option>
                                @foreach($iconOptions as $val => $label)
                                    <option value="{{ $val }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Estilo</label>
                            <select name="type" id="navType" class="form-select" onchange="toggleColorField()">
                                <option value="link">Enlace normal</option>
                                <option value="button">Boton destacado</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3" id="colorField" style="display:none;">
                        <label class="form-label">Color del boton</label>
                        <input type="color" name="color" id="navColor" class="form-control form-control-color" style="width:60px;height:38px;padding:2px;" value="#2563eb" title="Color del boton">
                        <small class="text-muted ms-2">Solo aplica si el estilo es "Boton destacado"</small>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="navActive" name="active" value="1" checked style="cursor:pointer;">
                        <label class="form-check-label" for="navActive">Visible</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/sortable.min.js') }}"></script>
<script>
(function () {

    var navModal;

    function serializePanels() {
        var result = [];
        var container = document.getElementById('navPanels');
        if (!container) return result;
        var items = container.children;
        for (var i = 0; i < items.length; i++) {
            var el = items[i];
            if (el.classList.contains('nav-panel')) {
                var id = el.getAttribute('data-id');
                result.push({ id: id, parent_id: null });
                var childrenUl = el.querySelector('.children-sortable');
                if (childrenUl) {
                    var childItems = childrenUl.querySelectorAll('.nav-child-item');
                    for (var j = 0; j < childItems.length; j++) {
                        result.push({ id: childItems[j].getAttribute('data-id'), parent_id: id });
                    }
                }
            } else if (el.classList.contains('nav-child-item')) {
                result.push({ id: el.getAttribute('data-id'), parent_id: null });
            }
        }
        return result;
    }

    window.saveOrder = function () {
        var order = serializePanels();
        var tokenEl = document.querySelector('meta[name="csrf-token"]');
        var token = tokenEl ? tokenEl.getAttribute('content') : '';

        fetch('{{ route('nav-items.reorder') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ order: order })
        })
        .then(function (r) {
            return r.text().then(function (text) {
                var data;
                try { data = JSON.parse(text); } catch (e) { data = { _raw: text.substring(0, 200) }; }
                return { status: r.status, ok: r.ok, data: data };
            });
        })
        .then(function (res) {
            if (res.ok && res.data.success) {
                Swal.fire({ icon: 'success', title: 'Orden actualizado', toast: true, position: 'top-end', timer: 800, showConfirmButton: false });
                setTimeout(function () { location.reload(); }, 400);
            } else {
                var msg = res.data.message || res.data._raw || ('HTTP ' + res.status);
                Swal.fire({ icon: 'error', title: 'Error guardar (' + res.status + ')', text: msg });
            }
        })
        .catch(function (e) {
            Swal.fire({ icon: 'error', title: 'Error conexion', text: e.message || 'Error de red' });
        });
    };

    function toggleColorField() {
        var type = document.getElementById('navType').value;
        document.getElementById('colorField').style.display = (type === 'button') ? '' : 'none';
    }

    window.openCreate = function () {
        var f = document.getElementById('navForm');
        f.setAttribute('action', '{{ route('nav-items.store') }}');
        var m = f.querySelector('input[name="_method"]');
        if (m) m.remove();
        document.getElementById('navModalTitle').textContent = 'Nuevo Enlace';
        document.getElementById('navLabel').value = '';
        document.getElementById('navUrl').value = '';
        document.getElementById('navIcon').value = '';
        document.getElementById('navType').value = 'link';
        document.getElementById('navColor').value = '#2563eb';
        document.getElementById('navActive').checked = true;
        var ps = document.getElementById('navParent');
        if (ps) { ps.value = ''; setParentOptions(null, ps); }
        toggleColorField();
    };

    window.openEdit = function (item) {
        var f = document.getElementById('navForm');
        f.setAttribute('action', '{{ url('nav-items') }}/' + item.id);
        var m = f.querySelector('input[name="_method"]');
        if (!m) { m = document.createElement('input'); m.type = 'hidden'; m.name = '_method'; f.appendChild(m); }
        m.value = 'PUT';
        document.getElementById('navModalTitle').textContent = 'Editar Enlace';
        document.getElementById('navLabel').value = item.label;
        document.getElementById('navUrl').value = item.url === '#' ? '' : (item.url || '');
        document.getElementById('navIcon').value = item.icon || '';
        document.getElementById('navType').value = item.type;
        document.getElementById('navColor').value = item.color || '#2563eb';
        document.getElementById('navActive').checked = item.active;
        var ps = document.getElementById('navParent');
        if (ps) { setParentOptions(item.id, ps); ps.value = item.parent_id || ''; }
        toggleColorField();
        navModal.show();
    };

    function setParentOptions(excludeId, sel) {
        Array.prototype.forEach.call(sel.options, function (opt) {
            if (!opt.value) return;
            opt.disabled = opt.value == excludeId;
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        navModal = new bootstrap.Modal(document.getElementById('navModal'));

        if (typeof Sortable === 'undefined') {
            Swal.fire({ icon: 'error', title: 'Error', text: 'SortableJS no disponible. Recarga la pagina.' });
            return;
        }

        var panelsEl = document.getElementById('navPanels');
        if (panelsEl) {
            new Sortable(panelsEl, {
                handle: '.drag-handle',
                animation: 150,
                onEnd: window.saveOrder
            });
        }

        document.querySelectorAll('.children-sortable').forEach(function (el) {
            new Sortable(el, {
                group: 'nav-children',
                handle: '.drag-handle-child',
                animation: 150,
                onEnd: window.saveOrder
            });
        });

        document.querySelectorAll('.toggle-active').forEach(function (toggle) {
            toggle.addEventListener('change', function () {
                var id = this.getAttribute('data-id');
                fetch('{{ url('nav-items') }}/' + id + '/toggle', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                }).then(function (r) { return r.json(); })
                  .then(function (res) {
                      if (!res.success) { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo actualizar' }); }
                  });
            });
        });
    });

})();
</script>
@endpush

@push('styles')
<style>
    .nav-panel {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 0.5rem;
        transition: box-shadow 0.2s;
    }
    .nav-panel:hover { box-shadow: 0 2px 8px rgba(15,23,42,0.06); }
    .nav-panel .panel-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 1rem;
        border-radius: 12px;
        transition: background 0.15s;
    }
    .nav-panel .panel-header:hover { background: #f8fafc; }
    .nav-panel .panel-icon {
        width: 42px; height: 42px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.25rem;
    }
    .nav-panel .panel-info { flex: 1; min-width: 0; }
    .nav-panel .panel-label { font-weight: 600; font-size: 0.9rem; color: #1e293b; }
    .nav-panel .panel-url { font-size: 0.75rem; color: #94a3b8; }
    .nav-panel .panel-actions { display: flex; align-items: center; gap: 0.5rem; }
    .nav-panel .children-body {
        border-top: 1px solid #f1f5f9;
    }
    .nav-panel .children-sortable { list-style: none; padding: 0.25rem 0; margin: 0; }
    .nav-child-item {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.55rem 1rem 0.55rem 2.5rem;
        border-bottom: 1px solid #f8fafc;
        transition: background 0.1s;
        font-size: 0.85rem;
    }
    .nav-child-item:last-child { border-bottom: none; }
    .nav-child-item:hover { background: #f8fafc; }
    .nav-child-item .child-icon {
        width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem;
    }

    .children-sortable.empty-list {
        min-height: 2.5rem;
        display: flex; align-items: center; justify-content: center;
    }
    .children-sortable.empty-list::after {
        content: 'Suelta enlaces aqui';
        color: #cbd5e1;
        font-size: 0.75rem;
        font-style: italic;
    }

    .drag-handle {
        cursor: grab;
        color: #cbd5e1;
        font-size: 1.1rem;
        padding: 0 0.15rem;
        transition: color 0.15s;
    }
    .drag-handle:hover { color: #64748b; }
    .drag-handle-child {
        cursor: grab;
        color: #cbd5e1;
        font-size: 0.95rem;
        padding: 0 0.1rem;
        transition: color 0.15s;
    }
    .drag-handle-child:hover { color: #64748b; }

    .badge-sub { background: #ede9fe; color: #7c3aed; font-size: 0.68rem; font-weight: 500; padding: 0.15em 0.5em; border-radius: 4px; }
    .badge-btn-style { background: #fef3c7; color: #92400e; font-size: 0.68rem; font-weight: 500; padding: 0.15em 0.5em; border-radius: 4px; }
    .badge-children { background: #dbeafe; color: #1d4ed8; font-size: 0.68rem; font-weight: 500; padding: 0.15em 0.5em; border-radius: 4px; }
</style>
@endpush