<div class="content altura position-absolute" id="appPuntodeVenta" v-cloak>
    <input type="hidden" value="<?= $tipo_doc ?>" id="id_tipo">
    <input type="hidden" value="<?= $id ?>" id="id_fac">
    <div class="row altura ">
        <div class="col altura">
            <div class="card sombra altura">
                <div class="btn-group btn-group-sm d-flex justify-content-between mb-1 p-2" role="group" aria-label="Basic example">
                    <div class="btn-group btn-group-sm">
                        <select id="rde" class="btn btn-light dropdown-toggle btn-sm border custom-select" style="height:32px;" role="group" @change="tipoDocumento()" v-model="documento" <?= ($id > 0) ? 'disabled' : '' ?>>
                            <option value="0" disabled="true">Seleccione documento</option>
                            <?php if ($crear_nota) : ?>
                                <option value="1">Nota de entrega</option>
                            <?php endif; ?>
                            <?php if ($crear_factura) : ?>
                                <option value="2">Factura</option>
                            <?php endif; ?>
                            <option value="3">Presupuesto</option>
                            <option value="4">Pedido</option>
                        </select>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <select id="divisa" class="btn btn-light dropdown-toggle btn-sm border custom-select" style="height:32px;" v-model="divisa_predeterminada" @change="predeterminarDivisa()" <?= ($tipo_doc == 2) ? 'disabled' : '' ?>>
                            <option value="" disabled="true">Seleccione una divisa</option>
                            <option v-for="row in divisas" :value="row.div_id">Divisa: {{row.div_nombre}}</option>
                        </select>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <select id="sucursal" style="height:32px;" role="group" v-model="sucursal_predeterminada" class="btn btn-light dropdown-toggle btn-sm border custom-select" @click.prevent="obtenerSeriesEmpleado()" :disabled="disabled">
                            <option disabled value="">Seleccione una sucursal</option>
                            <option v-for="row in sucursales_empleado" :value="row.su_id">{{row.su_nombre}}</option>
                        </select>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <select class="btn btn-light dropdown-toggle btn-sm border custom-select" style="height:32px;" role="group" v-model="serie_predeterminada" <?= ($id > 0) ? 'disabled' : '' ?>>
                            <option disabled value="">Seleccione una serie</option>
                            <option v-for="row in series_empleado" :value="row.ser_id">{{row.ser_descripcion}}</option>
                        </select>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <select id="almacen" class="btn btn-light dropdown-toggle btn-sm border custom-select" style="height:32px;" title="ddd" v-model="almacen_predeterminado" <?= ($id > 0) ? 'disabled' : '' ?> @change="todosProductos()">
                            <option value="" disabled="true">Seleccione un almacen</option>
                            <option v-for="row in almacenes" :value="row.alm_id">Almacen: {{row.alm_nombre}}</option>
                        </select>
                    </div>
                </div>
                <div class="pl-3 pr-3">
                    <h6 class="d-flex justify-content-between text-info" style="font-weight: bolder;"><span><small class="badge badge-info ml-2">#{{num_documento}} </small> <small @click.prevent="modal_buscar_cliente('facturacioncaja')"><i class="fas fa-users btn"></i></small><?php if ($seleccionar_agente) : ?><small v-if="documento==1 || documento==2" @click.prevent="modal_agente()"><i class="fa fa-user-tie btn"></i></small><?php endif; ?><b @click.prevent="modalCliente()">Nombre Cliente: {{selected_cli.cliente}} </b><small class="text-success" v-if="cliente.grup_nombre!=null"> Grupo: {{cliente.grup_nombre}}({{cliente.grup_descuento}} %)</small> </span><span @click.prevent="modalCliente()">{{selected_cli.dni}}</span><small @click="modal_imprimir" v-if="id_factura>0"><i class="fas fa-print btn"></i></small></h6>
                </div>
                <table class="table mb-0" style=" font-size: smaller;">
                    <thead class="encabezado borde-inferior">
                        <tr>
                            <td></td>
                            <td width="30%" class="text-left padding-fila">Productos</td>
                            <td width="20%" class="text-center padding-fila">Precio Unitario</td>
                            <td width="15%" class="text-center padding-fila">Cantidad</td>
                            <td width="10%" class="text-center padding-fila">Dto. %</td>
                            <td width="20%" class="text-right padding-fila">Total</td>
                        </tr>
                    </thead>
                </table>
                <div class="scroll altura" style="height: 100%; width: 100%; padding: 0px; margin: 0px; overflow: hidden scroll;">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" style=" font-size: smaller;">
                            <tbody>
                                <tr v-for="row in carrito">
                                    <td class="padding-fila text-center" style="width: 15px;">
                                        <a href="#" @click.prevent="eliminarProducto(row.unique)">
                                            <i class="fa fa-trash text-danger"></i>
                                        </a>
                                        <a href="#" v-if="row.tipo==2" @click="comboProductosCompuestos(row)">
                                            <i class="fa fa-cubes text-success"></i>
                                        </a>
                                    </td>
                                    <td width="30%" class="text-left padding-fila sin-borde">{{row.nombre}}
                                        <span class="text-warning" v-if="row.id_iva==1 && (documento==2 || documento==1) && iva_integrar==1">IVA16</span>
                                        <span class="text-success" v-if="row.id_iva==2 && (documento==2 || documento==1) && iva_integrar==1">EXENTOS</span>
                                    </td>
                                    <td width="20%" class="text-center padding-fila sin-borde" @click="modal_cambiarPrecio(row.unique, row.precio)">{{row.precio}}</td>
                                    <td width="15%" class="text-center padding-fila sin-borde">
                                        <input type="text" class="form-control text-right" style="border-color: #bbb;" v-model="row.cantidad" @keyup.prevent="actualizarCantidad(row.id, $event)" <?= ($tipo_doc == 2) ? 'disabled' : '' ?>>
                                    </td>
                                    <td width="10%" class="text-center padding-fila sin-borde" @click="modalDescuento(row.unique, row.descuento)">{{ row.descuento }}</td>
                                    <td width="20%" class="text-right padding-fila sin-borde">{{ moneda(row.neto, money.locale, money.prefix, money.precision) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <table class="table-responsive tab" style="background-color: rgba(222, 222, 222, 0.7); margin-bottom: 0 !important;">
                    <tfoot>
                        <tr>
                            <td width="50" class="text-left padding-fila">Total Productos ( <span>{{articulosTotal}}</span> )</td>
                            <td width="150" class="text-right padding-fila"></td>
                            <td width="90" class="text-right padding-fila">Sub Total ({{money.prefix}})</td>
                            <td width="250" class="text-right padding-fila"> {{ moneda(subtotal, money.locale, money.prefix, money.precision) }}</td>
                        </tr>
                        <tr>
                            <td class="text-left padding-fila sin-borde">
                                <span v-if="id_factura>0" @click="modal_adjunto()" style="font-size: 1.4em;"><i class="fa fa-paperclip"></i></span>
                                <span v-if="cant_document_pendiente>0 && id_factura>0" @click="modal_whatsapp()" style="font-size: 1.4em;" class="text-success"><i class="fab fa-whatsapp"></i></span>
                                <?php if ($total_costo) : ?>
                                    <small class="badge badge-warning ml-2">Total Costo: {{costo}}</small>
                                <?php endif; ?>
                                <span class="text-success" v-if="estatus==1">Pagada </span>
                                <span class="text-danger" v-if="estatus==3">Anulada </span>
                                <small class="text-success" v-if="estatus==2 && monto_credito>0">Credito : {{ moneda(monto_credito, money.locale, money.prefix, money.precision)}}</small>
                                <small v-if="cant_document_pendiente>0 && estatus==2" class="text-danger">Pendiente ({{cant_document_pendiente}}) </small>
                                <small v-if="cant_document_pendiente>0 && estatus==2" class="text-danger" v-for="row in monto_document_pendiente">{{moneda(row.total, row.div_locale, row.div_simbolo)}} </small>
                            </td>
                            <td class="text-right padding-fila sin-borde"></td>
                            <td class="text-right padding-fila sin-borde">Descuento ({{money.prefix}})</td>
                            <td class="text-right padding-fila sin-borde" @click="modalDescuentoGlobal()">{{ moneda(desc_monto, money.locale, money.prefix, money.precision) }}</td>
                        </tr>
                        <tr>
                            <td width="250" class="text-left padding-fila sin-borde">Productos Exentos ( <span>{{exentos}}</span> )</td>
                            <td class="text-right padding-fila sin-borde"></td>
                            <td class="text-right padding-fila sin-borde">IVA -16% ({{money.prefix}})</td>
                            <td class="text-right padding-fila sin-borde">{{ moneda(iva, money.locale, money.prefix, money.precision) }}</td>
                        </tr>
                        <tr class="borde inferior">
                            <td width="200" class="text-left padding-fila text-info sin-borde"><span v-for="row in cambio_divisa">({{ moneda(row.total, row.div_locale, row.div_simbolo, row.div_decimal) }}) </span></td>
                            <td class="sin-borde"></td>
                            <td class="text-right text-primary padding-fila sin-borde" width="200">
                                <strong>
                                    Total a Pagar ({{money.prefix}})</strong>
                            </td>
                            <td class="text-right text-primary padding-fila sin-borde"><strong>{{ moneda(total, money.locale, money.prefix, money.precision) }}</strong></td>
                        </tr>
                    </tfoot>
                </table>
                <div class="btn-group btn-group d-flex justify-content-between p-2 mt-1" role="group">
                    <button type="button" class="btn btn-danger border" title="Cancelar Compra" @click="modalAnular" id="cancelarFactura"><i class="fa fa-times"></i> Cancelar</button>
                    <button type="button" class="btn btn-light border" title="Hacer Descuento" @click.prevent="modal_nota" v-if="id_factura>0" id="opcionesFactura"><i class="fa fa-fas fa-file-alt"></i> Nota</button>
                    <button type="button" class="btn btn-light border" title="Nota" @click.prevent="modal_nota" v-else><i class="fa fa-fas fa-file-alt"></i> Nota</button>
                    <button type="button" class="btn btn-light border" title="Poner en Espera" @click="guardarFactura" id="guardarFactura"><i class="fa fa-save"></i></i> Guardar</button>
                    <button type="button" class="btn btn-light border" title="correo" @click.prevent="modalCorreoPre()" v-if="id_factura>0 && (documento==3 || documento==4)"><i class="fa fa-fas fa-envelope"></i> Enviar factura</button>
                    <button type="button" class="btn btn-primary border" @click.prevent="modal_pagar()" v-if="id_factura>0 && documento<=2"><i class="fa fa-money"></i> Pagar</button>
                </div>
            </div>
        </div>
        <div class="col altura gbtn">
            <div class="card sombra altura">
                <div class="row">
                    <div class="col-10">
                        <div class="btn-group btn-group-sm d-flex justify-content-between p-2" role="group" aria-label="Basic example">
                            <div class="btn-group-toggle mr-2">
                                <input type="checkbox" id="switch" v-model="toggleBarcode" @click="focusBuuscar()">
                                <label for="switch" class="btn lbl btn-sm border"><i class="fas fa-barcode yexy-center"></i></label>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text  btn-light" id="buscar" style="background-color: #f8f9fa;"><i class="fa fa-search"></i></div>
                                </div>
                                <input type="text" id="inputbuscarlineas" @keyup="buscarLineas($event)" @keydown="seleccionarProducto($event)" class="form-control" placeholder="Código de barra, SKU, nombre del producto, categoría..." style="height: 1.95rem; font-size: 14px;">
                            </div>
                        </div>
                    </div>
                    <div class="nav nav-line p-2 mr-2">
                        <?php if ($menu_imagen) : ?>
                            <a data-toggle="pill" href="#prod_imag" role="tab" aria-controls="prod_imag" aria-selected="true" class="btn btn-light btn-sm border ml-2 active"><i class="fa fa-th-large"></i></a>
                            <a data-toggle="pill" href="#prod_list" role="tab" aria-controls="prod_list" aria-selected="false" class="btn btn-light btn-sm border ml-2"><i class="fa fa-list-alt"></i></a>
                        <?php else : ?>
                            <a data-toggle="pill" href="#prod_list" role="tab" aria-controls="prod_list" aria-selected="true" class="btn btn-light btn-sm border ml-2 active"><i class="fa fa-list-alt"></i></a>
                            <a data-toggle="pill" href="#prod_imag" role="tab" aria-controls="prod_imag" aria-selected="false" class="btn btn-light btn-sm border ml-2"><i class="fa fa-th-large"></i></a>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="btn-group d-flex justify-content-between mt-1 mb-1 p-2 ptvbtn" role="group" aria-label="Basic example">
                    <button type="button" @click="todosProductos()" class="btn btn-primary border" title="Todos" data-target="#todos" active><i class="fa fa-cubes"> </i>Todos</button>
                    <?php foreach ($categoria_cinc as $row) :  ?>
                        <button type="button" class="btn btn-light border" title="<?= $row['cat_nombre'] ?>" @click="buscarCategoria(<?= $row['cat_id'] ?>)"><?= substr($row['cat_nombre'], 0, 8) . '..'; ?></button>
                    <?php endforeach; ?>
                    <?php if (count($categoria_cinc) > 0) :  ?>
                        <div class="btn-group dropleft " role="group">
                            <button id="masCategorias" type="button" class="btn btn-light border dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ...más
                            </button>
                            <div class="dropdown-menu" aria-labelledby="masCategorias">
                                <?php foreach ($categorias as $row) :  ?>
                                    <a class="dropdown-item" href="#" @click="buscarCategoria(<?= $row['cat_id'] ?>)"><?= $row['cat_nombre'] ?></a>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="col mt-2" style="width:auto; border-top: 1px solid rgb(222, 222, 222);overflow: auto;" id="todos">
                    <div class="tab-content">
                        <?php if ($menu_imagen) : ?>
                            <div id="prod_imag" class="tab-pane mb-3 active show">
                                <div class="row col pl-0 ml-2" style=" border-left: 1px solid rgb(222, 222, 222);">
                                    <div v-for="row in lineas" class="col-lg-2 col-md-3 col-xs-4  shop-items filter-add-product noselect text-center item-visible" style="cursor: pointer; padding: 5px; border-right: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222); display: block;" @click.prevent="agregarProducto(row.pro_id,row.id_almacen)">
                                        <img :src="row.imagen" v-if="row.imagen!=null" style="display: block; width: 100%; min-height: 141px; max-height: 141px;">
                                        <img v-else src="<?= ruta_base() ?>public/assets/img/150x150.png" style="display: block; width: 100%; min-height: 141px; max-height: 141px;">
                                        <div class="caption text-center" style="padding: 2px;overflow: hidden;position: absolute;bottom: 15px;z-index: 1;width: 95%;background: #ffffffc9;"><strong class="item-grid-title">
                                                <marquee class="marquee_me" behavior="alternate" scrollamount="4" direction="left" style="width:100%;float:left;">{{row.pro_descripcion}}</marquee>
                                            </strong><br>
                                            <span class="align-center">{{row.pro_precio}}</span> ({{row.ps_cantidad}})
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="prod_list" class="tab-pane mb-3">
                                <table class="table table-bordered table-sm">
                                    <thead>
                                        <tr>
                                            <th class="padding-fila text-center">Producto</th>
                                            <th class="padding-fila text-center">Cantidad</th>
                                            <th class="padding-fila text-center">Precio</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="row in lineas" style="cursor: pointer;" @click.prevent="agregarProducto(row.pro_id,row.id_almacen)">
                                            <td class="padding-fila text-left">{{ row.pro_descripcion }}</td>
                                            <td class="padding-fila text-center"><small>{{ row.ps_cantidad }}</small></td>
                                            <td class="padding-fila text-right">{{ row.pro_precio }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        <?php else : ?>
                            <div id="prod_list" class="tab-pane mb-3 active show">
                                <table class="table table-bordered table-sm">
                                    <thead>
                                        <tr>
                                            <th class="padding-fila text-center">Producto</th>
                                            <th class="padding-fila text-center">Cantidad</th>
                                            <th class="padding-fila text-center">Precio</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="row in lineas" style="cursor: pointer;" @click.prevent="agregarProducto(row.pro_id,row.id_almacen)">
                                            <td class="padding-fila text-left">{{ row.pro_descripcion }}</td>
                                            <td class="padding-fila text-center"><small>{{ row.ps_cantidad }}</small></td>
                                            <td class="padding-fila text-right">{{ row.pro_precio }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div id="prod_imag" class="tab-pane mb-3">
                                <div class="row col pl-0 ml-2" style=" border-left: 1px solid rgb(222, 222, 222);">
                                    <div v-for="row in lineas" class="col-lg-2 col-md-3 col-xs-4  shop-items filter-add-product noselect text-center item-visible" style="cursor: pointer; padding: 5px; border-right: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222); display: block;" @click.prevent="agregarProducto(row.pro_id,row.id_almacen)">
                                        <img :src="row.imagen" v-if="row.imagen!=null" style="display: block; width: 100%; min-height: 141px; max-height: 141px;">
                                        <img v-else src="<?= ruta_base() ?>public/assets/img/150x150.png" style="display: block; width: 100%; min-height: 141px; max-height: 141px;">
                                        <div class="caption text-center" style="padding: 2px;overflow: hidden;position: absolute;bottom: 15px;z-index: 1;width: 95%;background: #ffffffc9;"><strong class="item-grid-title">
                                                <marquee class="marquee_me" behavior="alternate" scrollamount="4" direction="left" style="width:100%;float:left;">{{row.pro_descripcion}}</marquee>
                                            </strong><br>
                                            <span class="align-center">{{row.pro_precio}}</span> ({{row.ps_cantidad}})
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php include 'modalbuscarcliente.php'; ?>
    <?php if ($per_pagar) : ?>
        <?php include 'modal_Pagar.php'; ?>
    <?php endif; ?>
    <?php if ($cambiar_precio) : ?>
        <?php include 'modal_cambiar_precio.php'; ?>
    <?php endif; ?>
    <?php include 'modal_opciones.php'; ?>
    <?php include 'modal_imprimir.php' ?>
    <?php include 'modal_Nota.php' ?>
    <?php include 'modal_agente.php' ?>
    <?php include 'app/notasdeentrega/vista/modalproductoscompuestos.php' ?>
    <?php include 'app/notasdeentregaeditar/vista/modal_actualizar_agente.php' ?>
    <?php if ($auth_descuento) : ?>
        <?php include 'modal_descuento_global.php' ?>
        <?php include 'modal_descuento.php' ?>
    <?php endif; ?>

    <?php include 'modal_Cliente.php' ?>
    <?php include 'app/notasdeentregaeditar/vista/modalcorreo.php'; ?>
    <?php include 'modalcorreo.php'; ?>
    <?php include 'modal_adjunto.php'; ?>
    <?php if ($anular_doc) : ?>
        <?php include 'app/notasdeentregaeditar/vista/modal_anular.php' ?>
    <?php endif; ?>
</div>
<link rel="stylesheet" href="<?= asset('assets/vue-select.css') ?>">
<script src="<?= asset('assets/vue-select.js') ?>"></script>
<script src="<?= asset('assets/underscore-min.js') ?>"></script>
<script src="<?= asset('assets/vue-the-mask.js') ?>"></script>
<script src="<?= asset('assets/v-money.js') ?>"></script>
<script src="<?= ruta_base() ?>public/assetsvuejs/ptv/index.js"></script>