@component('components.master')
    @slot('body')
        @verbatim
            <div class="layout-px-spacing" id="app">
                <div class="overlay show"></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-7">

                        <div class="row mt-2">
                            <div class="col-xl-7 col-lg-7 col-md-7 col-sm-8 filtered-list-search mb-2">
                                <div action="#">
                                    <div class="" style="width: -webkit-fill-available">
                                        <input type="text" class="form-control" v-model="search" @keyup="searchProduct"
                                            placeholder="Buscar..." />
                                    </div>
                                </div>
                            </div>

                            <div
                                class="col-xl-5 col-lg-5 col-md-5 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  mb-2 me-2" role="group">
                                        <button id="bten_marca" type="button" class="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categorias <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
                                        <div class="dropdown-menu" aria-labelledby="bten_marca" style="max-height: 45vh; overflow-y: scroll; ">
                                            <a href="javascript:void(0);" class="dropdown-item" @click="categoria='all'"><i class="flaticon-home-fill-1 mr-1"></i>TODOS</a>
                                            <template v-for="m in categorias">
                                                <a href="javascript:void(0);" class="dropdown-item" @click="categoria=m.id"><i class="flaticon-home-fill-1 mr-1"></i>{{m.name}}</a>
                                            </template>
                                        </div>
                                    </div>
                                    <div class="btn-group  mb-2 me-2" role="group" >
                                        <button id="btn_categoria" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Marcas <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
                                        <div class="dropdown-menu" aria-labelledby="btn_categoria" style="max-height: 45vh; overflow-y: scroll;">
                                            <a href="javascript:void(0);" class="dropdown-item" @click="marca='all'"><i class="flaticon-home-fill-1 mr-1"></i>TODOS</a>
                                            <template v-for="m in marcas">
                                                <a href="javascript:void(0);" class="dropdown-item" @click="marca=m.id"><i class="flaticon-home-fill-1 mr-1"></i>{{m.name}}</a>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">

                                <div class="widget-content searchable-container mt-3 list">
                                    <div class="searchable-items grid "
                                        style="height: 70vh; overflow-y: scroll; position: static; zoom: 1;">
                                        <div v-for="(m,i) in filterAll" class="items">
                                            <div class="item-content">


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

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

                                                    <button class="btn btn-block w-100"
                                                    @click="agregar(m)"
                                                        :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" style="margin-top: 10px;">
                                                    <span class="badge w-100 badge-primary text-center"> {{m.almacen.name}} </span>
                                                </div>
                                                <div  v-if="m.is_lote==1"class="user-email" style="margin-top: 10px;">
                                                    <span class="badge w-100 badge-info text-center"> {{m.lote}} </span>
                                                </div>
                                                <div class="user-email" style="margin-top: 5px;">
                                                    <p class="usr-email-addr" style="margin: auto;font-weight: 800;">OTROS</p>
                                                </div>
                                                <div class="user-email" style="margin-top: 10px;">
                                                    <p class="info-title">STOCK: </p>
                                                    <p class="usr-email-addr">{{ m . stock }} {{m.producto.medida.prefijo}}</p>
                                                </div>


                                                <span style="font-weight: 700;color: #3b3f5c;">PRECIO</span>
                                                <div class="user-location">
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button
                                                                @click="restarPrecio(m,5)"
                                                                class="btn btn-primary 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.precio_4"
                                                         >
                                                        <span class="input-group-btn input-group-append"><button
                                                                @click="sumPrecio(m,5)"
                                                                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>
                                                        <input type="text" class="touchs_cantidad form-control form-control-sm"
                                                            name="" id="" v-model="m.descuento"
                                                            >
                                                        <span class="input-group-btn input-group-append"><button
                                                                @click="sumDescuento(m)"
                                                                class="btn btn-primary btn-sm  bootstrap-touchspin-up"
                                                                type="button">+</button></span>
                                                    </div>
                                                </div>


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

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-12 layout-spacing widget widget-card-four_2">
                        <div class="card">
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered mb-4">
                                            <thead>
                                                <tr>
                                                    <th>Producto</th>
                                                    <th>Cantidad</th>
                                                    <th>Precio</th>
                                                    <th>Descuento</th>
                                                    <th>Total</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="body_productos">
                                                <tr  class="items_tr" v-for="(m,i) in modelList">
                                                    <td  class="p-1">
                                                        <div
                                                            style="width: 120px;text-wrap: wrap;">
                                                             <span
                                                              style="font-size: 12px;font-weight: 600;"
                                                            > {{m.producto.nombre}} | </span>
                                                             <span
                                                            style="color: #03a9f4;font-weight: 600;">{{m.producto.marca.name}}</span>
                                                            </div>
                                                            </td>
                                                    <td  class="p-1">
                                                        <div
                                                            class="input-group input-group-sm bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button
                                                                @click="restarCantidad(m)"
                                                                    class="btn btn-primary bootstrap-touchspin-down"
                                                                    type="button">-</button></span><input
                                                                type="text" value="1" v-model="m.cantidad" @change="ChangeCantidad(m)"
                                                                class="form-control"><span
                                                                class="input-group-btn input-group-append"><button
                                                                @click="SumCantidad(m)"
                                                                    class="btn btn-primary bootstrap-touchspin-up"
                                                                    type="button">+</button></span></div>
                                                    </td>
                                                    <td  class="p-1">
                                                        <div
                                                            class="input-group input-group-sm 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" v-model="m.precio_4"
                                                                class="form-control"><span
                                                                class="input-group-btn input-group-append"><button
                                                                  @click="sumPrecio(m,5)"
                                                                    class="btn btn-primary bootstrap-touchspin-up"
                                                                    type="button">+</button></span></div>
                                                    </td>
                                                    <td  class="p-1">
                                                        <div
                                                            class="input-group input-group-sm bootstrap-touchspin bootstrap-touchspin-injected">
                                                            <span class="input-group-btn input-group-prepend"><button
                                                                    @click="restarDescuento(m)"
                                                                    class="btn btn-primary bootstrap-touchspin-down"
                                                                    type="button">-</button></span><input
                                                                 type="text" v-model="m.descuento"
                                                                class="form-control"><span
                                                                class="input-group-btn input-group-append">
                                                                <button
                                                                    @click="sumDescuento(m)"
                                                                    class="btn btn-primary bootstrap-touchspin-up"
                                                                    type="button">+</button></span>
                                                                    </div>
                                                    </td>
                                                    <td class="p-1" id="precio_item_total_ITEM01857394">
                                                        {{m.total}}
                                                    </td>
                                                    <td class="x_td" @click="deleteItemList(i)"
                                                        style="cursor: pointer;transition: all 0.5s; font-weight: bolder;color: #1b55e2;padding: 10px;border-radius: 10px;">
                                                        X</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row m-2">
                                        <div class="col-sm-12 col-md-4 ">
                                            <button class="btn btn-outline-dark  mb-4 mr-2 btn-lg btn-block w-100"
                                               @click="list_items = []">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-trash-2">
                                                    <polyline points="3 6 5 6 21 6"></polyline>
                                                    <path
                                                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                                    </path>
                                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                                </svg>
                                                Limpiar
                                            </button>
                                        </div>
                                        <div class="col-sm-12 col-md-8 ">
                                            <button class="btn btn-primary mb-4 mr-2 btn-lg btn-block w-100"  data-bs-toggle="modal" data-bs-target="#ventaModal">
                                                <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>
                                                Procesar Traspaso
                                            </button>
                                        </div>

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

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

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


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

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


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

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

                                                    <tr>

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

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

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

                                                        <td class="text-center">
                                                            <button @click="agregarItem(m)" class="btn rounded-circle  ">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                    height="24" viewBox="0 0 24 24" fill="none"
                                                                    stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                                    stroke-linejoin="round" class="feather feather-download">
                                                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                                                    <polyline points="7 10 12 15 17 10"></polyline>
                                                                    <line x1="12" y1="15" x2="12"
                                                                        y2="3"></line>
                                                                </svg>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal  " id="ventaModal" tabindex="-1" role="dialog"
                        aria-labelledby="ventaModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-md" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title text-dark" id="ventaModalLabel">Realizar Traspaso</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

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

                                        <div class="col-md-12" id="procesar_compra_modal">
                                            <div class="row">

                                                <div class="col-sm-12 col-12">
                                                    <div class="form-group">
                                                        <label for="cliente">Seleccionar sucursal</label>
                                                        <select class="form-control form-control-sm" id="cliente"
                                                            v-model="sucursal">
                                                            <template v-for="m in sucursals">

                                                                <option :value="m">{{ m . nombre }}</option>
                                                            </template>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-12">
                                                    <div class="form-group">
                                                        <label for="cliente">Seleccionar almacen</label>
                                                        <select class="form-control form-control-sm" id="cliente"
                                                            v-model="traspaso.almacen">
                                                            <template v-for="m in sucursal.almacens">

                                                                <option :value="m">{{ m . name }}</option>
                                                            </template>
                                                        </select>
                                                    </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="traspaso.observacion" id="observacion" cols="30" rows="10"
                                                            class="form-control"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn" data-bs-dismiss="modal" aria-label="Close"><i
                                                        class="flaticon-cancel-12"></i> Cerrar</button>
                                                <button type="button" class="btn btn-dark" id="btn_facturar_venta"
                                                    @click="guardarTraspaso" 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>
                                                    Traspasar
                                                </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_a4" :href="traspaso_report.url_pdf" 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  modal-xl" 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-xl" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title text-dark" id="arqueoModalLabel">Sin caja</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

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

                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i>
                                        Cerrar</button>
                                    <button type="button" class="btn btn-dark" id="btn_facturar_venta" @click="guardarVenta">
                                        <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" class="btn btn-primary" id="btn_facturar">
                                        <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>
        @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,
                        venta: {
                            tipo: 1,
                            cliente: {},
                            formapago_id: 1,
                            comprobante_id: 1,
                            tiraje_id: 1,
                            fecha_limite: '',
                            efectivo_recibido: 0
                        },
                        traspaso_report: {
                            url_pdf_a4: '',
                        },
                        arqueo: {},
                        loading: false,
                        inventarios: [],
                        list_items: [],
                        sucursals: [],
                        sucursal:{
                            almacens:[]
                        },
                        traspaso:{
                            observacion:'',
                            almacen:{

                            }
                        },
                        user:{

                        },
                        categoria:'all',
                        marca:'all',
                        search:'',
                    };
                },
                computed: {
                    cambio() {
                        return Number(this.venta.efectivo_recibido - this.TotalItems)
                    },
                    ItemExento() {
                        return this.cart_item.filter((e) => e.is_exento == 1)
                    },
                    ItemNoExento() {
                        return this.cart_item.filter((e) => e.is_exento == 0)
                    },
                    TotalItemsExcentos() {
                        let total = 0;
                        total = this.ItemExento.reduce((a, 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
                            }
                            return a + (b.cantidad * precio)
                        }, 0)
                        return total
                    },
                    TotalItemsNoExentos() {
                        let total = 0;
                        total = this.ItemNoExento.reduce((a, 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
                            }
                            return a + (b.cantidad * precio)
                        }, 0)
                        return total
                    },
                    TotalItems() {
                        let total = 0;
                        total = this.TotalItemsExcentos + this.TotalItemsNoExentos
                        return Number(total)
                    },
                    SubTotal() {
                        return Number(this.TotalItemsNoExentos / 1.18)
                    },
                    TotalIva() {
                        return Number(this.SubTotal * 1.18) - this.SubTotal
                    },
                    TotalRetencion() {
                        return Number(this.SubTotal * 1.18) - this.SubTotal
                    },
                    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
                        }
                    },

                    filterAll(){
                        return this.inventarios
                    },
                            modelList() {
                        return this.list_items.map((i) => {
                            i.subtotal = Number(i.cantidad * i.precio_4)
                            i.valor_descuento = Number((i.subtotal * i.descuento)/100)
                            i.total = Number(i.subtotal - i.valor_descuento).toFixed(2)
                            return i
                        })
                    }
                },
                watch:{
                    marca(){
                        this.searchProduct()
                    },
                    categoria(){
                        this.searchProduct()
                    }
                },
                methods: {
                    async searchProduct(){
                        this.loading = true
                        try {

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

                                this.inventarios = res.data.map((i) => {
                                    i.cantidad = 1;
                                    i.descuento = 0;
                                    return i
                                })
                        } catch (error) {

                        }finally {
                            this.loading = false
                        }
                    },
                    asset(path) {
                        return "{{ url('') }}" + "/" + path
                    },
                    async getData() {
                        try {
                            let res = await axios.get("{{ url('') }}/api/v1/clientes");
                            return res.data;
                        } catch (e) {} finally {}
                    },
                    async Save() {
                        let self = this;
                        try {
                            if (this.add == false) {
                                let res = await axios.put(
                                    "{{ url('') }}/api/v1/clientes/" + this.model.id,
                                    this.model
                                );
                                Swal.fire({
                                    position: "center",
                                    icon: "success",
                                    title: "Actualizado!",
                                });
                                dt.destroy();
                                await Promise.all([self.getData()]).then((v) => {
                                    this.data = v[0];
                                });
                            } else {
                                let res = await axios.post(
                                    "{{ url('') }}/api/v1/clientes",
                                    this.model
                                );
                                Swal.fire({
                                    position: "center",
                                    icon: "success",
                                    title: "Guardado!",
                                });
                                dt.destroy();
                                await Promise.all([self.getData()]).then((v) => {
                                    this.data = v[0];
                                });
                            }
                        } catch (e) {} finally {
                            dt.create();
                        }
                    },
                    async ChangeAlmacen() {
                        let self = this;
                        this.loading = true
                        try {
                            let almacen_id = this.model.almacen.id
                            dt.destroy();
                            let res = await axios.post("{{ url('inventario-api/almacen') }}", {
                                almacen_id: almacen_id
                            }).then((v) => {
                                this.items = v.data
                            })
                        } catch (e) {} finally {
                            this.loading = false
                            dt.create();
                        }
                    },
                    deleteItemList(index){
                        this.list_items.splice(index, 1)
                    },
                    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 {}
                    },
                    async getUser() {
                        try {
                            let res = await axios.post("{{ url('') }}/auth/userAutenticable" );
                            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
                    },
                    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
                    },
                    restarDescuento(item) {
                        item.descuento = Number(Number(item.descuento) - 0.1).toFixed(2)

                        return item
                    },
                    sumDescuento(item) {

                        item.descuento = Number(Number(item.descuento) + 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
                    },
                    agregar(i) {

                        let item = {
                            ...i
                        }
                        if (!item.hasOwnProperty('cantidad')) {
                            Snackbar.show({
                                text: 'Ingrese una cantidad',
                                pos: 'top-right',
                                actionTextColor: '#fff',
                                backgroundColor: '#805dca',
                                actionText: 'Cerrar'
                            });
                            return false
                        }
                        let buscar = this.list_items.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.list_items.push(item)
                            Snackbar.show({
                                text: 'Se ha agregado a la lista',
                                pos: 'top-right',
                                actionTextColor: '#fff',
                                backgroundColor: '#00ab55',
                                actionText: 'Cerrar'
                            });
                        }

                        i.cantidad = ""
                    },
                    async guardarTraspaso() {
                        this.loading = true
                        let self = this
                        try {
                            this.traspaso.sucursal_id = this.sucursal.id
                            this.traspaso.almacen_id = this.traspaso.almacen.id
                            this.traspaso.user_id = this.user.id
                            this.traspaso.items = this.list_items
                            let res = await axios.post(
                                "{{ url('') }}/api/v1/nuevo-traspaso-inventario",
                                this.traspaso
                            )

                            this.traspaso_report = res.data
                            Swal.fire({
                                position: "center",
                                icon: "success",
                                title: "Guardado!",
                                timer: 750
                            });
                            await Promise.all([

                                    self.getUrl('inventario/general'),

                                    ]).then((v) => {


                                    this.inventarios = v[0].map((i) => {
                                        i.cantidad = 1;
                                        i.descuento = 0;
                                        return i
                                    })

                                    });

                            $("#comprobanteModal").modal("show");
                            this.traspaso.observacion = ""
                            this.list_items = []
                        } catch (error) {

                        } finally {
                            this.loading = false
                        }
                    },
                    changeTirajes() {
                        let buscar = this.tirajes.filter((i) => i.comprobante_id == this.venta.comprobante_id)
                        if (buscar.length) {
                            this.venta.tiraje_id = buscar[0].id
                        }
                    }
                },
                mounted() {
                    this.$nextTick(async () => {
$("#module_inventario").addClass("module_active")
                        let self = this;
                        this.loading = true
                        try {
                            await Promise.all([

                                self.getUrl2('get-arqueo'),
                                self.getUrl('inventario/general-v2'),
                                self.getUrl('sucursals'),
                                self.getUser(),
                                self.getUrl('categorias'),
                                self.getUrl('marcas'),
                            ]).then((v) => {

                                this.arqueo = v[0];
                                this.inventarios = v[1].map((i) => {
                                    i.cantidad = 1;
                                    i.descuento = 0;
                                    return i
                                })
                                this.sucursals = v[2]
                                this.user = v[3]
                                this.categorias = v[4]
                                this.marcas = v[5]
                            });


                        } catch (e) {} finally {

                            $(".touchs ").TouchSpin({
                                step: 0.1,
                                decimals: 2,
                                prefix: '%',
                            });
                            this.loading = false
                            //$("#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 form input {
                padding: 10px;
                color: #d3d3d3;
                border: none;
                box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
                width: 100% !important;
                background-color: #fff;
            }
            th{
                text-transform: uppercase !important;
                color:#0026d7 !important;
                font-weight: 600 !important;
            }
            .searchable-container .searchable-items.grid .items {
                padding: 0 10px;
            }
        </style>
    @endslot
@endcomponent