<div id="flashmessenger-pos" class="flashmessenger-pos"><?php $flashmessenger->showMessage();?></div>
<div class="row" style="height: 95%;">
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-12 p-r-0" style="height: 100%;">
<div class="box" style="height: 100%;margin-bottom: 0px">
    <div class="box-header"><h3><i class='fa-fw fa fa-desktop'></i><?php echo $_translator->_getTranslation('Venta');?></h3></div>
    <div class='box-content' style='height: 99%'>
        <?php 
        $settings = new SettingsEntity();
        $_allowDisccounts = $settings->_get('allow_disccounts_in_pos');
        
        $ajax = new PosAjax();
        $ventaDetalles = $ajax->getListVentaDetalles();
        #$_sr = Es un pago de un specialRequisition
        if($_sr){
            $idSpecialRequisition = $ajax->isSpecialRequisition();
            $form->setValueToElement($idSpecialRequisition,'id_special_requisition');
            echo "<script>$('.hideForSR').hide()</script>";
        }
        
        echo $form->openForm();?>
        <div style="display: none">
            <?php 

            echo $form->showId();
            echo $form->showActionController();
            $form->showElement('id_special_requisition');
            $form->setValueToElement($ventaDetalles['subtotal'],'subtotal');  
            $form->showElement('subtotal');
            $form->setValueToElement($ventaDetalles['montoTotal'],'total_venta'); 
            $form->showElement('total_venta');
            $form->showElement('last_sale_id');
            $form->showElement('descuentoTotalItems');
            $form->showElement('descuentoTotalOrden');
            $form->showElement('sale_only_for_adult');
            echo $form->showElement('idProducto_detalle');

            $form->showElement('id_pan_por_libra');?>
        </div>
         <?php    
            include ROOT."/View/Modal/agregarDescuento.php";
            //include ROOT."/View/Modal/suspenderVenta.php";
            //include ROOT."/View/Modal/ventasSuspendidas.php";
            include ROOT."/View/Modal/editarProducto.php";
            include ROOT."/View/Modal/ultimasVentas.php";
            include ROOT."/View/Modal/operacionesTarjeta.php";
            include ROOT."/View/Modal/operacionesTarjetaDetalles.php";
            include ROOT."/View/Modal/ultimasDevoluciones.php";
            include ROOT."/View/Modal/reimprimirTicketVenta.php";
            include ROOT."/View/Modal/chooseReceiptOption.php";
         ?>
        <div class="form-inline"><?php $element = $form->getElement('cliente');$form->createElement($element);?></div>
        <div class="form-inline"><?php $element = $form->getElement('telefono');$form->createElement($element);?></div>
        <?php echo $form->closeForm();?>
        
        <table id='venta-table' class="table table-condensed table-hover table-scroll" style='height: 68%;margin-bottom: 0px;font-size:small'>
            <thead>                
                <th style="width:10%"><?php echo $_translator->_getTranslation('Cant');?></th>
                <th style="width:60%"><?php echo $_translator->_getTranslation('Descripcion');?></th>
                <th style="width:20% !important;text-align:center"><?php echo $_translator->_getTranslation('Subtotal');?></th>
                <th style="width:10% !important;text-align:center"><i class="fa fa-trash"></i></th>
            </thead>
            <tbody>                   
                <?php echo $ventaDetalles['ventaDetalles'];?>
            </tbody>
        </table>
        <hr class="p-a-0 m-a-0">
        <table class='w-100' style='height: 12%;'>
            <tr>
                <td class="col-md-4 col-sm-6 col-xs-6 text-left"><?php echo $_translator->_getTranslation('Descuento Items')?></td>
                <td id="descuentoItems" class="col-md-2 col-sm-6 col-xs-6 text-right"><?php echo number_format($ventaDetalles['descuentoItems'],2); ?></td>
                <td class="col-md-3 col-sm-6 col-xs-6 text-left"><?php echo $_translator->_getTranslation('Subtotal')?></td>
                <td class="col-md-3 col-sm-6 col-xs-6 text-right">
                    <div id="divSubtotal"><?php echo number_format($ventaDetalles['subtotal'],2) ?></div>
                    <div id='tr_regular_price' class='hidden' style='color:#aaa;font-size:smaller;'><span>Reg. $</span><span id='regular_price'></span></div>
                </td>
            </tr>
            <tr>
                <?php if($ventaDetalles['descuentoOrden'] === 0){?>
                        <td class="col-md-4 col-sm-6 col-xs-6 text-left"><?php echo $_translator->_getTranslation('Descuento Orden')?></td>
                        <?php if($_allowDisccounts =='1'){?>
                                <td id="descuentoOrden" class="col-md-2 col-sm-6 col-xs-6 text-right" onclick="openModalAddDiscount()"><i class='icon fa fa-plus-circle'></i></td>
                        <?php }else{?>
                                <td id="descuentoOrden" class="col-md-2 col-sm-6 col-xs-6 text-right"><i class='icon fa fa-plus-circle'></i></td>
                        <?php } ?>
                        
                <?php }else{
                        /* Aqui nunca entra porque siempre que se inicia una venta descuentoOrden es 0, y ahorita no hay opcion de editar ventas*/?>
                        <td class="col-md-4 col-sm-6 col-xs-6 text-left"><?php echo $_translator->_getTranslation('Descuento Orden')?></td>
                        <td id="descuentoOrden" class="col-md-2 col-sm-6 col-xs-6 text-right"><i class='fa fa-plus-circle fa-2x'></i></td>
                <?php }?>  
                <td class="col-md-3 col-sm-6 col-xs-6 text-left"><?php echo $_translator->_getTranslation('Impuestos')?></td>
                <td id="impuestosTotal" class="col-md-3 col-sm-6 col-xs-6 text-right"><?php echo number_format($ventaDetalles['impuestosTotal'],2); ?></td>
            </tr>
        </table>
        <div style='width:100%'>
            <table class="w-100">
                <tr>
                    <td class="col-lg-2 btn btn-primary" style="border-radius:0px;border-right-color:#ccc ;font-size: large" id='itemsTotal'></td>
                    <td class="col-lg-10 btn btn-primary _btnPay" style="border-radius:0px;font-size: large;" ><?php echo $_translator->_getTranslation('Pagar $')?><span id="montoTotal"><?php echo number_format($ventaDetalles['montoTotal'],2)?></span></td>   
                </tr>
            </table>
        </div>
        
    </div>
