<?php
date_default_timezone_set($_SESSION["zona_horaria"]);
setlocale(LC_ALL,"es_ES@euro","es_ES","esp");
$fecha = date("Y-m-d");
$hora = date("H:i:s");
$codigo_anular_venta = Session::get('cod_seg');
?>
<input type="hidden" id="igv" value="<?php echo igv_dec; ?>"/>
<input type="hidden" id="url" value="<?php echo URL; ?>"/>
<input type="hidden" id="apcid" value="<?php echo Session::get('apcid'); ?>"/>
<input type="hidden" id="pc_ip" value="<?php echo Session::get('pc_ip'); ?>"/>
<input type="hidden" id="print_com" value="<?php echo Session::get('print_com'); ?>"/>
<input type="hidden" id="print_pre" value="<?php echo Session::get('print_pre'); ?>">
<input type="hidden" id="print_cpe" value="<?php echo Session::get('print_cpe'); ?>">
<input type="hidden" id="pc_name" value="<?php echo Session::get('pc_name'); ?>"/>
<input type="hidden" id="moneda" value="<?php echo Session::get('moneda'); ?>"/>
<input type="hidden" id="codped" value="<?php echo Session::get('codped'); ?>"/>
<input type="hidden" id="codtipoped" value="<?php echo Session::get('codtipoped'); ?>"/>
<input type="hidden" id="sep_items" value="<?php echo Session::get('sep_items'); ?>"/>
<input type="hidden" id="verpdf" value="<?php echo Session::get('verpdf'); ?>"/>
<input type="hidden" id="imp_icbper" value="<?php echo Session::get('imp_val_bol'); ?>"/>
<input type="hidden" id="codtipopedentrega" value="0"/>
<input type="hidden" id="codrepartidor" value="1"/>
<input type="hidden" id="rol_usr" value="<?php echo Session::get('rol'); ?>"/>
<input type="hidden" id="tribAcr" value="<?php echo Session::get('tribAcr'); ?>"/>
<input type="hidden" id="diAcr" value="<?php echo Session::get('diAcr'); ?>"/>
<input type="hidden" id="api_wsp" value="<?php echo Session::get('api_wsp'); ?>"/>
<input type="hidden" id="mostrarimagen" value="<?php echo Session::get('mostrarimagen'); ?>"/>
<input type="hidden" id="codcomision" value="0"/>
<input type="hidden" name="codpagina" id="codpagina" value="2"/>
<input type="hidden" id="codimpcomandamesa" value="<?php echo Session::get('opc_03'); ?>"/>
<input type="hidden" id="codigo_anular_venta" value="<?php echo $codigo_anular_venta; ?>"/>
<input type="hidden" id="codigo_" value="0"/>
<input type="hidden" id="nota_ind" value="<?php echo Session::get('nota_ind'); ?>"/>
<input type="hidden" id="mesaje_waz" value="Su comprobante de pago electrónico ha sido generado correctamente, puede revisarlo en el siguiente enlace:"/>
<!--<input type="hidden" id="host_pc" value="<?php echo gethostname(); ?>"/>--> 
<input type="hidden" id="limits_invoices" value="<?php echo $this->Invoice['limits']['total_invoices']; ?>"/>
<input type="hidden" id="current_invoices" value="<?php echo $this->Invoice['current']['total_invoices']; ?>"/>
<input type="hidden" id="locked_invoices" value="<?php echo $this->Invoice['locked_invoices']; ?>"/>
<input type="hidden" id="entorno" value="<?php echo ROOT_UBL21.Session::get('ruc'); ?>"/>
<input type="hidden" id="dato_usuario" value="<?=Session::get('nombres')?>"/>
<input type="hidden" id="precio_comanda" value="<?=Session::get('precio_comanda')?>"/>
<input type="hidden" id="direccion_comanda" value="<?=Session::get('direccion_comanda')?>"/>
<input type="hidden" id="pedido_comanda" value="<?=Session::get('pedido_comanda')?>"/>

