<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OC - <?php echo $orden->codigo; ?></title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: Arial, sans-serif;
            font-size: 11px;
            color: #000;
            background: #f0f0f0;
            padding: 0;
            margin: 0;
        }

        .documento-wrapper {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
        }

        @media print {
            body { background: #fff; }
            .documento-wrapper { padding: 10px; max-width: 100%; }
        }

        /* ENCABEZADO */
        .header-wrap {
            display: table;
            width: 100%;
            margin-bottom: 12px;
        }
        .header-logo {
            display: table-cell;
            width: 25%;
            vertical-align: middle;
        }
        .header-logo img {
            max-height: 70px;
            max-width: 160px;
        }
        .header-title {
            display: table-cell;
            width: 35%;
            text-align: center;
            vertical-align: middle;
        }
        .header-title h2 {
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
        }
        .header-title h3 {
            font-size: 13px;
            color: #444;
        }
        .header-info {
            display: table-cell;
            width: 40%;
            vertical-align: middle;
        }
        .header-info table {
            width: 100%;
            border-collapse: collapse;
        }
        .header-info table td {
            border: 1px solid #ccc;
            padding: 4px 8px;
        }
        .header-info table td:first-child {
            background: #1a3e5c;
            color: #fff;
            font-weight: bold;
            white-space: nowrap;
            width: 60%;
        }

        /* SECCIÓN PROVEEDOR / EMPRESA */
        .seccion-partes {
            display: table;
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }
        .col-proveedor, .col-empresa {
            display: table-cell;
            width: 50%;
            vertical-align: top;
            padding: 0;
        }
        .col-proveedor { border-right: 1px solid #ccc; }

        .seccion-partes table {
            width: 100%;
            border-collapse: collapse;
        }
        .seccion-partes table thead td {
            background: #1a3e5c;
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: 5px;
        }
        .seccion-partes table tbody td {
            padding: 4px 6px;
            border-top: 1px solid #eee;
        }
        .seccion-partes table tbody td:first-child {
            font-weight: bold;
            white-space: nowrap;
            width: 40%;
            color: #333;
        }

        /* SECCIÓN ENTREGA / PAGO */
        .seccion-fila {
            display: table;
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        .seccion-celda {
            display: table-cell;
            border: 1px solid #ccc;
            padding: 6px 10px;
            text-align: center;
            vertical-align: top;
        }
        .seccion-celda .titulo {
            background: #1a3e5c;
            color: #fff;
            font-weight: bold;
            padding: 4px;
            margin: -6px -10px 6px -10px;
        }

        /* TABLA DETALLE */
        .tabla-detalle {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        .tabla-detalle thead td, .tabla-detalle thead th {
            background: #1a3e5c;
            color: #fff;
            padding: 5px 8px;
            text-align: center;
            border: 1px solid #1a3e5c;
            font-size: 11px;
        }
        .tabla-detalle tbody td {
            border: 1px solid #ccc;
            padding: 4px 8px;
            font-size: 11px;
        }
        .tabla-detalle tbody tr:nth-child(even) td {
            background: #f9f9f9;
        }
        .tabla-detalle tfoot td {
            border: 1px solid #ccc;
            padding: 4px 8px;
            font-size: 11px;
        }
        .tabla-detalle tfoot .fila-total td {
            background: #1a3e5c;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
        }

        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .text-bold { font-weight: bold; }

        /* COMENTARIOS */
        .comentarios {
            border: 1px solid #ccc;
            padding: 8px;
            margin-bottom: 12px;
            font-size: 11px;
        }
        .comentarios .titulo-sec {
            font-weight: bold;
            margin-bottom: 4px;
            color: #1a3e5c;
        }

        /* FIRMAS */
        .firmas {
            display: table;
            width: 100%;
            margin-top: 30px;
        }
        .firma-celda {
            display: table-cell;
            width: 33%;
            text-align: center;
            padding: 0 15px;
        }
        .firma-linea {
            border-top: 1px solid #000;
            margin-top: 40px;
            padding-top: 5px;
            font-size: 11px;
        }

        /* BOTÓN IMPRIMIR */
        .btn-print-wrap {
            text-align: center;
            margin-bottom: 20px;
        }
        .btn-imprimir {
            background: #1a3e5c;
            color: #fff;
            border: none;
            padding: 8px 25px;
            font-size: 13px;
            cursor: pointer;
            border-radius: 3px;
        }
        .btn-cerrar {
            background: #888;
            color: #fff;
            border: none;
            padding: 8px 25px;
            font-size: 13px;
            cursor: pointer;
            border-radius: 3px;
            margin-left: 10px;
        }

        @media print {
            .btn-print-wrap { display: none; }
            body { padding: 10px; }
        }
    </style>
</head>
<body>
<div class="documento-wrapper">

    <!-- BOTONES -->
    <div class="btn-print-wrap">
        <button class="btn-imprimir" onclick="window.print()">
            &#128438; Imprimir / Guardar PDF
        </button>
        <button class="btn-cerrar" onclick="window.close()">
            ✕ Cerrar
        </button>
    </div>

    <!-- ENCABEZADO -->
    <div class="header-wrap">
        <div class="header-logo">
            <?php if(!empty($empresa->logo)): ?>
                <img src="<?php echo base_url('uploads/logos/' . $empresa->logo); ?>" alt="Logo">
            <?php else: ?>
                <strong><?php echo $empresa->nombre; ?></strong>
            <?php endif; ?>
        </div>
        <div class="header-title">
            <h2><?php echo ($orden->tipocs == 'OC') ? 'Orden de Compra' : 'Orden de Servicio'; ?></h2>
            <h3><?php echo $empresa->nombre; ?></h3>
        </div>
        <div class="header-info">
            <table>
                <tr>
                    <td>Número de OC:</td>
                    <td><strong><?php echo $orden->codigo; ?></strong></td>
                </tr>
                <tr>
                    <td>Fecha:</td>
                    <td><?php echo date('d/m/Y', strtotime($orden->fecha)); ?></td>
                </tr>
                <tr>
                    <td>Fecha de entrega:</td>
                    <td><?php echo $orden->fechaentrega ? date('d/m/Y', strtotime($orden->fechaentrega)) : '-'; ?></td>
                </tr>
                <?php if(!empty($orden->tipocambio)): ?>
                <tr>
                    <td>Tipo de cambio:</td>
                    <td>S/ <?php echo number_format((float)$orden->tipocambio, 2); ?></td>
                </tr>
                <?php endif; ?>
            </table>
        </div>
    </div>

    <!-- PROVEEDOR / EMPRESA -->
    <div class="seccion-partes">
        <div class="col-proveedor">
            <table>
                <thead><tr><td colspan="2">Proveedor:</td></tr></thead>
                <tbody>
                    <tr><td>Nombre:</td><td><?php echo $orden->razon_social; ?></td></tr>
                    <tr><td>RUC:</td><td><?php echo $orden->nro_documento; ?></td></tr>
                    <tr><td>Dirección:</td><td><?php echo !empty($orden->domicilio_fiscal) ? $orden->domicilio_fiscal : '-'; ?></td></tr>
                    <tr><td>Teléfono:</td><td><?php echo !empty($orden->telefono_prov) ? $orden->telefono_prov : '-'; ?></td></tr>
                    <tr><td>Email:</td><td><?php echo !empty($orden->email_prov) ? $orden->email_prov : '-'; ?></td></tr>
                    <tr>
                        <td>Contacto:</td>
                        <td>
                            <?php echo !empty($orden->contacto) ? $orden->contacto : '-'; ?>
                            <?php if(!empty($orden->contacto_cargo)): ?>
                                <small>(<?php echo $orden->contacto_cargo; ?>)</small>
                            <?php endif; ?>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-empresa">
            <table>
                <thead><tr><td colspan="2">Empresa (Comprador):</td></tr></thead>
                <tbody>
                    <tr><td>Nombre:</td><td><?php echo $empresa->nombre; ?></td></tr>
                    <tr><td>RUC:</td><td><?php echo $empresa->ruc; ?></td></tr>
                    <tr><td>Dirección:</td><td><?php echo $empresa->direccion_fiscal ?? '-'; ?></td></tr>
                    <tr>
                        <td>Tel./Email:</td>
                        <td>
                            <?php echo $empresa->telefono ?? '-'; ?>
                            <?php if(!empty($empresa->email)): ?>
                                / <?php echo $empresa->email; ?>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <tr><td>Persona de contacto:</td><td><?php echo $usuario_nombre ?? '-'; ?></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- FORMA DE PAGO -->
    <div class="seccion-fila" style="margin-bottom:10px;">
        <div class="seccion-celda" style="width:50%;">
            <div class="titulo">Forma de Pago</div>
            <?php echo !empty($orden->forma_pago_nombre) ? $orden->forma_pago_nombre : '-'; ?>
            <?php if(!empty($orden->fp_descripcion)): ?>
                — <?php echo $orden->fp_descripcion; ?>
            <?php endif; ?>
        </div>
        <div class="seccion-celda" style="width:50%;">
            <div class="titulo">Estado</div>
            <?php echo $orden->estado_nombre; ?>
        </div>
    </div>

    <!-- DETALLE DE PRODUCTOS -->
    <table class="tabla-detalle">
        <thead>
            <tr>
                <th style="width:90px;">Código</th>
                <th>Descripción</th>
                <th style="width:60px;" class="text-center">Und.</th>
                <th style="width:80px;" class="text-right">Cantidad</th>
                <th style="width:100px;" class="text-right">Precio Unit.</th>
                <th style="width:100px;" class="text-right">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($detalle as $item): ?>
                <tr>
                    <td><?php echo $item->producto_codigo; ?></td>
                    <td><?php echo $item->descripcion; ?></td>
                    <td class="text-center"><?php echo $item->unidad_abreviado ?? ''; ?></td>
                    <td class="text-right"><?php echo number_format((float)$item->cantidad, 2); ?></td>
                    <td class="text-right"><?php echo number_format((float)$item->precio_unitario, 4); ?></td>
                    <td class="text-right"><?php echo number_format((float)$item->subtotal, 2); ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="text-right text-bold">Subtotal</td>
                <td class="text-right"><?php echo number_format((float)$orden->subtotal, 2); ?></td>
            </tr>
            <tr>
                <td colspan="5" class="text-right text-bold">IGV (<?php echo number_format((float)$orden->igv_porcentaje, 2); ?>%)</td>
                <td class="text-right"><?php echo number_format((float)$orden->igv, 2); ?></td>
            </tr>
            <tr class="fila-total">
                <td colspan="5" class="text-right">TOTAL</td>
                <td class="text-right"><?php echo number_format((float)$orden->total, 2); ?></td>
            </tr>
        </tfoot>
    </table>

    <!-- COMENTARIOS -->
    <?php if(!empty($orden->comentarios)): ?>
    <div class="comentarios">
        <div class="titulo-sec">Comentarios:</div>
        <?php echo nl2br(htmlspecialchars($orden->comentarios)); ?>
    </div>
    <?php endif; ?>

    <!-- FIRMAS -->
    <div class="firmas">
        <div class="firma-celda">
            <div class="firma-linea">Solicitado por</div>
        </div>
        <div class="firma-celda">
            <div class="firma-linea">Autorizado por</div>
        </div>
        <div class="firma-celda">
            <div class="firma-linea">Recibido por</div>
        </div>
    </div>

</div><!-- fin documento-wrapper -->
</body>
</html>