<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario Técnico</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f0f0f0; }
        .form-container {
            max-width: 800px; background: white; padding: 20px; border-radius: 10px;
            margin: 30px auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group { margin-bottom: 15px; }
        label { font-weight: bold; display: block; margin-bottom: 5px; }
        input, select, button {
            width: 100%; padding: 8px; border: 1px solid #ccc;
            border-radius: 5px;
        }
        .device-fields { display: none; margin-top: 10px; }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Registro de Herramientas y Dispositivos</h2>

        <form id="formRegistro" action="registrar.php" method="POST">
            <!-- Técnico -->
         <div class="form-group">
    <label for="tecnico">Técnico (Nombre o DNI):</label>
    <input type="text" id="tecnico" name="tecnico" placeholder="Escriba el nombre o DNI del técnico" required oninput="buscarTecnico()">
    <ul id="resultadoBusqueda" style="display: none;"></ul> <!-- Sugerencias -->
</div>

            <!-- Herramientas -->
            <div class="form-group">
                <label>Herramientas (puedes seleccionar varias):</label>
                <div id="herramientasContainer">
                    <div class="herramienta">
                        <select name="herramientas[]">
                            <option value="Conectores SC/APC">Conectores SC/APC</option>
                            <option value="Roseta Óptica">Roseta Óptica</option>
                            <option value="Patch Cord">Patch Cord</option>
                            <option value="Cintillo">Cintillo</option>
                        </select>
                        <input type="number" name="cantidades[]" placeholder="Cantidad" min="1" required>
                    </div>
                </div>
                <button type="button" onclick="agregarHerramienta()">+ Agregar Herramienta</button>
            </div>

            <!-- Tipo de Dispositivo -->
            <div class="form-group">
                <label for="tipoDispositivo">Tipo de Dispositivo:</label>
                <select id="tipoDispositivo" name="tipoDispositivo" required onchange="mostrarCampos()">
                    <option value="">-- Selecciona --</option>
                    <option value="ont">ONT</option>
                    <option value="metch">METCH</option>
                </select>
            </div>

            <!-- Campos ONT -->
            <div id="camposONT" class="device-fields">
                <div class="form-group">
                    <label for="serie1_ont">Serie 1:</label>
                    <input type="text" name="serie1_ont">
                </div>
                <div class="form-group">
                    <label for="serie2_ont">Serie 2:</label>
                    <input type="text" name="serie2_ont">
                </div>
                <div class="form-group">
                    <label for="tipo_ont">Tipo de ONT:</label>
                    <input type="text" name="tipo_ont" placeholder="Ej. Huawei, ZTE">
                </div>
            </div>

            <!-- Campos METCH -->
            <div id="camposMETCH" class="device-fields">
                <div class="form-group">
                    <label for="serie1_metch">Serie 1:</label>
                    <input type="text" name="serie1_metch">
                </div>
            </div>

            <button type="submit">Registrar</button>
        </form>
    </div>

    <script>
        function buscarTecnico() {
    const query = document.getElementById("tecnico").value;

    // Si no hay texto, no hacer la búsqueda
    if (query.length < 3) {
        document.getElementById("resultadoBusqueda").style.display = 'none';
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "user.php?q=" + query, true);
    xhr.onload = function() {
        if (xhr.status == 200) {
            const resultados = JSON.parse(xhr.responseText);
            const resultadoDiv = document.getElementById("resultadoBusqueda");

            if (resultados.length > 0) {
                resultadoDiv.innerHTML = "";
                resultados.forEach(tecnico => {
                    const li = document.createElement("li");
                    li.textContent = tecnico.nombres + " - " + tecnico.numero_documento;
                    li.onclick = function() {
                        document.getElementById("tecnico").value = tecnico.nombres + " - " + tecnico.numero_documento;
                        document.getElementById("resultadoBusqueda").style.display = 'none';
                    };
                    resultadoDiv.appendChild(li);
                });
                resultadoDiv.style.display = 'block';
            } else {
                resultadoDiv.innerHTML = "<li>No se encontraron resultados</li>";
                resultadoDiv.style.display = 'block';
            }
        }
    };
    xhr.send();
}

        function agregarHerramienta() {
            const container = document.getElementById('herramientasContainer');
            const div = document.createElement('div');
            div.className = 'herramienta';
            div.innerHTML = `
                <select name="herramientas[]">
                    <option value="Conectores SC/APC">Conectores SC/APC</option>
                    <option value="Roseta Óptica">Roseta Óptica</option>
                    <option value="Patch Cord">Patch Cord</option>
                    <option value="Cintillo">Cintillo</option>
                </select>
                <input type="number" name="cantidades[]" placeholder="Cantidad" min="1" required>
            `;
            container.appendChild(div);
        }

        function mostrarCampos() {
            const tipo = document.getElementById('tipoDispositivo').value;
            document.getElementById('camposONT').style.display = tipo === 'ont' ? 'block' : 'none';
            document.getElementById('camposMETCH').style.display = tipo === 'metch' ? 'block' : 'none';
        }
    </script>
</body>
</html>
