<?php
session_start();

if (!isset($_SESSION['usuario'])) {
    header("Location: st_acceso.php");
    exit;
}

ini_set('display_errors', 1);
error_reporting(E_ALL);

require_once('st_conexion.php');

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
    die("Error de conexión: " . $e->getMessage());
}

// timezone
date_default_timezone_set('America/Santiago');

// Fecha y hora automáticas
$fechaHoy = date("Y-m-d");
$horaAhora = date("H:i");

// Usuario conectado
$usuarioSis = $_SESSION['usuario'];

/* ============================
   OBTENER NOMBRE REAL DEL USUARIO
=============================*/
$sqlUser = "SELECT NOMBRE, APELLIDO_PATERNO 
            FROM HE_USUARIOS 
            WHERE USUARIO_SIS = :usr";
$stmtUser = $pdo->prepare($sqlUser);
$stmtUser->execute(['usr' => $usuarioSis]);
$usr = $stmtUser->fetch();

$usuarioNombreMostrar = $usr
    ? ($usr['NOMBRE'] . ' ' . $usr['APELLIDO_PATERNO'])
    : $usuarioSis;

/* ============================
   DATOS PARA PRÉSTAMO
=============================*/
$sqlEntrega = "SELECT ID_USUARIO, NOMBRE, APELLIDO_PATERNO 
               FROM HE_USUARIOS
               WHERE USUARIO_SIS = :usr";
$stmtEntrega = $pdo->prepare($sqlEntrega);
$stmtEntrega->execute(['usr' => $usuarioSis]);
$usrEntrega = $stmtEntrega->fetch();

if (!$usrEntrega) {
    die("Error: Usuario del sistema no encontrado en HE_USUARIOS.");
}

$usuarioEntregaId = $usrEntrega['ID_USUARIO'];
$usuarioEntregaNombre = $usrEntrega['NOMBRE'] . ' ' . $usrEntrega['APELLIDO_PATERNO'];

// Usuarios receptores
$sqlUsuarios = "
    SELECT U.ID_USUARIO, U.RUT, U.NOMBRE, U.APELLIDO_PATERNO, U.APELLIDO_MATERNO
    FROM HE_USUARIOS U
    INNER JOIN HE_EMPRESA E ON U.RUT_EMPRESA = E.RUT
    WHERE E.TIPO = 1
      AND U.PRESTAMO = 1
      AND U.ESTADO = 1
      AND U.ID_USUARIO <> :idEntrega
    ORDER BY U.APELLIDO_PATERNO ASC
";
$stmtUsuarios = $pdo->prepare($sqlUsuarios);
$stmtUsuarios->execute(['idEntrega' => $usuarioEntregaId]);
$usuariosReceptores = $stmtUsuarios->fetchAll();

// Tipos
$stmtTipo = $pdo->query("SELECT ID_TIPO, NOMBRE FROM HE_TIPO ORDER BY NOMBRE ASC");
$tipos = $stmtTipo->fetchAll();

// Productos disponibles
$stmtProd = $pdo->query("
    SELECT CLAVE, NOMBRE, COALESCE(DESCRIPCION,'') AS DESCRIPCION,
           COALESCE(SERIE,'') AS SERIE, ID_TIPO
    FROM HE_MAESTRO
    WHERE COALESCE(ESTADO_INV,0) = 5
    ORDER BY CLAVE ASC
");
$productos = $stmtProd->fetchAll();

$jsonTipos = json_encode($tipos, JSON_UNESCAPED_UNICODE);
$jsonProductos = json_encode($productos, JSON_UNESCAPED_UNICODE);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Préstamo</title>
    <link rel="icon" href="Iconos/rf_icono_vineta.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Helvetica', sans-serif;
    background-color: #f3f4f8;
    color: #333;
}

/* Campo informativo */
.info-field {
    background: #eef3ff;
    color: #003a91;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #8aa8e6;
    display: inline-block;
}

/* TOPBAR */
.topbar {
    width: 100%;
    background-color: #1D3C7D;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    z-index: 1000;
    height: 50px;
}
.topbar .title { position: absolute; left: 20px; font-size: 20px; }
.topbar .logout { position: absolute; right: 20px; }
.topbar .logout button {
    display: flex; align-items: center; gap: 6px;
    background: #bd0909; color: white;
    border: none; padding: 6px 14px; border-radius: 6px;
    font-size: 13px; cursor: pointer;
}
.topbar .logout button:hover { background-color: red; }
.topbar .logout img { width: 30px; height: 30px; }

