<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Orden de Pedido <?php echo $orden->id; ?></title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #333;
            margin: 0;
            padding: 0;
            background: #fff;
        }

        .page {
            width: 980px;
            margin: 0 auto;
            padding: 20px 15px 30px 15px;
        }

        .header {
            width: 100%;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .header-left {
            float: left;
            width: 48%;
            min-height: 90px;
        }

        .header-right {
            float: right;
            width: 46%;
            font-size: 14px;
            line-height: 1.45;
        }

        .logo {
            max-width: 220px;
            max-height: 100px;
        }

        .titulo {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            margin: 35px 0 30px 0;
            letter-spacing: 0.5px;
        }

        .bloque-datos {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .col-izq, .col-der {
            float: left;
            width: 48%;
        }

        .col-der {
            float: right;
        }

        .fila {
            margin-bottom: 7px;
            font-size: 14px;
        }

        .etq {
            display: inline-block;
            width: 145px;
        }

        .sep {
            display: inline-block;
            width: 15px;
            text-align: center;
        }

        .valor {
            display: inline-block;
            width: calc(100% - 170px);
            vertical-align: top;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            margin-bottom: 18px;
        }

        thead th {
            background: #0f9999;
            color: #111;
            font-size: 15px;
            text-align: center;
            padding: 10px 6px;
            border: 2px solid #d8d8d8;
            font-weight: bold;
        }

        tbody td {
            border: 1px solid #dddddd;
            padding: 8px 6px;
            font-size: 15px;
        }

        tbody td.text-right {
            font-size: 16px;
            font-weight: bold;
        }
        
        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .bold {
            font-weight: bold;
        }

        .footer-block {
            margin-top: 18px;
            font-size: 14px;
        }

        .fecha-entrega {
            font-size: 18px;
            margin-bottom: 16px;
        }

        .obs {
            margin-top: 8px;
            min-height: 40px;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        @media print {
            body {
                margin: 0;
            }

            .page {
                width: 100%;
                margin: 0;
                padding: 10px 10px 20px 10px;
            }

            .no-print {
                display: none !important;
            }
        }
    </style>
</head>
<body>

<div class="page">
    <div class="no-print" style="text-align:right; margin-bottom:10px;">
        <button onclick="window.print()">Imprimir</button>
    </div>

    <div class="header clearfix">
        <div class="header-left">
            <?php if($empresa && !empty($empresa->logo)): ?>
                <img src="<?php echo base_url('uploads/empresa/'.$empresa->logo); ?>" class="logo" alt="Logo">
            <?php endif; ?>
        </div>

        <div class="header-right">
            <?php if($empresa): ?>
                <div><span class="etq">RUC</span><span class="sep">:</span><span class="valor"><?php echo $empresa->ruc; ?></span></div>
                <div><span class="etq">Teléfono</span><span class="sep">:</span><span class="valor"><?php echo !empty($empresa->telefono) ? $empresa->telefono : '-'; ?></span></div>
                <div><span class="etq">Dirección</span><span class="sep">:</span><span class="valor"><?php echo !empty($empresa->direccion_fiscal) ? $empresa->direccion_fiscal : '-'; ?></span></div>
                <div><span class="etq">Web Site</span><span class="sep">:</span><span class="valor"><?php echo !empty($empresa->website) ? $empresa->website : '-'; ?></span></div>
            <?php endif; ?>
        </div>
    </div>

    <div class="titulo">
        ORDEN DE PEDIDO Nro: <?php echo str_pad($orden->id, 6, '0', STR_PAD_LEFT); ?>
    </div>

    <div class="bloque-datos clearfix">
        <div class="col-izq">
            <div class="fila"><span class="etq">Cliente</span><span class="sep">:</span><span class="valor"><?php echo $orden->razon_social; ?></span></div>
            <div class="fila"><span class="etq">RUC</span><span class="sep">:</span><span class="valor"><?php echo $orden->nro_documento; ?></span></div>
            <div class="fila"><span class="etq">Contacto</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->contacto_nombre) ? $orden->contacto_nombre : '-'; ?></span></div>
            <div class="fila"><span class="etq">Ord. Compra del Cliente</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->orp_ordcomp_cliente) ? $orden->orp_ordcomp_cliente : '-'; ?></span></div>
            <div class="fila"><span class="etq">Email</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->contacto_email) ? $orden->contacto_email : '-'; ?></span></div>
        </div>

        <div class="col-der">
            <div class="fila"><span class="etq">Nro. Cotización</span><span class="sep">:</span><span class="valor"><?php echo str_pad($orden->ctc_id, 6, '0', STR_PAD_LEFT); ?></span></div>
            <div class="fila"><span class="etq">Ejvo. de Venta</span><span class="sep">:</span><span class="valor"><?php echo !empty(trim($orden->vendedor_nombre)) ? $orden->vendedor_nombre : '-'; ?></span></div>
            <div class="fila"><span class="etq">Email</span><span class="sep">:</span><span class="valor"><?php echo $empresa && !empty($empresa->email) ? $empresa->email : '-'; ?></span></div>
            <div class="fila"><span class="etq">Tipo de Comprobante</span><span class="sep">:</span><span class="valor"><?php echo $orden->comprobante; ?></span></div>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th style="width:110px;">CODIGO<br>PRODUCTO</th>
                <th>DESCRIPCION</th>
                <th style="width:110px;">CANT.</th>
                <th style="width:110px;">U.MED.</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($detalle as $item): ?>
                <tr>
                    <td><?php echo $item->producto_codigo; ?></td>
                    <td><?php echo $item->orpd_descripcion; ?></td>
                    <td class="text-right bold"><?php echo number_format((float)$item->orpd_cantidad, 2); ?></td>
                    <td class="text-right bold">UND</td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div class="footer-block">
        <div class="fecha-entrega">
            <strong>FECHA DE ENTREGA:</strong>
            &nbsp;&nbsp;
            <?php echo !empty($orden->orp_fecha_entrega) ? $orden->orp_fecha_entrega : '-'; ?>
        </div>

        <div class="fila"><span class="etq">Lugar de Entrega</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->local_direccion) ? $orden->local_direccion : '-'; ?></span></div>
        <div class="fila"><span class="etq">Celular</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->contacto_celular) ? $orden->contacto_celular : '-'; ?></span></div>
        <div class="fila"><span class="etq">Término de Pago</span><span class="sep">:</span><span class="valor"><?php echo !empty($orden->fp_descripcion) ? $orden->fp_descripcion : '-'; ?></span></div>

        <div class="obs">
            <strong>Observaciones :</strong><br>
            <?php echo !empty($orden->orp_comentarios) ? nl2br($orden->orp_comentarios) : ''; ?>
        </div>
    </div>
</div>

<script>
window.onload = function() {
    // Puedes comentar esta línea si no quieres que abra el cuadro de impresión automáticamente
    // window.print();
};
</script>

</body>
</html>