@extends('layouts.yellow')

@section('title', 'Categorías de Inventario')

@section('content')
    <div class="container-fluid inventory-container">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="fas fa-tags"></i> Categorías de Inventario</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('inventory.index') }}">Inventario</a></li>
                    <li class="breadcrumb-item active">Categorías</li>
                </ol>
            </div>
        </div>

        <!-- Acciones rápidas -->
        <div class="row mb-3">
            <div class="col-md-12">
                <a href="{{ route('inventory.categories.create') }}" class="btn-inventory btn-inventory-success">
                    <i class="fas fa-plus"></i> Nueva Categoría
                </a>
                <a href="{{ route('inventory.index') }}" class="btn-inventory btn-inventory-primary">
                    <i class="fas fa-boxes"></i> Ver Inventario
                </a>
            </div>
        </div>

        <!-- Listado de categorías -->
        <div class="inventory-card">
            <div class="card-header">
                <h3 class="card-title">Listado de Categorías</h3>
            </div>
            <div class="card-body">
                @if(isset($parentCategories) && count($parentCategories) > 0)
                    <div class="table-responsive">
                        <table class="inventory-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Descripción</th>
                                    <th>Productos</th>
                                    <th>Categoría Padre</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($parentCategories as $category)
                                    <tr>
                                        <td>{{ $category->id }}</td>
                                        <td>{{ $category->name }}</td>
                                        <td>{{ Str::limit($category->description, 50) }}</td>
                                        <td>
                                            <a href="{{ route('inventory.by-category', $category) }}" class="badge-inventory badge-inventory-info">
                                                {{ $category->inventory_count ?? 0 }} productos
                                            </a>
                                        </td>
                                        <td>{{ $category->parent->name ?? 'N/A' }}</td>
                                        <td>
                                            @if($category->is_active)
                                                <span class="badge-inventory badge-inventory-success">Activa</span>
                                            @else
                                                <span class="badge-inventory badge-inventory-danger">Inactiva</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{{ route('inventory.categories.show', $category) }}" class="btn-inventory btn-inventory-info btn-sm">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('inventory.categories.edit', $category) }}" class="btn-inventory btn-inventory-warning btn-sm">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn-inventory btn-inventory-danger btn-sm" data-toggle="modal" data-target="#deleteModal{{ $category->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>

                                            <!-- Modal de eliminación -->
                                            <div class="modal fade inventory-modal" id="deleteModal{{ $category->id }}" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Confirmar eliminación</h5>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            ¿Estás seguro de que deseas eliminar la categoría <strong>{{ $category->name }}</strong>?
                                                            @if($category->inventory_count > 0)
                                                                <div class="low-stock-alert mt-3">
                                                                    <i class="fas fa-ban"></i>
                                                                    <strong>No se puede eliminar:</strong> Esta categoría tiene {{ $category->inventory_count }} 
                                                                    {{ $category->inventory_count == 1 ? 'producto asociado' : 'productos asociados' }}. 
                                                                </div>
                                                                <div class="alert alert-info">
                                                                    <i class="fas fa-info-circle"></i>
                                                                    Para eliminar esta categoría, primero debes:
                                                                    <ul class="mb-0 mt-2">
                                                                        <li>Reasignar los productos a otra categoría, o</li>
                                                                        <li>Eliminar los productos asociados</li>
                                                                    </ul>
                                                                </div>
                                                                <a href="{{ route('inventory.by-category', $category) }}" class="btn-inventory btn-inventory-primary btn-block mt-3">
                                                                    <i class="fas fa-boxes"></i> Ver productos asociados
                                                                </a>
                                                            @endif
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn-inventory btn-inventory-secondary" data-dismiss="modal">Cancelar</button>
                                                            <form action="{{ route('inventory.categories.destroy', $category) }}" method="POST">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn-inventory btn-inventory-danger" {{ $category->inventory_count > 0 ? 'disabled' : '' }}>
                                                                    {{ $category->inventory_count > 0 ? 'No se puede eliminar' : 'Eliminar' }}
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @if(method_exists($parentCategories, 'links'))
                        <div class="d-flex justify-content-center mt-3">
                            {{ $parentCategories->links() }}
                        </div>
                    @endif
                @else
                    <div class="low-stock-alert">
                        <h5><i class="icon fas fa-info"></i> ¡No hay categorías!</h5>
                        <p>No se encontraron categorías de inventario. Puedes crear una nueva haciendo clic en el botón "Nueva Categoría".</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection 

@push('scripts')
<script>
    $(document).ready(function() {
        // Mover todos los modales de categorías al contenedor global
        $('.inventory-modal').each(function() {
            $(this).appendTo('#inventory-modals-container');
        });
        
        // Capturar clicks en botones que abren modales
        $('[data-toggle="modal"]').on('click', function(e) {
            e.preventDefault();
            
            // Obtener el ID del modal a abrir
            var targetModal = $(this).data('target');
            var $modal = $(targetModal);
            
            // Verificar si tiene productos asociados
            var hasProducts = $modal.find('.low-stock-alert:contains("producto asociado")').length > 0;
            
            // Configuración avanzada para el modal
            if (hasProducts) {
                // Primero agregar backdrop manualmente
                if ($('.modal-backdrop').length === 0) {
                    $('body').append('<div class="modal-backdrop show"></div>');
                }
                
                // Forzar la apertura sin animación
                $modal.removeClass('fade').addClass('show d-block modal-static');
                $('body').addClass('modal-open');
                
                // Configurar botones
                $modal.find('.close, .btn-inventory-secondary').off('click').on('click', function() {
                    closeModal($modal);
                });
                
                // Prevenir cierre al hacer clic fuera
                $modal.off('click').on('click', function(e) {
                    if ($(e.target).is($modal)) {
                        e.stopPropagation();
                        return false;
                    }
                });
            } else {
                // Para modales normales, usar el comportamiento estándar pero con mejoras
                $modal.modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: true
                });
            }
        });
        
        // Función para cerrar modal manualmente
        function closeModal($modal) {
            $modal.removeClass('show d-block').addClass('fade');
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
        }
    });
</script>
@endpush 