@extends('layouts.app')

@section('title', 'Plantillas de Reportes')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-file-contract text-info"></i>
                        Plantillas de Reportes
                    </h4>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#createTemplateModal">
                            <i class="fas fa-plus"></i> Nueva Plantilla
                        </button>
                        <button type="button" class="btn btn-info" onclick="loadCategories()">
                            <i class="fas fa-tags"></i> Categorías
                        </button>
                        <button type="button" class="btn btn-warning" onclick="importTemplate()">
                            <i class="fas fa-upload"></i> Importar
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-name" placeholder="Buscar plantilla...">
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-category">
                                <option value="">Todas las categorías</option>
                                <option value="financial">Financiero</option>
                                <option value="technical">Técnico</option>
                                <option value="customer">Cliente</option>
                                <option value="inventory">Inventario</option>
                                <option value="system">Sistema</option>
                                <option value="custom">Personalizado</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-type">
                                <option value="">Todos los tipos</option>
                                <option value="table">Tabla</option>
                                <option value="chart">Gráfico</option>
                                <option value="dashboard">Dashboard</option>
                                <option value="export">Exportación</option>
                                <option value="summary">Resumen</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-status">
                                <option value="">Todos los estados</option>
                                <option value="active">Activo</option>
                                <option value="inactive">Inactivo</option>
                                <option value="draft">Borrador</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-author">
                                <option value="">Todos los autores</option>
                                @foreach($authors as $author)
                                <option value="{{ $author->id }}">{{ $author->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Grid de plantillas -->
                    <div class="row" id="templates-grid">
                        @forelse($templates as $template)
                        <div class="col-md-4 mb-3">
                            <div class="card template-card h-100" data-category="{{ $template->category }}">
                                <div class="card-header d-flex justify-content-between align-items-center py-2">
                                    <small class="text-muted">
                                        <i class="fas {{ getTemplateIcon($template->type) }}"></i>
                                        {{ ucfirst($template->type) }}
                                    </small>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-sm btn-outline-info" onclick="previewTemplate({{ $template->id }})" title="Vista previa">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#" onclick="generateReport({{ $template->id }})">
                                                    <i class="fas fa-play"></i> Generar Reporte
                                                </a>
                                                <a class="dropdown-item" href="#" onclick="duplicateTemplate({{ $template->id }})">
                                                    <i class="fas fa-copy"></i> Duplicar
                                                </a>
                                                <a class="dropdown-item" href="#" onclick="exportTemplate({{ $template->id }})">
                                                    <i class="fas fa-download"></i> Exportar
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                @can('report-template-edit')
                                                <a class="dropdown-item" href="#" onclick="editTemplate({{ $template->id }})">
                                                    <i class="fas fa-edit"></i> Editar
                                                </a>
                                                @endcan
                                                @can('report-template-delete')
                                                <a class="dropdown-item text-danger" href="#" onclick="deleteTemplate({{ $template->id }})">
                                                    <i class="fas fa-trash"></i> Eliminar
                                                </a>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <h6 class="card-title">{{ $template->name }}</h6>
                                    <p class="card-text text-muted small">
                                        {{ Str::limit($template->description, 100) }}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="badge badge-{{ getCategoryColor($template->category) }}">
                                            {{ ucfirst($template->category) }}
                                        </span>
                                        <span class="badge badge-{{ $template->is_active ? 'success' : 'secondary' }}">
                                            {{ $template->is_active ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-footer bg-light">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            <i class="fas fa-user"></i>
                                            {{ $template->createdBy->name ?? 'Sistema' }}
                                        </small>
                                        <small class="text-muted">
                                            {{ $template->created_at->diffForHumans() }}
                                        </small>
                                    </div>
                                    @if($template->last_used_at)
                                    <div class="mt-1">
                                        <small class="text-success">
                                            <i class="fas fa-clock"></i>
                                            Usado {{ $template->last_used_at->diffForHumans() }}
                                        </small>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-12">
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-file-contract fa-3x mb-3"></i>
                                <h5>No hay plantillas disponibles</h5>
                                <p>Comience creando su primera plantilla de reporte</p>
                                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#createTemplateModal">
                                    <i class="fas fa-plus"></i> Crear Primera Plantilla
                                </button>
                            </div>
                        </div>
                        @endforelse
                    </div>

                    <!-- Paginación -->
                    @if($templates->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $templates->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear plantilla -->
<div class="modal fade" id="createTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Crear Nueva Plantilla
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="create-template-form">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">Nombre de la Plantilla</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Categoría</label>
                                <select class="form-control" id="category" name="category" required>
                                    <option value="">Seleccionar categoría</option>
                                    <option value="financial">Financiero</option>
                                    <option value="technical">Técnico</option>
                                    <option value="customer">Cliente</option>
                                    <option value="inventory">Inventario</option>
                                    <option value="system">Sistema</option>
                                    <option value="custom">Personalizado</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="type">Tipo</label>
                                <select class="form-control" id="type" name="type" required>
                                    <option value="">Seleccionar tipo</option>
                                    <option value="table">Tabla</option>
                                    <option value="chart">Gráfico</option>
                                    <option value="dashboard">Dashboard</option>
                                    <option value="export">Exportación</option>
                                    <option value="summary">Resumen</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="output_format">Formato de Salida</label>
                                <select class="form-control" id="output_format" name="output_format" required>
                                    <option value="html">HTML</option>
                                    <option value="pdf">PDF</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="json">JSON</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="description">Descripción</label>
                                <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="query_template">Consulta SQL</label>
                                <textarea class="form-control font-monospace" id="query_template" name="query_template" rows="6" placeholder="SELECT * FROM tabla WHERE condicion = :parametro"></textarea>
                                <small class="form-text text-muted">
                                    Use :parametro para valores dinámicos
                                </small>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="parameters">Parámetros (JSON)</label>
                                <textarea class="form-control font-monospace" id="parameters" name="parameters" rows="4" placeholder='{"parametro": {"type": "text", "label": "Etiqueta", "required": true}}'></textarea>
                                <small class="form-text text-muted">
                                    Defina los parámetros en formato JSON
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" checked>
                                <label class="custom-control-label" for="is_active">Plantilla activa</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="is_public" name="is_public">
                                <label class="custom-control-label" for="is_public">Plantilla pública</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="create-template-btn">
                        <i class="fas fa-save"></i> Crear Plantilla
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para vista previa -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-eye"></i> Vista Previa de Plantilla
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="preview-content">
                <!-- Vista previa se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal para generar reporte -->
<div class="modal fade" id="generateReportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-play"></i> Generar Reporte
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="generate-report-form">
                <div class="modal-body" id="generate-report-content">
                    <!-- Parámetros del reporte se cargan aquí -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="generate-report-btn">
                        <i class="fas fa-play"></i> Generar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('create-template-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const createBtn = document.getElementById('create-template-btn');
    
    createBtn.disabled = true;
    createBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
    
    fetch('{{ route("report-templates.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Plantilla creada exitosamente');
            $('#createTemplateModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al crear la plantilla'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al crear la plantilla');
    })
    .finally(() => {
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="fas fa-save"></i> Crear Plantilla';
    });
});

function applyFilters() {
    const name = document.getElementById('filter-name').value;
    const category = document.getElementById('filter-category').value;
    const type = document.getElementById('filter-type').value;
    const status = document.getElementById('filter-status').value;
    const author = document.getElementById('filter-author').value;
    
    const params = new URLSearchParams();
    if (name) params.append('name', name);
    if (category) params.append('category', category);
    if (type) params.append('type', type);
    if (status) params.append('status', status);
    if (author) params.append('author', author);
    
    window.location.href = '{{ route("report-templates.index") }}?' + params.toString();
}

function previewTemplate(templateId) {
    fetch(`/report-templates/${templateId}/preview`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const template = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Información General</h6>
                        <table class="table table-sm">
                            <tr><td><strong>Nombre:</strong></td><td>${template.name}</td></tr>
                            <tr><td><strong>Categoría:</strong></td><td><span class="badge badge-info">${template.category}</span></td></tr>
                            <tr><td><strong>Tipo:</strong></td><td><span class="badge badge-primary">${template.type}</span></td></tr>
                            <tr><td><strong>Formato:</strong></td><td>${template.output_format}</td></tr>
                            <tr><td><strong>Estado:</strong></td><td><span class="badge badge-${template.is_active ? 'success' : 'secondary'}">${template.is_active ? 'Activo' : 'Inactivo'}</span></td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Parámetros</h6>
                        <pre class="bg-light p-2 rounded small">${JSON.stringify(JSON.parse(template.parameters || '{}'), null, 2)}</pre>
                    </div>
                    <div class="col-12 mt-3">
                        <h6>Descripción</h6>
                        <p class="bg-light p-2 rounded">${template.description || 'Sin descripción'}</p>
                    </div>
                    <div class="col-12">
                        <h6>Consulta SQL</h6>
                        <pre class="bg-dark text-light p-3 rounded"><code>${template.query_template}</code></pre>
                    </div>
                </div>
            `;
            document.getElementById('preview-content').innerHTML = content;
            $('#previewModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar la vista previa');
    });
}

function generateReport(templateId) {
    fetch(`/report-templates/${templateId}/parameters`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const template = data.data.template;
            const parameters = data.data.parameters;
            
            let content = `
                <input type="hidden" name="template_id" value="${template.id}">
                <h6>Generar reporte: <strong>${template.name}</strong></h6>
                <p class="text-muted">${template.description || ''}</p>
            `;
            
            if (Object.keys(parameters).length > 0) {
                content += '<div class="form-group">';
                Object.entries(parameters).forEach(([key, param]) => {
                    content += `
                        <label for="param_${key}">${param.label || key}</label>
                        <input type="${param.type || 'text'}" 
                               class="form-control" 
                               id="param_${key}" 
                               name="parameters[${key}]" 
                               ${param.required ? 'required' : ''}
                               placeholder="${param.placeholder || ''}">
                    `;
                });
                content += '</div>';
            } else {
                content += '<p class="text-info">Esta plantilla no requiere parámetros.</p>';
            }
            
            document.getElementById('generate-report-content').innerHTML = content;
            $('#generateReportModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar los parámetros');
    });
}

document.getElementById('generate-report-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const generateBtn = document.getElementById('generate-report-btn');
    
    generateBtn.disabled = true;
    generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generando...';
    
    fetch('/report-templates/generate', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.data.url) {
                window.open(data.data.url, '_blank');
            }
            alert('Reporte generado exitosamente');
            $('#generateReportModal').modal('hide');
        } else {
            alert('Error: ' + (data.message || 'Error al generar el reporte'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al generar el reporte');
    })
    .finally(() => {
        generateBtn.disabled = false;
        generateBtn.innerHTML = '<i class="fas fa-play"></i> Generar';
    });
});

function duplicateTemplate(templateId) {
    if (confirm('¿Crear una copia de esta plantilla?')) {
        fetch(`/report-templates/${templateId}/duplicate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Plantilla duplicada exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al duplicar la plantilla'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al duplicar la plantilla');
        });
    }
}

