<div class="content-wrapper">
    <section class="content-header">
        <h1>Ver Comprobante</h1>
    </section>

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

                <!-- ================================================
                     PANEL PRINCIPAL — agrega badge SUNAT en el heading
                     ================================================ -->
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong>Datos del comprobante</strong>

                        <?php
                        // Tipos que van a SUNAT
                        $tipos_electronicos = array('01', '03', '07', '08');
                        $es_electronico = in_array($comprobante->tipo_comprobante_codigo, $tipos_electronicos);
                        ?>

                        <?php if($es_electronico): ?>
                            <span class="pull-right">
                                <?php if($comprobante->comprob_sunat == 1): ?>
                                    <span class="label label-success" style="font-size:12px; padding:4px 10px;">
                                        <i class="fa fa-check-circle"></i> Enviado a SUNAT
                                    </span>
                                <?php elseif($comprobante->comprob_sunat == 2): ?>
                                    <span class="label label-danger" style="font-size:12px; padding:4px 10px;">
                                        <i class="fa fa-times-circle"></i> Rechazado por SUNAT
                                    </span>
                                <?php else: ?>
                                    <span class="label label-warning" style="font-size:12px; padding:4px 10px;">
                                        <i class="fa fa-clock-o"></i> Pendiente SUNAT
                                    </span>
                                <?php endif; ?>
                            </span>
                        <?php endif; ?>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3">
                                <strong>Comprobante:</strong><br>
                                <?php echo $comprobante->tipo_comprobante_nombre; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Número:</strong><br>
                                <?php echo $comprobante->serie . '-' . $comprobante->numero; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Fecha:</strong><br>
                                <?php echo $comprobante->fecha; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Estado:</strong><br>
                                <?php echo $comprobante->estado_nombre; ?>
                            </div>
                        </div>

                        <br>

                        <div class="row">
                            <div class="col-md-3">
                                <strong>Forma de pago:</strong><br>
                                <?php echo !empty($comprobante->forma_pago_nombre) ? $comprobante->forma_pago_nombre : '-'; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Fecha vencimiento:</strong><br>
                                <?php echo !empty($comprobante->fecvencimiento) ? $comprobante->fecvencimiento : '-'; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Moneda:</strong><br>
                                <?php echo !empty($comprobante->moneda_nombre) ? $comprobante->moneda_nombre : '-'; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Vendedor:</strong><br>
                                <?php echo !empty(trim($comprobante->vendedor_nombre)) ? $comprobante->vendedor_nombre : '-'; ?>
                            </div>
                        </div>

                        <br>

                        <div class="row">
                            <div class="col-md-4">
                                <strong>Orden de compra cliente:</strong><br>
                                <?php echo !empty($comprobante->ordcomp_cliente) ? $comprobante->ordcomp_cliente : '-'; ?>
                            </div>
                            <div class="col-md-4">
                                <strong>Tipo de cambio:</strong><br>
                                <?php echo number_format((float)$comprobante->tipocambio, 4); ?>
                            </div>
                            <div class="col-md-4">
                                <strong>Origen:</strong><br>
                                <?php echo $comprobante->origen; ?>
                            </div>
                        </div>

                        <?php if(!empty($comprobante->observaciones)): ?>
                            <br>
                            <div class="row">
                                <div class="col-md-12">
                                    <strong>Observaciones:</strong><br>
                                    <?php echo nl2br($comprobante->observaciones); ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- ================================================
                     PANEL SUNAT — envío electrónico
                     Solo aparece para facturas, boletas, NC y ND
                     ================================================ -->
                <?php if($es_electronico): ?>
                <div class="panel panel-<?php
                    if($comprobante->comprob_sunat == 1) echo 'success';
                    elseif($comprobante->comprob_sunat == 2) echo 'danger';
                    else echo 'default';
                ?>">
                    <div class="panel-heading">
                        <strong><i class="fa fa-paper-plane"></i> Envío Electrónico SUNAT</strong>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3">
                                <strong>Estado:</strong><br>
                                <?php if($comprobante->comprob_sunat == 1): ?>
                                    <span class="text-success"><i class="fa fa-check-circle fa-lg"></i> Aceptado</span>
                                <?php elseif($comprobante->comprob_sunat == 2): ?>
                                    <span class="text-danger"><i class="fa fa-times-circle fa-lg"></i> Rechazado</span>
                                <?php else: ?>
                                    <span class="text-muted"><i class="fa fa-clock-o fa-lg"></i> Pendiente de envío</span>
                                <?php endif; ?>
                            </div>
                            <div class="col-md-6">
                                <?php if($comprobante->comprob_sunat == 2): ?>
                                    <strong>Motivo del rechazo:</strong><br>
                                    <span class="text-danger"><?php echo $comprobante->codigoqr ?? 'Ver panel de SUNAT para más detalles'; ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="col-md-3 text-right">
                                <?php if(tiene_permiso('sunat_enviar') && $comprobante->comprob_sunat != 1): ?>
                                    <button type="button"
                                            class="btn btn-primary btn-enviar-sunat"
                                            data-id="<?php echo $comprobante->id; ?>"
                                            data-numero="<?php echo $comprobante->serie.'-'.$comprobante->numero; ?>">
                                        <i class="fa fa-paper-plane"></i>
                                        <?php echo $comprobante->comprob_sunat == 2 ? 'Reintentar envío' : 'Enviar a SUNAT'; ?>
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endif; ?>

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <strong>Datos del cliente</strong>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <strong>Cliente:</strong><br>
                                <?php echo $comprobante->cliente_nombre; ?>
                            </div>
                            <div class="col-md-3">
                                <strong>Nro Documento:</strong><br>
                                <?php echo $comprobante->cliente_nro_documento; ?>
                            </div>
                            <div class="col-md-5">
                                <strong>Domicilio fiscal:</strong><br>
                                <?php echo !empty($comprobante->cliente_domicilio_fiscal) ? $comprobante->cliente_domicilio_fiscal : '-'; ?>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>Detalle</strong>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Código</th>
                                        <th>Descripción</th>
                                        <th style="width:120px;">Cantidad</th>
                                        <th style="width:140px;">Precio Unit.</th>
                                        <th style="width:140px;">Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if(!empty($detalle)): ?>
                                        <?php $n = 1; ?>
                                        <?php foreach($detalle as $item): ?>
                                            <tr>
                                                <td><?php echo $n++; ?></td>
                                                <td><?php echo $item->producto_codigo; ?></td>
                                                <td><?php echo !empty($item->descripcion) ? $item->descripcion : $item->producto_nombre; ?></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; ?>
                                    <?php else: ?>
                                        <tr>
                                            <td colspan="6" class="text-center">No hay detalle registrado</td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>

                        <div class="row">
                            <div class="col-md-4 col-md-offset-8">
                                <table class="table table-bordered">
                                    <tr>
                                        <th>Subtotal</th>
                                        <td class="text-right"><?php echo number_format((float)$comprobante->subtotal, 2); ?></td>
                                    </tr>
                                    <tr>
                                        <th>IGV (<?php echo number_format((float)$comprobante->igv_porcentaje * 100, 0); ?>%)</th>
                                        <td class="text-right"><?php echo number_format((float)$comprobante->igv, 2); ?></td>
                                    </tr>
                                    <?php if((float)$comprobante->otrostributos > 0): ?>
                                    <tr>
                                        <th>Otros tributos</th>
                                        <td class="text-right"><?php echo number_format((float)$comprobante->otrostributos, 2); ?></td>
                                    </tr>
                                    <?php endif; ?>
                                    <tr>
                                        <th><strong>TOTAL</strong></th>
                                        <td class="text-right"><strong><?php echo number_format((float)$comprobante->total, 2); ?></strong></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <?php if(!empty($retencion)): ?>
                    <div class="panel panel-warning">
                        <div class="panel-heading"><strong>Retención</strong></div>
                        <div class="panel-body">
                            <div class="row"><div class="col-md-6">
                                <table class="table table-bordered">
                                    <tr><th>Base imponible</th><td class="text-right"><?php echo number_format((float)$retencion->total, 2); ?></td></tr>
                                    <tr><th>Porcentaje</th><td class="text-right"><?php echo number_format((float)$retencion->porcentaje, 2); ?>%</td></tr>
                                    <tr><th>Monto retención</th><td class="text-right"><?php echo number_format((float)$retencion->importe_retencion, 2); ?></td></tr>
                                </table>
                            </div></div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if(!empty($detraccion)): ?>
                    <div class="panel panel-danger">
                        <div class="panel-heading"><strong>Detracción</strong></div>
                        <div class="panel-body">
                            <div class="row"><div class="col-md-6">
                                <table class="table table-bordered">
                                    <tr><th>Tipo</th><td><?php echo $detraccion->detraccion_codigo . ' - ' . $detraccion->detraccion_nombre; ?></td></tr>
                                    <tr><th>Base</th><td class="text-right"><?php echo number_format((float)$detraccion->total, 2); ?></td></tr>
                                    <tr><th>Porcentaje</th><td class="text-right"><?php echo number_format((float)$detraccion->porcentaje, 2); ?>%</td></tr>
                                    <tr><th>Importe detracción</th><td class="text-right"><?php echo number_format((float)$detraccion->importe_detraccion, 2); ?></td></tr>
                                </table>
                            </div></div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if(!empty($cuotas)): ?>
                    <div class="panel panel-success">
                        <div class="panel-heading"><strong>Cuotas</strong></div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead><tr><th>Nro Cuota</th><th>Fecha Vencimiento</th><th>Importe</th></tr></thead>
                                    <tbody>
                                        <?php foreach($cuotas as $item): ?>
                                        <tr>
                                            <td><?php echo $item->nro_cuota; ?></td>
                                            <td><?php echo $item->vencto_cuota; ?></td>
                                            <td class="text-right"><?php echo number_format((float)$item->importe_cuota, 2); ?></td>
                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="2" class="text-right">Total cuotas</th>
                                            <th class="text-right">
                                                <?php
                                                    $totalCuotas = 0;
                                                    foreach($cuotas as $c) $totalCuotas += (float)$c->importe_cuota;
                                                    echo number_format($totalCuotas, 2);
                                                ?>
                                            </th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if(!empty($historial)): ?>
                    <div class="panel panel-default">
                        <div class="panel-heading"><strong>Historial de estados</strong></div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead><tr><th>ID</th><th>Estado</th><th>Fecha</th><th>Usuario</th></tr></thead>
                                    <tbody>
                                        <?php foreach($historial as $item): ?>
                                        <tr>
                                            <td><?php echo $item->id; ?></td>
                                            <td><?php echo $item->estado_nombre; ?></td>
                                            <td><?php echo $item->comprob_fechaestado; ?></td>
                                            <td><?php echo !empty($item->usuario) ? $item->usuario : '-'; ?></td>
                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <a href="<?php echo base_url('index.php/ventas/comprobante'); ?>" class="btn btn-default">
                    Volver
                </a>

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