/* Containers */
.container{ max-width:1200px; margin:100px auto 40px; }
.card{
    background:#fff; padding:18px;
    border-radius:10px;
    box-shadow:0 6px 12px rgba(0,0,0,0.12);
    margin-bottom:18px;
}

/* Table */
table{ width:100%; border-collapse:collapse; }
th,td{ padding:8px; border:1px solid #ddd; font-size:13px; }
th{ background:#0c4896; color:#fff; }

/* Inputs */
select,input,textarea{
    padding:7px; border:1px solid #bbb;
    border-radius:6px; width:100%; font-size:13px;
}

/* Botones */
.btn{
    background:green; color:white; border:none;
    padding:8px 12px; border-radius:6px; cursor:pointer;
}
.btn-red{
    background:#b71c1c; color:white; border:none;
    padding:8px 12px; border-radius:6px; cursor:pointer;
}

/* Modal */
#modalResumen {
    position: fixed; top:0; left:0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-box {
    background:white; width:550px;
    padding:20px; border-radius:10px;
    box-shadow:0 5px 14px rgba(0,0,0,0.3);
    max-height:80%; overflow-y:auto;
}
</style>
</head>

<body>

<div class="topbar">
    <div class="title">StockTools</div>

    <div class="user-info">
        Bienvenido, <?= htmlspecialchars($usuarioNombreMostrar) ?>
    </div>

    <div class="logout">
        <button onclick="location.href='st_logout.php'">
            <img src="Iconos/st_icono_salir.png"> Cerrar Sesión
        </button>
    </div>
</div>

<div class="container">

<form action="st_prestamo_graba.php" method="POST" id="formPrestamo">

    <div class="card">
        <h3>Datos del Préstamo</h3>
        <table>
            <tr>
                <td><strong>Usuario que entrega</strong></td>
                <td>
                    <span class="info-field"><?= htmlspecialchars($usuarioEntregaNombre) ?></span>
                    <input type="hidden" name="id_usuario_entrega" value="<?= $usuarioEntregaId ?>">
                </td>

                <td><strong>Fecha y hora inicio</strong></td>
                <td>
                    <span class="info-field"><?= $fechaHoy . ' ' . $horaAhora ?></span>
                    <input type="hidden" name="fecha_inicio" value="<?= $fechaHoy ?>">
                    <input type="hidden" name="hora_inicio" value="<?= $horaAhora ?>">
                </td>
            </tr>

            <tr>
                <td><strong>Usuario que recibe</strong></td>
                <td>
                    <select name="id_usuario_recibe" required>
                        <option value="">-- Seleccione Usuario --</option>
                        <?php foreach($usuariosReceptores as $u): ?>
                            <option value="<?= $u['ID_USUARIO'] ?>">
                                <?= htmlspecialchars($u['RUT'] . " - " .
                                $u['APELLIDO_PATERNO'] . " " .
                                $u['APELLIDO_MATERNO'] . " " .
                                $u['NOMBRE']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </td>

                <td><strong>Nota</strong></td>
                <td><textarea name="nota" rows="2"></textarea></td>
            </tr>
        </table>
    </div>

    <div class="card">
        <h3>Detalle de Herramientas</h3>

        <div style="display:flex; gap:12px;">
            <div style="flex:1">
                <label><strong>Tipo</strong></label>
                <select id="selTipo">
                    <option value="">-- Tipo --</option>
                    <?php foreach($tipos as $t): ?>
                        <option value="<?= $t['ID_TIPO'] ?>"><?= htmlspecialchars($t['NOMBRE']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div style="flex:2">
                <label><strong>Herramienta</strong></label>
                <select id="selProducto">
                    <option value="">-- Herramienta --</option>
                </select>
            </div>

            <div style="align-self:flex-end">
                <button type="button" class="btn" id="btnAgregar">Agregar</button>
            </div>
        </div>

        <br>

        <table>
            <thead>
                <tr>
                    <th>CLAVE | NOMBRE | DESCRIPCIÓN | SERIE</th>
                    <th>NOTA ENTREGA</th>
                    <th>ACCIONES</th>
                </tr>
            </thead>
            <tbody id="detalleBody"></tbody>
        </table>

    </div>

    <div style="text-align:center; margin-top:12px;">
        <button type="submit" class="btn">Guardar Préstamo</button>
        <button type="button" class="btn-red" onclick="volverMenu()">Volver</button>
    </div>

</form>
</div>

<!-- MODAL -->
<div id="modalResumen">
    <div class="modal-box">
        <h2>Confirmar Préstamo</h2>
        <hr><br>
        <div id="contenidoResumen"></div>
        <br>
        <div style="text-align:center;">
            <button id="btnConfirmar" class="btn">Confirmar</button>
            <button id="btnCancelar" class="btn-red">Cancelar</button>
        </div>
    </div>
</div>

<script>
const tipos = <?= $jsonTipos ?>;
const productos = <?= $jsonProductos ?>;

const selTipo = document.getElementById('selTipo');
const selProducto = document.getElementById('selProducto');
const detalleBody = document.getElementById('detalleBody');

// FILTRAR POR TIPO
selTipo.addEventListener('change', function(){
    selProducto.innerHTML = '<option value="">-- Herramienta --</option>';

    productos.forEach(p => {
        if (String(p.ID_TIPO) === String(selTipo.value)) {
            let text = p.CLAVE + " | " + p.NOMBRE;
            if (p.DESCRIPCION) text += " | " + p.DESCRIPCION;
            if (p.SERIE) text += " | Serie: " + p.SERIE;
            selProducto.add(new Option(text, p.CLAVE));
        }
    });
});

// AGREGAR HERRAMIENTA
document.getElementById('btnAgregar').addEventListener('click', () => {
    const clave = selProducto.value;
    if (!clave) return alert("Seleccione una herramienta");

    if ([...document.querySelectorAll('input[name=\"clave_producto[]\"]')]
        .some(x => x.value === clave)) 
        return alert("La herramienta ya está agregada.");

    const tr = document.createElement('tr');

    tr.innerHTML = `
        <td>${selProducto.options[selProducto.selectedIndex].text}
            <input type="hidden" name="clave_producto[]" value="${clave}">
        </td>
        <td><input type="text" name="nota_entrega[]"></td>
        <td><button type="button" class="btn-red" onclick="this.closest('tr').remove()">Eliminar</button></td>
    `;

    detalleBody.appendChild(tr);
});

// RESUMEN POP-UP
document.getElementById("formPrestamo").addEventListener("submit", function(e){
    e.preventDefault();

    if (detalleBody.children.length === 0) {
        alert("Debe agregar al menos una herramienta.");
        return;
    }

    const usuarioEntrega = "<?= $usuarioEntregaNombre ?>";
    const fechaHora = "<?= $fechaHoy . ' ' . $horaAhora ?>";
    const usuarioRecibe = document.querySelector("select[name='id_usuario_recibe'] option:checked").textContent;
    const nota = document.querySelector("textarea[name='nota']").value;

    let lista = "<ul>";
    [...detalleBody.children].forEach(tr => {
        lista += `<li>${tr.children[0].innerText}</li>`;
    });
    lista += "</ul>";

    document.getElementById("contenidoResumen").innerHTML = `
        <strong>Usuario que entrega:</strong><br> ${usuarioEntrega}<br><br>
        <strong>Usuario que recibe:</strong><br> ${usuarioRecibe}<br><br>
        <strong>Fecha y hora:</strong><br> ${fechaHora}<br><br>
        <strong>Nota:</strong><br> ${nota || "(Sin nota)"}<br><br>
        <strong>Herramientas:</strong><br>${lista}
    `;

    document.getElementById("modalResumen").style.display = "flex";

    document.getElementById("btnCancelar").onclick = () => {
        document.getElementById("modalResumen").style.display = "none";
    };

    document.getElementById("btnConfirmar").onclick = () => {
        document.getElementById("modalResumen").style.display = "none";
        document.getElementById("formPrestamo").submit();
    };
});

function volverMenu(){
    if (confirm("¿Seguro? Se perderá todo lo ingresado."))
        window.location.href = "st_menuppl.php";
}
</script>

</body>
</html>
