Current File : //var/www/pharmacius/view/pedido_form_view.php

<?php
session_start();
require_once("menu.php");

$esEdicion = isset($pedido);
$action = $esEdicion ? "editar&IDPedido={$pedido['IDPedido']}" : "insertar";
$titulo = $esEdicion ? "Editar Pedido #{$pedido['IDPedido']}" : "Nuevo Pedido";

// Obtener todos los productos
require_once("model/productos_model.php");
$productos_model = new Productos_model();
$productos = $productos_model->get_productos();
?>

<div class="container mt-5">
    <h2 class="text-center mb-4"><?= $titulo ?></h2>

    <?php if (!empty($mensaje)): ?>
        <div class="modal fade" id="mensajeModal" tabindex="-1" aria-labelledby="mensajeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-danger">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title" id="mensajeModalLabel">Error</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body text-center">
                        <?= htmlspecialchars($mensaje) ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                new bootstrap.Modal(document.getElementById('mensajeModal')).show();
            });
        </script>
    <?php endif; ?>

    <form method="post" action="index.php?controlador=pedidos&action=<?= $action ?>">

        <div class="mb-3">
            <label for="IDPedido" class="form-label">Número de Pedido</label>
            <input type="number" name="IDPedido" id="IDPedido" class="form-control" required
                   value="<?= $pedido['IDPedido'] ?? '' ?>">
        </div>

        <div class="mb-3">
            <label for="Estado">Estado</label>
            <select name="Estado" id="Estado" class="form-control" required>
                <option value="Creado" <?= ($pedido['Estado'] ?? '') === 'Creado' ? 'selected' : '' ?>>Creado</option>
                <option value="En proceso" <?= ($pedido['Estado'] ?? '') === 'En proceso' ? 'selected' : '' ?>>En proceso</option>
                <option value="Listo" <?= ($pedido['Estado'] ?? '') === 'Listo' ? 'selected' : '' ?>>Listo</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="ProductosFaltantes" class="form-label">Productos faltantes</label>
            <textarea class="form-control" id="ProductosFaltantes" name="ProductosFaltantes" rows="1"><?= $pedido['ProductosFaltantes'] ?? '' ?></textarea>
        </div>

        <div class="mb-3">
            <label for="Observaciones" class="form-label">Observaciones</label>
            <textarea class="form-control" id="Observaciones" name="Observaciones" rows="1"><?= $pedido['Observaciones'] ?? '' ?></textarea>
        </div>

        <div class="mb-3">
            <label for="Incidencias" class="form-label">Incidencias</label>
            <textarea class="form-control" id="Incidencias" name="Incidencias" rows="1"><?= $pedido['Incidencias'] ?? '' ?></textarea>
        </div>

        <div class="mb-3">
            <label for="Seguimiento" class="form-label">Clientes</label>
            <textarea class="form-control" id="Seguimiento" name="Seguimiento" rows="6"><?= $pedido['Seguimiento'] ?? '' ?></textarea>
        </div>

        <hr>
        <h5 class="mb-3">Productos del Pedido</h5>
        <div id="productos-container"></div>
        <button type="button" class="btn btn-secondary mb-3" onclick="agregarProducto()">+ Añadir producto</button>

        <div class="text-center pb-5">
            <button type="submit" class="btn btn-success">
                <i class="bi bi-check-circle"></i> Guardar
            </button>
            <a href="index.php?controlador=pedidos&action=home" class="btn btn-secondary ms-2">
                <i class="bi bi-arrow-left-circle"></i> Cancelar
            </a>
        </div>
    </form>
</div>

