@extends('layouts.app')

@section('titulo', 'Histórico de Documentos Generados')
@section('contenido1')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-history mr-2"></i>
                        Histórico de Documentos Generados
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('templates.index') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus mr-1"></i>
                            Nueva plantilla
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="template_filter">Plantilla:</label>
                            <select id="template_filter" class="form-control form-control-sm">
                                <option value="">Todas las plantillas</option>
                                @foreach($templates as $template)
                                    <option value="{{ $template->id }}" {{ request('template_id') == $template->id ? 'selected' : '' }}>
                                        {{ $template->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status_filter">Estado:</label>
                            <select id="status_filter" class="form-control form-control-sm">
                                <option value="">Todos los estados</option>
                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Borrador</option>
                                <option value="generated" {{ request('status') == 'generated' ? 'selected' : '' }}>Generado</option>
                                <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Enviado</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="user_filter">Usuario:</label>
                            <select id="user_filter" class="form-control form-control-sm">
                                <option value="">Todos los usuarios</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="date_from">Desde:</label>
                            <input type="date" id="date_from" class="form-control form-control-sm" 
                                   value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_to">Hasta:</label>
                            <input type="date" id="date_to" class="form-control form-control-sm" 
                                   value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-1">
                            <label>&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
                                    <i class="fas fa-filter mr-1"></i>
                                    Filtrar
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Lista de documentos -->
                    @if($responses->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Plantilla</th>
                                        <th>Origen</th>
                                        <th>Usuario</th>
                                        <th>Estado</th>
                                        <th>Fecha</th>
                                        <th>Tamaño</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($responses as $response)
                                        <tr>
                                            <td>
                                                <div>
                                                    <strong>{{ $response->template->name }}</strong>
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ ucfirst($response->template->type) }}
                                                    </small>
                                                </div>
                                            </td>
                                            <td>
                                                @if($response->source_type && $response->source_id)
                                                    <div>
                                                        <strong>{{ class_basename($response->source_type) }}</strong>
                                                        <br>
                                                        <small class="text-muted">
                                                            ID: {{ $response->source_id }}
                                                        </small>
                                                    </div>
                                                @else
                                                    <span class="text-muted">Manual</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div>
                                                    {{ $response->user->name ?? 'Usuario eliminado' }}
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $response->user->email ?? '' }}
                                                    </small>
                                                </div>
                                            </td>
                                            <td>
                                                @switch($response->status)
                                                    @case('draft')
                                                        <span class="badge badge-warning">Borrador</span>
                                                        @break
                                                    @case('generated')
                                                        <span class="badge badge-success">Generado</span>
                                                        @break
                                                    @case('sent')
                                                        <span class="badge badge-info">Enviado</span>
                                                        @break
                                                    @default
                                                        <span class="badge badge-secondary">{{ $response->status }}</span>
                                                @endswitch
                                            </td>
                                            <td>
                                                <div>
                                                    {{ $response->generated_at->format('d/m/Y') }}
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $response->generated_at->format('H:i:s') }}
                                                    </small>
                                                </div>
                                            </td>
                                            <td>
                                                @if($response->hasFile())
                                                    <span class="text-success">
                                                        <i class="fas fa-file-pdf mr-1"></i>
                                                        {{ $response->getFormattedFileSize() }}
                                                    </span>
                                                @else
                                                    <span class="text-danger">
                                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                                        No disponible
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    @if($response->hasFile())
                                                        <a href="{{ route('templates.responses.download', $response->id) }}" 
                                                           class="btn btn-outline-primary" 
                                                           title="Descargar PDF">
                                                            <i class="fas fa-download"></i>
                                                        </a>
                                                    @endif
                                                    
                                                    <button type="button" 
                                                            class="btn btn-outline-info" 
                                                            onclick="showDetails({{ $response->id }})"
                                                            title="Ver detalles">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    
                                                    <button type="button" 
                                                            class="btn btn-outline-danger" 
                                                            onclick="deleteResponse({{ $response->id }})"
                                                            title="Eliminar">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Paginación -->
                        <div class="d-flex justify-content-center mt-3">
                            {{ $responses->appends(request()->query())->links() }}
                        </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 documentos</h5>
                            <p class="text-muted">
                                @if(request()->hasAny(['template_id', 'status', 'user_id', 'date_from', 'date_to']))
                                    No hay documentos que coincidan con los filtros aplicados.
                                @else
                                    Aún no se han generado documentos con plantillas.
                                @endif
                            </p>
                            <a href="{{ route('templates.index') }}" class="btn btn-primary">
                                <i class="fas fa-plus mr-1"></i>
                                Generar primer documento
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para mostrar detalles -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalles del Documento</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </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-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
function applyFilters() {
    const templateId = document.getElementById('template_filter').value;
    const status = document.getElementById('status_filter').value;
    const userId = document.getElementById('user_filter').value;
    const dateFrom = document.getElementById('date_from').value;
    const dateTo = document.getElementById('date_to').value;
    
    const url = new URL(window.location);
    
    // Limpiar parámetros existentes
    ['template_id', 'status', 'user_id', 'date_from', 'date_to'].forEach(param => {
        url.searchParams.delete(param);
    });
    
    // Agregar nuevos parámetros
    if (templateId) url.searchParams.set('template_id', templateId);
    if (status) url.searchParams.set('status', status);
    if (userId) url.searchParams.set('user_id', userId);
    if (dateFrom) url.searchParams.set('date_from', dateFrom);
    if (dateTo) url.searchParams.set('date_to', dateTo);
    
    window.location.href = url.toString();
}

function showDetails(responseId) {
    // Cargar detalles del documento via AJAX
    fetch(`/api/templates/responses/${responseId}/details`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('detailsContent').innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Información del Documento</h6>
                        <p><strong>Plantilla:</strong> ${data.template_name}</p>
                        <p><strong>Tipo:</strong> ${data.template_type}</p>
                        <p><strong>Estado:</strong> ${data.status}</p>
                        <p><strong>Fecha:</strong> ${data.generated_at}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Datos Utilizados</h6>
                        <div style="max-height: 300px; overflow-y: auto;">
                            ${Object.entries(data.data).map(([key, value]) => 
                                `<p><strong>${key}:</strong> ${value}</p>`
                            ).join('')}
                        </div>
                    </div>
                </div>
            `;
            $('#detailsModal').modal('show');
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cargar los detalles del documento');
        });
}

function deleteResponse(responseId) {
    if (confirm('¿Estás seguro de que quieres eliminar este documento? Esta acción no se puede deshacer.')) {
        fetch(`/templates/responses/${responseId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                alert(data.message);
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el documento');
        });
    }
}

// Mejorar la experiencia de usuario
document.addEventListener('DOMContentLoaded', function() {
    // Auto-aplicar filtros cuando cambien los selects
    document.querySelectorAll('select').forEach(select => {
        select.addEventListener('change', function() {
            // Solo auto-aplicar si no es el primer cambio
            if (this.dataset.initialized) {
                applyFilters();
            } else {
                this.dataset.initialized = 'true';
            }
        });
    });
    
    // Confirmar descarga
    document.querySelectorAll('a[href*="download"]').forEach(link => {
        link.addEventListener('click', function(e) {
            if (!confirm('¿Descargar este documento?')) {
                e.preventDefault();
            }
        });
    });
});
</script>
@endsection