@extends('layouts.app')
@section('titulo','Nueva Central')

@section('ruta')
<div class="mb-3 my-2 small">
    <h6> <a href="{{route('revision.index')}}">Revisiones</a> > <a href="{{route('revision.show',$revision->id)}}">Revisión en {{$revision->lugar->nombre}}</a> > @yield('titulo')</h6>
</div>
@endsection

@section('contenido1')
<div class="card border-0">
    <div class="card-header">
        <h5 class="card-title my-0 py-3 px-1">
            <i class="fas fa-plus-circle me-2"></i>@yield('titulo')
        </h5>
    </div>
    <div class="card-body">
        
        <!-- Selección del método -->
        <div id="metodo-seleccion" class="text-center mb-4">
            <h6 class="mb-3">¿Cómo quieres añadir la central?</h6>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="btn-group w-100" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="seleccionarMetodo('manual')">
                            <i class="fas fa-edit me-2"></i>Crear Manualmente
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="seleccionarMetodo('archivo')">
                            <i class="fas fa-upload me-2"></i>Subir desde Archivo
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Formulario Manual -->
        <div id="formulario-manual" style="display: none;">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>Crear central manualmente
                <button type="button" class="btn-close float-end" onclick="volverSeleccion()"></button>
            </div>
            
            <form action="{{ route('revision.centrales.store', $revision->id) }}" method="POST">
                @csrf
                <input type="hidden" name="metodo" value="manual">
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" required>
                            <label for="nombre">Nombre de la Central</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <textarea class="form-control" id="notas" name="notas" placeholder="Notas" style="height: 58px;"></textarea>
                            <label for="notas">Notas (opcional)</label>
                        </div>
                    </div>
                </div>

                <div class="form-check mb-3">
                    <input type="checkbox" class="form-check-input" id="en_red" name="en_red" value="1">
                    <label class="form-check-label" for="en_red">
                        <i class="fa-solid fa-network-wired"></i> ¿La central está conectada en red?
                    </label>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Crear Central
                    </button>
                    <button type="button" class="btn btn-secondary" onclick="volverSeleccion()">
                        <i class="fas fa-arrow-left"></i> Volver
                    </button>
                    <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>

        <!-- Formulario Archivo -->
        <div id="formulario-archivo" style="display: none;">
            <div class="alert alert-success">
                <i class="fas fa-upload me-2"></i>Subir central desde archivo
                <button type="button" class="btn-close float-end" onclick="volverSeleccion()"></button>
            </div>
            
            <form action="{{ route('revision.centrales.store', $revision->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="metodo" value="archivo">
                
                <!-- Selector de Script -->
                <div class="mb-3">
                    <label class="form-label">
                        <i class="fas fa-code me-2"></i>Script de Procesamiento
                    </label>
                    <select class="form-select" name="tipo_script" required>
                        <option value="">Selecciona el script de procesamiento</option>
                        @foreach($scripts as $script)
                            <option value="{{ $script['value'] }}" title="{{ $script['description'] }}">
                                {{ $script['name'] }} - {{ $script['description'] }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">
                        <i class="fas fa-info-circle"></i> El script determina cómo se procesará el archivo de la central
                    </div>
                </div>
                
                <!-- Selector de Archivo -->
                <div class="mb-3">
                    <label class="form-label">
                        <i class="fas fa-file me-2"></i>Archivo de Central
                    </label>
                    <div class="input-group">
                        <input type="file" class="form-control" name="archivo_central" 
                               id="archivo_central"
                               accept=".mdb,.accdb,.csv,.xlsx,.xls" 
                               required>
                        <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('archivo_central').click()">
                            <i class="fas fa-folder-open"></i> Buscar
                        </button>
                    </div>
                    <div class="form-text">
                        <strong>Formatos soportados:</strong> .mdb, .accdb, .csv, .xlsx, .xls
                    </div>
                    <div id="archivo_info" class="mt-2" style="display: none;">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <span id="archivo_nombre"></span>
                            <br>
                            <small id="archivo_tamaño"></small>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-upload"></i> Subir Central
                    </button>
                    <button type="button" class="btn btn-secondary" onclick="volverSeleccion()">
                        <i class="fas fa-arrow-left"></i> Volver
                    </button>
                    <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function seleccionarMetodo(metodo) {
    // Ocultar la selección
    document.getElementById('metodo-seleccion').style.display = 'none';
    
    // Mostrar el formulario correspondiente
    if (metodo === 'manual') {
        document.getElementById('formulario-manual').style.display = 'block';
        document.getElementById('formulario-archivo').style.display = 'none';
    } else if (metodo === 'archivo') {
        document.getElementById('formulario-archivo').style.display = 'block';
        document.getElementById('formulario-manual').style.display = 'none';
    }
}

function volverSeleccion() {
    // Mostrar la selección
    document.getElementById('metodo-seleccion').style.display = 'block';
    
    // Ocultar ambos formularios
    document.getElementById('formulario-manual').style.display = 'none';
    document.getElementById('formulario-archivo').style.display = 'none';
}

// Funcionalidad del archivo
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('archivo_central');
    const fileInfo = document.getElementById('archivo_info');
    const fileName = document.getElementById('archivo_nombre');
    const fileSize = document.getElementById('archivo_tamaño');
    
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Mostrar información del archivo
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.style.display = 'block';
                
                // Validar extensión
                const allowedExtensions = ['.mdb', '.accdb', '.csv', '.xlsx', '.xls'];
                const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
                
                if (!allowedExtensions.includes(fileExtension)) {
                    alert('Formato de archivo no soportado. Por favor, selecciona un archivo .mdb, .accdb, .csv, .xlsx o .xls');
                    fileInput.value = '';
                    fileInfo.style.display = 'none';
                    return;
                }
                
                // Validar tamaño (máximo 10MB)
                const maxSize = 10 * 1024 * 1024; // 10MB
                if (file.size > maxSize) {
                    alert('El archivo es demasiado grande. El tamaño máximo permitido es 10MB');
                    fileInput.value = '';
                    fileInfo.style.display = 'none';
                    return;
                }
            } else {
                fileInfo.style.display = 'none';
            }
        });
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
});
</script>
@endsection