@extends('layouts.app')
@section('titulo','Crear/Subir 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="row">
    <!-- Crear Central Manualmente -->
    <div class="col-md-6">
        <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>Crear Central Manualmente
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('revision.centrales.store', $revision->id) }}" method="POST">
                    @csrf
                    <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 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>
                        <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Subir Central desde Archivo -->
    <div class="col-md-6">
        <div class="card border-0">
            <div class="card-header">
                <h5 class="card-title my-0 py-3 px-1">
                    <i class="fas fa-upload me-2"></i>Subir Central desde Archivo
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('revision.centrales.store', $revision->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <!-- Selector de Tipo de Script -->
                    <div class="mb-3">
                        <label class="form-label">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">
                            El script determina cómo se procesará el archivo de la central
                        </div>
                    </div>
                    
                    <!-- Selector de Tipo de Central -->
                    <div class="mb-3">
                        <label class="form-label">Tipo de Central</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="tipo_central" id="tipo_local" value="local" checked>
                            <label class="form-check-label" for="tipo_local">
                                <i class="fa-solid fa-server"></i> Local
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="tipo_central" id="tipo_red" value="red">
                            <label class="form-check-label" for="tipo_red">
                                <i class="fa-solid fa-network-wired"></i> En Red
                            </label>
                        </div>
                    </div>
                    
                    <!-- Selector de Archivo - Versión Flexible -->
                    <div class="mb-3">
                        <label class="form-label">Archivo de Central</label>
                        <div class="input-group">
                            <input type="file" class="form-control" name="archivo_central" 
                                   id="archivo_central"
                                   required>
                            <button class="btn btn-outline-secondary" type="button" id="btn_buscar">
                                <i class="fas fa-folder-open"></i> Buscar
                            </button>
                        </div>
                        <div class="form-text">
                            <strong>Formatos soportados:</strong><br>
                            • <strong>.mdb</strong> - Archivos de Microsoft Access<br>
                            • <strong>.accdb</strong> - Archivos de Microsoft Access (nuevo formato)<br>
                            • <strong>.csv</strong> - Archivos de texto separado por comas<br>
                            • <strong>.xlsx, .xls</strong> - Archivos de Microsoft Excel<br>
                            <small class="text-muted">Esta versión permite seleccionar cualquier archivo. La validación se realizará en el servidor.</small>
                        </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>
                        <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                    </div>
                </form>

                <!-- Plantilla de Ejemplo -->
                <div class="mt-3">
                    <div class="alert alert-light">
                        <h6 class="mb-2">
                            <i class="fas fa-download me-2"></i>Plantilla de Ejemplo
                        </h6>
                        <p class="small text-muted mb-2">
                            Descarga la plantilla para ver el formato requerido
                        </p>
                        <a href="#" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-download"></i> Descargar Plantilla CSV
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
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');
    const btnBuscar = document.getElementById('btn_buscar');
    
    // Botón de búsqueda
    btnBuscar.addEventListener('click', function(e) {
        e.preventDefault();
        fileInput.click();
    });
    
    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 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;
            }
            
            // Mostrar advertencia si no es un formato esperado
            const allowedExtensions = ['.mdb', '.accdb', '.csv', '.xlsx', '.xls'];
            const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
            
            if (!allowedExtensions.includes(fileExtension)) {
                const confirmar = confirm('El archivo seleccionado no es uno de los formatos recomendados (.mdb, .accdb, .csv, .xlsx, .xls). ¿Deseas continuar de todas formas?');
                if (!confirmar) {
                    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