<?php
session_start();

// Verificar si el usuario ha iniciado sesión
if (!isset($_SESSION["user_id"]) || !isset($_SESSION["nombre"])) {
    echo "Acceso denegado. Debes iniciar sesión.";
    exit;
}

$user_id = $_SESSION["user_id"];
$nombre = $_SESSION["nombre"];
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalle del Trabajo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    let herramientasSeleccionadas = [];

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("trabajo_id")?.addEventListener("input", buscarTrabajo);
    document.getElementById("serie_nueva_input")?.addEventListener("input", verificarSerie);
    document.getElementById("herramientaSelect")?.addEventListener("change", actualizarLimite);
});

function buscarTrabajo() {
    let id = document.getElementById("trabajo_id").value.trim();
    if (!id) return;

    fetch("buscar_trabajo.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: `id=${encodeURIComponent(id)}`
    })
    .then(res => res.json())
    .then(data => {
        if (!data.encontrado) {
            limpiarCampos(); // Llamamos a la función para limpiar el formulario
            return mostrarMensaje("Trabajo no encontrado", "error");
        }

        // Asignar valores si el trabajo existe
        ["cliente", "dni", "direccion", "cto", "tipo_servicio"].forEach(field => {
            document.getElementById(field).value = data[field] || "";
        });

        // Guardar el ID en el campo oculto
        document.getElementById("trabajo_id_hidden").value = id;

        // Mostrar los campos
        mostrarCampos();
    })
    .catch(error => console.error("Error en la búsqueda:", error));
}

// Función para limpiar todos los campos del formulario
function limpiarCampos() {
    ["cliente", "dni", "direccion", "cto", "tipo_servicio", "trabajo_id_hidden"].forEach(field => {
        document.getElementById(field).value = "";
    });
}

function mostrarCampos() {
    const tipoServicio = document.getElementById("tipo_servicio").value;
    ["serie_nueva", "serie_baja", "subir_fotos"].forEach(id => document.getElementById(id).classList.add("hidden"));
    if (tipoServicio === "CAMBIO DE ONT") {
        ["serie_nueva", "serie_baja"].forEach(id => document.getElementById(id).classList.remove("hidden"));
    } else if (["ALTA NUEVA", "RECABLEADO", "TRASLADO"].includes(tipoServicio)) {
        document.getElementById("subir_fotos").classList.remove("hidden");
    }
}

function mostrarMensaje(mensaje, tipo) {
    let msgBox = document.getElementById("mensaje");
    msgBox.textContent = mensaje;
    msgBox.className = `text-white px-4 py-2 rounded ${tipo === "error" ? "bg-red-500" : "bg-green-500"}`;
}

function verificarSerie() {
    let serieInput = document.getElementById("serie_nueva_input");
    let mensajeSerie = document.getElementById("mensaje_serie");
    let serie = serieInput.value.trim();
    if (!serie) return mensajeSerie.innerHTML = "";

    mensajeSerie.innerHTML = "Verificando...";
    mensajeSerie.className = "text-blue-500";

    fetch("verificar_serie.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: `serie=${encodeURIComponent(serie)}`
    })
    .then(res => res.json())
    .then(data => {
        let msg = data.error ? `Error: ${data.error}` : data.existe ? (data.estado === "Usado" ? "Serie usada, escoge otra" : "Serie disponible, adelante") : "Serie no registrada";
        let color = data.error || (data.existe && data.estado === "Usado") ? "red" : data.existe ? "green" : "gray";
        mensajeSerie.innerHTML = `<span class="text-${color}-500">${msg}</span>`;
        mensajeSerie.className = `text-${color}-500 font-bold`;
    })
    .catch(() => mostrarMensaje("Error al verificar la serie", "error"));
}

function actualizarLimite() {
    let select = document.getElementById("herramientaSelect");
    let cantidadInput = document.getElementById("cantidadInput");
    let max = select.options[select.selectedIndex].getAttribute("data-max");
    cantidadInput.setAttribute("max", max !== "0" ? max : "");
    cantidadInput.value = 1;
}

function agregarHerramienta() {
       event.preventDefault(); // Evita que se envíe el formulario
    let select = document.getElementById("herramientaSelect");
    let herramienta = select.value;
    let cantidad = parseInt(document.getElementById("cantidadInput").value);
    let max = select.options[select.selectedIndex].getAttribute("data-max");

    if (!herramienta || (max !== "0" && (cantidad < 1 || cantidad > max))) return alert("Cantidad inválida");

    let existente = herramientasSeleccionadas.find(h => h.nombre === herramienta);
    existente ? existente.cantidad = cantidad : herramientasSeleccionadas.push({ nombre: herramienta, cantidad });
    actualizarLista();
}

function eliminarHerramienta(index) {
    herramientasSeleccionadas.splice(index, 1);
    actualizarLista();
}

function actualizarLista() {
    let lista = document.getElementById("listaHerramientas");
    lista.innerHTML = herramientasSeleccionadas.map((h, i) => `
        <li class="flex justify-between items-center p-2 border-b">
            <span>${h.nombre} (x${h.cantidad})</span>
            <button onclick="eliminarHerramienta(${i})" class="text-red-500 hover:text-red-700">❌</button>
        </li>
    `).join("");
}

    </script>
    <script>
document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("formTrabajo").addEventListener("submit", function(event) {
        event.preventDefault();

        let formData = new FormData(this);
        formData.append("herramientas", JSON.stringify(herramientasSeleccionadas));

        fetch("guardar_trabajo.php", {
            method: "POST",
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                alert("Trabajo guardado exitosamente");
            } else {
                alert("Error al guardar");
            }
        })
        .catch(() => alert("Error en la conexión"));
    });
});