<br>
<style>
/* MODERN POS STYLES INJECTED */
:root {
    --primary-color: #4f46e5;
    --success-color: #10b981;
    --card-bg: #ffffff;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.card-modern {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid #e2e8f0;
}
.btn-primary-modern {
    background: linear-gradient(135deg, var(--primary-color), #4338ca);
    color: white; border: none; border-radius: 12px; padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}
.btn-success-modern {
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: white; border: none; border-radius: 12px; padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}
.form-control-modern {
    border-radius: 12px; border: 1px solid #e2e8f0; padding: 12px 16px; background-color: #f8fafc;
}
.form-control-modern:focus {
    background-color: #fff; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.table-modern { border-collapse: separate; border-spacing: 0; width: 100%; border-radius: 12px; overflow: hidden; }
.table-modern thead th { background-color: #f1f5f9; color: #64748b; font-weight: 600; text-transform: uppercase; padding: 12px 16px; }
.table-modern tbody td { border-bottom: 1px solid #f1f5f9; padding: 12px 16px; }
.modal-content-modern { border-radius: 20px; border: none; box-shadow: var(--shadow-lg); overflow: hidden; }

/* === RESPONSIVE MODAL LAYOUT PARA TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Contenedor principal: expandir a 95% del viewport */
    .page-wrapper {
        max-width: 95% !important;
        width: 95% !important;
    }
    
    /* CRÍTICO: Modal dialog debe ocupar 95% del ancho */
    .modal-dialog,
    .modal-dialog.modal-fullscreen {
        max-width: 95% !important;
        width: 95% !important;
        margin: 1.75rem auto !important;
    }
    
    /* Panel de pedidos: ocultar en tablets */
    .col-lg-3.u4 {
        display: none !important;
    }
    
    /* Expandir .col-md-7 a 100% en tablets */
    .col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Grid de productos: 3 columnas en tablets iPad */
    #list-productos,
    #list-productos .section-list,
    #list-productos > div {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Producto individual: ocupar celda completa */
    #list-productos .card-menu-wrapper,
    #list-productos > div > div {
        width: 100% !important;
        min-width: 0 !important;
    }
}






/* === PAYMENT VISIBILITY FIX v1769036069 === */
.display-pago-tarjeta[style*="display: none"],
.display-pago-tarjeta[style*="display:none"] {
    display: none !important;
}
.display-codigo-operacion[style*="display: none"],
.display-codigo-operacion[style*="display:none"] {
    display: none !important;
}

/* === OVERRIDE FOR MEDIA QUERY 769px-1280px === */
@media (min-width: 769px) and (max-width: 1280px) {
    .display-pago-tarjeta[style*="display: none"],
    .display-pago-tarjeta[style*="display:none"] {
        display: none !important;
    }
    .display-codigo-operacion[style*="display: none"],
    .display-codigo-operacion[style*="display:none"] {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    #modal-facturar .modal-dialog.modal-fullscreen {
        width: 98vw !important;
        max-width: 98vw !important;
        margin: 0.75rem auto !important;
    }

    #modal-facturar .facturar-layout-row > .col-md-5,
    #modal-facturar .facturar-layout-row > .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #modal-facturar .payment-input-grid .input-group {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767.98px) {
    #modal-facturar .payment-input-grid .input-group {
        flex: 1 1 100% !important;
    }

    #modal-facturar #totals-summary-row > .flex-fill {
        min-width: 46% !important;
        flex: 1 1 46%;
    }

    #modal-facturar .scroll_list_items_facturar {
        max-height: 36vh;
        overflow-y: auto;
    }
}

