@extends('layouts.boxes')

@section('content')
<div class="card my-4">

    <div class="card-header bg-dark text-light">
        <a class="navbar-brand" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
            Agregar Configuración
        </a>
    </div>
    <div class="card-body">

        {{-- Mostrar información del registro obtenido --}}
        @if($registro)
            <div class="alert alert-secondary">
                <h5>Datos del registro seleccionado</h5>
                <ul class="mb-0">
                    <li><strong>ID:</strong> {{ $registro->id_section }}</li>
                    <li><strong>Network:</strong> {{ $registro->NetWork }}</li>
                    <li><strong>IP Mikrotik:</strong> {{ $registro->Ip_mkt }}</li>
                    <li><strong>IP Start:</strong> {{ $registro->Ip_start }}</li>
                    <li><strong>IP End:</strong> {{ $registro->Ip_end }}</li>
                    <li><strong>Broadcast:</strong> {{ $registro->Broadcast }}</li>
                    <li><strong>L2TP Route:</strong> {{ $registro->L2TP_Rou }}</li>
                    <li><strong>Use:</strong> {{ $registro->Use }}</li>
                    <li><strong>Unit:</strong> {{ $registro->Unit ?? 'Vacío' }}</li>
                </ul>
            </div>
        @else
            <div class="alert alert-warning">
                No se encontró ningún registro con <code>Unit</code> vacío.
            </div>
        @endif

        {{-- Formulario --}}
        <form method="post" action="{{ route('config_boxes.store') }}" target="_blank" onsubmit="recargarIndex()">
            @csrf

            {{-- Campo de texto para nombre de la unidad --}}
            <input type="hidden" name="registro_id" value="{{ $registro->id_section }}">
            <div class="form-group mb-3">
                <label for="unidad">Nombre de la Unidad:</label>
                <input type="text" class="form-control" name="unidad" id="unidad" required>
            </div>

            {{-- Select de modelos mikrotik --}}
            <div class="form-group mb-3">
                <label for="mikrotik_id">Seleccionar el modelo:</label>
                <select class="form-control" name="mikrotik_id" id="mikrotik_id" required>
                    <option value="">-- Selecciona un modelo --</option>
                    @foreach($mikrotiks as $mikrotik)
                        <option value="{{ $mikrotik->id }}">
                            {{ $mikrotik->nombre ?? 'Mikrotik '.$mikrotik->id }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Select con templates --}}
            <div class="form-group mb-3">
                <label for="template_id">Seleccionar Template:</label>
                <select class="form-control" name="template_id" id="template_id" required>
                    <option value="">-- Selecciona un template --</option>
                </select>
            </div>

            <button type="submit" class="btn btn-dark">Generar Archivo</button>
        </form>
    </div>
</div>
<script>
function recargarIndex() {
    // Esperar un poco para dar tiempo a que el archivo se genere
    setTimeout(() => {
        window.location.reload();
    }, 1000); // 1 segundo de delay
}

document.addEventListener('DOMContentLoaded', function () {
    const mikrotikSelect = document.getElementById('mikrotik_id');
    const templateSelect = document.getElementById('template_id');

    mikrotikSelect.addEventListener('change', function () {
        const mikrotikId = this.value;
        templateSelect.innerHTML = '<option value="">Cargando...</option>';

        if (!mikrotikId) {
            templateSelect.innerHTML = '<option value="">-- Selecciona un template --</option>';
            return;
        }

        fetch(`/templates/${mikrotikId}`)
            .then(response => response.json())
            .then(data => {
                templateSelect.innerHTML = '<option value="">-- Selecciona un template --</option>';
                data.forEach(template => {
                    const option = document.createElement('option');
                    option.value = template.id;
                    option.textContent = template.nombre;
                    templateSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error cargando templates:', error);
                templateSelect.innerHTML = '<option value="">Error al cargar</option>';
            });
    });
});
</script>
@endsection