function exportTemplate(templateId) {
    window.open(`/report-templates/${templateId}/export`, '_blank');
}

function editTemplate(templateId) {
    window.location.href = `/report-templates/${templateId}/edit`;
}

function deleteTemplate(templateId) {
    if (confirm('¿Está seguro de eliminar esta plantilla? Esta acción no se puede deshacer.')) {
        fetch(`/report-templates/${templateId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Plantilla eliminada exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al eliminar la plantilla'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar la plantilla');
        });
    }
}

function loadCategories() {
    fetch('/report-templates/categories', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Categorías:', data.data);
            // Implementar vista de categorías si es necesario
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function importTemplate() {
    // Implementar funcionalidad de importación
    alert('Funcionalidad de importación en desarrollo');
}
</script>
@endpush

@php
function getTemplateIcon($type) {
    $icons = [
        'table' => 'fa-table',
        'chart' => 'fa-chart-bar',
        'dashboard' => 'fa-tachometer-alt',
        'export' => 'fa-file-export',
        'summary' => 'fa-list-alt'
    ];
    return $icons[$type] ?? 'fa-file-alt';
}

function getCategoryColor($category) {
    $colors = [
        'financial' => 'success',
        'technical' => 'info',
        'customer' => 'primary',
        'inventory' => 'warning',
        'system' => 'danger',
        'custom' => 'secondary'
    ];
    return $colors[$category] ?? 'dark';
}
@endphp