</style>
<div class="row u4-1">
    <div class="col-lg-9 u4">
        <div class="card card-modern m-b-0">
            <div class="card-body p-0">
                <div class="tab-pane p-0 active" id="tabp-1" role="tabpanel">
                    <div class="vtabs customvtab w-100">
                    <!-- poner slim a las categorias -->
                        <ul class="scroll_productos nav nav-tabs tabs-vertical hidden-xs-down" id="list-catgrs" role="tablist" style="display:block">
                        </ul>
                        <div class="tab-content w-100" style="padding:5px">
                            <div class="scroll_productos" id="list-productos"></div> 
                        </div>
                    </div>
                </div>
            </div>
            <div id="card2"></div>
        </div>
    </div>
    <div class="col-lg-3 u4">
        <div class="card card-modern m-b-0">
            <div class="card-body p-b-0">
                <div class="d-flex flex-wrap0">
                    <div>
                        <h4 class="card-title">
                            <span class="pedido-numero-icono"></span>
                            <span class="pedido-numero font-medium text-warning"></span>
                        </h4>
                        <h5>
                            <i class="pedido-cliente-icono"></i> 
                            <span class="pedido-cliente font-medium text-success"></span>
                        </h5>
                    </div>
                    <div class="ml-auto align-self-center bc" style="display: none;">
                        <input type="hidden" name="codped" id="codped" value="<?php echo Session::get('codped'); ?>"/>
                        <button class="btn btn-primary-modern" id="btn-confirmar">CONFIRMAR</button>
                    </div>
                    <div class="ml-auto align-self-center btn-imp"></div>
                </div>
                <input type="hidden" id="nombre_salon" value="" />
                <input type="hidden" id="nombre_mozo" value="" />
            </div>
            <div><hr class="m-b-0"></div>
            <div class="scroll_orden">
                <div id="nvo-ped" style="display: none;">
                    <table class="table table-hover" style="margin-bottom: -20px !important; margin-top: 0px !important;" id="nvo-ped-det"></table>
                    <div><hr class="m-b-0"></div>
                </div>
                <div class="comment-widgets m-b-0" id="list-detped" style="height: 80%;"></div>
            </div>            
            <div class="card-body p-0">
                <div class="row" style="margin-left: 0; margin-right: 0;">
                    <?php if(Session::get('rol') <> 5) { ?>
                        <div class="col-5 btn-dividir-pos opc1" style="display: none" onclick="conf_dividir(<?php echo Session::get('codped'); ?>,2);">
                            <div class="d-flex justify-center">
                                <div class="display-6 text-white"><i class="fas fa-copy"></i></div>
                                <div class="m-l-10 align-self-center">
                                    <h6 class="text-white">DIVIDIR<br> CUENTA</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-7 btn-pagar-pos opc1" style="display: none" onclick="facturar(<?php echo Session::get('codped'); ?>,1);">
                            <div class="d-flex justify-center">
                                <div class="display-6 text-white"><i class="far fa-money-bill-alt"></i></div>
                                <div class="m-l-10 align-self-center">
                                    <h4 class="text-white m-b-0 font-bold" style="line-height: 10px;"><span id="totalPagar"></span></h4>
                                    <small class="text-white font-medium">COBRAR</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 btn-mozo-pos opc3" style="display: none">
                            <div class="d-flex justify-center">
                                <div class="display-6 text-white"><i class="far fa-money-bill-alt"></i></div>
                                <div class="m-l-10 align-self-center">
                                    <h3 class="text-white m-b-0 font-bold"><span class="totalPagar" id="totalPagar"></span></h3>
                                </div>
                            </div>
                        </div>
                    <?php } else { ?>
                        <div class="col-12 btn-mozo-pos opc1" style="display: none">
                            <div class="d-flex justify-center">
                                <div class="display-6 text-white"><i class="far fa-money-bill-alt"></i></div>
                                <div class="m-l-10 align-self-center">
                                    <h3 class="text-white m-b-0 font-bold"><span id="totalPagar"></span></h3>
                                </div>
                            </div>
                        </div>
                    <?php } ?>                   
                    <div class="col-12 btn-cancelar-pos opc2" style="display: none" onclick="anular_pedido(<?php echo Session::get('codped'); ?>);">
                        <div class="d-flex justify-center">
                            <div class="display-6 text-white"><i class="fas fa-times-circle"></i></div>
                            <div class="m-l-10 align-self-center">
                                <h6 class="text-white">CANCELAR PEDIDO</h6>
                            </div>
                        </div>
                    </div>            
                </div>
            </div>
        </div>
    </div>
    <div class="">
        <button class="right-side-toggle waves-effect waves-light btn-primary-modern btn btn-circle btn-lg btn-categ pull-right m-l-10" style="bottom: 122px"><i class="fas fa-chevron-circle-left text-white"></i></button>
        <button class="waves-effect waves-light btn-inverse btn btn-circle btn-lg btn-up" style="bottom: 65px"><i class="ti-arrow-circle-up text-white"></i></button>
        <button class="waves-effect waves-light btn-inverse btn btn-circle btn-lg btn-down" style="bottom: 10px"><i class="ti-arrow-circle-down text-white"></i></button>
    </div>
    <!-- Right sidebar -->
    <!-- ============================================================== -->
    <!-- .right-sidebar -->
    <div class="right-sidebar">
        <div class="rpanel-title"> Categor&iacute;as <span><i class="ti-close right-side-toggle"></i></span> </div>
        <div class="r-panel-body p-0">
            <div class="scroll_categorias list-group font-13" id="list-catgrs-movil"></div>         
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Right sidebar -->
    <!-- ============================================================== -->
</div>