</div>
</div>
<div class="col-lg-8 col-md-7 col-sm-7 p-l-0 hidden-xs" style="height: 100%;">
<div class="box" style="height: 100%;margin-bottom: 0px;">
    <div class="box-header">       
        <h3><i class='fa-fw fa fa-database'></i><?php echo $_translator->_getTranslation('Productos');?></h3>
    </div>
    <div class='box-content' style="height:100%;">
        <div class="row" style="height:100%;">
            <div class="col-lg-12 col-md-12 col-sm-12">                    
                <div class="form-inline"><?php $element = $form->getElement('producto');$form->createElement($element);?></div>
                <div id="filters" class="slick-categoria">
                    <!--<button class="btn" data-filter="*">show all</button>-->
                    <?php if($_listCategorias){
                            foreach($_listCategorias as $key => $categoria){?>
                                <button class="btn" style='font-size:1vw' data-filter=".<?php echo trim(str_replace(" ","",$categoria))?>"><?php echo ($categoria);?></button>
                        <?php }                        
                        }?>
                </div>
            </div>
            <div class="clear"></div>
            <!-- Si ponemos 85%; el dise�o de la cuadricula de los productos se va haciendo mas chica en lo ancho -->
            <!--<div class="col-lg-12 col-md-12 col-sm-12" style="height:85%;margin-top:5px;overflow-y: scroll;">-->
            <div class="col-lg-12 col-md-12 col-sm-12" style="height:80%;margin-top:5px;overflow-y: scroll;">
                <div class="container-fluid no-gutter">
                    <div id="posts" class="slick-productos">
                            <?php if($_listProductos){
                                $idItem = 1;
                                foreach($_listProductos as $producto){
                                    $image = "main_".$producto['p_uuid'].".jpg";
                                    if(!file_exists(PATH_IMG_PRODUCTS.$image)){$image = "default.jpg";}?>
                                    <div id="<?php echo $idItem;?>" style='padding:0px;'  class="item <?php echo trim(str_replace(" ","",$producto['categoria'])) ?> col-md-2 col-lg-2">
                                                   
                                        <div style='padding:0px;'  class="item-wrap col-lg-12 col-md-12 col-sm-12" onclick="setVentaPosFromQuickBtn('<?php echo $producto['id'];?>',<?php echo $producto['venta_solo_para_mayores'];?>)">                                                                                                         
                                        <div class="item-image" style="background-image: url('../public/img/products/<?php echo $image?>');" ></div> 
                                            <div style='padding:0px;background-color: <?php echo $producto['color'] ?>'>
                                                <p class="precio">$ <?php echo number_format($producto['punitarioventa'],2) ?></p>
                                                <p class="name"><?php echo substr($producto['nombre_para_pos'], 0, 19); ?></p>
                                            </div>

                                        </div>
                                    </div>
                            <?php $idItem++;
                                }                        
                            }?>                   
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
    <style>
        body{
            background-color: #fff;
        }
        
        /*Esto lo agregue como solucion para el problema: cada que aparecia el modal de pago se agregaba un padding-right a la izquierda del boby
        lo que provocaba que la pantalla se fuera haciendo mas pequeña. Esto solo ocurria en los monitores de paris.*/
        body:not(.modal-open){
            padding-right: 0px !important;
          }
        
    </style>
