@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-plus me-2"></i>Crear Reporte JasperReports
                    </h1>
                    <p class="text-muted mb-0">Configura un nuevo reporte JasperReports con múltiples formatos</p>
                </div>
                <div>
                    <a href="{{ route('admin.config.jasper-reports.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-cog me-2"></i>Configuración del Reporte
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.config.jasper-reports.store') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="report_name" class="form-label">Nombre del Reporte *</label>
                                    <input type="text" class="form-control @error('report_name') is-invalid @enderror" 
                                           id="report_name" name="report_name" value="{{ old('report_name') }}" required>
                                    @error('report_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="report_type" class="form-label">Tipo de Reporte *</label>
                                    <select class="form-control @error('report_type') is-invalid @enderror" 
                                            id="report_type" name="report_type" required>
                                        <option value="">Selecciona un tipo</option>
                                        @foreach($reportTypes as $key => $value)
                                            <option value="{{ $key }}" {{ old('report_type') === $key ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('report_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="report_category" class="form-label">Categoría *</label>
                                    <select class="form-control @error('report_category') is-invalid @enderror" 
                                            id="report_category" name="report_category" required>
                                        <option value="">Selecciona una categoría</option>
                                        @foreach($reportCategories as $key => $value)
                                            <option value="{{ $key }}" {{ old('report_category') === $key ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('report_category')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="jasper_file" class="form-label">Archivo .jasper</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">
                                    <small class="form-text text-muted">Nombre del archivo .jasper en la carpeta reportes-sos</small>
                                    @error('jasper_file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="jrxml_file" class="form-label">Archivo .jrxml</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 .jrxml (opcional)</small>
                                    @error('jrxml_file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Formatos de Salida *</label>
                                    <div class="form-check-group">
                                        @foreach($outputFormats as $format)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="output_formats[]" value="{{ $format }}" 
                                                       id="format_{{ $format }}"
                                                       {{ in_array($format, old('output_formats', ['PDF'])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="format_{{ $format }}">
                                                    {{ $format }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('output_formats')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="description" class="form-label">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="form-group mb-3">
                            <label for="jasper_description" class="form-label">Descripción JasperReports</label>
                            <textarea class="form-control @error('jasper_description') is-invalid @enderror" 
                                      id="jasper_description" name="jasper_description" rows="3">{{ old('jasper_description') }}</textarea>
                            <small class="form-text text-muted">Descripción específica para el reporte JasperReports</small>
                            @error('jasper_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Variables del Reporte</label>
                                    <div id="variables-container">
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control" name="variables[]" placeholder="Nombre de variable">
                                            <button type="button" class="btn btn-outline-danger" onclick="removeVariable(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addVariable()">
                                        <i class="fas fa-plus"></i> Agregar Variable
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Parámetros del Reporte</label>
                                    <div id="parameters-container">
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control" name="parameter_names[]" placeholder="Nombre del parámetro">
                                            <select class="form-control" name="parameter_types[]">
                                                <option value="String">String</option>
                                                <option value="Integer">Integer</option>
                                                <option value="Double">Double</option>
                                                <option value="Date">Date</option>
                                                <option value="Boolean">Boolean</option>
                                            </select>
                                            <button type="button" class="btn btn-outline-danger" onclick="removeParameter(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addParameter()">
                                        <i class="fas fa-plus"></i> Agregar Parámetro
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" 
                                       id="is_active" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Reporte activo
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.config.jasper-reports.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Crear Reporte
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-info-circle me-2"></i>Información
                    </h6>
                </div>
                <div class="card-body">
                    <h6>Formatos Soportados:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-file-pdf text-danger"></i> PDF - Documento PDF</li>
                        <li><i class="fas fa-file-excel text-success"></i> XLS - Excel 97-2003</li>
                        <li><i class="fas fa-file-excel text-success"></i> XLSX - Excel 2007+</li>
                        <li><i class="fas fa-file-csv text-info"></i> CSV - Valores separados por comas</li>
                        <li><i class="fas fa-file-code text-warning"></i> HTML - Página web</li>
                    </ul>

                    <hr>

                    <h6>Carpeta de Archivos:</h6>
                    <p class="small text-muted">
                        Los archivos .jasper y .jrxml deben colocarse en:<br>
                        <code>storage/app/reportes-sos/</code>
                    </p>

                    <hr>

                    <h6>Variables vs Parámetros:</h6>
                    <ul class="list-unstyled small">
                        <li><strong>Variables:</strong> Valores calculados internamente</li>
                        <li><strong>Parámetros:</strong> Valores de entrada del usuario</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function addVariable() {
        const container = document.getElementById('variables-container');
        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">
            <button type="button" class="btn btn-outline-danger" onclick="removeVariable(this)">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(div);
    }

    function removeVariable(button) {
        button.parentElement.remove();
    }

    function addParameter() {
        const container = document.getElementById('parameters-container');
        const div = document.createElement('div');
        div.className = 'input-group mb-2';
        div.innerHTML = `
            <input type="text" class="form-control" name="parameter_names[]" placeholder="Nombre del parámetro">
            <select class="form-control" name="parameter_types[]">
                <option value="String">String</option>
                <option value="Integer">Integer</option>
                <option value="Double">Double</option>
                <option value="Date">Date</option>
                <option value="Boolean">Boolean</option>
            </select>
            <button type="button" class="btn btn-outline-danger" onclick="removeParameter(this)">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(div);
    }

    function removeParameter(button) {
        button.parentElement.remove();
    }
</script>
@endpush