<?php
$moneda      = 'S/';
$vendNombre  = $vendedor->nombre_completo;
$totalPagar  = (float)$resumen->total_comision + $bono;
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Comisiones — <?php echo $vendNombre; ?></title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: Arial, sans-serif; font-size: 12px; color: #000; margin: 0; padding: 0; }
        .page { width: 210mm; margin: 0 auto; padding: 10mm 12mm; }
        .clearfix::after { content: ""; display: block; clear: both; }
        .text-right  { text-align: right; }
        .text-center { text-align: center; }
        .text-bold   { font-weight: bold; }
        .mb-10 { margin-bottom: 10px; }
        /* Header */
        .header-empresa { float: left; width: 60%; }
        .header-doc     { float: right; width: 36%; border: 1px solid #000; padding: 8px; text-align: center; }
        .header-doc .titulo { font-size: 15px; font-weight: bold; margin: 5px 0 3px; }
        /* Boxes */
        .box { border: 1px solid #ccc; padding: 8px 10px; margin-bottom: 10px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 4px 5px; }
        /* Tabla detalle */
        .tbl thead th { border: 1px solid #000; background: #e9e9e9; font-size: 11px; text-align: center; }
        .tbl tbody td { border-bottom: 1px solid #ddd; font-size: 11px; }
        .tbl tbody tr:last-child td { border-bottom: 1px solid #000; }
        .tbl tfoot td { font-weight: bold; border-top: 2px solid #000; }
        /* Resumen */
        .tbl-res td, .tbl-res th { padding: 4px 8px; }
        .tbl-res .fila-total td, .tbl-res .fila-total th {
            font-size: 14px; font-weight: bold; border-top: 2px solid #000;
        }
        /* Tramos */
        .tramo-row { padding: 4px 8px; margin-bottom: 3px; border-radius: 3px; font-size: 11px; }
        .tramo-ok  { background: #d5f5e3; border-left: 3px solid #27ae60; }
        .tramo-no  { background: #f9f9f9; border-left: 3px solid #ccc; }
        /* Firmas */
        .firmas { display: flex; gap: 30px; margin-top: 30px; }
        .firma-box { flex: 1; text-align: center; }
        .firma-linea { border-top: 1px solid #000; padding-top: 4px; margin-top: 40px; font-size: 11px; }
        /* Print */
        .no-print { text-align: center; padding: 8px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
        .btn-print { padding: 7px 20px; background: #337ab7; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
        @media print { .no-print { display: none !important; } .page { padding: 8mm 10mm; } }
    </style>
</head>
<body>

<div class="no-print">
    <button class="btn-print" onclick="window.print()">&#128438; Imprimir / Guardar PDF</button>
</div>

<div class="page">

    <!-- ENCABEZADO -->
    <div class="clearfix mb-10">
        <div class="header-empresa">
            <?php if ($empresa): ?>
                <?php if (!empty($empresa->logo)): ?>
                    <div style="margin-bottom:5px;">
                        <img src="<?php echo base_url('uploads/empresa/'.$empresa->logo); ?>"
                             style="max-width:180px; max-height:60px; object-fit:contain;">
                    </div>
                <?php endif; ?>
                <div class="text-bold" style="font-size:14px;"><?php echo $empresa->nombre; ?></div>
                <div>RUC: <?php echo $empresa->ruc; ?></div>
            <?php endif; ?>
        </div>
        <div class="header-doc">
            <div class="titulo">LIQUIDACIÓN DE COMISIONES</div>
            <div style="font-size:12px; margin-top:4px;">
                <?php echo date('d/m/Y', strtotime($desde)); ?> —
                <?php echo date('d/m/Y', strtotime($hasta)); ?>
            </div>
            <div style="font-size:11px; margin-top:4px; color:#555;">
                Período: <?php echo $config->comision_periodo; ?>
            </div>
        </div>
    </div>

    <!-- DATOS DEL VENDEDOR -->
    <div class="box mb-10">
        <table>
            <tr>
                <td style="width:20%;"><strong>Vendedor:</strong></td>
                <td style="width:40%;"><?php echo $vendNombre; ?></td>
                <td style="width:20%;"><strong>Cuota del período:</strong></td>
                <td style="width:20%;">
                    <?php echo $moneda . ' ' . number_format($vendedor->comision_cuota, 2); ?>
                </td>
            </tr>
            <tr>
                <td><strong>% Comisión:</strong></td>
                <td><?php echo $config->comision_porcentaje; ?>%</td>
                <td><strong>% Cumplimiento:</strong></td>
                <td>
                    <strong style="color:<?php echo $pct_cumplimiento >= 100 ? '#27ae60' : ($pct_cumplimiento >= 50 ? '#f39c12' : '#e74c3c'); ?>;">
                        <?php echo $pct_cumplimiento; ?>%
                    </strong>
                </td>
            </tr>
        </table>
    </div>

    <!-- DETALLE DE COMISIONES -->
    <div class="mb-10">
        <table class="tbl">
            <thead>
                <tr>
                    <th style="width:14%;">Comprobante</th>
                    <th style="width:25%;">Cliente</th>
                    <th style="width:9%;">F. Emisión</th>
                    <th style="width:9%;">F. Abono</th>
                    <th style="width:11%;">Subtotal Comp.</th>
                    <th style="width:11%;">Importe abonado</th>
                    <th style="width:7%;">% Com.</th>
                    <th style="width:11%;">Monto comisión</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($detalle as $d): ?>
                    <tr>
                        <td>
                            <?php echo $d->tipo_comprobante; ?>
                            <?php echo $d->serie . '-' . $d->numero; ?>
                        </td>
                        <td>
                            <?php echo $d->cliente; ?>
                            <br><?php echo $d->cliente_ruc; ?>
                        </td>
                        <td><?php echo date('d/m/Y', strtotime($d->fecha_comprobante)); ?></td>
                        <td><?php echo date('d/m/Y', strtotime($d->fecha_pago)); ?></td>
                        <td class="text-right"><?php echo $moneda . ' ' . number_format($d->subtotal_comprob, 2); ?></td>
                        <td class="text-right"><?php echo $moneda . ' ' . number_format($d->importe_abonado, 2); ?></td>
                        <td class="text-center"><?php echo $d->pct_comision; ?>%</td>
                        <td class="text-right"><strong><?php echo $moneda . ' ' . number_format($d->monto_comision, 2); ?></strong></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="text-right">TOTALES:</td>
                    <td class="text-right"><?php echo $moneda . ' ' . number_format($resumen->total_abonado, 2); ?></td>
                    <td></td>
                    <td class="text-right"><?php echo $moneda . ' ' . number_format($resumen->total_comision, 2); ?></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- RESUMEN + TRAMOS -->
    <div class="clearfix">

        <!-- Tramos alcanzados -->
        <div style="float:left; width:48%;">
            <strong style="font-size:12px;">Tramos de bono:</strong>
            <div style="margin-top:6px;">
                <?php foreach ($tramos as $t):
                    $meta_tramo = (float)$vendedor->comision_cuota * ((float)$t->desde_pct / 100);
                    $alcanzado  = (float)$resumen->total_abonado >= $meta_tramo;
                ?>
                    <div class="tramo-row <?php echo $alcanzado ? 'tramo-ok' : 'tramo-no'; ?>">
                        <?php echo $alcanzado ? '✓' : '○'; ?>
                        <?php echo $t->desde_pct; ?>% — Meta S/ <?php echo number_format($meta_tramo, 2); ?>
                        → <strong>Bono S/ <?php echo number_format($t->bono, 2); ?></strong>
                    </div>
                <?php endforeach; ?>
                <?php if (empty($tramos)): ?>
                    <p style="font-size:11px; color:#888;">Sin tramos configurados</p>
                <?php endif; ?>
            </div>
        </div>

        <!-- Totales -->
        <div style="float:right; width:46%;">
            <table class="tbl-res" style="border:1px solid #ccc;">
                <tr>
                    <th style="background:#f5f5f5;">Comisión base</th>
                    <td class="text-right"><?php echo $moneda; ?></td>
                    <td class="text-right"><?php echo number_format($resumen->total_comision, 2); ?></td>
                </tr>
                <tr>
                    <th style="background:#f5f5f5;">Bono por producción</th>
                    <td class="text-right"><?php echo $moneda; ?></td>
                    <td class="text-right"><?php echo number_format($bono, 2); ?></td>
                </tr>
                <tr class="fila-total">
                    <th style="background:#f0f0f0;">TOTAL A PAGAR</th>
                    <td class="text-right"><?php echo $moneda; ?></td>
                    <td class="text-right"><?php echo number_format($totalPagar, 2); ?></td>
                </tr>
            </table>
        </div>
    </div>

    <!-- FIRMAS -->
    <div class="firmas">
        <div class="firma-box">
            <div class="firma-linea">Vendedor<br><?php echo $vendNombre; ?></div>
        </div>
        <div class="firma-box">
            <div class="firma-linea">Jefe de Ventas<br>___________________________</div>
        </div>
        <div class="firma-box">
            <div class="firma-linea">Gerencia<br>___________________________</div>
        </div>
    </div>

    <!-- PIE -->
    <div class="text-center" style="margin-top:20px; border-top:1px solid #ccc; padding-top:6px; font-size:10px; color:#777;">
        <?php if ($empresa): echo $empresa->nombre . ' | RUC: ' . $empresa->ruc . ' | '; endif; ?>
        Documento generado el <?php echo date('d/m/Y H:i'); ?>
    </div>

</div>
</body>
</html>