<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orden de Compra</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8; /* Fondo gris claro tipo nube */
            color: #4a4a4a;
        }
        .order-container {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            background: #e6eff5; /* Azul suave para el encabezado */
            color: #333;
            padding: 20px;
            text-align: center;
            position: relative;
        }
        .header img {
            position: absolute;
            top: 15px;
            left: 15px;
            height: 50px;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .header p {
            margin: 0;
            font-size: 14px;
        }
        .order-details {
            padding: 20px;
            line-height: 1.6;
        }
        .order-details p {
            margin: 5px 0;
        }
        .order-details strong {
            color: #607d8b; /* Gris azul oscuro para destacar */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background: #e6eff5; /* Azul suave para encabezado de tabla */
            color: #333;
            text-transform: uppercase;
            font-size: 14px;
        }
        td {
            font-size: 14px;
        }
        .total-row {
            font-weight: bold;
        }
        .total-row td {
            font-size: 16px;
            background: #f4f8fb; /* Fondo gris claro para la fila del total */
        }
        .footer {
            text-align: center;
            padding: 15px;
            background: #e6eff5; /* Azul suave para el pie */
            color: #4a4a4a;
            font-size: 12px;
        }
    </style>

<link href="facturacion/fact/bootstrap.min.css" rel="stylesheet">
<?php

$idc=$_POST["idc"];
$nombrec=$_POST["nombrec"];



$fecha=$_POST["fecha"];
$factura=$_POST["numf"];

$tipodetalle=$_POST["tipodetalle"];

 $bodega=$_POST["bodega"];

 $produc=$_POST["factura"];
$fila = json_decode($produc,true);  
$total=$_POST["total"];

include("datosimpresion.php");




?>
</head>
<body>
    <div class="order-container">
        <!-- Encabezado -->
        <div class="header">
           <?php  echo("<img src='facturacion/$logo' alt='Logo de la empresa'>") ;   ?> 
            <h1>Orden de Compra</h1>
            <p> No Orden <?php  echo($factura."   Fecha   ".$fecha) ; ?></p>
        </div>
 
        <div class="d-flex">
                <!-- Detalles del cliente -->
                <div class="col-7">
                    <p class="col-12"><strong>Cliente:</strong> <?php echo($nombreNegocio); ?></p>
                    <p class="col-12"><strong>Dirección:</strong> <?php echo($direccion); ?></p>
                    <p class="col-12"><strong>Teléfono:</strong> <?php echo( $tel); ?></p>
                </div>

                <div class="col-5">
                    <p class="col-12"><strong>Provedor:</strong> <?php echo($idc); ?></p>
                    <p class="col-12"><strong>Nombre Prove:</strong> <?php echo($nombrec); ?></p>
                  
                </div>
        </div>
        <!-- Tabla de productos -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Codigo</th>
                    <th>Nombre Producto</th>
                    <th>Caja</th>
                    <th>Frcc</th>
                    <th>Precio Unit</th>
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
             
             
               <?php 
foreach ($fila as $valor) {
    echo "
    <tr>
        <td>{$valor['Codigo']}</td>
        <td>{$valor['Nombre']} " .' '. ($valor['lote'] ?? '') . "</td>
        <td>{$valor['Cantida_caja']}</td>
        <td>{$valor['Cantida_frcc']}</td>
        <td>" . number_format((float)($valor['costocaja'] ?? 0)) . "</td>
        <td>" . number_format((float)($valor['total'] ?? 0)) . "</td>
    </tr>";
}
?>
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <td colspan="5">Total:</td>
                    <td><?php echo(number_format($total)); ?></td>
                </tr>
            </tfoot>
        </table>

        <!-- Pie de página -->
        <div class="footer">
            <p><?php echo($tipodetalle); ?></p>
        </div>
    </div>


    <script type="text/javascript">
function imprimir(){
    window.print()
   //  
     let navegador = navigator.userAgent;
     if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
      
        } else{
         setTimeout(window.close, 300);
        }
 

    }

    setTimeout(imprimir,300);

</script>

</body>
</html>
