@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-8 col-12">

            <div class="row mt-2">
                <div
                    class="col-xl-6 col-lg-6 col-md-6 col-sm-8 filtered-list-search mb-2"
                >
                    <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"
                                placeholder="Buscar los productos"
                            />
                        </div>
                    </div>
                </div>
                <div
                    class="col-xl-6 col-lg-6 col-md-6 col-sm-4 text-sm-right text-center layout-spacing align-self-center"
                >
                    <div
                        class="d-flex justify-content-sm-end justify-content-center"
                    >
                        <div class="btn-group w-100">
                            <button
                            type="button"
                            class="btn btn-lg btn-outline-warning w-100"
                            data-bs-toggle="modal" data-bs-target="#exampleModal"
                        >
                            <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-box"
                            >
                                <path
                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                ></path>
                                <polyline
                                    points="3.27 6.96 12 12.01 20.73 6.96"
                                ></polyline>
                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
                            </svg>
                            Productos
                        </button>
                        <button
                            type="button"
                            class="btn btn-lg btn-outline-info w-100"
                            data-bs-toggle="modal" data-bs-target="#servicioModal"
                        >
                            <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-box"
                            >
                                <path
                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                ></path>
                                <polyline
                                    points="3.27 6.96 12 12.01 20.73 6.96"
                                ></polyline>
                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
                            </svg>
                            Servicios
                        </button>
                        <button
                            type="button"
                            class="btn btn-lg btn-outline-warning w-100"
                            data-bs-toggle="modal" data-bs-target="#comboModal"
                        >
                            <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-box"
                            >
                                <path
                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                ></path>
                                <polyline
                                    points="3.27 6.96 12 12.01 20.73 6.96"
                                ></polyline>
                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
                            </svg>
                            Combos
                        </button>
                        </div>
                    </div>
                </div>
                <div class="col-12">

                    <div class="widget-content searchable-container mt-3 list">
                        <div class="searchable-items grid " id="items_widgets" style="height: 70vh; overflow-y: scroll; position: static; zoom: 1;">
                            <div v-for="(m,i) in filterCart" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">
                                    <button class="btn btn-outline-danger btn-sm btn_eliminar_producto_compra" @click="cart_item.splice(i,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-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></button>

                                    <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 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">
                                        <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-location mt-2">
                                        <div class="card accordion-icons w-100">
                                            <div class="card-header" id="headingOne4">
                                            <div class="mb-0 mt-0">
                                                <div role="menu" class="" data-bs-toggle="collapse" v-bind:data-bs-target="'#producto'+m.id" aria-expanded="true" aria-controls="iconAccordionThree">
                                                    <div class="accordion-icon">
                                                        <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-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                                        </div>
                                                    Precios
                                                </div>
                                                </div>

                                            </section>
                                            </div>

                                            <div :id="'producto'+m.id" class="collapse" aria-labelledby="headingOne4" data-bs-parent="#iconAccordionThree" style="">
                                                <div class="card-body">

                                                    <span style="font-weight: 700;color: #3b3f5c;">Precio Especial</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,2)"  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_1">
                                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,2)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>
                                                    </div>
                                                    <span style="font-weight: 700;color: #3b3f5c;">Precio Mayorista</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,3)"  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_2">
                                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,3)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>
                                                    </div>
                                                    <span style="font-weight: 700;color: #3b3f5c;">Precio Minorista</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,4)"  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_3">
                                                            <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,4)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                        </div>
                                                    </div>
                                                    <span style="font-weight: 700;color: #3b3f5c;">Precio Normal</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>

                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <span style="font-weight: 700;color: #3b3f5c;">Cantidad</span>
                                    <div class="user-location">
                                        <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="isError(m)?'error_stock':''"  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>
                                    </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="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>
                                    </div>

                                    <div class="user-location mt-2">
                                        <span style="font-weight: 700;color: #3b3f5c;">Sub Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.subtotal).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Descuento</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.val_descuento).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.total).toFixed(2)}}</span>
                                    </div>

                                    <span  v-if="m.is_lote==1" style="font-weight: 700;color: #3b3f5c;">LOTE</span>
                                    <div v-if="m.is_lote==1" class="user-location">
                                        <input type="text" v-model="m.lote" value="" class="form-control">
                                    </div>
                                    <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 v-for="(m,i) in CartComboModel" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">
                                    <button class="btn btn-outline-danger btn-sm btn_eliminar_producto_compra" @click="cart_combos.splice(i,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-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></button>

                                    <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="code-bar">


                                    </div>

                                    <div class="user-location mt-2">
                                        <div class="card accordion-icons w-100">
                                            <div class="card-header" id="headingOne4">
                                            <div class="mb-0 mt-0">
                                                <div role="menu" class="" data-bs-toggle="collapse" v-bind:data-bs-target="'#producto'+m.id" aria-expanded="true" aria-controls="iconAccordionThree">
                                                    <div class="accordion-icon">
                                                        <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-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                                        </div>
                                                    Precios
                                                </div>
                                                </div>

                                            </section>
                                            </div>

                                            <div :id="'producto'+m.id" class="collapse" aria-labelledby="headingOne4" data-bs-parent="#iconAccordionThree" style="">
                                            <div class="card-body">

                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Especial</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,2)"  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_1">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,2)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Mayorista</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,3)"  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_2">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,3)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Minorista</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,4)"  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_3">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,4)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Normal</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>

                                            </div>
                                            </div>
                                        </div>

                                    </div>

                                    <span style="font-weight: 700;color: #3b3f5c;">Cantidad</span>
                                    <div class="user-location">
                                        <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)" @input="validateNumberInput(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>
                                    </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="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>
                                    </div>

                                    <div class="user-location mt-2">
                                        <span style="font-weight: 700;color: #3b3f5c;">Sub Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.subtotal).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Descuento</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.val_descuento).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.total).toFixed(2)}}</span>
                                    </div>




                                </div>
                            </div>
                            <div v-for="(m,i) in CartServicioModel" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">
                                    <button class="btn btn-outline-danger btn-sm btn_eliminar_producto_compra" @click="cart_servicio.splice(i,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-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></button>

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

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

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


                                    </div>

                                    <div class="user-location mt-2">
                                        <div class="card accordion-icons w-100">
                                            <div class="card-header" id="headingOne4">
                                            <div class="mb-0 mt-0">
                                                <div role="menu" class="" data-bs-toggle="collapse" v-bind:data-bs-target="'#producto'+m.id" aria-expanded="true" aria-controls="iconAccordionThree">
                                                    <div class="accordion-icon">
                                                        <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-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                                        </div>
                                                    Precios
                                                </div>
                                                </div>

                                            </section>
                                            </div>

                                            <div :id="'producto'+m.id" class="collapse" aria-labelledby="headingOne4" data-bs-parent="#iconAccordionThree" style="">
                                            <div class="card-body">

                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Especial</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,2)"  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_1">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,2)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Mayorista</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,3)"  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_2">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,3)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Minorista</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,4)"  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_3">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,4)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Normal</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>

                                            </div>
                                            </div>
                                        </div>

                                    </div>

                                    <span style="font-weight: 700;color: #3b3f5c;">Cantidad</span>
                                    <div class="user-location">
                                        <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>
                                    </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="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>
                                    </div>

                                    <div class="user-location mt-2">
                                        <span style="font-weight: 700;color: #3b3f5c;">Sub Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.subtotal).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Descuento</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.val_descuento).toFixed(2)}}</span>
                                    </div>
                                    <div class="user-location ">
                                        <span style="font-weight: 700;color: #3b3f5c;">Total</span>
                                        <span style="font-weight: 200;color: #3b3f5c;" >{{Number(m.total).toFixed(2)}}</span>
                                    </div>




                                </div>
                            </div>

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

                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}}</span
                                        ><span id="suma_price">{{Number(TotalItemsNoExentos).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">SUMAS</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-plus-circle"
                                        >
                                            <circle
                                                cx="12"
                                                cy="12"
                                                r="10"
                                            ></circle>
                                            <line
                                                x1="12"
                                                y1="8"
                                                x2="12"
                                                y2="16"
                                            ></line>
                                            <line
                                                x1="8"
                                                y1="12"
                                                x2="16"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="cant_iva">{{Number(TotalIva).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">IVA%</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-percent"
                                        >
                                            <line
                                                x1="19"
                                                y1="5"
                                                x2="5"
                                                y2="19"
                                            ></line>
                                            <circle
                                                cx="6.5"
                                                cy="6.5"
                                                r="2.5"
                                            ></circle>
                                            <circle
                                                cx="17.5"
                                                cy="17.5"
                                                r="2.5"
                                            ></circle>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="sub_total_price">{{Number(SubTotal).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">SUBTOTAL</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-plus"
                                        >
                                            <line
                                                x1="12"
                                                y1="5"
                                                x2="12"
                                                y2="19"
                                            ></line>
                                            <line
                                                x1="5"
                                                y1="12"
                                                x2="19"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="retencion_price">{{Number(TotalRetencion).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">RET. {{sucursal.iva}}%(-)</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-minus-circle"
                                        >
                                            <circle
                                                cx="12"
                                                cy="12"
                                                r="10"
                                            ></circle>
                                            <line
                                                x1="8"
                                                y1="12"
                                                x2="16"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="exento_price">{{Number(TotalItemsExcentos).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">EXENTO</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span id="n_exento">{{ItemExento.length}}</span
                                        ><!--<h6-->
                                        <p class="">PROD. EXENTOS</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content mb-2">
                                <div class="w-info">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="total_price">{{Number(TotalDescuento).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">DESCUENTO</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-percent"><line x1="19" y1="5" x2="5" y2="19"></line><circle cx="6.5" cy="6.5" r="2.5"></circle><circle cx="17.5" cy="17.5" r="2.5"></circle></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #2196F3;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content mb-2">
                                <div class="w-info">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="total_price">{{Number(TotalPagar).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">TOTAL</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <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-bag"
                                        >
                                            <path
                                                d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
                                            ></path>
                                            <line
                                                x1="3"
                                                y1="6"
                                                x2="21"
                                                y2="6"
                                            ></line>
                                            <path
                                                d="M16 10a4 4 0 0 1-8 0"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 p-0">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group mt-2">
                                        <label for="almacen">Almacén</label>
                                        <select
                                            class="form-control basic select2-hidden-accessible"

                                            v-model="model.almacen"
                                            @change="ChangeAlmacen"
                                        >

                                        <template v-for="m in almacens">
                                            <option :value="m">{{m.name}}</option>
                                           </template>
                                           </select
                                        >
                                    </div>
                                </div>

                                <div class="col-12 mt-2">
                                    <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 mt-2">
                                <div class="row">
                                    <div class="col-12">
                                        <label for="">Precios Disponibles</label>
                                    </div>
                                </div>
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="form-check-1" value="1" v-model="precio_radio">
                                    <label class="form-check-label" for="form-check-1">
                                        P. Especial
                                    </label>
                                </div>
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="form-check-2" value="2" v-model="precio_radio">
                                    <label class="form-check-label" for="form-check-2">
                                        P. Mayorista
                                    </label>
                                </div>
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="form-check-3" value="3" v-model="precio_radio">
                                    <label class="form-check-label" for="form-check-3">
                                        P. Minorista
                                    </label>
                                </div>
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="form-check-4" value="4" v-model="precio_radio">
                                    <label class="form-check-label" for="form-check-4">
                                        P. Normal
                                    </label>
                                </div>
                               </div>
                               <div class="col-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlInput1">Vendedor</label>
                                    <select name="" class="form-control form-control-sm" id="" v-model="user">
                                        <template v-for="m in users">
                                            <option :value="m">{{m.persona.nombre}}</option>
                                        </template>

                                    </select>
                                </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlInput1">Fecha Venta</label>
                                        <input type="date" class="form-control form-control-sm" v-model="venta.fecha_venta">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <button
                                class="btn btn-secondary btn-block mt-3 mr-2 p-3 w-100"
                                data-bs-toggle="modal" data-bs-target="#ventaModal"
                                @click="venta.efectivo_recibido=TotalPagar"
                            >
                                REALIZAR VENTA
                            </button>
                        </div>
                        <div class="col-12 p-0">
                            <button
                                class="btn btn-outline-dark btn-block mt-3 mr-2 p-3 w-100"
                                @click="clean_windows()"
                            >
                                <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>
                </div>
            </div>
        </div>
        <div class="modal  modal-xl"  id="comboModal" 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 COMBOS</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-12 mb-3 text-end">
                            <input type="text" class="form-control" v-model="search_almacen_combo" @keyup="buscar_almacen_combo()"  placeholder="Buscar por nombre o barra">
                        </div>
                        <div class="col-12">
                            <div class="table-responsive mb-4" >
                            <table class="table dt-table-hover" style="width:100%" >
                                    <thead>
                                        <tr>

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

                                            <th class="text-center">Imagen</th>
                                            <th>Combo</th>


                                            <th>U.M</th>

                                            <th>Precio</th>
                                            <th>Stock</th>
                                            <th>Cantidad</th>


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

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

                                            <tr>

                                                <td class="">{{i + 1}}</td>

                                                <td class="">
                                                    <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>
                                                </td>
                                                <td>
                                                    {{m .combo. nombre}}
                                                </td>

                                                <td>
                                                    {{m . combo.medida . prefijo}}
                                                </td>
                                                <td>
                                                    {{m . precio_4}}
                                                </td>
                                                <td>

                                                    <div class="badge"
                                                    :class="{'bg-success':( m.stock>=m.combo.stock_moderado),
                                                        'bg-warning':(m.stock>=m.combo.stock_medio && m.stock<m.combo.stock_moderado),
                                                        'bg-danger':(m.stock<m.combo.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="agregarCombo(m)" type="text"  placeholder="Ejm. 10" class="form-control " :class="isError(m)?'error_stock':''"   @input="validateNumberInput(m)"></td>

                                                <td class="text-center">
                                                    <button @click="agregarCombo(m)" class="btn rounded-circle  " :disabled="isError(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-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>
        </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="row">
                         <div class="col-12 mb-3 text-end">
                            <input type="text" class="form-control" v-model="search_almacen" @keyup="buscar_almacen()"  placeholder="Buscar por nombre o barra">
                        </div>
                        <div class="col-12">
                            <div class="table-responsive mb-4" >
                            <table class="table dt-table-hover" style="width:100%" >
                                    <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>F.V</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 v-if="m.perecedero!=null" class="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>
                                                </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 " :class="isError(m)?'error_stock':''"   @input="validateNumberInput(m)"></td>

                                                <td class="text-center">
                                                    <button @click="agregarItem(m)" class="btn rounded-circle  " :disabled="isError(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-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>
        </div>
        <div class="modal  modal-xl"  id="servicioModal" 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 SERVICIOS</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_servicio">
                                        <thead>
                                            <tr>

                                                <th> N° </th>
                                                <th>Imagen</th>
                                                <th>Servicio</th>
                                                <th>Precio</th>



                                                <th>Cantidad</th>


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

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

                                                <tr>

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

                                                   <td>{{Number(m.precio_4).toFixed(2)}}</td>
                                                    <td><input v-model="m.cantidad" @keyup.enter="agregarServicio(m)" type="text"  placeholder="Ejm. 10" class="form-control"></td>

                                                    <td class="text-center">
                                                        <button @click="agregarServicio(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-xl"  id="ventaModal" tabindex="-1" role="dialog" aria-labelledby="ventaModalLabel" 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="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 mt-4">
                        <div class="col-md-5">
                            <img :src="asset('img/procesar.png')" style="width: 100%">
                        </div>
                        <div class="col-md-7" id="procesar_compra_modal">
                            <div class="row">
                                <div class="col-12">
                                    <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-8 col-12">
                                    <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-sm-4 col-12">
                                    <div class="form-group">
                                        <label for="limite_credito_venta">Limite crediticio</label>
                                        <input type="text" class="form-control form-control-sm" id="limite_credito_venta" :value="venta.cliente.limite_crediticio" disabled="">

                                    </div>
                                </div>
                                <div class="col-sm-4 col-12">
                                    <div class="form-group">
                                        <label for="id_cliente_venta">Codigo cliente</label>
                                        <input type="text" class="form-control form-control-sm" id="id_cliente_venta"  :value="venta.cliente.codigo_cliente"  readonly="readonly">

                                    </div>
                                </div>
                                <div class="col-sm-4 col-12">
                                    <div class="form-group">
                                        <label for="id_cliente_venta">Limite de creditos</label>
                                        <input type="text" class="form-control form-control-sm" id="id_cliente_creditolimite_venta"  :value="venta.cliente.creditos_activos"  readonly="readonly">
                                    </div>
                                </div>
                                <div class="col-sm-4 col-12">
                                    <div class="form-group">
                                        <label for="id_cliente_venta">Creditos activo</label>

                                        <input type="text" class="form-control form-control-sm" id="id_cliente_creditos_venta"  :value="venta.cliente.creditos_activo_val" readonly="readonly">
                                    </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-4 col-12">
                                    <div class="form-group">
                                        <label for="tipo_pago">Tipo de pago</label>
                                        <select class="form-control  form-control-sm" v-model="venta.tipo">

                                            <option value="1">CONTADO</option>
                                            <option value="2">CREDITO</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-4 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-4 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 tirajes" >

                                                    <option v-if="venta.comprobante_id==m.comprobante_id && m.disponibles>0" :value="m.id">{{m.serie}}</option>
                                            </template>
                                    </select>
                                    </div>
                                </div>
                                <div class="col-sm-6 mt-2 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-6 mt-2 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-4 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-4 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-4 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" id="cont_fecha_limite" v-if="venta.tipo==2">
                                    <div class="form-group">
                                        <label for="fecha_limite" id="N_fecha_limite">Fecha límite (*)</label>
                                        <input type="date" placeholder="2020-12-08"  v-model="venta.fecha_limite" class="form-control form-control-sm">
                                    </div>
                                </div>

                                <div class="col-sm-12 col-12" id="cont_fecha_limite">
                                    <div class="form-group">
                                        <label for="fecha_limite">Observacion</label>
                                        <textarea name="" v-model="venta.observacion"  id="observacion" cols="30" rows="10" class="form-control"></textarea>
                                    </div>
                                </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>
                            <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,
                },
                data: [],
                documentos: [],
                productos:[],
                cart_item:[],
                comprobantes:[],
                formapagos:[],
                clientes:[],
                almacens:[],
                tirajes:[],
                items:[],
                precio_radio:4,
                descuento_global:0,
                venta:{
                    tipo:1,
                    cliente:{},
                    fecha_venta:'',
                    formapago_id:1,
                    comprobante_id:1,
                    tiraje_id:'',
                    fecha_limite:'',
                    efectivo_recibido:0,
                    formapago:{
                        is_caja:0,
                    },
                    campo:''
                },
                venta_report:{
                    url_pdf_a4:'',
                },
                arqueo:{},
                search:"",
                loading: false,
                cliente:{
                        name:'',
                        direccion:'',
                        sucursal_id:1,
                        documento_id:1
                    },

                sucursal:{},
                cliente_id:0,
                servicios:[],
                cart_servicio:[],
                cart_combos:[],
                users:[],
                user:{},
                correoremitenteChecked: false,
                correo:'',
                search_almacen:'',
                combos:[],
                search_almacen_combo:'',
            };
        },
        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_combos.filter((e)=>e.is_exento==1)
            },
            ComboItemNoExento(){
                return this.cart_combos.filter((e)=>e.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)
                total = total
                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)
                total = total+this.TotalServicios
                return total
            },
            TotalServicios(){
                let total = 0;
                total = this.CartServicioModel.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 ;
                    if(this.precio_radio==1){
                        precio = b.precio_1
                    }
                    if(this.precio_radio==2){
                        precio = b.precio_2
                    }
                    if(this.precio_radio==3){
                        precio = b.precio_3
                    }
                    if(this.precio_radio==4){
                        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
                })
            },
            CartServicioModel(){
                return this.cart_servicio.map((b)=>{
                    let precio =0 ;
                    if(this.precio_radio==1){
                        precio = b.precio_1
                    }
                    if(this.precio_radio==2){
                        precio = b.precio_2
                    }
                    if(this.precio_radio==3){
                        precio = b.precio_3
                    }
                    if(this.precio_radio==4){
                        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_combos.map((b)=>{
                    let precio =0 ;
                    if(this.precio_radio==1){
                        precio = b.precio_1
                    }
                    if(this.precio_radio==2){
                        precio = b.precio_2
                    }
                    if(this.precio_radio==3){
                        precio = b.precio_3
                    }
                    if(this.precio_radio==4){
                        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
                })
            },
            filterCart(){
                if(this.search==""){
                    return this.CartItemModel
                }else{
                    return this.CartItemModel.filter((e)=>{
                        return e.producto.nombre.toLowerCase().indexOf(this.search.toLowerCase())>-1 ||e.producto.codigo_barra.toLowerCase().indexOf(this.search.toLowerCase())>-1
                    })
                }
            },
            moneda(){
                return this.sucursal.moneda
            }
        },
        methods: {
            async buscar_almacen_combo(){
                try {
                    let data ={
                        search : this.search_almacen_combo,
                        almacen_id : this.model.almacen.id
                    }
                    let res = await axios.post("{{url('inventario-api/almacen-buscar-combo')}}",data)
                    this.combos = res.data
                } catch (error) {

                }
            },
            async buscar_almacen(){
                try {
                    let data ={
                        search : this.search_almacen,
                        almacen_id : this.model.almacen.id
                    }
                    let res = await axios.post("{{url('inventario-api/almacen-buscar')}}",data)
                    this.items = res.data
                } catch (error) {

                }
            },
            validateNumberInput(item) {
            // Remueve cualquier carácter que no sea número
                const value = item.cantidad
                item.cantidad = value.replace(/[^0-9]/g, "");
            },
            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
                    })
                    let res2 = await axios.post("{{url('inventario-api/almacen-combos')}}",{almacen_id:almacen_id}).then((v)=>{
                        this.combos = 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.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.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
            },
            agregarCombo(i){

                if(i.cantidad<=i.stock){
                let item = {...i}
                item.descuento = 0
                if(!item.hasOwnProperty('cantidad')){
                    Snackbar.show({
                            text: 'Ingrese una cantidad',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#805dca',
                            actionText: 'Cerrar'
                        });
                    return false
                }
                let buscar = this.cart_combos.filter((i)=>i.id == item.id)
                if(buscar.length){
                    Snackbar.show({
                            text: 'El producto ya esta en la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#805dca',
                            actionText: 'Cerrar'
                        });
                }else{

                    this.cart_combos.push(item)
                    Snackbar.show({
                            text: 'Se ha agregado a la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                }

                i.cantidad = ""
                }
                },
            agregarServicio(i){

                let item = {...i}
                item.descuento = 0
                item.stock = 100
                if(!item.hasOwnProperty('cantidad')){
                    Snackbar.show({
                            text: 'Ingrese una cantidad',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#805dca',
                            actionText: 'Cerrar'
                        });
                    return false
                }
                let buscar = this.cart_servicio.filter((i)=>i.id == item.id)
                if(buscar.length){
                    Snackbar.show({
                            text: 'El servicio ya esta en la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#805dca',
                            actionText: 'Cerrar'
                        });
                }else{

                    this.cart_servicio.push(item)
                    Snackbar.show({
                            text: 'Se ha agregado a la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                }

               i.cantidad = ""
            },
            agregarItem(i){

                if(i.cantidad<=i.stock){
                    let item = {...i}
                    item.descuento = 0
                    if(!item.hasOwnProperty('cantidad')){
                        Snackbar.show({
                                text: 'Ingrese una cantidad',
                                pos: 'top-right',
                                actionTextColor: '#fff',
                                backgroundColor: '#805dca',
                                actionText: 'Cerrar'
                            });
                        return false
                    }
                    let buscar = this.cart_item.filter((i)=>i.id == item.id)
                    if(buscar.length){
                        Snackbar.show({
                                text: 'El producto ya esta en la lista',
                                pos: 'top-right',
                                actionTextColor: '#fff',
                                backgroundColor: '#805dca',
                                actionText: 'Cerrar'
                            });
                    }else{

                        this.cart_item.push(item)
                        Snackbar.show({
                                text: 'Se ha agregado a la lista',
                                pos: 'top-right',
                                actionTextColor: '#fff',
                                backgroundColor: '#00ab55',
                                actionText: 'Cerrar'
                            });
                    }

                     i.cantidad = ""
                    }
                },
            async guardarVenta(){
                this.loading = true
                let self = this
                try {
                    this.venta.total = this.TotalPagar
                    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_combo = this.cart_combos
                    this.venta.cart = this.cart_item
                    this.venta.cart_servicio = this.cart_servicio
                    this.venta.user_id = this.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_servicio = []
                        this.cart_combos = []
                        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.ChangeAlmacen(),self.getUrl("tiraje/sucursal-active")]).then((v) => {
                                self.clientes = v[0];

                                self.tirajes = v[2];
                            });

                } catch (error) {

                }finally{
                    this.loading = false
                }
            },
            async facturar(){
                this.loading = true
                let self = this
                try {
                    this.venta.total = this.TotalPagar
                    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.user_id = this.arqueo.user_id
                    this.venta.cliente_id = this.venta.cliente.id
                    this.venta.cart_combo = this.cart_combos
                    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.cart_servicio = this.cart_servicio
                    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_servicio = []
                        this.cart_combos = []
                        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.ChangeAlmacen(),self.getUrl("tiraje/sucursal-active")]).then((v) => {
                                self.clientes = v[0];

                                self.tirajes = v[2];
                            });

                } 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){

                }
            },
            isError(item){
                return item.cantidad>item.stock
            }
        },
        mounted() {
            this.$nextTick(async () => {
$("#module_venta").addClass("module_active")
                let self = this;
                this.loading = true
                try {
                    await Promise.all([
                        self.getData(),
                        self.getUrl("documentos"),
                        self.getUrl("productos"),
                        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('servicios'),
                        self.getUrl('users'),

                    ]).then((v) => {
                        this.clientes = v[0];
                        this.documentos = v[1];
                        this.productos = 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.servicios = v[9];
                        this.users = v[10];
                    });
                     if(this.almacens.length){
                            this.model.almacen = this.almacens[0]
                            await this.ChangeAlmacen()
                        }
                        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 {
                    $('#table_dt_servicio').DataTable( {
                        dom: '<"row"<"col-md-12"<"row"<"col-md-6"B><"col-md-6"f> > ><"col-md-12"rt> <"col-md-12"<"row"<"col-md-5"i><"col-md-7"p>>> >',

                        order:[[0,'desc']],
                        "oLanguage": {"oPaginate": { "sPrevious": '<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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                        "sInfo": "Mostrando página _PAGE_ de _PAGES_",
                        "sSearch": '<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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                        "sSearchPlaceholder": "Buscar...",
                    "sLengthMenu": "Resultados :  _MENU_",},
                        "stripeClasses": [],
                        "lengthMenu": [70, 100],
                        "pageLength": 70
                    } );
                            // return table

                    $(".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;
    }
    .error_stock {
            border-color: #dc3545 !important;
            padding-right: calc(1.5em + .75rem);
            box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25) !important;
        }
</style>
@endslot @endcomponent