<?php require __DIR__ . '/../../includes/navBar.php'; ?>

<div class="container my-5">

    <div class="card card-rounded card-shadow border-0">

        <!-- HEADER -->

        <div class="card-header header-dark px-4 py-3">

            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

                <h4 class="mb-0 title-shadow">
                    <i class="fas fa-clipboard-list icon-xl me-2"></i>
                    Detalle de Pedido N° <?= htmlspecialchars($idPedido) ?>
                </h4>

                <div class="d-flex gap-2">

                    <!-- BOTÓN FANTASMA (mantiene el layout) -->

                    <a class="btn btn-success invisible">
                        <i class="fas fa-plus me-1"></i>
                    </a>

                    <a href="?opt=listar_pedidos" class="btn btn-soft-secondary text-white">
                        <i class="fas fa-arrow-left me-1"></i>
                        Volver
                    </a>
                </div>
            </div>
        </div>

        <!-- BODY -->

        <div class="card-body px-4 py-4">

            <?php if (empty($pedido_detalle)): ?>
                <div class="text-center text-muted py-5">
                    No existe el detalle del pedido.
                </div>
            <?php else: ?>

                <!-- FILTRO POR COLUMNA + BUSCADOR -->

                <!-- Input de búsqueda añadido automáticamente por DataTables -->

                    <div class="d-flex align-items-center gap-2">

                        <select id="columnFilter"
                                class="form-select form-select-sm ms-2"
                                style="width: auto;">
                            <option value="0">ID Producto</option>
                            <option value="1">Producto</option>
                        </select>

                    </div>

                <div class="table-responsive">
                    <table id="tablaDetallePedido" class="table table-hover align-middle mb-0">

                        <thead class="table-dark">
                            <tr>
                                <th>ID Producto</th>
                                <th>Producto</th>
                                <th>Costo Unit.</th>
                                <th>Cantidad</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>

                        <tbody>
                        <?php foreach ($pedido_detalle as $pd): ?>
                            <tr>
                                <td><?= $pd['id_producto'] ?? '' ?></td>
                                <td><?= htmlspecialchars($pd['marca'] . ' ' . $pd['modelo']) ?></td>
                                <td>$ <?= number_format($pd['precio_unitario'], 2, '.', ',') ?></td>
                                <td><?= htmlspecialchars($pd['cantidad'] ?? '') ?></td>
                                <td>$ <?= number_format($pd['subtotal'], 2, '.', ',') ?></td>
                            </tr>
                        <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php endif; ?>

        </div>
    </div>
</div>

<!-- Tabla, búsqueda y filtro por columnas -->

<script src="js/pedidos/pedidoTableDetalle.js"></script>