@extends('layouts.app')

@section('title', 'Crear Reporte Jasper')

@section('content')
<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-plus"></i> Crear Nuevo Reporte Jasper
                    </h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.reports.jasper.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">Nombre del Reporte <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="report_type">Tipo de Reporte <span class="text-danger">*</span></label>
                                    <select class="form-control @error('report_type') is-invalid @enderror" 
                                            id="report_type" name="report_type" required>
                                        <option value="">Seleccionar tipo...</option>
                                        @foreach($reportTypes as $key => $label)
                                            <option value="{{ $key }}" {{ old('report_type') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('report_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Descripción</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="jasper_file">Archivo .jasper <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('jasper_file') is-invalid @enderror" 
                                           id="jasper_file" name="jasper_file" value="{{ old('jasper_file') }}" 
                                           placeholder="ejemplo: reporte_inventario.jasper" required>
                                    <small class="form-text text-muted">
                                        Nombre del archivo .jasper compilado en la carpeta reportes-sos
                                    </small>
                                    @error('jasper_file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="jrxml_file">Archivo .jrxml (Opcional)</label>
                                    <input type="text" class="form-control @error('jrxml_file') is-invalid @enderror" 
                                           id="jrxml_file" name="jrxml_file" value="{{ old('jrxml_file') }}" 
                                           placeholder="ejemplo: reporte_inventario.jrxml">
                                    <small class="form-text text-muted">
                                        Nombre del archivo fuente .jrxml (opcional)
                                    </small>
                                    @error('jrxml_file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Variables del Reporte -->
                        <div class="form-group">
                            <label>Variables del Reporte</label>
                            <div id="variablesContainer">
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" name="variables[]" placeholder="Nombre de variable">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-danger" onclick="removeVariable(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addVariable()">
                                <i class="fas fa-plus"></i> Agregar Variable
                            </button>
                            <small class="form-text text-muted">
                                Variables que usa el reporte (ej: fecha_inicio, fecha_fin, usuario_id, etc.)
                            </small>
                        </div>

                        <!-- Parámetros del Reporte -->
                        <div class="form-group">
                            <label>Parámetros del Reporte</label>
                            <div id="parametersContainer">
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" name="param_names[]" placeholder="Nombre del parámetro">
                                    </div>
                                    <div class="col-md-4">
                                        <select class="form-control" name="param_types[]">
                                            <option value="String">String</option>
                                            <option value="Integer">Integer</option>
                                            <option value="Double">Double</option>
                                            <option value="Boolean">Boolean</option>
                                            <option value="Date">Date</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" class="form-control" name="param_defaults[]" placeholder="Valor por defecto">
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-outline-danger btn-block" onclick="removeParameter(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addParameter()">
                                <i class="fas fa-plus"></i> Agregar Parámetro
                            </button>
                            <small class="form-text text-muted">
                                Parámetros que acepta el reporte con sus tipos y valores por defecto
                            </small>
                        </div>

                        <!-- Formatos de Salida -->
                        <div class="form-group">
                            <label>Formatos de Salida</label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="output_formats[]" value="pdf" id="format_pdf" checked>
                                        <label class="form-check-label" for="format_pdf">PDF</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="output_formats[]" value="xls" id="format_xls">
                                        <label class="form-check-label" for="format_xls">Excel (XLS)</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="output_formats[]" value="xlsx" id="format_xlsx">
                                        <label class="form-check-label" for="format_xlsx">Excel (XLSX)</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="output_formats[]" value="csv" id="format_csv">
                                        <label class="form-check-label" for="format_csv">CSV</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="output_formats[]" value="html" id="format_html">
                                        <label class="form-check-label" for="format_html">HTML</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Opciones -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" checked>
                                        <label class="form-check-label" for="is_active">Reporte Activo</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_default" id="is_default">
                                        <label class="form-check-label" for="is_default">Reporte por Defecto</label>
                                    </div>
                                    <small class="form-text text-muted">
                                        Solo puede haber un reporte por defecto por tipo
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Crear Reporte
                            </button>
                            <a href="{{ route('admin.reports.jasper.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function addVariable() {
    const container = document.getElementById('variablesContainer');
    const div = document.createElement('div');
    div.className = 'input-group mb-2';
    div.innerHTML = `
        <input type="text" class="form-control" name="variables[]" placeholder="Nombre de variable">
        <div class="input-group-append">
            <button type="button" class="btn btn-outline-danger" onclick="removeVariable(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(div);
}

function removeVariable(button) {
    button.closest('.input-group').remove();
}

function addParameter() {
    const container = document.getElementById('parametersContainer');
    const div = document.createElement('div');
    div.className = 'row mb-2';
    div.innerHTML = `
        <div class="col-md-4">
            <input type="text" class="form-control" name="param_names[]" placeholder="Nombre del parámetro">
        </div>
        <div class="col-md-4">
            <select class="form-control" name="param_types[]">
                <option value="String">String</option>
                <option value="Integer">Integer</option>
                <option value="Double">Double</option>
                <option value="Boolean">Boolean</option>
                <option value="Date">Date</option>
            </select>
        </div>
        <div class="col-md-3">
            <input type="text" class="form-control" name="param_defaults[]" placeholder="Valor por defecto">
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-outline-danger btn-block" onclick="removeParameter(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(div);
}

function removeParameter(button) {
    button.closest('.row').remove();
}

// Procesar formulario antes de enviar
document.querySelector('form').addEventListener('submit', function(e) {
    // Procesar parámetros
    const paramNames = document.querySelectorAll('input[name="param_names[]"]');
    const paramTypes = document.querySelectorAll('select[name="param_types[]"]');
    const paramDefaults = document.querySelectorAll('input[name="param_defaults[]"]');
    
    const parameters = {};
    for (let i = 0; i < paramNames.length; i++) {
        if (paramNames[i].value.trim()) {
            parameters[paramNames[i].value.trim()] = {
                type: paramTypes[i].value,
                default: paramDefaults[i].value.trim()
            };
        }
    }
    
    // Crear input hidden para parámetros
    const paramsInput = document.createElement('input');
    paramsInput.type = 'hidden';
    paramsInput.name = 'parameters';
    paramsInput.value = JSON.stringify(parameters);
    this.appendChild(paramsInput);
});
</script>
@endpush