<!-- Modal respuesta SUNAT -->
<div class="modal fade" id="modalRespuestaSunat" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modalSunatHeader">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title"><i class="fa fa-paper-plane"></i> Respuesta SUNAT</h4>
            </div>
            <div class="modal-body" id="modalSunatBody">
                <div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i><br>Enviando a SUNAT...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="btnCerrarSunat" style="display:none;">
                    Cerrar
                </button>
                <button type="button" class="btn btn-primary" onclick="location.reload()" id="btnRecargarSunat" style="display:none;">
                    <i class="fa fa-refresh"></i> Actualizar página
                </button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {

    $('.btn-enviar-sunat').on('click', function() {
        var id     = $(this).data('id');
        var numero = $(this).data('numero');

        // Mostrar modal con spinner
        $('#modalSunatHeader').removeClass('bg-success bg-danger').addClass('bg-primary').css('color', '#fff');
        $('#modalSunatBody').html('<div class="text-center" style="padding:20px;"><i class="fa fa-spinner fa-spin fa-3x"></i><br><br>Enviando <strong>' + numero + '</strong> a SUNAT...<br><small class="text-muted">Esto puede tomar unos segundos</small></div>');
        $('#btnCerrarSunat, #btnRecargarSunat').hide();
        $('#modalRespuestaSunat').modal({ backdrop: 'static', keyboard: false });
        $('#modalRespuestaSunat').modal('show');

        // AJAX
        $.ajax({
            url: '<?php echo base_url("index.php/sunat/sunat/enviar_comprobante"); ?>',
            type: 'POST',
            data: { id: id },
            dataType: 'json',
            success: function(resp) {
                if (resp.status) {
                    $('#modalSunatHeader').removeClass('bg-primary bg-danger').addClass('bg-success');
                    var obs = '';
                    if (resp.observaciones && resp.observaciones.length > 0) {
                        obs = '<div class="alert alert-warning" style="margin-top:10px;"><strong>Observaciones:</strong><br>' + resp.observaciones.join('<br>') + '</div>';
                    }
                    $('#modalSunatBody').html(
                        '<div class="text-center" style="color:green; padding:10px;">' +
                        '<i class="fa fa-check-circle fa-4x"></i>' +
                        '</div>' +
                        '<p><strong>Código SUNAT:</strong> ' + (resp.codigo || '0') + '</p>' +
                        '<p><strong>Descripción:</strong> ' + resp.message + '</p>' +
                        obs
                    );
                } else {
                    $('#modalSunatHeader').removeClass('bg-primary bg-success').addClass('bg-danger');
                    $('#modalSunatBody').html(
                        '<div class="text-center" style="color:red; padding:10px;">' +
                        '<i class="fa fa-times-circle fa-4x"></i>' +
                        '</div>' +
                        '<p><strong>Error:</strong> ' + resp.message + '</p>'
                    );
                }
                $('#btnCerrarSunat, #btnRecargarSunat').show();
            },
            error: function() {
                $('#modalSunatHeader').removeClass('bg-primary bg-success').addClass('bg-danger');
                $('#modalSunatBody').html('<p class="text-danger"><i class="fa fa-times-circle"></i> Error de conexión. Verificá tu red e intentá nuevamente.</p>');
                $('#btnCerrarSunat').show();
            }
        });
    });

});
</script>
