@extends('layouts.boxes')

@section('content')
<div class="container mt-4">
    <h2 class="mb-4">Lista de IP Distribuition</h2>
    <form method="GET" action="{{ route('ip-distribuition.index') }}" class="mb-3">
        <div class="input-group">
            <input type="text" name="search" value="{{ $request->search }}">
            <button class="btn btn-outline-primary" type="submit">
                <i class="bi bi-search"></i> Buscar
            </button>
        </div>

        {{-- 🔧 Selector para elegir cantidad de registros --}}
        <div class="d-flex align-items-center gap-2 mb-2">
            <label for="per_page" class="form-label m-0">Mostrar:</label>
            <select name="per_page" id="per_page" class="form-select w-auto" onchange="this.form.submit()">
                @foreach ([10, 25, 50, 100] as $option)
                    <option value="{{ $option }}" {{ $request->per_page == $option ? 'selected' : '' }}>
                        {{ $option }}
                    </option>
                @endforeach
            </select>
            <span>registros por página</span>
        </div>

        {{-- 🔧 Nuevo switch para mostrar solo los registros con Unit vacío --}}
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="emptyUnitSwitch"
                   name="empty_unit" value="1" {{ $request->empty_unit ? 'checked' : '' }}
                   onchange="this.form.submit()">
            <label class="form-check-label" for="emptyUnitSwitch">
                Mostrar solo Unit vacíos
            </label>
        </div>
    </form>

    <table class="table table-bordered table-striped">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>NetWork</th>
                <th>IP MKT</th>
                <th>IP Start</th>
                <th>IP End</th>
                <th>Broadcast</th>
                <th>L2TP Rou</th>
                <th>PPP account</th>
                <th>Unit</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($ips as $ip)
                <tr>
                    <td>{{ $ip->id_section }}</td>
                    <td>{{ $ip->NetWork }}</td>
                    <td>{{ $ip->Ip_mkt }}</td>
                    <td>{{ $ip->Ip_start }}</td>
                    <td>{{ $ip->Ip_end }}</td>
                    <td>{{ $ip->Broadcast }}</td>
                    <td>{{ $ip->L2TP_Rou }}</td>
                    <td>{{ $ip->Use }}</td>
                    <td>{{ $ip->Unit }}</td>
                    <td>
                        <form action="{{ route('ip-distribuition.reset', $ip->id_section) }}" method="POST" 
                              onsubmit="return confirm('¿Seguro que deseas limpiar este registro?');">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-warning">Limpiar</button>
                        </form>

                        <button type="button" class="btn btn-sm btn-dark"
                                data-bs-toggle="modal"
                                data-bs-target="#configModal"
                                data-id="{{ $ip->id_section }}"
                                data-network="{{ $ip->NetWork }}"
                                data-ip_mkt="{{ $ip->Ip_mkt }}"
                                data-ip_start="{{ $ip->Ip_start }}"
                                data-ip_end="{{ $ip->Ip_end }}"
                                data-broadcast="{{ $ip->Broadcast }}"
                                data-l2tp="{{ $ip->L2TP_Rou }}"
                                data-use="{{ $ip->Use }}"
                                data-unit="{{ $ip->Unit }}">
                            Configurar
                        </button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="text-center">No hay registros</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <div class="d-flex justify-content-center">
        {{ $ips->links() }}
    </div>
</div>

{{-- 🪟 Modal para agregar configuración --}}
<div class="modal fade" id="configModal" tabindex="-1" aria-labelledby="configModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-light">
                <h5 class="modal-title" id="configModalLabel">Agregar Configuración</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">

                {{-- Aquí se mostrarán los datos del registro seleccionado --}}
                <div id="registro-info" class="alert alert-secondary d-none"></div>

                {{-- Formulario --}}
                <form method="POST" action="{{ route('config_boxes.store') }}" target="_blank" onsubmit="recargarIndex()">
                    @csrf
                    <input type="hidden" name="registro_id" id="registro_id">

                    <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>
    </div>
</div>
{{-- JS para manejar el modal --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const switchVacios = document.getElementById('emptyUnitSwitch');
    const filas = document.querySelectorAll('#tablaIPs tbody tr');

    switchVacios.addEventListener('change', function () {
        const mostrarSoloVacios = this.checked;

        filas.forEach(fila => {
            const unit = fila.getAttribute('data-unit');
            if (mostrarSoloVacios) {
                // Ocultar filas con Unit no vacío
                if (unit && unit.trim() !== '') {
                    fila.style.display = 'none';
                } else {
                    fila.style.display = '';
                }
            } else {
                // Mostrar todas las filas
                fila.style.display = '';
            }
        });
    });

    const configModal = document.getElementById('configModal');
    configModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget;

        // Obtener datos del botón
        const id = button.getAttribute('data-id');
        const network = button.getAttribute('data-network');
        const ip_mkt = button.getAttribute('data-ip_mkt');
        const ip_start = button.getAttribute('data-ip_start');
        const ip_end = button.getAttribute('data-ip_end');
        const broadcast = button.getAttribute('data-broadcast');
        const l2tp = button.getAttribute('data-l2tp');
        const use = button.getAttribute('data-use');
        const unit = button.getAttribute('data-unit');

        // Mostrar información en el modal
        const info = `
            <h5>Datos del registro seleccionado</h5>
            <ul class="mb-0">
                <li><strong>ID:</strong> ${id}</li>
                <li><strong>Network:</strong> ${network}</li>
                <li><strong>IP Mikrotik:</strong> ${ip_mkt}</li>
                <li><strong>IP Start:</strong> ${ip_start}</li>
                <li><strong>IP End:</strong> ${ip_end}</li>
                <li><strong>Broadcast:</strong> ${broadcast}</li>
                <li><strong>L2TP Route:</strong> ${l2tp}</li>
                <li><strong>Use:</strong> ${use}</li>
                <li><strong>Unit:</strong> ${unit || 'Vacío'}</li>
            </ul>
        `;

        const infoDiv = configModal.querySelector('#registro-info');

        const unitInput = configModal.querySelector('#unidad');

        unitInput.value = unit;

        infoDiv.innerHTML = info;
        infoDiv.classList.remove('d-none');

        // Asignar el id del registro al input oculto
        document.getElementById('registro_id').value = id;
    });

    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>';
            });
    });

});

function recargarIndex() {
    setTimeout(() => window.location.reload(), 1000);
}
</script>

@endsection