</script>
</head>
<body class="bg-gray-100 py-8 flex justify-center">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl">
        <h2 class="text-2xl font-bold text-center mb-4">Buscar Trabajo</h2>
        <div class="flex items-center gap-2 mb-4">
            <input type="text" id="trabajo_id" class="w-full border rounded px-3 py-2" placeholder="Ingrese ID del Trabajo">
                 </div>
        <div id="mensaje" class="text-center mb-4"></div>
      <form id="formTrabajo" enctype="multipart/form-data">
            <input type="" name="trabajo_id_hidden" id="trabajo_id_hidden">
             <input type="" name="user_id" id="user_id" value="<?php echo $_SESSION['user_id']; ?>">
            <label class="block">Cliente</label>
            <input type="text" id="cliente" name="cliente" readonly class="w-full border rounded px-3 py-2">
            
            <label class="block">DNI</label>
            <input type="text" id="dni" name="dni" readonly class="w-full border rounded px-3 py-2">

            <label class="block">Dirección</label>
            <input type="text" id="direccion" name="direccion" readonly class="w-full border rounded px-3 py-2">

            <label class="block">CTO</label>
            <input type="text" id="cto" name="cto" readonly class="w-full border rounded px-3 py-2">

            <label class="block">Tipo de Servicio</label>
            <select id="tipo_servicio" name="tipo_servicio" onchange="mostrarCampos()" class="w-full border rounded px-3 py-2">
                <option value="ALTA NUEVA">ALTA NUEVA</option>
                <option value="RECABLEADO">RECABLEADO</option>
                <option value="TRASLADO">TRASLADO</option>
                <option value="CAMBIO DE ONT">CAMBIO DE ONT</option>
                <option value="AVERIA">AVERIA</option>
            </select>

            <div id="serie_nueva" class="hidden">
  
        
        <div class="mb-4">
            <label class="block">Serie Nueva</label>
            <input type="text" id="serie_nueva_input" class="w-full border rounded px-3 py-2" oninput="verificarSerie()">
            <div id="mensaje_serie" class="mt-2"></div>
        </div>
    
            </div>

            <div id="serie_baja" class="hidden">
                <label class="block">Serie Baja</label>
                <input type="text" name="serie_baja" class="w-full border rounded px-3 py-2">
            </div>

            <div id="subir_fotos" class="hidden">
                <label class="block">Foto de Metraje Inicio</label>
                <input type="file" name="foto_metraje_inicio" class="w-full border rounded px-3 py-2">
                <label class="block">Metraje de Inicio</label>
                <input type="number" name="metraje_inicio" class="w-full border rounded px-3 py-2">

                <label class="block">Foto de Metraje Término</label>
                <input type="file" name="foto_metraje_termino" class="w-full border rounded px-3 py-2">
                <label class="block">Metraje de Término</label>
                <input type="number" name="metraje_termino" class="w-full border rounded px-3 py-2">
            </div>

            <label class="block">Comentario</label>
            <textarea name="comentario" class="w-full border rounded px-3 py-2"></textarea>

             <label class="block">Número de Boleta</label>
            <input type="text" name="n_boleta" class="w-full border rounded px-3 py-2">

            <label class="block">Foto de la Boleta</label>
            <input type="file" name="foto_boleta" class="w-full border rounded px-3 py-2">
 <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl">
        <h2 class="text-2xl font-bold text-center mb-4">Gestión de Ferretería</h2>

        <div class="mb-4">
            <label class="block font-bold">Seleccionar herramienta:</label>
            <select id="herramientaSelect" class="w-full border rounded px-3 py-2" onchange="actualizarLimite()">
                <option value="">-- Seleccione --</option>
                <option value="Conectores SC/APC" data-max="2">Conectores SC/APC</option>
                <option value="Patch Cord" data-max="0">Patch Cord</option>
                <option value="Roseta Óptica" data-max="2">Roseta Óptica</option>
                <option value="Cinta Doble Contacto" data-max="0">Cinta Doble Contacto</option>
                <option value="Clevys (Portalínea + Aislador)" data-max="0">Clevys (Portalínea + Aislador)</option>
                <option value="Hebillas" data-max="0">Hebillas</option>
                <option value="Cinta Banding" data-max="1">Cinta Banding</option>
                <option value="Tarugos" data-max="0">Tarugos</option>
                <option value="Anclaje Tipo P" data-max="1">Anclaje Tipo P</option>
                <option value="Cintillo Rotulador" data-max="0">Cintillo Rotulador</option>
                <option value="Templadores Tipo P" data-max="0">Templadores Tipo P</option>
                <option value="Cintillo Num 20" data-max="0">Cintillo Num 20</option>
                <option value="Grapas" data-max="0">Grapas</option>
                <option value="Cinta Aislante" data-max="0">Cinta Aislante</option>
            </select>
        </div>

        <div class="mb-4">
            <label class="block font-bold">Cantidad:</label>
            <input type="number" id="cantidadInput" class="w-full border rounded px-3 py-2" min="1" value="1">
        </div>

        <button onclick="agregarHerramienta()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">
            Agregar
        </button>

        <h3 class="text-xl font-bold mt-6">Lista de Herramientas</h3>
        <ul id="listaHerramientas" class="mt-4"></ul>
            <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Guardar</button>
        </form>
    </div>
</body>
</html>
