@extends('layouts.yellow')

@section('title', 'Inventario')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="fas fa-boxes"></i> 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 active">Inventario</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    @foreach ($inventoryItems as $item)
        <!-- Modal de eliminación -->
        <div class="modal fade inventory-modal" id="deleteModal{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel{{ $item->id }}" 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" id="deleteModalLabel{{ $item->id }}">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 <strong>{{ $item->name }}</strong>?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-inventory btn-inventory-secondary" data-dismiss="modal">Cancelar</button>
                    <form action="{{ route('inventory.destroy', $item) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-inventory btn-inventory-danger">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
      <!-- Modal de ajuste de cantidad -->
      <div class="modal fade inventory-modal" id="adjustModal{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="adjustModalLabel{{ $item->id }}" 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" id="adjustModalLabel{{ $item->id }}">Ajustar cantidad</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('inventory.adjust', $item) }}" method="POST" class="form-inventory">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="transaction_type">Tipo de transacción</label>
                            <select class="form-control" id="transaction_type" name="transaction_type" required>
                                <option value="entry">Entrada</option>
                                <option value="exit">Salida</option>
                                <option value="adjustment">Ajuste directo</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="quantity">Cantidad</label>
                            <input type="number" class="form-control" id="quantity" name="quantity" min="0" step="0.01" required>
                            <small class="form-text text-muted">
                                Para entradas: cantidad a agregar. Para salidas: cantidad a restar. Para ajustes: cantidad total nueva.
                            </small>
                        </div>
                        <div class="form-group">
                            <label for="notes">Notas</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-inventory btn-inventory-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn-inventory btn-inventory-primary">Guardar cambios</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endforeach
    <div class="container-fluid inventory-container">
        <!-- Filtros -->
        <div class="card filter-card">
            <div class="card-header">
                <h3 class="card-title">Filtros</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('inventory.index') }}" method="GET" class="form-inventory">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="search">Buscar</label>
                                <input type="text" class="form-control" id="search" name="search" placeholder="Nombre, descripción, número de serie..." value="{{ request('search') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="category_id">Categoría</label>
                                <select class="form-control" id="category_id" name="category_id">
                                    <option value="">Todas las categorías</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="status">Estado</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">Todos los estados</option>
                                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Activo</option>
                                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactivo</option>
                                    <option value="maintenance" {{ request('status') == 'maintenance' ? 'selected' : '' }}>En mantenimiento</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <div class="form-group">
                                <button type="submit" class="btn-inventory btn-inventory-primary">
                                    <i class="fas fa-search"></i> Filtrar
                                </button>
                                <a href="{{ route('inventory.index') }}" class="btn-inventory btn-inventory-secondary">
                                    <i class="fas fa-sync"></i> Limpiar
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Acciones rápidas -->
        <div class="row mb-3">
            <div class="col-md-12">
                <a href="{{ route('inventory.create') }}" class="btn-inventory btn-inventory-success">
                    <i class="fas fa-plus"></i> Nuevo ítem
                </a>
                <a href="{{ route('inventory.low-stock') }}" class="btn-inventory btn-inventory-warning">
                    <i class="fas fa-exclamation-triangle"></i> Stock bajo
                </a>
                <a href="{{ route('inventory.categories.index') }}" class="btn-inventory btn-inventory-info">
                    <i class="fas fa-tags"></i> Categorías
                </a>
                <a href="{{ route('inventory.suppliers.index') }}" class="btn-inventory btn-inventory-primary">
                    <i class="fas fa-truck"></i> Proveedores
                </a>
                <a href="{{ route('inventory.transactions.index') }}" class="btn-inventory btn-inventory-secondary">
                    <i class="fas fa-exchange-alt"></i> Transacciones
                </a>
                <a href="{{ route('inventory.export') }}" class="btn-inventory btn-inventory-info float-right">
                    <i class="fas fa-file-export"></i> Exportar
                </a>
            </div>
        </div>

        <!-- Listado de items -->
        <div class="inventory-card">
            <div class="card-header">
                <h3 class="card-title">Listado de ítems de inventario</h3>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="inventory-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Imagen</th>
                            <th>Nombre</th>
                            <th>Categoría</th>
                            <th>Stock</th>
                            <th>Estado</th>
                            <th>Ubicación</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($inventoryItems as $item)
                            <tr>
                                <td>{{ $item->id }}</td>
                                <td>
                                    @if ($item->image_path)
                                        <img src="{{ asset('storage/inventory/' . $item->image_path) }}" alt="{{ $item->name }}" class="img-thumbnail">
                                    @else
                                        <span class="badge-inventory badge-inventory-secondary">Sin imagen</span>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $item->name }}</strong>
                                    @if ($item->brand)
                                        <br><small>{{ $item->brand }} {{ $item->model }}</small>
                                    @endif
                                </td>
                                <td>{{ $item->category->name ?? 'N/A' }}</td>
                                <td>
                                    @if ($item->isLowStock())
                                        <span class="badge-inventory badge-inventory-danger">{{ $item->quantity }} (Bajo)</span>
                                    @elseif ($item->isOutOfStock())
                                        <span class="badge-inventory badge-inventory-danger">Agotado</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-secondary">Inactivo</span>
                                    @elseif ($item->status == 'maintenance')
                                        <span class="badge-inventory badge-inventory-warning">Mantenimiento</span>
                                    @endif
                                </td>
                                <td>{{ $item->location ?? 'N/A' }}</td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ route('inventory.show', $item) }}" class="btn-inventory btn-inventory-info btn-sm">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('inventory.edit', $item) }}" 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{{ $item->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <button type="button" class="btn-inventory btn-inventory-primary btn-sm" data-toggle="modal" data-target="#adjustModal{{ $item->id }}">
                                            <i class="fas fa-balance-scale"></i>
                                        </button>
                                    </div>                                  
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center">No hay ítems de inventario disponibles.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                {{ $inventoryItems->links() }}
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .pagination {
        justify-content: center;
    }
</style>
@endpush

@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2();
        
        // Mover todos los modales al contenedor global
        $('.inventory-modal').each(function() {
            $(this).appendTo('#inventory-modals-container');
        });
        
        // Estabilizar modales con control manual
        $('[data-toggle="modal"]').on('click', function(e) {
            e.preventDefault();
            
            var targetModal = $(this).data('target');
            var $modal = $(targetModal);
            
            // Asegurar que el modal se muestra correctamente
            if ($('.modal-backdrop').length === 0) {
                $('body').append('<div class="modal-backdrop show"></div>');
            }
            
            // Mostrar el modal sin animaciones
            $modal.removeClass('fade').addClass('show d-block');
            $('body').addClass('modal-open');
            
            // Configurar cierre
            $modal.find('.close, .btn-inventory-secondary').off('click').on('click', function() {
                closeModal($modal);
            });
        });
        
        // 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 