<div class="content-wrapper">
    <section class="content-header">
        <h1>Detalle de Comisiones — <?php echo $vendedor->nombre_completo; ?></h1>
    </section>

    <section class="content">

        <!-- Filtro fechas -->
        <div class="panel panel-default">
            <div class="panel-body" style="padding:10px 15px;">
                <form method="get" class="form-inline"
                      action="<?php echo base_url('index.php/finanzas/comisiones/ver/'.$vendedor->id); ?>">
                    <div class="form-group" style="margin-right:10px;">
                        <label style="margin-right:5px;">Desde:</label>
                        <input type="date" name="desde" class="form-control input-sm"
                               value="<?php echo $desde; ?>">
                    </div>
                    <div class="form-group" style="margin-right:10px;">
                        <label style="margin-right:5px;">Hasta:</label>
                        <input type="date" name="hasta" class="form-control input-sm"
                               value="<?php echo $hasta; ?>">
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fa fa-search"></i> Filtrar
                    </button>
                    <a href="<?php echo base_url('index.php/finanzas/comisiones/reporte/'.$vendedor->id.'?desde='.$desde.'&hasta='.$hasta); ?>"
                       class="btn btn-default btn-sm" style="margin-left:5px;" target="_blank">
                        <i class="fa fa-print"></i> Imprimir
                    </a>
                    <a href="<?php echo base_url('index.php/finanzas/comisiones'); ?>"
                       class="btn btn-default btn-sm" style="margin-left:5px;">
                        <i class="fa fa-arrow-left"></i> Volver
                    </a>
                </form>
            </div>
        </div>

        <!-- Tarjetas resumen -->
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total abonado</span>
                        <span class="info-box-number">S/ <?php echo number_format($resumen->total_abonado, 2); ?></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-percent"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Comisión base (<?php echo $config->comision_porcentaje; ?>%)</span>
                        <span class="info-box-number">S/ <?php echo number_format($resumen->total_comision, 2); ?></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box <?php echo $bono > 0 ? 'bg-yellow' : 'bg-gray'; ?>">
                    <span class="info-box-icon"><i class="fa fa-trophy"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Bono alcanzado</span>
                        <span class="info-box-number">S/ <?php echo number_format($bono, 2); ?></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-purple" style="background:#8e44ad !important;">
                    <span class="info-box-icon"><i class="fa fa-calculator"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total a pagar</span>
                        <span class="info-box-number">
                            S/ <?php echo number_format((float)$resumen->total_comision + $bono, 2); ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <!-- Detalle de movimientos -->
            <div class="col-md-9">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong><i class="fa fa-list"></i> Detalle de comisiones</strong>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="tablaDetalle" class="table table-bordered table-hover table-striped"
                                   style="font-size:12px;">
                                <thead>
                                    <tr>
                                        <th>Comprobante</th>
                                        <th>Cliente</th>
                                        <th>F. Emisión</th>
                                        <th>F. Abono</th>
                                        <th class="text-right">Subtotal Comp.</th>
                                        <th class="text-right">Importe abonado</th>
                                        <th class="text-right">% Comisión</th>
                                        <th class="text-right">Monto comisión</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($detalle as $d): ?>
                                        <tr>
                                            <td>
                                                <?php echo $d->tipo_comprobante; ?>
                                                <br><strong><?php echo $d->serie . '-' . $d->numero; ?></strong>
                                            </td>
                                            <td>
                                                <?php echo $d->cliente; ?>
                                                <br><small class="text-muted"><?php echo $d->cliente_ruc; ?></small>
                                            </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">S/ <?php echo number_format($d->subtotal_comprob, 2); ?></td>
                                            <td class="text-right">S/ <?php echo number_format($d->importe_abonado, 2); ?></td>
                                            <td class="text-right"><?php echo $d->pct_comision; ?>%</td>
                                            <td class="text-right text-success">
                                                <strong>S/ <?php echo number_format($d->monto_comision, 2); ?></strong>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                                <tfoot>
                                    <tr style="font-weight:bold; background:#f5f5f5;">
                                        <td colspan="5" class="text-right">TOTALES:</td>
                                        <td class="text-right">S/ <?php echo number_format($resumen->total_abonado, 2); ?></td>
                                        <td></td>
                                        <td class="text-right text-success">
                                            S/ <?php echo number_format($resumen->total_comision, 2); ?>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Panel lateral: cuota y tramos -->
            <div class="col-md-3">

                <!-- Cumplimiento de cuota -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong><i class="fa fa-bar-chart"></i> Cumplimiento</strong>
                    </div>
                    <div class="panel-body">
                        <div style="text-align:center; margin-bottom:8px;">
                            <span style="font-size:28px; font-weight:bold;
                                color:<?php echo $pct_cumplimiento >= 100 ? '#27ae60' : ($pct_cumplimiento >= 50 ? '#f39c12' : '#e74c3c'); ?>;">
                                <?php echo $pct_cumplimiento; ?>%
                            </span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-<?php echo $pct_cumplimiento >= 100 ? 'success' : ($pct_cumplimiento >= 50 ? 'warning' : 'danger'); ?>"
                                 style="width:<?php echo min($pct_cumplimiento, 100); ?>%;">
                            </div>
                        </div>
                        <table class="table table-condensed" style="font-size:12px; margin-bottom:0;">
                            <tr>
                                <td class="text-muted">Cuota</td>
                                <td class="text-right">S/ <?php echo number_format($vendedor->comision_cuota, 2); ?></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Abonado</td>
                                <td class="text-right">S/ <?php echo number_format($resumen->total_abonado, 2); ?></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Faltante</td>
                                <td class="text-right <?php echo $resumen->total_abonado >= $vendedor->comision_cuota ? 'text-success' : 'text-danger'; ?>">
                                    S/ <?php echo number_format(max(0, $vendedor->comision_cuota - $resumen->total_abonado), 2); ?>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Tramos de bono -->
                <div class="panel panel-default">
                    <div class="panel-heading" style="display:flex; justify-content:space-between; align-items:center;">
                        <strong><i class="fa fa-trophy"></i> Tramos de bono</strong>
                        <a href="<?php echo base_url('index.php/finanzas/comisiones/tramos/'.$vendedor->id); ?>"
                           class="btn btn-xs btn-default">
                            <i class="fa fa-cogs"></i>
                        </a>
                    </div>
                    <div class="panel-body" style="padding:8px;">
                        <?php if (!empty($tramos)): ?>
                            <?php foreach ($tramos as $t): ?>
                                <?php
                                $meta_tramo   = (float)$vendedor->comision_cuota * ((float)$t->desde_pct / 100);
                                $alcanzado    = (float)$resumen->total_abonado >= $meta_tramo;
                                ?>
                                <div style="display:flex; align-items:center; justify-content:space-between;
                                            padding:5px 8px; margin-bottom:4px; border-radius:4px;
                                            background:<?php echo $alcanzado ? '#d5f5e3' : '#f9f9f9'; ?>;
                                            border:1px solid <?php echo $alcanzado ? '#27ae60' : '#ddd'; ?>;">
                                    <span style="font-size:12px;">
                                        <?php if ($alcanzado): ?>
                                            <i class="fa fa-check text-success"></i>
                                        <?php else: ?>
                                            <i class="fa fa-circle-o text-muted"></i>
                                        <?php endif; ?>
                                        <?php echo $t->desde_pct; ?>% → S/ <?php echo number_format($meta_tramo, 0); ?>
                                    </span>
                                    <strong style="font-size:12px; color:<?php echo $alcanzado ? '#27ae60' : '#888'; ?>;">
                                        +S/ <?php echo number_format($t->bono, 2); ?>
                                    </strong>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p class="text-muted text-center" style="font-size:12px; margin:0;">
                                Sin tramos configurados
                            </p>
                        <?php endif; ?>
                    </div>
                </div>

            </div>
        </div>

    </section>
</div>

<script>
$(document).ready(function () {
    if (typeof $.fn.DataTable !== 'undefined') {
        $('#tablaDetalle').DataTable({
            language: {
                lengthMenu: "Mostrar _MENU_ registros",
                zeroRecords: "Sin comisiones en este período",
                info: "Mostrando del _START_ al _END_ de _TOTAL_",
                search: "Buscar:",
                paginate: { first:"Primero", last:"Último", next:"Siguiente", previous:"Anterior" }
            },
            pageLength: 25,
            order: [[3, 'asc']]
        });
    }
});
</script>