@extends('layouts.app')

@section('title', 'Reportes Avanzados')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Panel de Reportes Avanzados</h3>
                </div>
                <div class="card-body">
                    <!-- Reportes Rápidos -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $reportesRecientes->count() }}</h4>
                                    <small>Reportes Recientes</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $tiposReporte->count() }}</h4>
                                    <small>Tipos Disponibles</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h4>3</h4>
                                    <small>Formatos</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h4>100%</h4>
                                    <small>Automatizado</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pestañas de Reportes -->
                    <ul class="nav nav-tabs" id="reportTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="usuarios-tab" data-toggle="tab" href="#usuarios" role="tab">
                                <i class="fas fa-users"></i> Usuarios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="actividad-tab" data-toggle="tab" href="#actividad" role="tab">
                                <i class="fas fa-chart-line"></i> Actividad
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="roles-tab" data-toggle="tab" href="#roles" role="tab">
                                <i class="fas fa-shield-alt"></i> Roles & Permisos
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="empresa-tab" data-toggle="tab" href="#empresa" role="tab">
                                <i class="fas fa-building"></i> Empresa
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="notificaciones-tab" data-toggle="tab" href="#notificaciones" role="tab">
                                <i class="fas fa-bell"></i> Notificaciones
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="personalizado-tab" data-toggle="tab" href="#personalizado" role="tab">
                                <i class="fas fa-cogs"></i> Personalizado
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="reportTabsContent">
                        <!-- Reporte de Usuarios -->
                        <div class="tab-pane fade show active" id="usuarios" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte de Usuarios</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reporteUsuariosForm">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_desde_usuarios">Fecha Desde</label>
                                                            <input type="date" id="fecha_desde_usuarios" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_hasta_usuarios">Fecha Hasta</label>
                                                            <input type="date" id="fecha_hasta_usuarios" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="formato_usuarios">Formato</label>
                                                            <select id="formato_usuarios" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="form-check mt-4">
                                                                <input type="checkbox" id="incluir_inactivos" class="form-check-input">
                                                                <label for="incluir_inactivos" class="form-check-label">Incluir Inactivos</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-file-pdf"></i> Generar Reporte
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reporte de Actividad -->
                        <div class="tab-pane fade" id="actividad" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte de Actividad (Kardex)</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reporteActividadForm">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_desde_actividad">Fecha Desde *</label>
                                                            <input type="date" id="fecha_desde_actividad" class="form-control" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_hasta_actividad">Fecha Hasta *</label>
                                                            <input type="date" id="fecha_hasta_actividad" class="form-control" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="usuario_actividad">Usuario</label>
                                                            <select id="usuario_actividad" class="form-control">
                                                                <option value="">Todos los usuarios</option>
                                                                @foreach(\App\Models\User::all() as $user)
                                                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="formato_actividad">Formato</label>
                                                            <select id="formato_actividad" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-chart-line"></i> Generar Reporte
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reporte de Roles y Permisos -->
                        <div class="tab-pane fade" id="roles" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte de Roles y Permisos</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reporteRolesForm">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="formato_roles">Formato</label>
                                                            <select id="formato_roles" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-check mt-4">
                                                                <input type="checkbox" id="incluir_permisos" class="form-check-input" checked>
                                                                <label for="incluir_permisos" class="form-check-label">Incluir Detalle de Permisos</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-shield-alt"></i> Generar Reporte
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reporte de Empresa -->
                        <div class="tab-pane fade" id="empresa" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte de Empresa</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reporteEmpresaForm">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="formato_empresa">Formato</label>
                                                            <select id="formato_empresa" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-building"></i> Generar Reporte
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reporte de Notificaciones -->
                        <div class="tab-pane fade" id="notificaciones" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte de Notificaciones</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reporteNotificacionesForm">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_desde_notificaciones">Fecha Desde</label>
                                                            <input type="date" id="fecha_desde_notificaciones" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="fecha_hasta_notificaciones">Fecha Hasta</label>
                                                            <input type="date" id="fecha_hasta_notificaciones" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="tipo_notificaciones">Tipo</label>
                                                            <select id="tipo_notificaciones" class="form-control">
                                                                <option value="">Todos los tipos</option>
                                                                <option value="sistema">Sistema</option>
                                                                <option value="usuario">Usuario</option>
                                                                <option value="alerta">Alerta</option>
                                                                <option value="info">Información</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="formato_notificaciones">Formato</label>
                                                            <select id="formato_notificaciones" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-bell"></i> Generar Reporte
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reporte Personalizado -->
                        <div class="tab-pane fade" id="personalizado" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Reporte Personalizado</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="reportePersonalizadoForm">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="nombre_reporte">Nombre del Reporte *</label>
                                                            <input type="text" id="nombre_reporte" class="form-control" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="tabla_personalizado">Tabla *</label>
                                                            <select id="tabla_personalizado" class="form-control" required>
                                                                <option value="">Seleccionar tabla</option>
                                                                <option value="users">Usuarios</option>
                                                                <option value="roles">Roles</option>
                                                                <option value="permissions">Permisos</option>
                                                                <option value="empresas">Empresas</option>
                                                                <option value="kardex_general">Kardex</option>
                                                                <option value="notificaciones">Notificaciones</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="campos_personalizado">Campos a Incluir *</label>
                                                            <select id="campos_personalizado" class="form-control" multiple required>
                                                                <option value="id">ID</option>
                                                                <option value="name">Nombre</option>
                                                                <option value="email">Email</option>
                                                                <option value="created_at">Fecha Creación</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="formato_personalizado">Formato</label>
                                                            <select id="formato_personalizado" class="form-control" required>
                                                                <option value="pdf">PDF</option>
                                                                <option value="excel">Excel</option>
                                                                <option value="csv">CSV</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="descripcion_personalizado">Descripción</label>
                                                    <textarea id="descripcion_personalizado" class="form-control" rows="3"></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-cogs"></i> Generar Reporte Personalizado
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Reportes Recientes -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Reportes Recientes</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Fecha</th>
                                                    <th>Usuario</th>
                                                    <th>Tipo de Reporte</th>
                                                    <th>Observaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($reportesRecientes as $reporte)
                                                    <tr>
                                                        <td>{{ $reporte->created_at->format('d/m/Y H:i:s') }}</td>
                                                        <td>{{ $reporte->usuario ? $reporte->usuario->name : 'Sistema' }}</td>
                                                        <td>
                                                            <span class="badge badge-primary">
                                                                {{ str_replace('generar-reporte-', '', $reporte->tipoAccion->slug ?? 'N/A') }}
                                                            </span>
                                                        </td>
                                                        <td>{{ $reporte->observaciones }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center">No hay reportes recientes</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Generar reporte de usuarios
document.getElementById('reporteUsuariosForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('usuarios', {
        fecha_desde: document.getElementById('fecha_desde_usuarios').value,
        fecha_hasta: document.getElementById('fecha_hasta_usuarios').value,
        formato: document.getElementById('formato_usuarios').value,
        incluir_inactivos: document.getElementById('incluir_inactivos').checked
    });
});

