@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-xl-4 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="row">
                        <div class="col-12 p-0">
                            <div class="row">
                                <div class="col-12 mb-2">
                                    <div class="form-group">
                                        <button class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#clienteModal">Nuevo Cliente</button>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12">
                                    <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-6 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-6 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-6 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-6 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-12">
                                    <div class="form-group my-2">
                                        <label for="almacen">Fecha de Venta</label>
                                        <input type="date" class="form-control form-control-sm" v-model="model.date">
                                    </div>
                                </div>

                                <div class="col-sm-6 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-6 col-12">
                                    <div class="form-group">
                                        <label for="tipo_comprobante">Tipo de Comprobante</label>
                                        <select class="form-control  form-control-sm "@change="changeTirajes"   v-model="venta.comprobante_id">
                                        <option v-for="m in comprobantes"  :value="m.id">{{m.name}}</option>
                                    </select>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12">
                                    <div class="form-group">
                                        <label for="tipo_comprobante">Serie</label>
                                        <select class="form-control  form-control-sm "  v-model="venta.tiraje_id">
                                            <template v-for="m in 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-6 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="TotalPagar.toFixed(2)" disabled="">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12 " id="cont_efectivo_recibido">
                                    <div class="form-group">
                                        <label for="efectivo_recibido">Efectivo recibido (*)</label>
                                        <input type="text" class="form-control form-control-sm efectivo" v-model="venta.efectivo_recibido">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 " id="cont_cambio_venta">
                                    <div class="form-group">
                                        <label for="cambio_venta">Cambio (*)</label>
                                        <input type="text" class="form-control form-control-sm" id="cambio_venta" :value="cambio.toFixed(2)" disabled="">
                                    </div>
                                </div>

                                <div class="col-sm-12 col-12" 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="3" rows="3" class="form-control"></textarea>
                                    </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>
                    </div>
                </div>
            </div>
        </div>
        <div class=" col-lg-8 col-md-12 col-sm-8 col-12">
            <div class="row mt-2">
               <div class="col-12 mb-3" >
                    <div class="widget widget-card-four">
                        <div class="widget-content">
                            <div class="row">
                                <div class="col-4">
                                    <label for="">Nombre de producto o servicio</label>
                                    <input type="text" v-model="producto.descripcion" class="form-control form-control-sm" >
                                </div>
                                <div class="col-4">
                                    <label for="">Cantidad</label>
                                    <input type="text" v-model.number="producto.cantidad" class="form-control form-control-sm" >
                                </div>
                                <div class="col-4">
                                    <label for="">Precio</label>
                                    <input type="text" v-model.number="producto.precio" class="form-control form-control-sm"  >
                                </div>
                                <div class="col-4">
                                    <label for="">Impuesto</label>
                                    <input type="text" v-model.number="producto.impuesto" class="form-control form-control-sm"  >
                                </div>
                                <div class="col-4">
                                    <label for="">Total</label>
                                    <input type="text" :value="totalProducto(producto)" readonly class="form-control form-control-sm" >
                                </div>
                                <div class="col-4">
                                    <label for="">Bien o Servicio</label>
                                   <select name="" v-model="producto.tipo" class="form-control form-control-sm" id="" >
                                       <option value="1">Bien</option>
                                       <option value="2">Servicio</option>
                                   </select>
                                </div>
                                <div class="col-12 mt-3">
                                    <button class="btn btn-dark" @click="addProductoManual">
                                        Agregar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="col-12 mb-3">
                    <div class="card">
                        <div class="card-body p-0">
                            <table class="table table-bordered" style="width:100%">
                                <thead class="bg-dark">
                                    <tr>
                                        <th class="text-white">Producto</th>
                                        <th class="text-white">Cantidad</th>
                                        <th class="text-white">Precio</th>
                                        <th class="text-white">Impuesto</th>
                                        <th class="text-white">Total</th>
                                        <th class="text-white">Tipo</th>
                                        <th class="text-white"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="(m,i) in ListItemsManual">
                                        <tr>
                                            <td>
                                                <div class="text-description">
                                                    {{m.descripcion}}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                    <span class="input-group-btn input-group-prepend"><button  @click="m.cantidad=m.cantidad-1"  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.cantidad">
                                                    <span class="input-group-btn input-group-append"><button @click="m.cantidad=m.cantidad+1" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                    <span class="input-group-btn input-group-prepend"><button   @click="m.precio=m.precio-1" 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">
                                                    <span class="input-group-btn input-group-append"><button  @click="m.precio=m.precio+1"  class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                    <span class="input-group-btn input-group-prepend"><button   @click="m.impuesto=m.impuesto-1" 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.impuesto">
                                                    <span class="input-group-btn input-group-append"><button @click="m.impuesto=m.impuesto+1" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                </div>
                                            </td>


                                            <td>{{m.total}}</td>
                                            <td>{{m.tipo==1?'BIEN':'SERVICIO'}}</td>
                                            <td>
                                                <button class="btn btn-danger" @click="">
                                                    Eliminar
                                                </button>
                                                .
                                            </td>
                                        </tr>
                                    </template>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4"><strong>SUB TOTAL</strong></td>
                                        <td ><strong>{{moneda}} {{subtotalManual}}</strong></td>
                                        <td colspan="2"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="4"><strong>TOTAL</strong></td>
                                        <td ><strong>{{moneda}} {{totalManual}}</strong></td>
                                        <td colspan="2"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="card-footer text-end">
                            <div class="btn-group">
                                <button class="btn btn-danger" @click="cleanSale">Limpiar</button>
                                <button class="btn btn-success" @click="SaveFactura" >Facturar</button>
                            </div>
                        </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>
                            <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:{},
                    formapago_id:1,
                    comprobante_id:1,
                    tiraje_id:'',
                    fecha_limite:'',
                    efectivo_recibido:0,
                    formapago:{
                        is_caja:0
                    }
                },
                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:[],
                correoremitenteChecked: false,
                correo:'',
                search_almacen:'',
                combos:[],
                search_almacen_combo:'',
                producto:{
                    descripcion:"",
                    cantidad:0,
                    precio:0,
                    impuesto:0,
                    tipo:1
                },
                item_manual_id:0,
                cart_manual:[],
                show_card_prowduct:false,
                itemManuals:[]
            };
        },
        computed:{
            ListItemsManual(){
                return this.cart_manual.map((e)=>{
                    e.subtotal = Number(e.cantidad * e.precio)
                    e.total = Number(e.subtotal + e.impuesto)

                    return e
                })
            },
            subtotalManual(){
                return this.ListItemsManual.reduce((a,b)=>{
                    return a+b.subtotal
                },0)
            },
            totalManual(){
                return this.ListItemsManual.reduce((a,b)=>{
                    return a+b.total
                },0)
            },
            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.totalManual)
            },
            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
            },
            SubTotalManual(){
                return 0
            },
            TotalPagarManual(){
                return 0
            }
        },
        methods: {
            addProductoManual(){
                let producto = {...this.producto}
                this.cart_manual.push(producto)

                this.producto = {
                    descripcion:"",
                    cantidad:0,
                    precio:0,
                    impuesto:0,
                    tipo:1

                }
                this.select_tom_2.setValue(0)
            },
            cleanSale(){
                this.model.date = ""
                this.cart_manual = []
            },
            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) {

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

                }
            },
            validateNumberInput(item) {
                const value = item.cantidad
                item.cantidad = value.replace(/[^0-9]/g, "");
            },
            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){

                }
            },
            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
                    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
                }
            },
            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
            },
            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 = ""
              }
            },
            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 = ""
              }
            },

            async SaveFactura(){
                this.loading = true
                let self = this
                try {
                    this.venta.total = this.TotalPagar
                    this.venta.formapago_id = this.venta.formapago.id
                    this.venta.sumas = this.TotalPagar
                    this.venta.exento = 0
                    this.venta.subtotal = this.subtotalManual
                    this.venta.iva = 0
                    this.venta.retencion = 0

                    this.venta.cart_manual = this.cart_manual

                    this.venta.user_id = this.arqueo.user_id
                    this.venta.cliente_id = this.venta.cliente.id
                    this.venta.sucursal_id = this.arqueo.sucursal_id
                    this.venta.arqueo_id = this.arqueo.id
                    this.venta.precio_radio = this.precio_radio
                    this.venta.recibido = this.venta.efectivo_recibido
                    this.venta.descuento = this.TotalDescuento
                    this.venta.cambio = this.cambio
                    this.venta.fecha_venta = this.model.date
                    this.venta.descuento_global = 0
                    this.venta.correoremitente = this.correoremitente
                    let res = await axios.post(
                            "{{url('')}}/api/v1/venta-facturar-manual",
                            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_manual = []
                        this.correoremitente =""
                        this.select_tom.setValue(0)
                        Swal.fire({
                            position: "center",
                            icon: "success",
                            title: "Guardado!",
                            timer:750
                        });
                         $("#comprobanteModal").modal("show");
                         await Promise.all([self.getData(),self.getUrl("tiraje/sucursal-active")]).then((v) => {
                                self.clientes = v[0];
                                self.tirajes = v[1];
                            });

                } 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]
                }
            },

            isError(item){
                return item.cantidad>item.stock
            },
            totalProducto(producto){
                return Number(Number(producto.cantidad*producto.precio)+Number(producto.cantidad*producto.impuesto)).toFixed(2)
            }
        },
        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('itemManuals'),

                    ]).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.itemManuals = v[9];

                    });
                     if(this.almacens.length){
                            this.model.almacen = this.almacens[0]
                            await this.ChangeAlmacen()
                        }
                        if(this.formapagos.length){
                            this.venta.formapago = this.formapagos[0]
                        }
                        if(this.documentos.length){
                            this.venta.comprobante_id = this.documentos[0].id

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


                }

            });
        },
    }).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;
    }
    .text-description{
        width: 250px;
        text-wrap: auto;
    }
</style>
@endslot @endcomponent