<div class="modal" id="modal-facturar" tabindex="-1" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content modal-content-modern">
        <form id="form-facturar" method="post" enctype="multipart/form-data" class="form-facturar">
        <input type="hidden" name="id_pedido" id="id_pedido">
        <input type="hidden" name="dividir_cuenta" id="dividir_cuenta">
        <input type="hidden" name="total_pedido" id="total_pedido">
        <input type="hidden" name="total_venta" id="total_venta">
            <div class="modal-header">
                <h4 class="modal-title text-white"><strong>DETALLE PEDIDO</strong></h4>
            </div>
            <div class="modal-body p-t-0 p-b-0" >
                <div class="container-fluid p-l-0 p-r-0" style="background: #fbfdff;">
                    <div class="row m-0 p-0">
                        <div class="col-12 p-3 bg-white border-bottom">
                            <!-- Payment Inputs (Moved) -->
                            <div class="col-lg-12 p-t-10 p-b-10" id="payment-inputs-top">
                                <div class="mensaje-pago" style="display: none;"></div>
                                
                                <div class="d-flex flex-wrap payment-input-grid" style="gap: 10px;">
                                    <!-- Efectivo -->
                                    <div class="input-group display-pago-efectivo" style="flex: 1; min-width: 120px;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text text-white" style="background-color: #28a745; border-color: #28a745; font-weight: bold; padding: 0 10px;">EFE</span>
                                        </div>
                                        <input type="text" class="form-control display-pago-efectivo doble_clic" style="text-align: right; font-weight: bold;" name="pago_efe" id="pago_efe" autocomplete="off" onclick="limpiar_pago('pago_efe')">
                                    </div>

                                    <!-- Tarjeta -->
                                    <div class="input-group display-pago-tarjeta" style="flex: 1; min-width: 120px; display: none;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text text-white" style="background-color: #17a2b8; border-color: #17a2b8; font-weight: bold; padding: 0 10px;">TAR</span>
                                        </div>
                                        <input type="text" class="form-control display-pago-tarjeta doble_clic" style="text-align: right; font-weight: bold;" name="pago_tar" id="pago_tar" value="0.00" autocomplete="off" onclick="limpiar_pago('pago_tar')"/>
                                    </div>
                                    
                                    <!-- Yape -->
                                    <div class="input-group display-pago-tarjeta" style="flex: 1; min-width: 120px; display: none;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text text-white" style="background-color: #6f42c1; border-color: #6f42c1; font-weight: bold; padding: 0 10px;">YAPE</span>
                                        </div>
                                        <input type="text" class="form-control display-pago-tarjeta doble_clic" style="text-align: right; font-weight: bold;" name="pago_yape" id="pago_yape" value="0.00" autocomplete="off" onclick="limpiar_pago('pago_yape')"/>
                                    </div>

                                    <!-- Plin -->
                                    <div class="input-group display-pago-tarjeta" style="flex: 1; min-width: 120px; display: none;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text text-white" style="background-color: #6f42c1; border-color: #6f42c1; font-weight: bold; padding: 0 10px;">PLIN</span>
                                        </div>
                                        <input type="text" class="form-control display-pago-tarjeta doble_clic" style="text-align: right; font-weight: bold;" name="pago_plin" id="pago_plin" value="0.00" autocomplete="off" onclick="limpiar_pago('pago_plin')"/>
                                    </div>

                                    <!-- Transferencia -->
                                    <div class="input-group display-pago-tarjeta" style="flex: 1; min-width: 120px; display: none;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text text-white" style="background-color: #6f42c1; border-color: #6f42c1; font-weight: bold; padding: 0 10px;">TRANS</span>
                                        </div>
                                        <input type="text" class="form-control display-pago-tarjeta doble_clic" style="text-align: right; font-weight: bold;" name="pago_tran" id="pago_tran" value="0.00" autocomplete="off" onclick="limpiar_pago('pago_tran')"/>
                                    </div>
                                    
                                     <!-- Voucher (Moved to end) -->
                                     <div class="input-group display-codigo-operacion" style="flex: 1; min-width: 150px; display: none;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-white" id="label-voucher" style="font-size: 11px; font-weight: bold;">COD OP</span>
                                        </div>
                                        <input type="text" class="form-control" name="codigo_operacion" id="codigo_operacion" autocomplete="off" placeholder="Ingrese código...">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-7 display-pago-rapido-efectivo">
                                    <div class="col-sm-12 text-left m-t-10 display-pago-rapido-efectivo">
                                        <label class="font-13 text-inverse">Pago Efectivo R&aacute;pido</label>
                                    </div>
                                    <div class="col-sm-12 text-left display-pago-rapido-efectivo">
                                        <span class="round round-primary opc-01 p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;"></span>
                                        <span class="round p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;" onclick="opcion_pago_efectivo(10);">10</span>
                                        <span class="round p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;" onclick="opcion_pago_efectivo(20);">20</span>
                                        <span class="round p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;" onclick="opcion_pago_efectivo(50);">50</span>
                                        <span class="round p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;" onclick="opcion_pago_efectivo(100);">100</span>
                                        <span class="round p-l-10 p-r-10" style="width: auto; border-radius: 0px; cursor: pointer;" onclick="opcion_pago_efectivo(200);">200</span>
                                    </div>
                                </div>
                                <div class="col-5 display-codigo-operacion">
                                    <div class="col-lg-12 m-t-10">
                                        <label class="font-13 text-inverse">Ingrese su c&oacute;digo de voucher</label>
                                        <div class="form-group">                               
                                            <input type="text" class="form-control" name="codigo_operacion" id="codigo_operacion" autocomplete="off"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 p-t-10 p-b-0">
                                <div class="mensaje-amortizacion animated shake" style="display: none;">
                                    <div class="alert alert-warning m-b-0"><i class="fas fa-info-circle"></i> <span class="mensaje-amortizacion-text"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row p-l-0 facturar-layout-row" style="padding: 0px ; margin: 0px">
                        <!-- Column -->
                        <div class="col-md-5 p-l-0 p-r-0 b-l b-r" style="height: 60%;background: #fff;">
                            <table class="table table-modern table-hover m-b-0 lista-producto-facturar">
                                <thead class="text-white" style="background: #79a3b1;">
                                    <tr>
                                        <th width="20%">Cant.</th>
                                        <th width="60%">Producto</th>
                                        <th width="20%" class="text-right">Total</th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll_list_items_facturar lista-producto-facturar">
                                <table class="table stylish-table m-b-0" style="background: #fff;">
                                    <tbody id="list-items-facturar" class="tb-st"></tbody>
                                </table>
                            </div>
                            <table class="table table-hover mb-0  lista-venta-por-consumo" style="display: none;">
                                <thead class="text-white" style="background: #79a3b1;">
                                    <tr>
                                        <th width="100%">Descripci&oacute;n</th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll_list_items_facturar lista-venta-por-consumo" style="display: none;">
                                <table class="table stylish-table mb-0 " style="background: #fff;">
                                    <tbody class="tb-st">
                                        <tr class="comment-list">
                                            <td width="100%" ><input type="text" class="form-control" id="venta_por_consumo_concepto" value="POR CONSUMO"></td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <!-- Column -->
                        <div class="col-md-7" style="background: #fbfdff; padding: 0px; margin: 0px">
                            <table class="table table-modern table-hover s0">
                                <thead class="text-white" style="background: #ffc478;">
                                    <tr>
                                        <th width="50%" class="text-right" style="vertical-align: middle; height: 10px; padding: 4px">TIPO DE DOCUMENTO:</th>
                                        <th style="height: 10px; padding: 4px">
                                            <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                            <?php foreach($this->TipoDocumento as $key): 
                                                if($key['defecto'] == '1'){
                                                    $tdoc_defecto = $key['id_tipo_doc'];
                                                }
    
                                            ?>
                                                <label class="btn waves-effect waves-light btn-secondary btn-tipo-doc-<?php echo $key['id_tipo_doc']; ?> ">
                                                    <input type="radio" name="tipo_doc" value="<?php echo $key['id_tipo_doc']; ?>" autocomplete="off" ><?php echo ($key['id_tipo_doc'] == 1)? 'BOLETA': $key['descripcion']; ?>
                                                </label>
                                            <?php endforeach; ?>
                                                <!-- <label class="btn waves-effect waves-light btn-secondary btn-tipo-doc-1">
                                                    <input type="radio" name="tipo_doc" value="1" autocomplete="off">BOLETA
                                                </label>
                                                <label class="btn waves-effect waves-light btn-secondary btn-tipo-doc-2">
                                                    <input type="radio" name="tipo_doc" value="2" autocomplete="off"> FACTURA
                                                </label>
                                                <label class="btn waves-effect waves-light btn-secondary btn-tipo-doc-3">
                                                    <input type="radio" name="tipo_doc" value="3" autocomplete="off" checked="checked"> NOTA DE VENTA
                                                </label> -->
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="col-lg-12 p-t-10 p-b-20">
                                <input type="hidden" name="cliente_id" id="cliente_id" value=""/>
                                <input type="hidden" name="cliente_tipo" id="cliente_tipo" value="1"/>
                                <label class="font-13 text-inverse">BUSCAR CLIENTE</label>
                                <div class="input-group">
                                    <div class="opcion-cliente input-group-prepend"></div>                                
                                    <input type="text" class="form-control form-control-modern" name="buscar_cliente" id="buscar_cliente" autocomplete="off">
                                    <a class="input-group-append" href="javascript:void(0)" id="btnClienteLimpiar"data-original-title="Limpiar datos" data-toggle="tooltip" data-placement="top">
                                        <span class="input-group-text bg-header">
                                            <small><i class="fas fa-times link-danger"></i></small>
                                        </span>
                                    </a>
                                </div>
                            </div>
                            <table class="table table-modern table-hover b-t b-l b-r b-b m-b-0">
                                <thead class="text-white" style="background: #75cfb8;">
                                    <tr>
                                        <th width="100%" style="vertical-align: middle;">FORMAS DE PAGO</th>
                                        <th>           
                                            <select class="selectpicker" name="tipo_pago" id="tipo_pago" data-style="form-control btn-secondary" data-width="70%" data-size="5" data-live-search-style="begins" data-live-search="true" autocomplete="off">
                                                <?php foreach($this->TipoPago as $key => $value): ?>
                                                    <option label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                                <?php endforeach; ?>
                                            </select>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <hr class="m-t-0 m-b-0">
                            <!-- Totals Section - Responsive Grid Layout -->
                            <div class="d-flex flex-wrap justify-content-between align-items-center w-100 p-2" id="totals-summary-row" style="background: #fbfdff; border-top: 1px solid #dee2e6; gap: 8px;">
                                
                                <!-- Sub Total -->
                                <div class="text-center flex-fill" style="min-width: 80px;">
                                    <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">SUB TOTAL</small>
                                    <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> <span class="subtotal">22.00</span></span>
                                </div>

                                <!-- Descuento -->
                                <div class="text-center flex-fill display-descuento" style="min-width: 80px;">
                                    <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">DESCUENTO</small>
                                    <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> 
                                        <span class="descuento">0.00</span>
                                        <input type="hidden" name="descuento_monto_hidden" id="descuento_monto_hidden" class="descuento" value="0.00">
                                        <input type="hidden" name="descuento_tipo_hidden" id="descuento_tipo_hidden" value="">
                                        <input type="hidden" name="descuento_motivo_hidden" id="descuento_motivo_hidden" value="">
                                        <input type="hidden" name="descuento_personal_hidden" id="descuento_personal_hidden" value="">
                                    </span>
                                </div>

                                <!-- Delivery -->
                                <div class="text-center flex-fill display-comision-delivery text-primary" style="min-width: 80px; cursor: pointer;">
                                    <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">DELIVERY <i class="fas fa-edit"></i></small>
                                    <span class="font-bold font-14"><?php echo Session::get('moneda'); ?> 
                                        <span class="comision_delivery">0.00</span>
                                        <input type="hidden" name="comision_delivery" id="comision_delivery" class="comision_delivery" value="0.00">
                                    </span>
                                </div>

                                <!-- Comision Tarjeta -->
                                <div class="text-center flex-fill display-comision-tarjeta" style="display: none; min-width: 80px;">
                                    <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">COMISIÓN</small>
                                    <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> 
                                        <span class="comision_tarjeta">0.00</span>
                                        <input type="hidden" name="comision_tarjeta" id="comision_tarjeta" class="comision_tarjeta" value="0.00"/>
                                    </span>
                                </div>

                                <!-- Total -->
                                <div class="text-center flex-fill" style="min-width: 90px;">
                                    <small class="text-muted font-bold d-block" style="font-size: 11px; text-transform: uppercase; color: #000;">TOTAL</small>
                                    <span class="font-bold text-success font-16">
                                        <?php echo Session::get('moneda'); ?> 
                                        <span class="totalPedido">0.00</span>
                                        <input type="hidden" class="totalPedido"/>
                                    </span>
                                </div>

                                <!-- Vuelto -->
                                <div class="text-center flex-fill" style="min-width: 80px;">
                                    <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">VUELTO</small>
                                    <span class="font-bold text-info font-14"><?php echo Session::get('moneda'); ?> <span id="vuelto">0.00</span></span>
                                </div>
                            </div>
                            <hr class ="my-1">
                                <div class="col-lg-12  row">
                                    <div class="col-lg-6" style="padding-top: 10px">
                                        <div class="switch">
                                            <span class="mr-2 display_venta_por_consumo">  
                                                <input type="checkbox" name="venta_por_consumo" id="venta_por_consumo" class="lever switch-col-light-green venta_por_consumo"/>
                                                <label for="venta_por_consumo" class="m-0" style="color: black">VENTA POR CONSUMO</label>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <textarea class="form form-control" cols="1" rows="1" id="observacion" placeholder="Observaciones"></textarea>
                                    </div>
                                </div>
                            <hr class ="my-2">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-header">
                <button type="button" class="btn btn-secondary btn-cancel-facturar-1" data-dismiss="modal">Volver</button>
                <button type="button" class="btn btn-secondary btn-cancel-facturar-2" data-dismiss="modal">Volver</button>
                <button type="submit" class="btn btn-success-modern" id="btn-submit-facturar">ACEPTAR</button>
            </div>
        </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-cliente" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-cliente" method="post" enctype="multipart/form-data">
            <input type="hidden" name="id_cliente" id="id_cliente">
            <input type="hidden" name="tipo_cliente" id="tipo_cliente">
            <div class="modal-header justify-center">
                <h4 class="modal-title-cliente">Nuevo Cliente</h4>

                <?php if(0 == 1){ ?>
                <div class="ml-auto m-t-10">
                    <input name="tipo_cli" type="radio" value="1" id="td_dni" class="with-gap radio-col-light-green"/>
                    <label for="td_dni"><?php echo Session::get('diAcr'); ?></label>
                    <input name="tipo_cli" type="radio" value="2" id="td_ruc" class="with-gap radio-col-light-green"/>
                    <label for="td_ruc"><?php echo Session::get('tribAcr'); ?></label>
                </div>
                <?php } else { ?>
                <div class="ml-auto m-t-10"></div>
                <?php } ?>
  
            </div>
            <div class="modal-body p-0 floating-labels">
                <div class="row" style="margin-left: 0px; margin-right: 0px;">
                    <!-- Column -->
                    <div class="col-lg-6 b-r">
                        <div class="row card-body p-0">
                            <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-info" style="display: flex;">
                                <h6 class="font-medium">Información personal</h6>
                            </div>                       
                            <div class="col-md-6 block01" style="display: block;">
                                <div class="form-group ent m-b-40">
                                    <input type="text" class="form-control form-control-modern dni" name="dni" id="dni" minlength="<?php echo Session::get('diCar'); ?>" maxlength="<?php echo Session::get('diCar'); ?>" value="" autocomplete="off" required="required"/>
                                    <span class="bar"></span>
                                    <label for="dni" class="c-dni"><?php echo Session::get('diAcr'); ?></label>
                                </div>
                            </div>
                            <div class="col-md-6 block02" style="display: none;">
                                <div class="form-group ent m-b-40">
                                    <input type="text" class="form-control ruc" name="ruc" id="ruc" minlength="<?php echo Session::get('tribCar'); ?>" maxlength="<?php echo Session::get('tribCar'); ?>" value="" autocomplete="off" required="required"/>
                                    <span class="bar"></span>
                                    <label for="ruc" class="c-ruc"><?php echo Session::get('tribAcr'); ?></label>
                                </div>
                            </div>                            
                            <div class="col-md-12 block07" style="display: none;">
                                <div class="form-group letNumMayMin m-b-40">
                                    <input type="text" class="form-control ruc input-mayus" name="razon_social" id="razon_social" value="" autocomplete="off" required="required"/>
                                    <span class="bar"></span>
                                    <label for="razon_social">Raz&oacute;n Social</label>
                                </div>
                            </div>
                            <div class="col-md-12 block03" style="display: block;">
                                <div class="form-group letMayMin m-b-40">
                                    <input type="text" class="form-control form-control-modern dni input-mayus" name="nombres" id="nombres" value="" autocomplete="off" required="required"/>
                                    <span class="bar"></span>
                                    <label for="nombres">Nombre completo</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-lg-6">
                        <div class="row card-body bg-header p-0">
                            <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-inverse" style="display: flex;">
                                <h6 class="font-medium">Contacto</h6>
                            </div> 
                            <div class="col-md-6 block05" style="display: block;">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control form-control-modern bg-transparent dni input-mayus" name="fecha_nac" id="fecha_nac" value="" autocomplete="off" data-mask="99-99-9999"/>
                                    <span class="bar"></span>
                                    <label for="fecha_nac">Fecha de Nacimiento</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group ent m-b-40">
                                    <input type="text" class="form-control bg-transparent" name="telefono" id="telefono" value="" autocomplete="off"/>
                                    <span class="bar"></span>
                                    <label for="telefono">Tel&eacute;fono</label>
                                </div>
                            </div>
                            <div class="col-md-12 block06" style="display: block;">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control bg-transparent dni" name="correo" id="correo" value="" autocomplete="off"/>
                                    <span class="bar"></span>
                                    <label for="correo">Correo electr&oacute;nico</label>
                                </div>
                            </div>
                     
                            <?php if(0 == 1){ ?>
                                <div class="col-md-12 block08" style="display: none;">
                            <?php }else{ ?>
                                <div class="col-md-12">
                            <?php } ?>
                           
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control bg-transparent" name="direccion" id="direccion" value="" autocomplete="off" required="required"/>
                                    <span class="bar"></span>
                                    <label for="direccion">Direcci&oacute;n</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control bg-transparent input-mayus" name="referencia" id="referencia" value="" autocomplete="off"/>
                                    <span class="bar"></span>
                                    <label for="referencia">Referencia</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Volver</button>
                <button type="submit" class="btn btn-success-modern">Aceptar</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-nota" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <div class="modal-header justify-center">
                <h5 class="card-title-nota m-b-0"></h5>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
            </div>
            <div class="modal-body floating-labels">
                <div class="nota-new m-t-20 m-b-20">
                    <h6 class="card-subtitle">Agregue una coma ' , ' para agregar m&aacute;s de una nota</h6>
                    <input type="text" id="notas" data-role="tagsinput" class="input-mayus" placeholder="add">
                </div>
                <div class="nota-list animated fadeIn"><div class="demo-checkbox"></div></div>
                <input type="hidden" id="notapadre"/>
                <h6 class="card-subtitle notlist p-t-0"></h6>
                <div class="nota_manual mt-3"></div>
                <input type="hidden" id="cod_add"/>
                <input type="hidden" id="cod_pres_add"/>
                <input type="hidden" id="cod_prod_add"/>
            </div>
            <div class="modal-footer">
                <div class="nota-new animated fadeIn">
                    <button type="button" class="btn btn-secondary btn-cancelar-nota">Cancelar</button>
                    <button type="button" class="btn btn-success-modern btn-guardar-nota">Guardar</button>
                </div>
                <div class="nota-list animated fadeIn">
                    <button type="button" class="btn btn-success-modern btn-acep-nota">Aceptar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-stock-pollo" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <div class="modal-header justify-center">
                <h5 class="m-b-0">Stock pollo</h5>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
            </div>
            <div class="modal-body floating-labels p-0">
                <div class="row">
                    <div class="col-12">
                        <div class="social-widget">
                            <div class="table-responsive">
                                <table class="table table-modern stylish-table m-0">
                                    <thead class="table-head">
                                        <tr>
                                            <th>Producto</th>
                                            <th class="text-right">Cantidad</th>
                                        </tr>
                                    </thead>
                                    <tbody id="lista_productos"></tbody>
                                </table>
                            </div>
                            <div class="soc-header box-google" style="font-size: 20px;">Pollos vendidos</div>
                            <div class="soc-content">
                                <div class="col-6 b-r">
                                    <h3 class="font-medium pollos-vendidos"></h3>
                                    <h5 class="text-muted">Vendidos</h5></div>
                                <div class="col-6">
                                    <h3 class="font-medium pollos-stock"></h3>
                                    <h5 class="text-muted">Stock</h5></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Volver</button>
            </div>
        </div>
    </div>
