@extends('layouts.yellow')

@section('title', 'Detalles de Categoría')

@section('content')
    <div class="container-fluid inventory-container">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="fas fa-tag"></i> Detalles de Categoría</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"><a href="{{ route('inventory.categories.index') }}">Categorías</a></li>
                    <li class="breadcrumb-item active">{{ $category->name }}</li>
                </ol>
            </div>
        </div>

        <!-- Acciones rápidas -->
        <div class="row mb-3">
            <div class="col-md-12">
                <a href="{{ route('inventory.categories.edit', $category) }}" class="btn-inventory btn-inventory-warning">
                    <i class="fas fa-edit"></i> Editar Categoría
                </a>
                <a href="{{ route('inventory.categories.index') }}" class="btn-inventory btn-inventory-primary">
                    <i class="fas fa-arrow-left"></i> Volver al Listado
                </a>
                <button type="button" class="btn-inventory btn-inventory-danger" data-toggle="modal" data-target="#deleteModal">
                    <i class="fas fa-trash"></i> Eliminar Categoría
                </button>
            </div>
        </div>

        <!-- Información de la categoría -->
        <div class="row">
            <div class="col-md-6">
                <div class="inventory-card">
                    <div class="card-header">
                        <h3 class="card-title">Información General</h3>
                    </div>
                    <div class="card-body">
                        <table class="inventory-table">
                            <tr>
                                <th style="width: 30%">ID</th>
                                <td>{{ $category->id }}</td>
                            </tr>
                            <tr>
                                <th>Nombre</th>
                                <td>{{ $category->name }}</td>
                            </tr>
                            <tr>
                                <th>Descripción</th>
                                <td>{{ $category->description ?? 'No disponible' }}</td>
                            </tr>
                            <tr>
                                <th>Categoría Padre</th>
                                <td>
                                    @if($category->parent)
                                        <a href="{{ route('inventory.categories.show', $category->parent) }}">
                                            {{ $category->parent->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Categoría Principal</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Estado</th>
                                <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>
                            </tr>
                            <tr>
                                <th>Fecha de Creación</th>
                                <td>{{ $category->created_at->format('d/m/Y H:i') }}</td>
                            </tr>
                            <tr>
                                <th>Última Actualización</th>
                                <td>{{ $category->updated_at->format('d/m/Y H:i') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="inventory-card">
                    <div class="card-header">
                        <h3 class="card-title">Subcategorías</h3>
                    </div>
                    <div class="card-body">
                        @if(count($category->children) > 0)
                            <div class="table-responsive">
                                <table class="inventory-table">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Estado</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($category->children as $child)
                                            <tr>
                                                <td>{{ $child->name }}</td>
                                                <td>
                                                    @if($child->is_active)
                                                        <span class="badge-inventory badge-inventory-success">Activa</span>
                                                    @else
                                                        <span class="badge-inventory badge-inventory-danger">Inactiva</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('inventory.categories.show', $child) }}" class="btn-inventory btn-inventory-info btn-sm">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="low-stock-alert mb-0">
                                <i class="fas fa-info-circle"></i> Esta categoría no tiene subcategorías.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Productos de esta categoría -->
        <div class="inventory-card mt-4">
            <div class="card-header">
                <h3 class="card-title">Productos en esta Categoría</h3>
            </div>
            <div class="card-body">
                @if(isset($category->items) && count($category->items) > 0)
                    <div class="table-responsive">
                        <table class="inventory-table">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Stock</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($category->items as $item)
                                    <tr>
                                        <td>{{ $item->name }}</td>
                                        <td>
                                            @if($item->quantity <= $item->min_stock && $item->min_stock > 0)
                                                <span class="badge-inventory badge-inventory-danger">{{ $item->quantity }}</span>
                                            @else
                                                <span class="badge-inventory badge-inventory-success">{{ $item->quantity }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($item->status == 'active')
                                                <span class="badge-inventory badge-inventory-success">Activo</span>
                                            @elseif($item->status == 'inactive')
                                                <span class="badge-inventory badge-inventory-danger">Inactivo</span>
                                            @else
                                                <span class="badge-inventory badge-inventory-warning">Mantenimiento</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('inventory.show', $item) }}" class="btn-inventory btn-inventory-info btn-sm">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="low-stock-alert mb-0">
                        <i class="fas fa-info-circle"></i> No hay productos en esta categoría.
                    </div>
                @endif
            </div>
        </div>

        <!-- Modal de confirmación de eliminación -->
        <div class="modal fade inventory-modal" id="deleteModal" 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(count($category->children) > 0)
                            <div class="low-stock-alert mt-3">
                                <i class="fas fa-exclamation-triangle"></i>
                                Esta categoría tiene {{ count($category->children) }} subcategorías.
                                No se puede eliminar una categoría con subcategorías.
                            </div>
                        @endif
                        
                        @if(isset($category->items) && count($category->items) > 0)
                            <div class="low-stock-alert mt-3">
                                <i class="fas fa-exclamation-triangle"></i>
                                Esta categoría tiene {{ count($category->items) }} productos asociados.
                                No se puede eliminar una categoría con productos.
                            </div>
                        @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" {{ (count($category->children) > 0 || (isset($category->items) && count($category->items) > 0)) ? 'disabled' : '' }}>
                                Eliminar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection 

@push('scripts')
<script>
    $(document).ready(function() {
        // Mover el modal al contenedor global
        $('#deleteModal').appendTo('#inventory-modals-container');
        
        // Manejar clic en el botón que abre el modal
        $('[data-toggle="modal"][data-target="#deleteModal"]').on('click', function(e) {
            e.preventDefault();
            
            var $modal = $('#deleteModal');
            
            // Verificar si tiene productos o subcategorías
            var hasRelations = $modal.find('.low-stock-alert:contains("productos")').length > 0 || 
                               $modal.find('.low-stock-alert:contains("subcategorías")').length > 0;
            
            if (hasRelations) {
                // Forzar apertura manual sin animaciones
                if ($('.modal-backdrop').length === 0) {
                    $('body').append('<div class="modal-backdrop show"></div>');
                }
                
                $modal.removeClass('fade').addClass('show d-block modal-static');
                $('body').addClass('modal-open');
                
                // Configurar cierre manual solo con el botón Cancelar
                $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 sin relaciones, usar comportamiento mejorado
                $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 