@component('components.master') @slot('body') @verbatim
<div class="layout-px-spacing" id="app">
<div class="overlay "></div>
<div class="search-overlay"></div>

    <div class="row layout-top-spacing justify-content-md-center">
    <div class="loader" v-if="loading">
            <div class="spinner-grow text-info align-self-center"></div>
        </div>
        <div class="col-sm-7 col-12">

            <div class="row mt-2">
                <div class="col-6  mb-2">
                     <div class="switch form-switch-custom switch-inline form-switch-primary inner-label-toggle mb-sm-0 mb-3 " :class="changeTipo=='combo' ? 'show' : ''">
                        <div class="input-checkbox">
                            <span class="switch-chk-label label-left px-2">Producto</span>
                            <input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-inner-label" @change="changeTipo=changeTipo=='producto' ? 'combo' : 'producto'" >
                            <span class="switch-chk-label label-right px-2" >Combos</span>
                        </div>
                    </div>
                </div>
                <div
                    class="col-xl-6 col-lg-6 col-md-5 col-sm-4 text-sm-right text-center layout-spacing align-self-center"  v-if="changeTipo=='producto'">
                    <div class="d-flex justify-content-sm-end justify-content-center">
                        <div class="btn-group   me-2" role="group">
                            <button id="bten_marca" type="button" class="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categorias <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
                            <div class="dropdown-menu" aria-labelledby="bten_marca" style="max-height: 45vh; overflow-y: scroll; ">
                                <a href="javascript:void(0);" class="dropdown-item" @click="categoria='all'"><i class="flaticon-home-fill-1 mr-1"></i>TODOS</a>
                                <template v-for="m in categorias">
                                    <a href="javascript:void(0);" class="dropdown-item" @click="categoria=m.id"><i class="flaticon-home-fill-1 mr-1"></i>{{m.name}}</a>
                                </template>
                            </div>
                        </div>
                        <div class="btn-group  me-2" role="group" >
                            <button id="btn_categoria" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Marcas <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
                            <div class="dropdown-menu" aria-labelledby="btn_categoria" style="max-height: 45vh; overflow-y: scroll;">
                                <a href="javascript:void(0);" class="dropdown-item" @click="marca='all'"><i class="flaticon-home-fill-1 mr-1"></i>TODOS</a>
                                <template v-for="m in marcas">
                                    <a href="javascript:void(0);" class="dropdown-item" @click="marca=m.id"><i class="flaticon-home-fill-1 mr-1"></i>{{m.name}}</a>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 filtered-list-search mb-2" v-if="changeTipo=='producto'" >
                    <div
                        autocomplete="off"
                        class=""
                        id="form-product-barra"
                        action="#"
                    >
                        <div class="" style="width: -webkit-fill-available">
                            <input
                                type="text"
                                class="form-control"
                                id="input-search-2"
                                v-model="codigo_barra"

                                @keyup.enter="searchProductBarra()"
                                placeholder="Buscar por codigo de barra"
                            />
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 filtered-list-search mb-2"  v-if="changeTipo=='producto'">
                    <div
                        autocomplete="off"
                        class=""
                        id="form-product-search"
                        action="#"
                    >
                        <div class="" style="width: -webkit-fill-available">
                            <input
                                type="text"
                                class="form-control"
                                id="input-search"
                                v-model="search"
                                @keyup="searchProduct"

                                placeholder="Buscar los productos"
                            />
                        </div>
                    </div>

                </div>
                <div class="col-sm-12 filtered-list-search mb-2" v-if="changeTipo=='combo'">
                    <div
                        autocomplete="off"
                        class=""
                        id="form-product-search-2"
                        action="#"
                    >
                        <div class="" style="width: -webkit-fill-available">
                            <input
                                type="text"
                                class="form-control"
                                id="input-search-combo"
                                v-model="search_combo"

                                @keyup="searchCombo"

                                placeholder="Buscar combos"
                            />
                        </div>
                    </div>

                </div>

                <div class=" col-12">

                    <div class="widget-content searchable-container mt-2 list">
                        <div class="searchable-items grid "  v-if="changeTipo=='producto'" id="items_widgets" style="height: 70vh; overflow-y: scroll; position: static; zoom: 1;">
                            <div v-for="(m,i) in filterAll" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">


                                    <div class="user-profile">
                                        <a v-if="m.producto.hasOwnProperty('img')" class=" profile-img" href="javascript: void(0);">
                                            <img :src="m.producto.img" alt="product" style="width: 80px;">
                                        </a>

                                        <div class="user-meta-info">
                                            <p class="user-name" data-name="21312" style="font-size: 14px;">{{m.producto.categoria.name}}</p>
                                            <p class="user-work" data-occupation="REFRIGERADORES">{{m.producto.nombre}}</p>
                                        </div>
                                    </div>
                                    <div class="code-bar">

                                <button @click="agregarItem(m)" class="btn btn-block w-100" :class="{' btn-outline-warning':m.is_exento==0,' btn-outline-secondary':m.is_exento==1}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                                    {{m.producto.codigo_barra}}
                                </button>
                                    </div>
                                    <div class="user-email" v-if="m.is_lote==1">
                                        <p class="info-title">Lote: </p>
                                        <p class="usr-email-addr">{{m.lote}}</p>
                                    </div>
                                    <div class="user-email mt-0">
                                        <p class="info-title">Marca: </p>
                                        <p class="usr-email-addr">{{m.producto.marca.name}}</p>
                                    </div>
                                    <div class="user-phone">
                                        <p class="info-title">Medida: </p>
                                        <p class="usr-ph-no">{{m.producto.medida.name}}</p>
                                    </div>
                                    <div class="user-phone">
                                        <p class="info-title">Stock: </p>
                                        <p class="usr-ph-no">{{m.stock}}</p>
                                    </div>


                                    <span style="font-weight: 700;color: #3b3f5c;">Precio</span>
                                    <div class="user-location">
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,5)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                            <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_4">
                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,5)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>
                                    <span style="font-weight: 700;color: #3b3f5c;">Descuento</span>
                                    <div class="user-location">
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button @click="restarDescuento(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                            <span class="input-group-addon bootstrap-touchspin-prefix input-group-prepend p-0"><span class="input-group-text p-0">%</span></span>
                                            <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.descuento" @change="ChangeDescuento(m)">
                                            <span class="input-group-btn input-group-append"><button @click="SumDescuento(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>

                                    <button class="btn btn-success btn-block mt-2 w-100"  @click="agregarItem(m)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                                        Agregar
                                    </button>
                                    <div v-if="m.perecedero!=null" class="mt-2 w-100 badge " :class="{'badge-success':(m.perecedero.f1==0&&m.perecedero.f2==0),'badge-danger':(m.perecedero.f1==1),'badge-dark':(m.perecedero.f2==1)}">
                                        {{m.perecedero.fecha_ven}}
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="searchable-items grid "  v-else id="items_widgets" style="height: 70vh; overflow-y: scroll; position: static; zoom: 1;">
                            <div v-for="(m,i) in combos" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">


                                    <div class="user-profile">
                                        <a v-if="m.combo.hasOwnProperty('img')" class=" profile-img" href="javascript: void(0);">
                                            <img :src="m.combo.img" alt="product" style="width: 80px;">
                                        </a>

                                        <div class="user-meta-info">

                                            <p class="user-work" data-occupation="REFRIGERADORES">{{m.combo.nombre}}</p>
                                        </div>
                                    </div>

                                    <div class="user-phone">
                                        <p class="info-title">Almacen: </p>
                                        <p class="usr-ph-no">{{m.almacen.name}}</p>
                                    </div>

                                    <div class="user-phone">
                                        <p class="info-title">Stock: </p>
                                        <p class="usr-ph-no">{{m.stock}} {{m.combo.medida.name}}</p>
                                    </div>


                                    <span style="font-weight: 700;color: #3b3f5c;">Precio</span>
                                    <div class="user-location">
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,5)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                            <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_4">
                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,5)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>
                                    <span style="font-weight: 700;color: #3b3f5c;">Descuento</span>
                                    <div class="user-location">
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button @click="restarDescuento(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                            <span class="input-group-addon bootstrap-touchspin-prefix input-group-prepend p-0"><span class="input-group-text p-0">%</span></span>
                                            <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.descuento" @change="ChangeDescuento(m)">
                                            <span class="input-group-btn input-group-append"><button @click="SumDescuento(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>

                                    <button class="btn btn-success btn-block mt-2 w-100"  @click="agregarCombo(m)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                                        Agregar
                                    </button>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-5 col-12 layout-spacing">
            <div class="widget widget-card-four p-0">
                <div class="widget-content">
                    <div class="row  p-0">

                        <div class="col-12 mt-sm-0 mt-2 ">
                           <div class="table-responsive">
                            <table class="table table-bordered mb-4 table-cart">
                                    <thead>
                                    <tr>
                                        <th style="width: 120px;">Producto</th>
                                        <th>Cantidad</th>
                                        <th>Precio</th>
                                        <th>Descuento</th>
                                        <th>Total</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <template v-for="(m, index) in CartItemModel">
                                        <tr

                                                >
                                                    <td style="display: flex;flex-wrap: wrap;">
                                                    {{m.producto.nombre}} |
                                                    <span style="color: rgb(3, 169, 244); font-weight: 600"
                                                        >{{m.producto.marca.name}}</span
                                                    >
                                                    </td>
                                                    <td>
                                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button @click="restarCantidad(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                                            <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.cantidad" @change="ChangeCantidad(m)">
                                                            <span class="input-group-btn input-group-append"><button @click="SumCantidad(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>

                                                    </td>
                                                    <td>
                                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,5)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                            <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_4">
                                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,5)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>
                                                    <td>
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button @click="restarDescuento(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                                        <span class="input-group-addon bootstrap-touchspin-prefix input-group-prepend p-0"><span class="input-group-text p-0">%</span></span>
                                                        <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.descuento" @change="ChangeDescuentod(m)">
                                                        <span class="input-group-btn input-group-append"><button @click="SumDescuento(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                    </td>
                                                    <td >{{Number(m.total).toFixed(2)}}</td>
                                                    <td

                                                    class="x_td"
                                                    @click="cart_item.splice(index, 1)"
                                                    style="
                                                        cursor: pointer;
                                                        transition: all 0.5s ease 0s;
                                                        font-weight: bolder;
                                                        color: rgb(27, 85, 226);
                                                        padding: 10px;
                                                        border-radius: 10px;
                                                    "
                                                    >
                                                    X
                                                    </td>
                                                </tr>
                                        </template>
                                        <template v-for="(m, index) in CartComboModel">
                                        <tr

                                                >
                                                    <td style="display: flex;flex-wrap: wrap;">
                                                    {{m.combo.nombre}}

                                                    </td>
                                                    <td>
                                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button @click="restarCantidad(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                                            <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.cantidad" @change="ChangeCantidad(m)">
                                                            <span class="input-group-btn input-group-append"><button @click="SumCantidad(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>

                                                    </td>
                                                    <td>
                                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,5)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                            <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_4">
                                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,5)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>
                                                    <td>
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button @click="restarDescuento(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                                        <span class="input-group-addon bootstrap-touchspin-prefix input-group-prepend p-0"><span class="input-group-text p-0">%</span></span>
                                                        <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.descuento" @change="ChangeDescuentod(m)">
                                                        <span class="input-group-btn input-group-append"><button @click="SumDescuento(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                    </td>
                                                    <td >{{Number(m.total).toFixed(2)}}</td>
                                                    <td

                                                    class="x_td"
                                                    @click="cart_combo.splice(index, 1)"
                                                    style="
                                                        cursor: pointer;
                                                        transition: all 0.5s ease 0s;
                                                        font-weight: bolder;
                                                        color: rgb(27, 85, 226);
                                                        padding: 10px;
                                                        border-radius: 10px;
                                                    "
                                                    >
                                                    X
                                                    </td>
                                                </tr>
                                        </template>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">SUB TOTAL</th>
                                            <th class="th_price">{{moneda}} <span id="sub_total_price">{{Number(SubTotal).toFixed(2)}}</span></th>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">IVA %</th>
                                            <th class="th_price">{{moneda}} <span id="cant_iva">{{Number(TotalIva).toFixed(2)}}</span></th>
                                            <th colspan="2"></th>
                                        </tr>
                                        <tr>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">EXENTO</th>
                                            <th class="th_price">{{moneda}} <span id="exento_price">{{Number(TotalItemsExcentos).toFixed(2)}}</span></th>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">
                                            PROD. EXENTOS
                                            </th>
                                            <th class="th_price"><span id="n_exento">{{ItemExento.length}}</span></th>
                                            <th colspan="2"></th>
                                        </tr>
                                        <tr>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">DESCUENTO</th>
                                            <th class="th_price">{{moneda}} <span id="precio_descuento">{{Number(TotalDescuento).toFixed(2)}}</span></th>
                                            <th class="text-end" style="color: rgb(27, 85, 226)">TOTAL</th>
                                            <th class="th_price">{{moneda}} <span id="total_price">{{Number(TotalPagar).toFixed(2)}}</span></th>
                                            <th colspan="2"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                           </div>

                        </div>
                              <div class="col-12 mt-2 p-4">
                                    <div class="form-group almacen">
                                        <label for="descuento_global">Descuento Global</label>
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button  class="btn btn-primary btn-sm bootstrap-touchspin-down"  @click="RestarDescuentoGlobal()" type="button">-</button></span>
                                            <span class="input-group-addon bootstrap-touchspin-prefix input-group-prepend p-0"><span class="input-group-text p-0">%</span></span>
                                            <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="descuento_global" @change="ChangeDescuentoGlobal()">
                                            <span class="input-group-btn input-group-append"><button @click="SumDescuentoGlobal()" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>
                                </div>
                        <div class="col-12">
                            <div class="row m-2">
                                <div class="col-sm-12 col-md-4">
                                    <button  @click="clean_windows()"
                                            class="btn btn-outline-dark mb-4 mr-2 btn-lg btn-block w-100"><svg xmlns="http://www.w3.org/2000/svg"
                                                width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg>
                                        Limpiar
                                    </button>
                                </div>
                                <div class="col-sm-12 col-md-8">
                                    <button class="btn btn-primary mb-4 mr-2 btn-lg btn-block w-100"
                                    data-bs-toggle="modal" data-bs-target="#ventaModal"
                                    @click="venta.efectivo_recibido=TotalPagar">
                                    <svg
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-shopping-cart">
                                            <circle cx="9" cy="21" r="1"></circle>
                                            <circle cx="20" cy="21" r="1"></circle>
                                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                                        </svg>
                                        Procesar Venta
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal  modal-xl"  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-dark" id="myExtraLargeModalLabel">LISTA DE PRODUCTOS</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                         </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive mb-4" >
                        <table class="table dt-table-hover" style="width:100%" id="table_dt">
                                        <thead>
                                            <tr>

                                                <th class=" text-center"> N° </th>
                                                <th class="text-center">Barra</th>
                                                <th class="text-center">Imagen</th>
                                                <th>Producto</th>


                                                <th>U.M</th>
                                                <th>Categoría</th>
                                                <th>Marca</th>

                                                <th>Lote</th>
                                                <th>Stock</th>
                                                <th>Cantidad</th>


                                                <th class="text-center">Opción</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            <template v-for="(m,i) in items">

                                                <tr>

                                                    <td class="">{{i + 1}}</td>
                                                    <td>
                                                       {{m . producto.codigo_barra}}
                                                    </td>
                                                    <td class="">
                                                        <a v-if="m.producto.hasOwnProperty('img')" class=" profile-img" href="javascript: void(0);">
                                                            <img :src="m.producto.img" alt="product" style="width: 80px;">
                                                        </a>
                                                    </td>
                                                    <td>
                                                       {{m .producto. nombre}}
                                                    </td>

                                                    <td>
                                                       {{m . producto.medida . prefijo}}
                                                    </td>
                                                    <td>
                                                       {{m . producto.categoria . name}}
                                                    </td>
                                                    <td>
                                                       {{m . producto.marca . name}}
                                                    </td>
                                                    <td>
                                                        <div class="badge bg-success"

                                                        >

                                                                {{m.lote}}
                                                            </div>
                                                        </td>
                                                    <td>
                                                        <div class="badge"
                                                        :class="{'bg-success':( m.stock>=m.producto.stock_moderado),
                                                            'bg-warning':(m.stock>=m.producto.stock_medio && m.stock<m.producto.stock_moderado),
                                                            'bg-danger':(m.stock<m.producto.stock_medio)}"
                                                        >
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
                                                                {{m.stock}}
                                                            </div>
                                                        </td>
                                                    <td><input v-model="m.cantidad" @keyup.enter="agregarItem(m)" type="text"  placeholder="Ejm. 10" class="form-control"></td>

                                                    <td class="text-center">
                                                        <button @click="agregarItem(m)" class="btn rounded-circle  " >
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal  modal-md"  id="ventaModal" tabindex="-1" role="dialog" aria-labelledby="ventaModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-dark" id="ventaModalLabel">Realizar Venta</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                     </button>
                    </div>
                    <div class="modal-body">
                    <div class="row">

                        <div class="col-md-12" id="procesar_compra_modal">
                            <div class="row">
                                <div class="col-12 my-2">
                                    <div class="form-group">
                                        <button class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#clienteModal">Nuevo Cliente</button>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 mb-2">
                                    <div class="form-group">
                                        <label for="cliente">Seleccionar cliente</label>
                                        <select class="form-control form-control-sm" id="select-clientes" v-model="cliente_id" @change="changeCliente">
                                            <template v-for="m in clientes" >

                                                <option :value="m.id">{{m.nro_documento}} | {{m.nombre}}</option>
                                            </template>
                                           </select>
                                    </div>
                                </div>

                                <div class="col-12 mt-2" v-if="validateClienteCredito">
                                    <div class="alert alert-warning">
                                        <strong>Advertencia!</strong> El cliente supero el limite de creditos.
                                    </div>
                                </div>

                                <div class="col-sm-6 col-12">
                                    <div class="form-group">
                                        <label for="tipo_comprobante">Tipo de Comprobante</label>
                                        <select class="form-control  form-control-sm "  @change="changeTirajes" v-model="venta.comprobante_id">
                                        <option v-for="m in comprobantes"  :value="m.id">{{m.name}}</option>
                                    </select>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12">
                                    <div class="form-group">
                                        <label for="tipo_comprobante">Serie</label>
                                        <select class="form-control  form-control-sm "   v-model="venta.tiraje_id">
                                            <template v-for="m in tirajesModel" >

                                                    <option :value="m.id">{{m.serie}}</option>
                                            </template>
                                    </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 ">
                                    <div class="form-group">
                                        <label for="metodo_pago">Metodo de pago</label>
                                        <select class="form-control  form-control-sm" v-model="venta.formapago">

                                            <option v-for="m in formapagos"  :value="m">{{m.name}}</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 " v-if="venta.formapago.is_caja==1">
                                    <div class="form-group">
                                        <label for="monto_a_pagar">{{venta.formapago.caja_texto}}</label>
                                        <input type="text" class="form-control form-control-sm" id="monto_a_pagar" v-model="venta.campo">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 " id="cont_monto_a_pagar">
                                    <div class="form-group">
                                        <label for="monto_a_pagar">Monto a pagar(*)</label>
                                        <input type="text" class="form-control form-control-sm" id="monto_a_pagar" :value="TotalItems.toFixed(2)" disabled="">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 " id="cont_efectivo_recibido">
                                    <div class="form-group">
                                        <label for="efectivo_recibido">Efectivo recibido (*)</label>
                                        <input type="text" class="form-control form-control-sm efectivo" v-model="venta.efectivo_recibido">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 " id="cont_cambio_venta">
                                    <div class="form-group">
                                        <label for="cambio_venta">Cambio (*)</label>
                                        <input type="text" class="form-control form-control-sm" id="cambio_venta" :value="cambio.toFixed(2)" disabled="">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 mt-2">
                                    <div class="form-group">
                                        <label class="mb-0">
                                            <div class="form-check form-check-primary form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="form-check-default-checked" value="true" v-model="correoremitenteChecked">
                                                <label class="form-check-label" for="form-check-default-checked">
                                                Correo de remitente (Factura)
                                                </label>
                                            </div>
                                        </label>
                                        <input type="text" class="form-control form-control-sm" v-model="correoremitente" :disabled="!correoremitenteChecked">
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                     <div class="form-group">
                                        <label class="mb-0">
                                           Observacion
                                        </label>
                                        <textarea class="form-control form-control-sm" v-model="venta.observacion"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer mt-2">
                                <button class="btn"  data-bs-dismiss="modal" aria-label="Close"><i class="flaticon-cancel-12"></i> Cerrar</button>
                                <button type="button" v-if="venta.tiraje_id!=''" class="btn btn-dark" id="btn_facturar_venta" @click="guardarVenta"  data-bs-dismiss="modal" aria-label="Close">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                    Vender
                                </button>
                                <button type="button" v-if="venta.tiraje_id!=''" class="btn btn-primary" id="btn_facturar_venta" @click="facturar"  data-bs-dismiss="modal" aria-label="Close">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                    Facturar
                                </button>

                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal  "  id="comprobanteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="ventaModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">


                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12 text-center">
                                    <img :src="asset('img/factura.png')" alt="sucursal" style="width: 300px;">
                            </div>
                            <div class="col-12 text-center">
                                <div class="btn-group mb-4" role="group" aria-label="Basic example">
                                                <a id="formato_ticket" :href="venta_report.url_pdf_ticket" target="_blank" class="btn btn-info">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                                                    TICKET
                                                </a>
                                                <a id="formato_a4" :href="venta_report.url_pdf_a4" target="_blank" class="btn btn-info">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                                                    A4
                                                </a>

                                                <a href="#" class="btn btn-dark"  data-bs-dismiss="modal" aria-label="Close">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                                                    Continuar
                                                </a>
                                            </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal  "  id="arqueoModal" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" role="dialog" aria-labelledby="arqueoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-ms" role="document">
                <div class="modal-content">

                    <div class="modal-body">
                        <img :src="asset('img/no_caja.png')" style="width: 100%">
                    </div>
                     <div class="modal-footer justify-content-center">

                        <a :href="url('/cajas/arqueo')" class="btn btn-primary" id="btn_facturar">

                            Abrir caja
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="clienteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Agregar cliente</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                        </button>
                    </div>
                    <div class="modal-body">
                         <div class="row">


                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Documentos</label>
                                  <select name="" class="form-control form-control-sm" id="" v-model="cliente.documento_id">
                                    <template v-for="m in documentos">
                                        <option :value="m.id">{{m.name}}</option>
                                    </template>

                                  </select>
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Nro Documento</label>
                                    <input type="text" @keyup.enter="consultarNit" class="form-control form-control-sm" v-model="cliente.nro_documento">
                               </div>
                            </div>
                               <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Nombre</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.nombre">
                               </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Razon Social</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.razon">
                               </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Direccion</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.direccion">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Telefono</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.telefono">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Correo</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.email">
                               </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Limite Crediticio</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.limite_crediticio">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Creditos Activos</label>
                                    <input type="text" class="form-control form-control-sm" v-model="cliente.creditos_activos">
                               </div>
                            </div>

                         </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-dark"  data-bs-toggle="modal" data-bs-target="#ventaModal">Cerrar</button>
                        <button type="button" class="btn btn-primary "  data-bs-toggle="modal" data-bs-target="#ventaModal" @click="SaveCliente">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endverbatim @endslot @slot('script')
