@extends('layouts.app')

@section('title', 'Kardex General')

@section('content')
<div class="container-fluid">
    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-history me-2"></i>Kardex General
        </h1>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-info" onclick="exportKardex()">
                <i class="fas fa-download me-2"></i>Exportar
            </button>
            <button type="button" class="btn btn-outline-warning" onclick="showCleanModal()">
                <i class="fas fa-broom me-2"></i>Limpiar Kardex
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="location.reload()">
                <i class="fas fa-sync-alt me-2"></i>Actualizar
            </button>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-filter me-2"></i>Filtros
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('kardex.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="usuario_id" class="form-label">Usuario</label>
                    <select class="form-select" id="usuario_id" name="usuario_id">
                        <option value="">Todos los usuarios</option>
                        @foreach(\App\Models\User::activos()->get() as $usuario)
                            <option value="{{ $usuario->id }}" {{ request('usuario_id') == $usuario->id ? 'selected' : '' }}>
                                {{ $usuario->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label for="tipo_accion_id" class="form-label">Tipo de Acción</label>
                    <select class="form-select" id="tipo_accion_id" name="tipo_accion_id">
                        <option value="">Todas las acciones</option>
                        @foreach(\App\Models\TipoAccion::activos()->get() as $tipo)
                            <option value="{{ $tipo->id }}" {{ request('tipo_accion_id') == $tipo->id ? 'selected' : '' }}>
                                {{ $tipo->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label for="tabla" class="form-label">Tabla</label>
                    <select class="form-select" id="tabla" name="tabla">
                        <option value="">Todas las tablas</option>
                        @foreach($tablasDisponibles as $tabla)
                            <option value="{{ $tabla }}" {{ request('tabla') == $tabla ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $tabla)) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label for="fecha_desde" class="form-label">Fecha Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" 
                           value="{{ request('fecha_desde') }}">
                </div>
                
                <div class="col-md-3">
                    <label for="fecha_hasta" class="form-label">Fecha Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" 
                           value="{{ request('fecha_hasta') }}">
                </div>
                
                <div class="col-md-3">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Observaciones, IP...">
                </div>
                
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-search"></i>
                    </button>
                    <a href="{{ route('kardex.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista de registros del Kardex -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-list me-2"></i>Registros de Actividad
                <span class="badge bg-primary ms-2">{{ $kardex->count() }} registros</span>
            </h5>
        </div>
        <div class="card-body">
            @if($kardex->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Usuario</th>
                                <th>Acción</th>
                                <th>Tabla</th>
                                <th>Registro</th>
                                <th>IP</th>
                                <th>Observaciones</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($kardex as $registro)
                                <tr>
                                    <td>
                                        <div>
                                            <strong>{{ $registro->created_at->format('d/m/Y') }}</strong>
                                            <br><small class="text-muted">{{ $registro->created_at->format('H:i:s') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                                {{ substr($registro->usuario->name, 0, 1) }}
                                            </div>
                                            <div>
                                                <strong>{{ $registro->usuario->name }}</strong>
                                                <br><small class="text-muted">{{ $registro->usuario->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge" style="background-color: {{ $registro->tipoAccion->color ?? '#6c757d' }}">
                                            <i class="fas fa-{{ $registro->tipoAccion->icono ?? 'circle' }} me-1"></i>
                                            {{ $registro->tipoAccion->nombre ?? 'Acción' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $registro->tabla)) }}</span>
                                    </td>
                                    <td>
                                        @if($registro->registro_id)
                                            <span class="badge bg-secondary">ID: {{ $registro->registro_id }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $registro->ip_address }}</small>
                                    </td>
                                    <td>
                                        <div style="max-width: 200px;">
                                            <p class="mb-0 text-truncate" title="{{ $registro->observaciones }}">
                                                {{ $registro->observaciones ?: 'Sin observaciones' }}
                                            </p>
                                        </div>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                onclick="showDetails({{ $registro->id }})" title="Ver Detalles">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Información de resultados -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        Mostrando {{ $kardex->count() }} registros en total
                    </div>
                    <div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Registros de auditoría del sistema
                        </small>
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-history fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No se encontraron registros</h5>
                    <p class="text-muted">Intenta ajustar los filtros de búsqueda</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal de detalles -->
<div class="modal fade" id="detailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalles del Registro</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailsContent">
                <!-- Contenido cargado dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de limpieza -->
<div class="modal fade" id="cleanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Limpiar Kardex</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Advertencia:</strong> Esta acción eliminará permanentemente los registros del Kardex.
                </div>
                
                <form method="POST" action="{{ route('kardex.confirmar-limpiar') }}">
                    @csrf
                    
                    <div class="mb-3">
                        <label for="dias_antiguedad" class="form-label">Eliminar registros más antiguos que:</label>
                        <select class="form-select" id="dias_antiguedad" name="dias_antiguedad" required>
                            <option value="30">30 días</option>
                            <option value="60">60 días</option>
                            <option value="90">90 días</option>
                            <option value="180">6 meses</option>
                            <option value="365">1 año</option>
                            <option value="0">Todos los registros</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirmacion" class="form-label">Escribe "LIMPIAR" para confirmar:</label>
                        <input type="text" class="form-control" id="confirmacion" name="confirmacion" 
                               placeholder="LIMPIAR" required>
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Limpiar Kardex</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
}
</style>
@endpush

@push('scripts')
<script>
function showDetails(registroId) {
    const modal = new bootstrap.Modal(document.getElementById('detailsModal'));
    const content = document.getElementById('detailsContent');
    
    // Mostrar loading
    content.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-2">Cargando detalles...</p></div>';
    modal.show();
    
    // Cargar detalles via AJAX
    fetch(`/kardex/${registroId}/details`)
        .then(response => response.json())
        .then(data => {
            content.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Información General</h6>
                        <table class="table table-sm">
                            <tr><td><strong>Usuario:</strong></td><td>${data.usuario}</td></tr>
                            <tr><td><strong>Acción:</strong></td><td>${data.accion}</td></tr>
                            <tr><td><strong>Tabla:</strong></td><td>${data.tabla}</td></tr>
                            <tr><td><strong>Registro ID:</strong></td><td>${data.registro_id || 'N/A'}</td></tr>
                            <tr><td><strong>IP:</strong></td><td>${data.ip_address}</td></tr>
                            <tr><td><strong>User Agent:</strong></td><td>${data.user_agent || 'N/A'}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Datos del Cambio</h6>
                        <div class="mb-3">
                            <strong>Datos Anteriores:</strong>
                            <pre class="bg-light p-2 rounded">${data.datos_anteriores || 'N/A'}</pre>
                        </div>
                        <div class="mb-3">
                            <strong>Datos Nuevos:</strong>
                            <pre class="bg-light p-2 rounded">${data.datos_nuevos || 'N/A'}</pre>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h6>Observaciones</h6>
                        <p class="bg-light p-2 rounded">${data.observaciones || 'Sin observaciones'}</p>
                    </div>
                </div>
            `;
        })
        .catch(error => {
            content.innerHTML = '<div class="alert alert-danger">Error al cargar los detalles del registro.</div>';
        });
}

function showCleanModal() {
    const modal = new bootstrap.Modal(document.getElementById('cleanModal'));
    modal.show();
}

function exportKardex() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `/kardex/exportar?${params.toString()}`;
}
</script>
@endpush
@endsection