</div>

<?php require_once('views/venta/compartido.php'); ?> 
<script>
    var tdoc_defecto = <?php echo $tdoc_defecto; ?>;
</script>
<script id="nvo-ped-det-template" type="text/x-jsrender" src="">
    <tbody class="tb-st">
    {{for items}}
    <tr class="warning-element" style="border-left: 2px solid #ffb22b !important; background: #fefde3;">
        <td style="padding: 5px 14px;">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12 col-xl-12 text-right" style="font-size:14px;  ">
                    <span name="producto">{{:producto}}</span><br><span name="presentacion" style="font-size:12px; " class="label label-warning text-uppercase">{{:presentacion}}</span>
                </div>
            </div>
            <div class="row mt-1">
                <div class="col-6 col-md-12 col-lg-6 col-xl-6">
                        <input type="hidden" name="producto_id" value="{{:producto_id}}">
                        <input type="hidden" name="area_id" value="{{:area_id}}">
                        <input type="hidden" name="nombre_imp" value="{{:nombre_imp}}">
                        <input type="hidden" name="nombreprecio" value="{{:nombreprecio}}">
                        <div class="input-group  bootstrap-touchspin bootstrap-touchspin-injected"><input class="touchspin1 input-sm input text-left form-control" type="text" value="{{:cantidad}}" name="cantidad" onchange="pedido.actualizar({{:id}}, this);">
                    </div>
                </div>
                <div class="col-6 col-md-12 col-lg-6 col-xl-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><?php echo Session::get('moneda'); ?>  </span>
                        </div>
                        <input type="text" name="precio" value="{{:precio}}" onchange="pedido.actualizar({{:id}}, this);" class="form-control preciolist_{{:id}}" disabled="" onfocus="this.select()">
                    </div>
                </div> 
            </div>
            <div class="row mt-2">
                <div class="col-12 col-md-12 col-lg-12 col-xl-12 text-left">
                    <code style="font-size: 15px; font-weight: bold" class="txtnota{{:id}}">{{:comentario}}</code>
                </div>
                <div class="col-12 col-md-12 col-lg-12 col-xl-12 text-left">
                    <?php
                    if (Session::get('editarprecio')==1) { ?>
                        <button type="button" class="btn ml-2 waves-effect waves-light btn-outline-info" onclick="preciolist({{:id}});"><i class="fas fa-edit"></i></button>
                    <?php } ?>

                    <button type="button" class="btn ml-2 waves-effect waves-light btn-outline-info" onclick="comentar({{:id}},{{:producto_id}},'{{:producto}}','{{:presentacion}}');"><i class="fas fa-comment-alt"></i></button>
                    <button type="button" class="btn ml-2 waves-effect waves-light btn-outline-danger" onclick="pedido.retirar({{:id}});"><i class="fas fa-trash"></i></button>
                    <input type="hidden" name="comentario" class="nota{{:id}}" value="{{:comentario}}" onchange="pedido.actualizar({{:id}}, this);">
                </div>
            </div>
        </td>
    </tr>
    {{/for}}
    </tbody>
    <tfoot>
        <tr>
            <td class="text-right" colspan="4" style="padding: 10px">Total <b><?php echo $_SESSION["moneda"]; ?> {{:total}}</b></td>
        </tr>
    </tfoot>
</script>
<?php if(Session::get('rol') <> 0) { ?>
<style type="text/css">
.dropdown-toggle::after{
    display:none;
}    
.btn-up{
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 25px;
}
.btn-down{
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 25px;
}

/* === PAYMENT VISIBILITY FIX v1769036069 === */
.display-pago-tarjeta[style*="display: none"],
.display-pago-tarjeta[style*="display:none"] {
    display: none !important;
}
.display-codigo-operacion[style*="display: none"],
.display-codigo-operacion[style*="display:none"] {
    display: none !important;
}

</style>
<?php } ?>
<script type="text/javascript">
    <?php if ($_GET["cobra_directo"] == "si") {?>
        setTimeout(function(){
          facturar(<?php echo Session::get('codped'); ?>,1);
        }, 1000);
    <?php } ?>
</script>