<script>
    const productosDisponibles = <?= json_encode($productos) ?>;
    const productosExistentes = <?= json_encode($pedido['productos_asociados'] ?? []) ?>;

    function agregarProducto(id = '', cantidad = '', referencia = '', nota = '', recepcionado = 0) {
    const container = document.getElementById('productos-container');
    const index = container.children.length;

    const row = document.createElement('div');
    row.className = 'row align-items-end mb-3 producto-row';
    row.innerHTML = `
        <div class="col-md-3">
            <label class="form-label">Seleccionar por ID</label>
            <select class="form-select" onchange="productoSeleccionadoPorID(this, ${index})">
                <option value="">Seleccione un producto</option>
                ${productosDisponibles.map(p =>
                    `<option value="${p.IDProducto}" data-referencia="${p.Referencia}" ${p.IDProducto == id ? 'selected' : ''}>
                        ${p.IDProducto} - ${p.Nombre}
                    </option>`).join('')}
            </select>
        </div>

        <div class="col-md-3">
            <label class="form-label">O buscar por Referencia</label>
            <input list="referencias" class="form-control" oninput="asignarProductoPorReferencia(this, ${index})" placeholder="Escribe la referencia" value="${referencia}">
            <datalist id="referencias">
                ${productosDisponibles.map(p =>
                    `<option value="${p.Referencia}" data-id="${p.IDProducto}" data-nombre="${p.Nombre}"></option>`).join('')}
            </datalist>
        </div>

        <input type="hidden" name="productos[]" id="producto-id-${index}" value="${id}">

        <div class="col-auto">
            <label class="form-label">Cantidad</label>
            <input type="number" name="cantidades[]" class="form-control" required value="${cantidad}" style="width: 80px;">
        </div>

        <div class="col-md-2">
            <label class="form-label">Referencia confirmada</label>
            <input type="text" name="referencias[]" class="form-control" readonly id="referencia-${index}" value="${referencia}">
        </div>

        <div class="col-md-2">
            <label class="form-label">Notas</label>
            <input type="text" name="notas[]" class="form-control" value="${nota}">
        </div>

        <div class="col-md-1 text-center">
            <label class="form-label">Recepcionado</label>
            <div class="form-check mt-1">
                <input type="hidden" name="recepcionado_valor[${index}]" value="0">
<input type="checkbox" class="form-check-input checkbox-grande" name="recepcionado_valor[${index}]" value="1" ${recepcionado == 1 ? 'checked' : ''}>
            </div>
        </div>

        <div class="col-md-1 text-end">
            <button type="button" class="btn btn-danger mt-4" onclick="eliminarProducto(this)">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(row);
}


   function productoSeleccionadoPorID(select, index) {
    const selected = select.options[select.selectedIndex];
    const id = selected.value;
    const referencia = selected.dataset.referencia;

    document.getElementById(`producto-id-${index}`).value = id;
    document.getElementById(`referencia-${index}`).value = referencia;

    // 🆕 Actualizar el input de búsqueda por referencia también
    const inputReferencia = select.closest('.producto-row').querySelector('input[list="referencias"]');
    if (inputReferencia) {
        inputReferencia.value = referencia;
    }
}


    function asignarProductoPorReferencia(input, index) {
        const datalist = document.getElementById('referencias');
        const valor = input.value;
        const opciones = datalist.options;

        for (let i = 0; i < opciones.length; i++) {
            if (opciones[i].value === valor) {
                const idProducto = opciones[i].dataset.id;
                const referenciaInput = document.getElementById(`referencia-${index}`);
                const idInput = document.getElementById(`producto-id-${index}`);

                if (referenciaInput) referenciaInput.value = valor;
                if (idInput) idInput.value = idProducto;

                // También actualizar el select si está presente
                const select = input.closest('.producto-row').querySelector('select');
                if (select) {
                    for (let j = 0; j < select.options.length; j++) {
                        if (select.options[j].value == idProducto) {
                            select.selectedIndex = j;
                            break;
                        }
                    }
                }

                break;
            }
        }
    }

    function eliminarProducto(button) {
        const row = button.closest('.producto-row');
        row.remove();
    }

    window.onload = () => {
    if (productosExistentes.length > 0) {
        productosExistentes.forEach(p =>
            agregarProducto(p.IDProducto, p.Cantidad, p.Referencia, p.Notas || '', p.Recepcionado || 0)
        );
    } else {
        agregarProducto();
    }
};

</script>