// Generar reporte de actividad
document.getElementById('reporteActividadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('actividad', {
        fecha_desde: document.getElementById('fecha_desde_actividad').value,
        fecha_hasta: document.getElementById('fecha_hasta_actividad').value,
        usuario_id: document.getElementById('usuario_actividad').value,
        formato: document.getElementById('formato_actividad').value
    });
});

// Generar reporte de roles
document.getElementById('reporteRolesForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('roles-permisos', {
        formato: document.getElementById('formato_roles').value,
        incluir_permisos: document.getElementById('incluir_permisos').checked
    });
});

// Generar reporte de empresa
document.getElementById('reporteEmpresaForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('empresa', {
        formato: document.getElementById('formato_empresa').value
    });
});

// Generar reporte de notificaciones
document.getElementById('reporteNotificacionesForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('notificaciones', {
        fecha_desde: document.getElementById('fecha_desde_notificaciones').value,
        fecha_hasta: document.getElementById('fecha_hasta_notificaciones').value,
        tipo: document.getElementById('tipo_notificaciones').value,
        formato: document.getElementById('formato_notificaciones').value
    });
});

// Generar reporte personalizado
document.getElementById('reportePersonalizadoForm').addEventListener('submit', function(e) {
    e.preventDefault();
    generarReporte('personalizado', {
        nombre_reporte: document.getElementById('nombre_reporte').value,
        tabla: document.getElementById('tabla_personalizado').value,
        campos: Array.from(document.getElementById('campos_personalizado').selectedOptions).map(o => o.value),
        formato: document.getElementById('formato_personalizado').value,
        descripcion: document.getElementById('descripcion_personalizado').value
    });
});

function generarReporte(tipo, datos) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/reportes/${tipo}`;
    form.style.display = 'none';
    
    // Agregar token CSRF
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = '{{ csrf_token() }}';
    form.appendChild(csrfToken);
    
    // Agregar datos del formulario
    Object.keys(datos).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = Array.isArray(datos[key]) ? JSON.stringify(datos[key]) : datos[key];
        form.appendChild(input);
    });
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}
</script>
@endsection