@extends('admin.layouts.app')
@section('title','Menú de Navegación')
@section('styles')
<style>
:root{--m:#0f4c75;--mg:#1b6ca8;}
.mod-hero{background:linear-gradient(135deg,#0a2e4d,#0f4c75,#1b6ca8);border-radius:20px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px;box-shadow:0 8px 32px rgba(10,46,77,.3);}
.mod-hero h1{font-size:1.3rem;font-weight:800;color:#fff;margin:0;display:flex;align-items:center;gap:10px;}
.mod-hero p{color:rgba(255,255,255,.5);margin:0;font-size:.82rem;}
.hero-pill{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.22);border-radius:50px;padding:7px 18px;color:#fff;font-weight:800;font-size:.9rem;}
.btn-new{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:linear-gradient(135deg,#90caf9,#64b5f6);color:#0a2e4d;border-radius:14px;font-weight:800;font-size:.88rem;text-decoration:none;box-shadow:0 4px 16px rgba(100,181,246,.35);transition:all .2s;}
.btn-new:hover{transform:translateY(-2px);}

/* Card sortable */
.mod-card{background:#fff;border-radius:18px;box-shadow:0 2px 16px rgba(0,0,0,.06);overflow:hidden;}
.mod-card-hd{background:linear-gradient(135deg,#0a2e4d,#1b6ca8);padding:13px 22px;display:flex;align-items:center;gap:10px;}
.mod-card-hd .hd-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.mod-card-hd .hd-ic i{color:#90caf9;font-size:15px;}
.mod-card-hd span{color:#fff;font-weight:800;font-size:.92rem;}
.mod-card-hd small{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:600;margin-left:auto;}

/* Lista drag */
.menu-list{list-style:none;padding:16px;margin:0;display:flex;flex-direction:column;gap:10px;}
.menu-row{display:flex;align-items:center;gap:12px;background:#f8faff;border:1.5px solid #e2e8f0;border-radius:14px;padding:12px 16px;cursor:grab;transition:box-shadow .18s,transform .18s,border-color .18s;user-select:none;}
.menu-row:hover{border-color:#1b6ca8;background:#eff6ff;}
.menu-row:active{cursor:grabbing;}
.menu-row.sortable-chosen{box-shadow:0 8px 32px rgba(27,108,168,.2);transform:scale(1.015);border-color:#1b6ca8;background:#eff6ff;}
.menu-row.sortable-ghost{opacity:.3;}
.drag-handle{color:#94a3b8;font-size:1.2rem;cursor:grab;flex-shrink:0;transition:color .15s;}
.menu-row:hover .drag-handle{color:#1b6ca8;}
.menu-icon-wrap{width:40px;height:40px;border-radius:12px;background:#1b6ca818;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.menu-icon-wrap i{font-size:18px;color:#0f4c75;}
.menu-info{flex:1;min-width:0;}
.menu-label{font-weight:800;color:#1e293b;font-size:.92rem;}
.menu-url{font-size:.78rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.menu-badges{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;align-items:center;}
.mb{padding:3px 10px;border-radius:50px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:4px;}
.mb-self{background:#dcfce7;color:#15803d;}
.mb-blank{background:#fffbeb;color:#b45309;}
.mb-on{background:#dbeafe;color:#1d4ed8;}
.mb-off{background:#f1f5f9;color:#64748b;}
.act-btn{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;text-decoration:none;}
.act-ed{background:#eff6ff;color:#1d4ed8;}
.act-ed:hover{background:#dbeafe;}
.act-del{background:#fef2f2;color:#dc2626;}
.act-del:hover{background:#fee2e2;}

/* Barra guardar orden */
.save-bar{position:sticky;bottom:1.5rem;left:0;right:0;display:none;align-items:center;justify-content:center;z-index:100;margin-top:10px;}
.save-bar.visible{display:flex;}
.save-btn{background:linear-gradient(135deg,#0f4c75,#1b6ca8);color:#fff;border:none;padding:12px 32px;border-radius:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.92rem;box-shadow:0 4px 24px rgba(15,76,117,.4);animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Empty */
.empty-hero{background:#fff;border-radius:18px;box-shadow:0 2px 16px rgba(0,0,0,.06);padding:64px 20px;text-align:center;}
.empty-hero i{font-size:56px;color:#bfdbfe;display:block;margin-bottom:14px;}
</style>
@endsection

@section('content')
<div class="mod-hero">
    <div>
        <h1>
            <div style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;">
                <i class="bi bi-list-ul" style="color:#90caf9;font-size:18px;"></i>
            </div>
            Menú de Navegación
        </h1>
        <p>Arrastra para reordenar · Los cambios son en tiempo real</p>
    </div>
    <div style="display:flex;gap:12px;align-items:center;">
        <div class="hero-pill">{{ $items->count() }} ítems</div>
        <a href="{{ route('admin.menu-items.create') }}" class="btn-new">
            <i class="bi bi-plus-lg"></i> Nuevo Ítem
        </a>
    </div>
</div>

@if($items->isEmpty())
<div class="empty-hero">
    <i class="bi bi-list-ul"></i>
    <strong style="display:block;color:#334155;font-size:1.1rem;margin-bottom:8px;">Sin ítems de menú</strong>
    <p style="color:#94a3b8;margin-bottom:20px;">Agrega tu primer enlace al menú de navegación.</p>
    <a href="{{ route('admin.menu-items.create') }}" class="btn-new" style="display:inline-flex;margin:0 auto;">
        <i class="bi bi-plus-lg"></i> Agregar Ítem
    </a>
</div>
@else
<div class="mod-card">
    <div class="mod-card-hd">
        <div class="hd-ic"><i class="bi bi-grip-vertical"></i></div>
        <span>Ítems del Menú</span>
        <small style="font-size:.75rem;color:rgba(255,255,255,.5);margin-left:auto;"><i class="bi bi-info-circle me-1"></i>Arrastra para reordenar</small>
    </div>
    <ul class="menu-list" id="menuSortable">
        @foreach($items as $item)
        <li class="menu-row" data-id="{{ $item->id }}">
            <span class="drag-handle"><i class="bi bi-grip-vertical"></i></span>

            <div class="menu-icon-wrap">
                @if($item->icono)
                    <i class="{{ $item->icono }}"></i>
                @else
                    <i class="bi bi-link-45deg"></i>
                @endif
            </div>

            <div class="menu-info">
                <div class="menu-label">{{ $item->label }}</div>
                <div class="menu-url"><i class="bi bi-link me-1"></i>{{ $item->url }}</div>
            </div>

            <div class="menu-badges">
                <span class="mb {{ $item->target === '_blank' ? 'mb-blank' : 'mb-self' }}">
                    <i class="bi {{ $item->target === '_blank' ? 'bi-box-arrow-up-right' : 'bi-arrow-right' }}"></i>
                    {{ $item->target === '_blank' ? 'Nueva pestaña' : 'Misma página' }}
                </span>
                <span class="mb {{ $item->activo ? 'mb-on' : 'mb-off' }}">
                    <i class="bi {{ $item->activo ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }}"></i>
                    {{ $item->activo ? 'Activo' : 'Oculto' }}
                </span>
            </div>

            <div style="display:flex;gap:6px;flex-shrink:0;">
                <a href="{{ route('admin.menu-items.edit', $item) }}" class="act-btn act-ed" title="Editar"><i class="bi bi-pencil-fill"></i></a>
                <form action="{{ route('admin.menu-items.destroy', $item) }}" method="POST" class="form-delete" data-item-name="{{ $item->label }}">
                    @csrf @method('DELETE')
                    <button type="submit" class="act-btn act-del" title="Eliminar"><i class="bi bi-trash-fill"></i></button>
                </form>
            </div>
        </li>
        @endforeach
    </ul>
</div>

<div class="save-bar" id="saveBar">
    <button class="save-btn" id="saveOrderBtn">
        <i class="bi bi-save-fill"></i> Guardar nuevo orden
    </button>
</div>
@endif
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function(){
    var list = document.getElementById('menuSortable');
    var bar  = document.getElementById('saveBar');
    var btn  = document.getElementById('saveOrderBtn');
    if (!list) return;

    var sortable = Sortable.create(list, {
        handle: '.drag-handle',
        animation: 200,
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        onSort: function() { bar.classList.add('visible'); }
    });

    btn.addEventListener('click', function(){
        var ids = Array.from(list.querySelectorAll('[data-id]')).map(function(el){
            return parseInt(el.getAttribute('data-id'));
        });
        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Guardando...';

        fetch('{{ route("admin.menu-items.reorder") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ order: ids })
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if (data.ok) {
                bar.classList.remove('visible');
                window.AdminToast && window.AdminToast.fire({ icon: 'success', title: '✅ Orden guardado correctamente.' });
            }
        })
        .catch(function(){
            window.AdminToast && window.AdminToast.fire({ icon: 'error', title: 'Error al guardar el orden.' });
        })
        .finally(function(){
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-save-fill"></i> Guardar nuevo orden';
        });
    });
})();
</script>
@endsection