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

    <section class="content">
        <div class="row">
            <div class="col-md-6">

                <!-- Cuota del vendedor -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong><i class="fa fa-flag"></i> Meta / Cuota del vendedor</strong>
                    </div>
                    <div class="panel-body">
                        <div class="input-group">
                            <span class="input-group-addon">S/</span>
                            <input type="number" id="inputCuota" class="form-control"
                                   value="<?php echo number_format($vendedor->comision_cuota, 2, '.', ''); ?>"
                                   step="0.01" min="0" placeholder="0.00">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" id="btnGuardarCuota">
                                    <i class="fa fa-save"></i> Guardar cuota
                                </button>
                            </span>
                        </div>
                        <small class="text-muted">
                            Monto de ventas (abonadas) que el vendedor debe alcanzar en el período.
                        </small>
                    </div>
                </div>

                <!-- Tramos -->
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <strong><i class="fa fa-trophy"></i> Tramos de bono</strong>
                    </div>
                    <div class="panel-body">

                        <table class="table table-bordered table-condensed" id="tablaTramos"
                               style="font-size:13px;">
                            <thead>
                                <tr>
                                    <th>Desde % cumplimiento</th>
                                    <th>Meta equivalente</th>
                                    <th class="text-right">Bono S/</th>
                                    <th style="width:50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (!empty($tramos)): ?>
                                    <?php foreach ($tramos as $t): ?>
                                        <?php
                                        $meta_equiv = (float)$vendedor->comision_cuota * ((float)$t->desde_pct / 100);
                                        ?>
                                        <tr>
                                            <td><strong><?php echo $t->desde_pct; ?>%</strong></td>
                                            <td class="text-muted">
                                                S/ <?php echo number_format($meta_equiv, 2); ?>
                                            </td>
                                            <td class="text-right text-success">
                                                <strong>S/ <?php echo number_format($t->bono, 2); ?></strong>
                                            </td>
                                            <td class="text-center">
                                                <button class="btn btn-danger btn-xs btn-eliminar-tramo"
                                                        data-id="<?php echo $t->id; ?>">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <tr id="filaSinTramos">
                                        <td colspan="4" class="text-center text-muted">
                                            Sin tramos configurados
                                        </td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>

                        <!-- Agregar tramo -->
                        <hr style="margin:10px 0;">
                        <p style="font-size:12px; font-weight:bold; margin-bottom:8px;">
                            <i class="fa fa-plus"></i> Agregar tramo
                        </p>
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label style="font-size:12px;">Desde % cumplimiento</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="nuevoDesde" class="form-control"
                                               step="0.01" min="1" placeholder="Ej: 100">
                                        <span class="input-group-addon">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label style="font-size:12px;">Bono (S/)</label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-addon">S/</span>
                                        <input type="number" id="nuevoBono" class="form-control"
                                               step="0.01" min="0.01" placeholder="Ej: 200">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2" style="padding-top:23px;">
                                <button class="btn btn-success btn-sm btn-block" id="btnAgregarTramo">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="panel-footer">
                        <a href="<?php echo base_url('index.php/finanzas/comisiones'); ?>"
                           class="btn btn-default btn-sm">
                            <i class="fa fa-arrow-left"></i> Volver
                        </a>
                    </div>
                </div>

            </div>

            <!-- Ayuda -->
            <div class="col-md-4">
                <div class="panel panel-info">
                    <div class="panel-heading"><strong><i class="fa fa-info-circle"></i> ¿Cómo funciona?</strong></div>
                    <div class="panel-body" style="font-size:12px;">
                        <p>Los tramos definen el <strong>bono adicional</strong> que recibe el vendedor según el porcentaje de su cuota que haya alcanzado en el período.</p>
                        <p>Al cierre del período, el sistema evalúa el tramo más alto alcanzado y aplica ese bono.</p>
                        <hr>
                        <p><strong>Ejemplo con cuota S/ <?php echo number_format($vendedor->comision_cuota, 0); ?>:</strong></p>
                        <?php foreach ($tramos as $t): ?>
                            <?php $meta = (float)$vendedor->comision_cuota * ((float)$t->desde_pct / 100); ?>
                            <p style="margin:4px 0;">
                                <i class="fa fa-arrow-right text-warning"></i>
                                Si vende ≥ S/ <?php echo number_format($meta, 2); ?>
                                (<?php echo $t->desde_pct; ?>%)
                                → <strong class="text-success">bono S/ <?php echo number_format($t->bono, 2); ?></strong>
                            </p>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>

<script>
var VENDEDOR_ID   = <?php echo $vendedor->id; ?>;
var URL_TRAMO     = '<?php echo base_url("index.php/finanzas/comisiones/store_tramo"); ?>';
var URL_DEL_TRAMO = '<?php echo base_url("index.php/finanzas/comisiones/delete_tramo"); ?>';
var URL_CUOTA     = '<?php echo base_url("index.php/finanzas/comisiones/store_cuota"); ?>';

$(document).ready(function () {

    // Guardar cuota
    $('#btnGuardarCuota').on('click', function () {
        var cuota = parseFloat($('#inputCuota').val()) || 0;
        if (cuota <= 0) { Swal.fire('Validación', 'Ingrese una cuota válida.', 'warning'); return; }

        $.post(URL_CUOTA, { vendedor_id: VENDEDOR_ID, cuota: cuota }, function (resp) {
            if (resp.status) {
                Swal.fire({ icon:'success', title:'Correcto', text: resp.msg, timer:1500, showConfirmButton:false });
            } else {
                Swal.fire('Error', resp.msg, 'error');
            }
        }, 'json');
    });

    // Agregar tramo
    $('#btnAgregarTramo').on('click', function () {
        var desde = parseFloat($('#nuevoDesde').val()) || 0;
        var bono  = parseFloat($('#nuevoBono').val()) || 0;

        if (desde <= 0) { Swal.fire('Validación', 'Ingrese el % mínimo de cumplimiento.', 'warning'); return; }
        if (bono  <= 0) { Swal.fire('Validación', 'Ingrese el monto del bono.', 'warning'); return; }

        $.post(URL_TRAMO, { vendedor_id: VENDEDOR_ID, desde_pct: desde, bono: bono }, function (resp) {
            if (resp.status) {
                Swal.fire({ icon:'success', title:'Correcto', text: resp.msg, timer:1500, showConfirmButton:false })
                    .then(function() { location.reload(); });
            } else {
                Swal.fire('Error', resp.msg, 'error');
            }
        }, 'json');
    });

    // Eliminar tramo
    $(document).on('click', '.btn-eliminar-tramo', function () {
        var id = $(this).data('id');
        Swal.fire({
            title: '¿Eliminar tramo?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
        }).then(function (result) {
            if (result.isConfirmed) {
                $.post(URL_DEL_TRAMO, { id: id }, function (resp) {
                    if (resp.status) {
                        Swal.fire({ icon:'success', title:'Eliminado', timer:1200, showConfirmButton:false })
                            .then(function() { location.reload(); });
                    }
                }, 'json');
            }
        });
    });
});
</script>