<script type="module">
    import Table from "{{asset('config/dt.js')}}";
    const { createApp } = Vue;
    let dt = new Table();
    createApp({
        data() {
            return {
                add: true,
                model: {
                    fecha_comprobante:'',
                    fecha_limite:'',
                    nro_comprobante:'',
                    lote:'',
                    tipo_pago:1,
                    almacen:{

                    },
                    proveedor_id:1,
                    comprobante_id:1,
                    formapago:{

                    }
                },
                data: [],
                documentos: [],
                productos:[],
                cart_item:[],
                comprobantes:[],
                formapagos:[],
                clientes:[],
                almacens:[],
                tirajes:[],
                items:[],
                precio_radio:4,
                descuento_global:0,
                venta:{
                    tipo:1,
                    cliente:{},
                    formapago_id:1,
                    comprobante_id:1,
                    tiraje_id:'',
                    fecha_limite:'',
                    efectivo_recibido:0,
                    formapago:{
                        is_caja:0
                    },
                    campo:'',
                    observacion:''
                },
                venta_report:{
                    url_pdf_a4:'',
                },
                arqueo:{},
                categoria:'all',
                marca:'all',
                search:'',
                loading: false,
                cliente:{
                        name:'',
                        direccion:'',
                        sucursal_id:1,
                        documento_id:1
                    },

                sucursal:{},
                marcas:[],
                categorias:[],
                cliente_id:0,
                select_tom: null,
                correoremitenteChecked: false,
                correo:'',
                changeTipo:'producto',
                codigo_barra:"",
                search_combo:"",
                combos:[],
                cart_combo:[],
            };
        },
        watch:{
            marca(){
                this.searchProduct()
            },
            categoria(){
                this.searchProduct()
            }
        },
        computed:{
            cambio(){
                if(this.venta.tipo==1){
                    return Number(this.venta.efectivo_recibido - this.TotalPagar)
                }else{
                    return 0
                }
            },
            ItemExento(){
                return this.cart_item.filter((e)=>e.is_exento==1)
            },
            ItemNoExento(){
                return this.cart_item.filter((e)=>e.is_exento==0)
            },
            ComboItemExento(){
                return this.cart_combo.filter((e)=>e.combo.is_exento==1)
            },
            ComboItemNoExento(){
                return this.cart_combo.filter((e)=>e.combo.is_exento==0)
            },
            TotalComboItemsExcentos(){
                let total = 0;
                total = this.ComboItemExento.reduce((a,b)=>{

                    return a+(b.total)},0)
                return total
            },
            TotalComboItemsNoExentos(){
                let total = 0;
                total = this.ComboItemNoExento.reduce((a,b)=>{

                    return a+(b.total)},0)
                return total
            },
            TotalItemsExcentos(){
                let total = 0;
                total = this.ItemExento.reduce((a,b)=>{

                    return a+(b.total)},0)
                return total
            },
            TotalItemsNoExentos(){
                let total = 0;
                total = this.ItemNoExento.reduce((a,b)=>{

                    return a+(b.total)},0)
                return total
            },
            TotalItems(){
                let total = 0;
                total = this.TotalItemsExcentos+this.TotalItemsNoExentos+this.TotalComboItemsExcentos+this.TotalComboItemsNoExentos
                return Number(total)
            },
            SubTotal(){
                return Number((this.TotalItemsNoExentos+this.TotalComboItemsNoExentos)/1.18)
            },
            TotalIva(){
                return Number(this.SubTotal*1.18)-this.SubTotal
            },
            TotalRetencion(){
                return Number(this.SubTotal*1.18)-this.SubTotal
            },
            TotalDescuento(){
                return Number(this.TotalItems*(this.descuento_global/100))
            },
            TotalPagar(){
                return Number(this.TotalItems-this.TotalDescuento)
            },
            validateClienteCredito(){
                if(this.venta.cliente.hasOwnProperty('id')){
                    if(this.venta.cliente.creditos_activo_val>=this.venta.cliente.creditos_activos && this.venta.tipo==2){
                        return true
                    }
                    return false
                }else{
                    return false
                }
            },
            CartItemModel(){
                return this.cart_item.map((b)=>{
                    let precio =0 ;


                    precio = b.precio_4

                    b.subtotal=Number(b.cantidad*precio)
                    b.val_descuento = Number(b.subtotal * (b.descuento / 100))
                    b.total = Number(b.subtotal - b.val_descuento)
                    return b
                })
            },
            CartComboModel(){
                return this.cart_combo.map((b)=>{
                    let precio =0 ;


                    precio = b.precio_4

                    b.subtotal=Number(b.cantidad*precio)
                    b.val_descuento = Number(b.subtotal * (b.descuento / 100))
                    b.total = Number(b.subtotal - b.val_descuento)
                    return b
                })
            },


                    filterAll(){
                        return this.items
                    },

            moneda(){
                return this.sucursal.moneda
            },
            tirajesModel(){
                return this.tirajes.filter((m)=>{
                    return this.venta.comprobante_id==m.comprobante_id && m.disponibles>0
                })
            }
        },
        methods: {
            async searchCombo(){
                this.loading = true
               try {

                    let data={
                        search:this.search_combo,

                    }
                    let res = await axios.post(
                        "{{url('')}}/api/v1/inventario/general-combos",
                        data
                    )

                    this.combos = res.data
               } catch (error) {

               }finally {
                   this.loading = false
               }
            },
            async searchProduct(){
                this.loading = true
               try {

                    let data={
                        search:this.search,
                        categoria:this.categoria,
                        marca:this.marca
                    }
                    let res = await axios.post(
                        "{{url('')}}/api/v1/inventario/general-v2",
                        data
                    )

                    this.items = res.data
               } catch (error) {

               }finally {
                   this.loading = false
               }
            },
            async searchProductBarra(){
                try {
                    let data = {
                        barra: this.codigo_barra
                    }
                    let res = await axios.post(
                        "{{url('')}}/api/v1/inventario/barra",
                        data
                    )
                    if(res.data.length){
                        this.agregarItem(res.data[0])
                        this.codigo_barra = ''
                    }
                } catch (error) {

                }
                // if(this.search != ''){
                //     let buscarBarra = this.filterAll.filter((i)=>{
                //         return i.producto.codigo_barra == this.search
                //     })
                //     if(buscarBarra.length){
                //         this.agregarItem(buscarBarra[0])
                //         this.search = ''
                //     }
                // }

            },
            async getData() {
                try {
                    let res = await axios.get("{{url('')}}/api/v1/clientes");
                    return res.data;
                } catch (e) {
                } finally {
                }
            },
            async SaveCliente() {
                let self = this;
                try {

                        let res = await axios.post(
                            "{{url('')}}/api/v1/clientes",
                            this.cliente
                        );
                        Swal.fire({
                            position: "center",
                            icon: "success",
                            title: "Guardado!",
                        });

                        await Promise.all([self.getData()]).then((v) => {
                            self.clientes = v[0];

                        });


                         this.select_tom.addOption({
                            value: res.data.id,
                            text: res.data.nro_documento+" | "+ res.data.nombre,
                            })
                            this.cliente_id = res.data.id
                        let buscar_cliente = this.clientes.find((e) => {
                            return e.id == res.data.id;
                        })
                        this.cliente = {
                             name:'',
                            direccion:'',
                            sucursal_id:1,
                            documento_id:1
                        }
                        this.venta.cliente = buscar_cliente
                         this.select_tom.setValue(res.data.id)
                } catch (e) {
                     Swal.fire({
                            position: "center",
                            icon: "error",
                            title: "Hubo un error, intentalo al agregar!",
                        });
                } finally {

                }
            },
            async ChangeAlmacen() {
                let self = this;
                this.loading = true
                try {
                    let almacen_id = this.model.almacen.id
                     dt.destroy();
                    let res = await axios.post("{{url('inventario-api/almacen')}}",{almacen_id:almacen_id}).then((v)=>{
                        this.items = v.data
                    })
                } catch (e) {
                } finally {
                     this.loading = false
                    dt.create();
                }
            },
            deleteItem(id) {
                let self = this;

                Swal.fire({
                    title: "Estas seguro?",
                    text: "Este cambio es irreversible.",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Eliminar!",
                    cancelButtonText: "No!",
                    reverseButtons: true,
                    padding: "2em",
                }).then(async (result) => {
                    if (result.value) {
                        try {
                            let url = "{{url('api/v1/clientes')}}/" + id;

                            await axios.delete(url);
                            dt.destroy();
                            await Promise.all([self.getData()]).then((v) => {
                                self.data = v[0];
                            });
                            dt.create();
                        } catch (e) {}
                    }
                });
            },
            async getUrl(path) {
                try {
                    let res = await axios.get("{{url('')}}/api/v1/" + path);
                    return res.data;
                } catch (e) {
                } finally {
                }
            },
            async getUrl2(path) {
                try {
                    let res = await axios.get("{{url('')}}/" + path);
                    return res.data;
                } catch (e) {
                } finally {
                }
            },
            SumCantidad(item){
                let cantidad  = Number(Number(item.cantidad)+1)
                if(cantidad<=item.stock){
                    item.cantidad = Number(Number(item.cantidad)+1)
                }
                return item
            },
            ChangeCantidad(item){
                let cantidad  = Number(item.cantidad)
                if(cantidad>item.stock){
                    item.cantidad = Number(item.stock)
                }
                return item
            },
            restarCantidad(item){
                if(item.cantidad>1){
                    item.cantidad = Number(Number(item.cantidad)-1)
                }

                return item
            },
            SumDescuento(item){
                if(!item.hasOwnProperty('descuento')){
                    item.descuento = 0
                }
                if(item.descuento<100){

                    item.descuento = Number(Number(item.descuento)+0.1).toFixed(2)
                }

                return item
            },
            ChangeDescuento(item){

                item.descuento = Number(item.descuento)

                return item
            },
            restarDescuento(item){
                if(!item.hasOwnProperty('descuento')){
                    item.descuento = 0
                }
                if(item.descuento>0.1){
                    item.descuento = Number(Number(item.descuento)-0.1).toFixed(2)
                }

                return item
            },
            SumDescuentoGlobal(){
                if(this.descuento_global<100){

                    this.descuento_global = Number(Number(this.descuento_global)+0.1).toFixed(2)
                }

                return item
            },
            ChangeDescuentoGlobal(){

                this.descuento_global = Number(this.descuento_global)

                return item
            },
            RestarDescuentoGlobal(){
                if(this.descuento_global>0.1){
                    this.descuento_global = Number(Number(this.descuento_global)-0.1).toFixed(2)
                }

                return item
            },
            sumPrecio(item,tipo){
                if(tipo==1){
                    item.costo = Number(Number(item.costo)+0.1).toFixed(2)
                }
                if(tipo==2){
                    item.precio_1 = Number(Number(item.precio_1)+0.1).toFixed(2)
                }
                if(tipo==3){
                    item.precio_2 = Number(Number(item.precio_2)+0.1).toFixed(2)
                }
                if(tipo==4){
                    item.precio_3 = Number(Number(item.precio_3)+0.1).toFixed(2)
                }
                if(tipo==5){
                    item.precio_4 = Number(Number(item.precio_4)+0.1).toFixed(2)
                }
                return item
            },
            restarPrecio(item,tipo){
                if(tipo==1 && item.costo>0.1){
                    item.costo = Number(Number(item.costo)-0.1).toFixed(2)
                }
                if(tipo==2 && item.precio_1>0.1){
                    item.precio_1 = Number(Number(item.precio_1)-0.1).toFixed(2)
                }
                if(tipo==3 && item.precio_2>0.1){
                    item.precio_2 = Number(Number(item.precio_2)-0.1).toFixed(2)
                }
                if(tipo==4 && item.precio_3>0.1){
                    item.precio_3 = Number(Number(item.precio_3)-0.1).toFixed(2)
                }
                if(tipo==5 && item.precio_4>0.1){
                    item.precio_4 = Number(Number(item.precio_4)-0.1).toFixed(2)
                }
                return item
            },
            agregarItem(i){

                let item = {...i}

                if(!item.hasOwnProperty('cantidad')){
                    item.cantidad = 1
                }
                if(!item.hasOwnProperty('descuento')){
                    item.descuento = 0
                }
                let buscar = this.cart_item.findIndex((i)=>i.id == item.id)
                if(buscar > -1){
                    if(this.cart_item[buscar].cantidad < this.cart_item[buscar].stock){
                        this.cart_item[buscar].cantidad = Number(Number(this.cart_item[buscar].cantidad)+1)
                    }
                }else{
                    this.cart_item.push(item)

                    Snackbar.show({
                            text: 'Se ha agregado a la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                }
                $(".touch_spin").TouchSpin({
                    step: 0.1,
                    decimals: 2,
                });
            },
            agregarCombo(i){

                let combo = {...i}

                if(!combo.hasOwnProperty('cantidad')){
                    combo.cantidad = 1
                }
                if(!combo.hasOwnProperty('descuento')){
                    combo.descuento = 0
                }
                let buscar = this.cart_combo.findIndex((i)=>i.id == combo.id)
                if(buscar > -1){
                    if(this.cart_combo[buscar].cantidad < this.cart_combo[buscar].stock){
                        this.cart_combo[buscar].cantidad = Number(Number(this.cart_combo[buscar].cantidad)+1)
                    }
                }else{
                    this.cart_combo.push(combo)

                    Snackbar.show({
                            text: 'Se ha agregado a la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                }
                $(".touch_spin").TouchSpin({
                    step: 0.1,
                    decimals: 2,
                });
            },
            async guardarVenta(){
                this.loading = true
                let self = this
                try {
                    this.venta.total = this.TotalPagar
                    this.venta.formapago_id = this.venta.formapago.id
                    this.venta.sumas = this.TotalItemsNoExentos
                    this.venta.exento = this.TotalItemsExcentos
                    this.venta.subtotal = this.SubTotal
                    this.venta.iva = this.TotalIva
                    this.venta.retencion = this.TotalRetencion
                    this.venta.cart = this.cart_item
                    this.venta.cart_combo = this.cart_combo
                    this.venta.user_id = this.arqueo.user_id
                    this.venta.cliente_id = this.venta.cliente.id
                    this.venta.sucursal_id = this.arqueo.sucursal_id
                    this.venta.arqueo_id = this.arqueo.id
                    this.venta.precio_radio = this.precio_radio
                    this.venta.recibido = this.venta.efectivo_recibido
                    this.venta.descuento = this.TotalDescuento
                    this.venta.cambio = this.cambio
                    this.venta.descuento_global = 0
                    this.venta.correoremitente = this.correoremitente
                    let res = await axios.post(
                            "{{url('')}}/api/v1/ventas",
                            this.venta
                        )
                        this.venta_report = res.data
                        this.cart_item = []
                        this.cart_combo = []
                        this.correoremitente=""
                        this.select_tom.setValue(0)
                        Swal.fire({
                            position: "center",
                            icon: "success",
                            title: "Guardado!",
                            timer:750
                        });
                         $("#comprobanteModal").modal("show");
                         await Promise.all([self.getData(),self.getUrl("inventario/general-v2"),self.getUrl("inventario/general-combos"),self.getUrl("tiraje/sucursal-active")]).then((v) => {
                                self.clientes = v[0];
                                self.items = v[1];
                                self.combos = v[2];
                                self.tirajes = v[3];
                            });

                } catch (error) {
                    Swal.fire({
                            position: "center",
                            icon: "error",
                            title: "Error!",
                            text: error.response.data.message,
                        });
                }finally{
                    this.loading = false
                }
            },
            async facturar(){
                this.loading = true
                let self = this
                try {
                    this.venta.total = this.TotalPagar
                    this.venta.formapago_id = this.venta.formapago.id
                    this.venta.sumas = this.TotalItemsNoExentos
                    this.venta.exento = this.TotalItemsExcentos
                    this.venta.subtotal = this.SubTotal
                    this.venta.iva = this.TotalIva
                    this.venta.retencion = this.TotalRetencion
                    this.venta.cart = this.cart_item
                    this.venta.cart_combo = this.cart_combo
                    this.venta.user_id = this.arqueo.user_id
                    this.venta.cliente_id = this.venta.cliente.id
                    this.venta.sucursal_id = this.arqueo.sucursal_id
                    this.venta.arqueo_id = this.arqueo.id
                    this.venta.precio_radio = this.precio_radio
                    this.venta.recibido = this.venta.efectivo_recibido
                    this.venta.descuento = this.TotalDescuento
                    this.venta.cambio = this.cambio
                    this.venta.descuento_global = 0
                    this.venta.correoremitente = this.correoremitente
                    let res = await axios.post(
                            "{{url('')}}/api/v1/venta-facturar",
                            this.venta
                        )
                        if(res.data.hasOwnProperty('error')){
                            Swal.fire({
                                position: "center",
                                icon: "error",
                                title: res.data.error,

                            })
                            return false
                        }
                        this.venta_report = res.data
                        this.cart_item = []
                        this.cart_combo = []
                        this.correoremitente = ""
                        this.select_tom.setValue(0)
                        Swal.fire({
                            position: "center",
                            icon: "success",
                            title: "Guardado!",
                            timer:750
                        });
                         $("#comprobanteModal").modal("show");
                         await Promise.all([self.getData(),self.getUrl("inventario/general-v2"),self.getUrl("inventario/general-combos"),self.getUrl("tiraje/sucursal-active")]).then((v) => {
                                self.clientes = v[0];
                                self.items = v[1];
                                self.combos = v[2];
                                self.tirajes = v[3];
                            });

                } catch (error) {

                }finally{
                    this.loading = false
                }
            },
            changeTirajes(){

                 let buscar = this.tirajes.filter((i)=>i.comprobante_id == this.venta.comprobante_id && i.disponibles > 0)
                if(buscar.length){
                    this.venta.tiraje_id = buscar[0].id
                }
            },
            clean_windows(){
                this.cart_item =[]
            },
            asset(url){
                return "{{asset('')}}"+url
            },
            url(url){
                return "{{url('')}}"+url
            },
            changeCliente(){
                let buscar = this.clientes.filter((i)=>i.id == this.cliente_id)
                if(buscar.length){
                    this.venta.cliente = buscar[0]
                }
            },
            async consultarNit(){
                try{
                    let res = await axios.post("{{url('')}}/api/v1/consultar-nit",{nit:this.cliente.nro_documento})
                    if(res.data.success==false){
                        Swal.fire({
                            position: "center",
                            icon: "error",
                            title: "No se encontro el nit!",
                            timer:750
                        });
                    }else{
                        this.cliente.nombre = res.data.data.nombre
                        this.cliente.razon = res.data.data.nombre
                    }
                }catch(error){

                }
            }
        },
        mounted() {
            this.$nextTick(async () => {
                $("#view_pos").addClass("module_active");
                let self = this;
                this.loading = true
                try {
                    await Promise.all([
                        self.getData(),
                        self.getUrl("documentos"),
                        self.getUrl("inventario/general-v2"),
                        self.getUrl("comprobantes"),

                        self.getUrl("formapagos"),
                        self.getUrl("almacen/sucursal-active"),
                        self.getUrl("tiraje/sucursal-active"),
                        self.getUrl2('get-arqueo'),
                        self.getUrl('sucursals-session'),
                        self.getUrl('marcas'),
                        self.getUrl('categorias'),
                        self.getUrl("inventario/general-combos"),
                    ]).then((v) => {
                        this.clientes = v[0];
                        this.documentos = v[1];
                        this.items = v[2];
                        this.comprobantes = v[3];

                        this.formapagos = v[4];
                        this.almacens = v[5];
                        this.tirajes = v[6];
                        this.arqueo = v[7];
                        this.sucursal = v[8];
                        this.marcas = v[9];
                        this.categorias = v[10];
                        this.combos = v[11];
                    });

                        if(this.documentos.length){
                            this.venta.comprobante_id = this.documentos[0].id

                        }
                        if(this.formapagos.length){
                            this.venta.formapago = this.formapagos[0]
                        }
                        if(this.tirajes.length){
                            let buscar = this.tirajes.filter((i)=>i.comprobante_id == this.venta.comprobante_id && i.disponibles > 0)
                            if(buscar.length){
                                this.venta.tiraje_id = buscar[0].id
                            }
                        }
                        this.select_tom = new TomSelect("#select-clientes",{
                            create: true,
                            sortField: {
                                field: "text",
                                direction: "asc"
                            }
                        })
                } catch (e) {
                } finally {

                    $(".touchs").TouchSpin({
                        step: 0.1,
                        decimals: 2,
                        prefix: '%',
                    });

                    this.loading = false
                    if(!this.arqueo.hasOwnProperty('id')){

                        $("#arqueoModal").modal('show')
                    }




                }

            });
        },
    }).mount("#app");
</script>
@endslot @slot('style')
<style>
    .widget-card-four {
        padding: 25px 32px;
        background: #fff;
    }
    .widget-card-four .w-content {
        display: flex;
        justify-content: space-between;
    }
    .widget-card-four .w-icon {
        color: #2196F3;
        background-color: #000000;
        height: 45px;
        display: inline-flex;
        width: 45px;
        align-self: center;
        justify-content: center;
        border-radius: 50%;
        padding: 10px;
    }
    .widget-card-four .w-info p {
        font-weight: 600;
        margin-bottom: 0;
        color: #2196F3;
        font-size: 16px;
    }
    .widget-card-four .w-info h6 {
        font-weight: 600;
        margin-bottom: 0;
        color: #0e1726;
        font-size: 23px;
        letter-spacing: 0;
    }
    .bootstrap-touchspin .btn{
        padding: 10px;
    }
    .bootstrap-touchspin .form-control{
        padding: 0px 10px;
    }
    .filtered-list-search div input {
        padding: 10px;
        color: #d3d3d3;
        border: none;
        box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
        width: 100%!important;
        background-color: #fff;
    }
    .form-check-label{
        font-size: 13px;
    }
    .table-cart th{
        font-size: 13px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        color: #1b55e2 !important;
        letter-spacing: 1px;
        padding: 10px 5px !important;
    }
    .table-cart th.th_price{

        color: #515365 !important;

    }
    .table-cart td{
        font-size: 13px !important;
        padding: 10px 5px !important;
    }
</style>
@endslot @endcomponent