<?php 
    include ROOT."/View/Modal/devoluciones.php";
    include ROOT."/View/Modal/pagoDevolucion.php";
    include ROOT."/View/Modal/pagoDevolucionDetalle.php";
    include ROOT."/View/Modal/pago.php";
    include ROOT."/View/Modal/retiro.php";
    include ROOT."/View/Modal/agregarClientePos.php";
    include ROOT."/View/Modal/refund.php";?>
</div>
<script src="<?php echo ROOT_HOST?>/public/js/lib/isotope-docs/isotope-docs.min.js"></script> 
<script type="text/javascript" language="javascript">
    var readScaleIntervalId = null;
    var countReadScale = 0;
    $(".numPad").numpad({decimalSeparator: '.',hidePlusMinusButton: true});
    $('.modal').on('hidden.bs.modal', function () {
        $('.nmpd-wrapper').hide();
    });
    $('#totalPagar').html($('#montoTotal').html());
    $("#quickBtnTotalPagar").html($('#montoTotal').html());
    $('#cliente').select2();       
    
    $('._btnPay').on('click',function(){
        /*Validar las ventas quue solo son para adultos*/
        if($('#sale_only_for_adult').val() == 1){validateAge();}else{ $('#modalPago').modal('show');}       
    });
          
    $(document).ready(function(){
    $('.slick-categoria').slick({rows:2,infinite: false,slidesToShow:5,slidesToScroll: 5,
           responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 5,
                    slidesToScroll: 5,
                    infinite: true,
                    dots: true
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
            ]
        })
    });

    $( document ).ready(function() {
        /* activate jquery isotope */
        var $container = $('#posts').isotope({
          itemSelector : '.item',
          transitionDuration:0
        });

        $container.isotope({ filter: '.Individual' });
        $("[data-filter='.Individual']").addClass('slick-current');

        // filter items on button click
        $('#filters').on( 'click', 'button.btn', function() {
            var filterValue = $(this).attr('data-filter');         
            $container.isotope({ filter: filterValue }); 
            $('.slick-categoria button.btn ').removeClass('slick-current');
            $(this).addClass('slick-current');
        });
    });      
       
    $( "#producto" ).autocomplete({
        source: function( request, response ) {
          $.post('/Controller/Pos.php', {
              action: 'ajax',
              request: 'getListaProductosPos',
              item: request.term
          }, function(data) {
                  response(data.productos);
             }, 'json');
        }, 

        focus: function( event, ui ) {
            $( "#producto" ).val( ui.item.label );
            return false;
          },      
        select: function( event, ui ) {
            $( "#idProducto" ).val( ui.item.value ); 
            $("#producto").val('');
            setVentaPos();
            return false;
          }    
    } );     
  
  $(".showLastSales, #lastSales #listLastSales.showLastSales").click(function () {
        setLastSales();
   });
    
   $(".showLastDevoluciones, #lastDevoluciones #listLastDevoluciones.showLastDevoluciones").click(function () {
        setLastDevoluciones();
   });  
   
    $(".showLastCardOperations").click(function () {
        setLastCardOperations();
    });  
   
   $('#producto').focus();
   
   $(document).ready(function(){
        $('.setCursor').on('click',function(){
            $('#producto').focus();
        });
        
        document.getElementById('telefono').addEventListener('input', function (e) {
            var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
            e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
        });
   });
   
  document.addEventListener("DOMContentLoaded", function(){
        // Invocamos cada 300 segundos  = 5 min
        const milisegundos = 300 * 1000;
        setInterval(function(){
            $.ajax({
                   method: "POST",
                   url: '/Controller/Ajax.php',
                   data: { action: "ajax", request: "refreshSession" },
                   success: function(data){}, 
                   global: false,     // this makes sure ajaxStart is not triggered. Esto hace que no se bloquee la pantalla con 'Please Wait...'
                   dataType: 'json',
               });
        },milisegundos);
    });
   
</script>