<?php
//Activamos el almacenamiento en el buffer
ob_start();
session_start();

if (!isset($_SESSION["nombre"])) {
    header("Location: login.html");
} else {
    require '../config/global.php';
    require 'header.php';

    if ($_SESSION['escritorio'] == 1) {
        ?>
        <style>
            /* ESTILOS PERSONALIZADOS PARA NOTIFICACIONES ELEGANTES (Color Ratón/Gris) */
            .modal-content {
                border-radius: 8px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
                border: none;
            }

            .bootbox .modal-header {
                background-color: #5D6D7E;
                /* GRIS RATON / AZULADO ELEGANTE */
                color: white;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                padding: 15px;
                border-bottom: 2px solid #34495e;
            }

            .bootbox .modal-title {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 600;
                font-size: 18px;
                letter-spacing: 0.5px;
            }

            .bootbox .modal-body {
                padding: 25px;
                font-size: 15px;
                color: #555;
            }

            .bootbox .modal-footer {
                background-color: #f4f4f4;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                padding: 15px;
            }

            .bootbox .btn-primary {
                background-color: #5D6D7E !important;
                border-color: #5D6D7E !important;
                padding: 8px 25px;
                font-weight: bold;
                border-radius: 4px;
                transition: all 0.3s;
            }

            .bootbox .btn-primary:hover {
                background-color: #34495e !important;
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }

            /* Animación de carga */
            .lds-ring {
                display: inline-block;
                position: relative;
                width: 64px;
                height: 64px;
            }

            .lds-ring div {
                box-sizing: border-box;
                display: block;
                position: absolute;
                width: 51px;
                height: 51px;
                margin: 6px;
                border: 6px solid #5D6D7E;
                border-radius: 50%;
                animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                border-color: #5D6D7E transparent transparent transparent;
            }

            .lds-ring div:nth-child(1) {
                animation-delay: -0.45s;
            }

            .lds-ring div:nth-child(2) {
                animation-delay: -0.3s;
            }

            .lds-ring div:nth-child(3) {
                animation-delay: -0.15s;
            }

            @keyframes lds-ring {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
        <!--Contenido-->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="box">
                            <div class="box-header with-border">
                                <h1 class="box-title">Facturación Electrónica SRI
                                    <button class="btn btn-success" id="btnagregar" onclick="mostrarform(true)"><i
                                            class="fa fa-plus-circle"></i> Nueva Factura</button>
                                    <a href="#" target="_blank" id="btnHeaderRide" class="btn btn-warning"
                                        style="display:none;"><i class="fa fa-file-pdf-o"></i> VER RIDE</a>
                                </h1>
                                <div id="resultados_ajax" style="display:inline-block; margin-left: 20px;"></div>
                            </div>

                            <!-- /.box-header -->
                            <!-- centro -->
                            <div class="panel-body table-responsive" id="listadoregistros">
                                <table id="tbllistado" class="table table-striped table-bordered table-condensed table-hover">
                                    <thead>
                                        <th>Fecha</th>
                                        <th>Cliente</th>
                                        <th>RUC/CI</th>
                                        <th>Total</th>
                                        <th>Estado SRI</th>
                                        <th>Clave Acceso</th>
                                        <th>Opciones</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

                            <div class="panel-body" style="height: 400px;" id="formularioregistros">
                                <form name="formulario" id="formulario" method="POST">
                                    <div class="row">
                                        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <label>Cliente (*):</label>
                                            <input type="hidden" name="idcliente" id="idcliente">
                                            <input type="text" class="form-control" name="razon_social" id="razon_social"
                                                maxlength="100" placeholder="Nombre o Razón Social" required>
                                        </div>
                                        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <label>RUC/CI (*):</label>
                                            <input type="text" class="form-control" name="ruc_cliente" id="ruc_cliente"
                                                maxlength="13" placeholder="RUC o Cédula" required>
                                        </div>
                                        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <label>Email del Cliente:</label>
                                            <input type="email" class="form-control" name="email_cliente" id="email_cliente"
                                                maxlength="100" placeholder="correo@ejemplo.com">
                                            <small class="text-muted"><i class="fa fa-info-circle"></i> El SRI enviará la
                                                factura autorizada a este correo</small>
                                        </div>

                                        <!-- AREA DE ITEMS (Dinámica) -->
                                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-info" onclick="agregarDetalle()"><i
                                                        class="fa fa-plus"></i> Agregar Producto</button>
                                            </div>
                                            <table id="detalles"
                                                class="table table-striped table-bordered table-condensed table-hover">
                                                <thead style="background-color:#A9D0F5">
                                                    <th>Opciones</th>
                                                    <th>Descripción</th>
                                                    <th>Cantidad</th>
                                                    <th>Precio Unit.</th>
                                                    <th>IVA %</th>
                                                    <th>Subtotal</th>
                                                </thead>
                                                <tbody>
                                                    <!-- Las filas se agregarán dinámicamente aquí -->
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <th colspan="5" style="text-align:right">Subtotal Sin Impuestos:</th>
                                                        <th><input type="hidden" name="total_sin_impuestos"
                                                                id="total_sin_impuestos"><span
                                                                id="lbl_total_sin_impuestos">0.00</span></th>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="5" style="text-align:right">IVA 12%:</th>
                                                        <th><span id="lbl_iva_12">0.00</span></th>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="5" style="text-align:right">IVA 15%:</th>
                                                        <th><span id="lbl_iva_15">0.00</span></th>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="5" style="text-align:right">TOTAL A PAGAR:</th>
                                                        <th><input type="hidden" name="total_pagar" id="total_pagar"><span
                                                                id="lbl_total_pagar">0.00</span></th>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>

                                        <!-- SEPARATOR -->
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <hr
                                                style="border: 0; height: 2px; background: linear-gradient(to right, #00a65a, #00c0ef); margin: 30px 0 20px 0;">
                                        </div>

                                        <!-- AREA DE FIRMA - DISEÑO MEJORADO -->
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <style>
                                                .firma-card {
                                                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                                    border-radius: 15px;
                                                    padding: 0;
                                                    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
                                                    overflow: hidden;
                                                    margin-bottom: 25px;
                                                }

                                                .firma-card-header {
                                                    background: rgba(255, 255, 255, 0.1);

                                                    .firma-section {
                                                        background: #ffffff;
                                                        border: 1px solid #d2d6de;
                                                        border-radius: 3px;
                                                        margin-bottom: 20px;
                                                    }

                                                    .firma-section-header {
                                                        background-color: #f4f4f4;
                                                        border-bottom: 1px solid #d2d6de;
                                                        padding: 15px 15px;
                                                    }
                                                }

                                                .firma-section-header h3 {
                                                    margin: 0;
                                                    font-size: 16px;
                                                    font-weight: 600;
                                                    color: #444;
                                                }

                                                .firma-section-body {
                                                    padding: 15px;
                                                }

                                                .alert-success-custom {
                                                    background-color: #d4edda;
                                                    border: 1px solid #c3e6cb;
                                                    border-radius: 3px;
                                                    padding: 12px 15px;
                                                    color: #155724;
                                                    margin-bottom: 15px;
                                                }

                                                .alert-success-custom i {
                                                    margin-right: 8px;
                                                }

                                                .alert-danger-custom {
                                                    background-color: #f8d7da;
                                                    border: 1px solid #f5c6cb;
                                                    border-radius: 3px;
                                                    padding: 12px 15px;
                                                    color: #721c24;
                                                    margin-bottom: 15px;
                                                }

                                                .alert-danger-custom i {
                                                    margin-right: 8px;
                                                }

                                                .alert-danger-custom a {
                                                    color: #721c24;
                                                    text-decoration: underline;
                                                    font-weight: 600;
                                                }

                                                .form-datos-emisor {
                                                    background-color: #fff;
                                                    padding-top: 10px;
                                                }

                                                .form-datos-emisor .form-group label {
                                                    font-weight: 600;
                                                    color: #333;
                                                }

                                                .alert-info-custom {
                                                    background-color: #d1ecf1;
                                                    border-left: 4px solid #17a2b8;
                                                    padding: 12px 15px;
                                                    color: #0c5460;
                                                    margin-top: 15px;
                                                    border-radius: 3px;
                                                }

                                                .alert-info-custom i {
                                                    margin-right: 8px;
                                                }
                                            </style>

                                            <div class="firma-section">
                                                <div class="firma-section-header">
                                                    <h3>Datos del Emisor SRI</h3>
                                                </div>

                                                <div class="firma-section-body">
                                                    <!-- ESTADO: FIRMA CONFIGURADA -->
                                                    <div id="divFirmaGuardada" class="alert-success-custom"
                                                        style="display:none;">
                                                        <i class="fa fa-check-circle"></i>
                                                        <strong>Certificado Digital Configurado.</strong>
                                                        Su certificado está guardado de forma segura. Complete los datos del
                                                        emisor para facturar.
                                                    </div>

                                                    <!-- ESTADO: SIN CERTIFICADO -->
                                                    <div id="divSinCertificado" class="alert-danger-custom"
                                                        style="display:none;">
                                                        <i class="fa fa-exclamation-triangle"></i>
                                                        <strong>No tiene un certificado digital configurado.</strong><br>
                                                        Por favor, vaya a <a href="configuracion_firma.php"
                                                            target="_blank">Configuración de Firma Digital</a> para subir su
                                                        certificado .p12 primero.
                                                    </div>

                                                    <!-- FORMULARIO SIMPLIFICADO -->
                                                    <div id="divDatosEmisor" class="form-datos-emisor">
                                                        <div class="row">
                                                            <div class="col-md-6 col-sm-12">
                                                                <div class="form-group">
                                                                    <label>RUC del Emisor *</label>
                                                                    <input type="text" class="form-control" name="ruc_emisor"
                                                                        id="ruc_emisor" maxlength="13"
                                                                        placeholder="Ingrese el RUC de su empresa" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 col-sm-12">
                                                                <div class="form-group">
                                                                    <label>Contraseña del Certificado *</label>
                                                                    <input type="password" class="form-control"
                                                                        name="password_firma" id="password_firma"
                                                                        placeholder="Contraseña de su firma digital" required>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="alert-info-custom">
                                                            <i class="fa fa-info-circle"></i>
                                                            <strong>Nota:</strong> El certificado digital ya está configurado en
                                                            el sistema.
                                                            Solo ingrese el RUC de su empresa y la contraseña de su firma para
                                                            emitir facturas electrónicas.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <button class="btn btn-primary" type="button" id="btnGuardar"
                                                onclick="emitirFactura()"><i class="fa fa-save"></i> Emitir Factura</button>
                                            <button class="btn btn-danger" onclick="cancelarform()" type="button"><i
                                                    class="fa fa-arrow-circle-left"></i> Cancelar</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--Fin centro -->
                        </div><!-- /.box -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </section><!-- /.content -->

        </div><!-- /.content-wrapper -->
        <!--Fin-Contenido-->

        <?php require_once 'empty_state.php'; ?>
        <script>
          window.EMPTY_STATE_FACTURAS = <?php echo json_encode(hc_empty_state_html(
              'file-text-o',
              'Aún no has emitido facturas',
              'Las facturas electrónicas firmadas y autorizadas por el SRI aparecerán en esta lista.',
              'Emitir factura',
              '',
              'mostrarform(true)'
          )); ?>;
          window.ZERO_RECORDS_FACTURAS = "No se encontraron facturas con ese criterio.";
        </script>
        <script type="text/javascript" src="scripts/facturacion.js"></script>

        <?php
    } else {
        require 'noacceso.php';
    }

    require 'footer.php';
}
ob_end_flush();
?>