@extends('admin.layouts.app')

@push('css')
<style>
.menu-tree {
    list-style: none;
    padding-left: 0;
}

.menu-tree ul {
    list-style: none;
    padding-left: 30px;
}

.menu-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    position: relative;
}

.menu-item.child-item {
    background: #f8f9fa;
    border-left: 3px solid #007bff;
}

.menu-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-item-info {
    flex: 1;
}

.menu-item-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.menu-item-details {
    font-size: 0.875rem;
    color: #6c757d;
}

.menu-item-badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

.drag-handle {
    cursor: move;
    color: #6c757d;
    margin-right: 1rem;
}

.location-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
}

.location-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
}

.location-tabs .nav-link.active {
    color: #007bff;
    border-bottom-color: #007bff;
    background: none;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Gestión de Menús</h4>
            <div class="page-title-right">
                <button type="button" class="btn btn-success" id="sync-categories">
                <i class="ri-refresh-line"></i> Sincronizar Categorías
                </button>
                <a href="{{ route('admin.menu-items.create') }}" class="btn btn-primary">
                <i class="ri-add-line"></i> Nuevo Elemento
                </a>
            </div>
        </div>
    </div>
</div>
        @include('admin.message')
        
        <!-- Tabs de ubicación -->
        <ul class="nav nav-tabs location-tabs" role="tablist">
            @foreach($locations as $key => $label)
            <li class="nav-item">
                <a class="nav-link {{ $location == $key ? 'active' : '' }}" 
                   href="{{ route('admin.menu-items.index', ['location' => $key]) }}">
                    @if($key == 'main')
                        <i class="ri-menu-line"></i>
                    @elseif($key == 'footer')
                        <i class="ri-footprint-line"></i>
                    @elseif($key == 'mobile')
                        <i class="ri-smartphone-line"></i>
                    @else
                        <i class="ri-layout-column-line"></i>
                    @endif
                    {{ $label }}
                </a>
            </li>
            @endforeach
        </ul>
        
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    Elementos del {{ $locations[$location] ?? 'Menú' }}
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-sm btn-info" id="save-order" style="display:none;">
                        <i class="ri-save-line"></i> Guardar Orden
                    </button>
                </div>
            </div>
            
            <div class="card-body">
                @if($menuItems->isNotEmpty())
                    <ul class="menu-tree" id="menu-list">
                        @foreach($menuItems as $item)
                            @include('admin.menu-items.partials.menu-item', ['item' => $item])
                        @endforeach
                    </ul>
                @else
                    <div class="empty-state">
                        <i class="ri-menu-line"></i>
                        <h4>No hay elementos en este menú</h4>
                        <p class="text-muted">Comienza agregando elementos al {{ $locations[$location] ?? 'menú' }}</p>
                        <a href="{{ route('admin.menu-items.create') }}" class="btn btn-primary mt-3">
                            <i class="ri-add-line"></i> Agregar Primer Elemento
                        </a>
                    </div>
                @endif
            </div>
            
            @if($menuItems->hasPages())
                <div class="card-footer">
                    {{ $menuItems->withQueryString()->links() }}
                </div>
            @endif
        </div>
        
        <!-- Información de ayuda -->
        <div class="card mt-3">
            <div class="card-body">
                <h5><i class="ri-information-line"></i> Información sobre los tipos de menú</h5>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <h6>Tipos de elementos:</h6>
                        <ul class="small">
                            <li><strong>Link:</strong> Enlace simple a una URL</li>
                            <li><strong>Página:</strong> Enlace a una página del CMS</li>
                            <li><strong>Categoría:</strong> Enlace a una categoría de productos</li>
                            <li><strong>Externo:</strong> Enlace a un sitio externo</li>
                            <li><strong>Dropdown:</strong> Menú desplegable con subelementos</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Características:</h6>
                        <ul class="small">
                            <li>Arrastra y suelta para reordenar (próximamente)</li>
                            <li>Soporta menús multinivel</li>
                            <li>Badges personalizables (Nuevo, Hot, etc.)</li>
                            <li>Iconos Font Awesome</li>
                            <li>Control de visibilidad por elemento</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

@endsection

@section('customJs')
<script>
// Toggle status
function toggleStatus(itemId, button) {
    var $button = $(button);
    var $icon = $button.find('i');
    
    // Deshabilitar el botón temporalmente
    $button.prop('disabled', true);
    
    $.ajax({
        url: "{{ url('admin/menu-items') }}/" + itemId + "/toggle-status",
        type: 'POST',
        data: {
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            if (response.success) {
                // Cambiar el estado visual del botón
                if (response.is_active) {
                    $button.removeClass('btn-danger').addClass('btn-success');
                    $button.attr('title', 'Desactivar elemento');
                    $icon.removeClass('fa-eye-slash').addClass('fa-eye');
                    
                    // Remover badge de inactivo si existe
                    $button.closest('.menu-item').find('.bg-secondary:contains("Inactivo")').remove();
                } else {
                    $button.removeClass('btn-success').addClass('btn-danger');
                    $button.attr('title', 'Activar elemento');
                    $icon.removeClass('fa-eye').addClass('fa-eye-slash');
                    
                    // Agregar badge de inactivo
                    var $nameDiv = $button.closest('.menu-item').find('.menu-item-name');
                    if (!$nameDiv.find('.bg-secondary:contains("Inactivo")').length) {
                        $nameDiv.append(' <span class="badge bg-secondary">Inactivo</span>');
                    }
                }
                
                // Mostrar notificación
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: response.is_active ? 'Elemento activado' : 'Elemento desactivado',
                    showConfirmButton: false,
                    timer: 2000
                });
            }
            
            // Rehabilitar el botón
            $button.prop('disabled', false);
        },
        error: function() {
            // En caso de error, recargar la página
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo cambiar el estado',
                confirmButtonText: 'Recargar página'
            }).then(() => {
                location.reload();
            });
        }
    });
}

// Delete item
function deleteItem(itemId, itemName) {
    Swal.fire({
        title: '¿Eliminar elemento del menú?',
        text: 'Se eliminará: ' + itemName,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            var form = $('<form>', {
                method: 'POST',
                action: "{{ url('admin/menu-items') }}/" + itemId
            });
            
            form.append($('<input>', {
                type: 'hidden',
                name: '_token',
                value: "{{ csrf_token() }}"
            }));
            
            form.append($('<input>', {
                type: 'hidden',
                name: '_method',
                value: 'DELETE'
            }));
            
            $('body').append(form);
            form.submit();
        }
    });
}

// Sync categories
$('#sync-categories').click(function() {
    Swal.fire({
        title: '¿Sincronizar categorías?',
        text: 'Esto actualizará el menú con las categorías actuales de la base de datos',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, sincronizar',
        cancelButtonText: 'Cancelar',
        showLoaderOnConfirm: true,
        preConfirm: () => {
            return $.ajax({
                url: "{{ route('admin.menu-items.sync-categories') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                }
            }).then(response => {
                return response;
            }).catch(error => {
                Swal.showValidationMessage(
                    `Error: ${error.responseJSON?.message || 'Error al sincronizar'}`
                );
            });
        },
        allowOutsideClick: () => !Swal.isLoading()
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                icon: 'success',
                title: '¡Sincronización exitosa!',
                text: result.value.message || 'Las categorías se han sincronizado correctamente',
                confirmButtonText: 'OK'
            }).then(() => {
                location.reload();
            });
        }
    });
});

// TODO: Implementar drag & drop para reordenar
// $(document).ready(function() {
//     // Sortable implementation aquí
// });
</script>
@endsection