@component('components.master') @slot('body') @verbatim
<div class="layout-px-spacing" id="app">
    <div class="row layout-top-spacing justify-content-md-center">
    <div class="loader" v-if="loading">
            <div class="spinner-grow text-info align-self-center"></div>
        </div>
        <div class="col-sm-8 col-12">
            <div class="row mt-2">
                <div
                    class="col-xl-9 col-lg-7 col-md-7 col-sm-8 filtered-list-search mb-2"
                >
                    <div
                        autocomplete="off"
                        class=""
                        id="form-product-search"
                        action="#"
                    >
                        <div class="" style="width: -webkit-fill-available">
                            <input
                                type="text"
                                class="form-control"
                                id="input-search"
                                v-model="search"
                                placeholder="Buscar los productos"
                            />
                        </div>
                    </div>
                </div>
                <div
                    class="col-xl-3 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"
                    >
                        <button
                            type="button"
                            class="btn btn-lg btn-outline-warning w-100"
                            data-bs-toggle="modal" data-bs-target="#exampleModal"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-box"
                            >
                                <path
                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                ></path>
                                <polyline
                                    points="3.27 6.96 12 12.01 20.73 6.96"
                                ></polyline>
                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
                            </svg>
                            Productos
                        </button>
                    </div>
                </div>
                <div class="col-12">
                    <div class="widget-content searchable-container mt-3 list">
                        <div class="searchable-items grid " id="items_widgets" style="height: 70vh; overflow-y: scroll; position: static; zoom: 1;">
                            <div v-for="(m,i) in FiltroCart" class="items" id_producto="PRODUC8767320" articulo="21312" id="item_PRODUC8767320" exento="0" presentacion="PRES01220265" perecedero="0">
                                <div class="item-content">
                                    <button class="btn btn-outline-danger btn-sm btn_eliminar_producto_compra" @click="cart_item.splice(i,1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>

                                    <div class="user-profile">
                                        <a v-if="m.hasOwnProperty('img')" class=" profile-img" href="javascript: void(0);">
                                            <img :src="m.img" alt="product" style="width: 80px;">
                                        </a>
                                        <div class="user-meta-info">
                                            <p class="user-name" data-name="21312" style="font-size: 14px;">{{m.categoria.name}}</p>
                                            <p class="user-work" data-occupation="REFRIGERADORES">{{m.nombre}}</p>
                                        </div>
                                    </div>
                                    <div class="code-bar">

                                <button class="btn btn-block w-100" :class="{' btn-outline-warning':m.is_exento==0,' btn-outline-secondary':m.is_exento==1}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                                    {{m.codigo_barra}}
                                </button>
                                    </div>
                                    <div class="user-email">
                                        <p class="info-title">MARCA: </p>
                                        <p class="usr-email-addr">{{m.marca.name}}</p>
                                    </div>
                                    <div class="user-email">
                                        <p class="info-title">UNIDAD: </p>
                                        <p class="usr-email-addr">{{m.medida.prefijo}}</p>
                                    </div>
                                    <div class="user-location mt-2">
                                        <div class="card accordion-icons w-100">
                                            <div class="card-header" id="headingOne4">
                                            <div class="mb-0 mt-0">
                                                <div role="menu" class="" data-bs-toggle="collapse" v-bind:data-bs-target="'#producto'+m.id" aria-expanded="true" aria-controls="iconAccordionThree">
                                                    <div class="accordion-icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                                        </div>
                                                    Precios
                                                </div>
                                                </div>

                                            </section>
                                            </div>

                                            <div :id="'producto'+m.id" class="collapse" aria-labelledby="headingOne4" data-bs-parent="#iconAccordionThree" style="">
                                            <div class="card-body">
                                            <span style="font-weight: 700;color: #3b3f5c;">Precio Costo</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,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.costo">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,1)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Especial</span>
                                                <div class="user-location">
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,2)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                        <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_1">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,2)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Mayorista</span>
                                                <div class="user-location">
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,3)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                        <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_2">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,3)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Minorista</span>
                                                <div class="user-location">
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,4)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                        <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_3">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,4)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Precio Normal</span>
                                                <div class="user-location">
                                                    <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                        <span class="input-group-btn input-group-prepend"><button  @click="restarPrecio(m,5)"  class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                                        <input type="text" class="touchs_price form-control" name="" id="" v-model.number="m.precio_4">
                                                        <span class="input-group-btn input-group-append"><button @click="sumPrecio(m,5)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="user-location mt-2" v-if="m.is_perecedero==1">
                                        <div class="card accordion-icons w-100">
                                            <div class="card-header" id="headingOne4">
                                            <div class="mb-0 mt-0">
                                                <div role="menu" class="" data-bs-toggle="collapse" v-bind:data-bs-target="'#producto_ven'+m.id" aria-expanded="true" aria-controls="iconAccordionThree">
                                                    <div class="accordion-icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                                        </div>
                                                    F. Ven
                                                </div>
                                                </div>

                                            </section>
                                            </div>

                                            <div :id="'producto_ven'+m.id"   class="collapse" aria-labelledby="headingOne4" data-bs-parent="#iconAccordionThree" style="">
                                            <div class="card-body">
                                                <span style="font-weight: 700;color: #3b3f5c;">Fecha Ven. 1</span>
                                                <div class="user-location">
                                                    <input type="date"  v-model="m.fecha_ven.fecha_1" class=" form-control" name="" id="">
                                                </div>
                                                <span style="font-weight: 700;color: #3b3f5c;">Fecha Ven. 2</span>
                                                <div class="user-location">
                                                    <input type="date"  v-model="m.fecha_ven.fecha_2" class=" form-control" name="" id="">
                                                </div>

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

                                    </div>
                                    <span style="font-weight: 700;color: #3b3f5c;">CANTIDAD</span>
                                    <div class="user-location">
                                        <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                            <span class="input-group-btn input-group-prepend"><button @click="restarCantidad(m)" class="btn btn-primary bootstrap-touchspin-down" type="button">-</button></span>
                                            <input type="text" class="touchs_cantidad form-control" name="" id="" v-model="m.cantidad">
                                            <span class="input-group-btn input-group-append"><button @click="SumCantidad(m)" class="btn btn-primary bootstrap-touchspin-up" type="button">+</button></span>
                                        </div>
                                    </div>
                                    <span  v-if="m.is_lote==1" style="font-weight: 700;color: #3b3f5c;">LOTE</span>
                                    <div v-if="m.is_lote==1" class="user-location">
                                        <input type="text" v-model="m.lote" value="" class="form-control">
                                    </div>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-12 layout-spacing">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <div class="row">
                        <div class="col-12 p-0">
                            <div class="btn-group w-100 mb-2">
                                <a
                                    :href="url('/admin/producto/add')"
                                    target="_blank"
                                    class="btn btn-lg btn-outline-warning"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-box"
                                    >
                                        <path
                                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                        ></path>
                                        <polyline
                                            points="3.27 6.96 12 12.01 20.73 6.96"
                                        ></polyline>
                                        <line
                                            x1="12"
                                            y1="22.08"
                                            x2="12"
                                            y2="12"
                                        ></line>
                                    </svg>
                                    Nuevo producto
                                </a>
                                <button
                                    type="button"
                                    class="btn btn-lg btn-outline-success"
                                    @click="actualizarProductos()"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-box"
                                    >
                                        <path
                                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                        ></path>
                                        <polyline
                                            points="3.27 6.96 12 12.01 20.73 6.96"
                                        ></polyline>
                                        <line
                                            x1="12"
                                            y1="22.08"
                                            x2="12"
                                            y2="12"
                                        ></line>
                                    </svg>
                                    Actualizar productos
                                </button>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="suma_price">{{Number(TotalItemsNoExentos).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">SUMAS</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-plus-circle"
                                        >
                                            <circle
                                                cx="12"
                                                cy="12"
                                                r="10"
                                            ></circle>
                                            <line
                                                x1="12"
                                                y1="8"
                                                x2="12"
                                                y2="16"
                                            ></line>
                                            <line
                                                x1="8"
                                                y1="12"
                                                x2="16"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}}</span
                                        ><span id="cant_iva">{{Number(TotalIva).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">IVA%</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-percent"
                                        >
                                            <line
                                                x1="19"
                                                y1="5"
                                                x2="5"
                                                y2="19"
                                            ></line>
                                            <circle
                                                cx="6.5"
                                                cy="6.5"
                                                r="2.5"
                                            ></circle>
                                            <circle
                                                cx="17.5"
                                                cy="17.5"
                                                r="2.5"
                                            ></circle>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="sub_total_price">{{Number(SubTotal).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">SUBTOTAL</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-plus"
                                        >
                                            <line
                                                x1="12"
                                                y1="5"
                                                x2="12"
                                                y2="19"
                                            ></line>
                                            <line
                                                x1="5"
                                                y1="12"
                                                x2="19"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="retencion_price">{{Number(TotalRetencion).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">RET. 1%(-)</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-minus-circle"
                                        >
                                            <circle
                                                cx="12"
                                                cy="12"
                                                r="10"
                                            ></circle>
                                            <line
                                                x1="8"
                                                y1="12"
                                                x2="16"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="exento_price">{{Number(TotalItemsExcentos).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">EXENTO</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-download"
                                        >
                                            <path
                                                d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                                            ></path>
                                            <polyline
                                                points="7 10 12 15 17 10"
                                            ></polyline>
                                            <line
                                                x1="12"
                                                y1="15"
                                                x2="12"
                                                y2="3"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-6 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content">
                                <div class="w-info mb-2">
                                    <h6 class="value">
                                        <span id="n_exento">{{ItemExento.length}}</span
                                        ><!--<h6-->
                                        <p class="">PROD. EXENTOS</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-archive"
                                        >
                                            <polyline
                                                points="21 8 21 21 3 21 3 8"
                                            ></polyline>
                                            <rect
                                                x="1"
                                                y="3"
                                                width="22"
                                                height="5"
                                            ></rect>
                                            <line
                                                x1="10"
                                                y1="12"
                                                x2="14"
                                                y2="12"
                                            ></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="col-sm-12 pt-2"
                            style="
                                border: 1px dashed #9551a7;
                                border-radius: 6px;
                            "
                        >
                            <div class="w-content mb-2">
                                <div class="w-info">
                                    <h6 class="value">
                                        <span>{{moneda}} </span
                                        ><span id="total_price">{{Number(TotalItems).toFixed(2)}}</span
                                        ><!--<h6-->
                                        <p class="">TOTAL</p>
                                    </h6>
                                </div>
                                <div class="">
                                    <div class="w-icon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-shopping-bag"
                                        >
                                            <path
                                                d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
                                            ></path>
                                            <line
                                                x1="3"
                                                y1="6"
                                                x2="21"
                                                y2="6"
                                            ></line>
                                            <path
                                                d="M16 10a4 4 0 0 1-8 0"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>

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

                                        <template v-for="m in almacens">
                                            <option :value="m">{{m.name}}</option>
                                           </template>
                                           </select
                                        >
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-2">
                                        <label for="proveedor">Proveedor</label>
                                        <select
                                            class="form-control basic "
                                            id="select-proveedor"
                                            v-model="model.proveedor_id"
                                        >

                                           <template v-for="m in proveedors">
                                            <option :value="m.id">{{m.nombre}}</option>
                                           </template>
                                            </select
                                        >
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-2">
                                        <label for="comprobante"
                                            >Comprobante</label
                                        >
                                        <select
                                            class="form-control basic "
                                           v-model="model.comprobante_id"
                                        >
                                        <template v-for="m in comprobantes">
                                            <option :value="m.id">{{m.name}}</option>
                                           </template>
                                            </select
                                        >
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-2">
                                        <label for="almacen"
                                            >Fecha comprobante</label
                                        >
                                        <input
                                            type="date"
                                            name=""
                                            class="form-control"
                                            v-model="model.fecha_comprobante"
                                        />
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-2">
                                        <label for="pago">Forma de pago</label>
                                        <select
                                            class="form-control basic select2-hidden-accessible"
                                            id="pago"
                                            v-model="model.tipo_pago"
                                        >

                                            <option value="1">CONTADO</option>
                                            <option value="2">CREDITO</option>

                                            </select
                                        >
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mt-2">
                                        <label for="almacen"
                                            >No. Comprobante</label
                                        >
                                        <input
                                            type="text"
                                            name=""
                                            placeholder="03221"
                                            class="form-control"
                                            v-model="model.nro_comprobante"
                                        />
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mt-2">
                                        <label for="nombre_lote"
                                            >Nombre de Lote</label
                                        >
                                        <input
                                            type="text"
                                            name=""
                                            placeholder="LOTE 1-2"
                                            class="form-control"
                                            id="nombre_lote"
                                            v-model="model.lote"
                                        />
                                        <div
                                            data-lastpass-icon-root="true"
                                            style="
                                                position: relative !important;
                                                height: 0px !important;
                                                width: 0px !important;
                                                float: left !important;
                                            "
                                        ></div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mt-2">
                                        <label for="fecha_credito"
                                            >Fecha de pago de credito</label
                                        >
                                        <input
                                            type="date"
                                            name=""
                                            placeholder=""
                                            v-model="model.fecha_limite"
                                            class="form-control"
                                            id="fecha_credito"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <button
                                @click="guardarCompra"
                                class="btn btn-secondary btn-block mt-3 mr-2 p-3 w-100"
                            >
                                Guardar Compra
                            </button>
                        </div>
                        <div class="col-12 p-0">
                            <button
                                class="btn btn-outline-dark btn-block mt-3 mr-2 p-3 w-100"
                                onclick="clean_windows()"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-trash-2"
                                >
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path
                                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                    ></path>
                                    <line
                                        x1="10"
                                        y1="11"
                                        x2="10"
                                        y2="17"
                                    ></line>
                                    <line
                                        x1="14"
                                        y1="11"
                                        x2="14"
                                        y2="17"
                                    ></line>
                                </svg>
                                Limpiar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal  modal-xl"  id="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">Agregar stock 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 mt-4 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>Cantidad</th>


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

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

                                                <tr>

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

                                                    <td>
                                                       {{m . medida . prefijo}}
                                                    </td>
                                                    <td>
                                                       {{m . categoria . name}}
                                                    </td>
                                                    <td>
                                                       {{m . marca . name}}
                                                    </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="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  "  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="compra_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>
</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:[],
                proveedors:[],
                almacens:[],
                search:'',
                loading: false,
                arqueo:{},
                sucursal:{},
                compra_report:{

                }
            };
        },
        computed:{
            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)=>a+(b.cantidad*b.costo),0)
                return total
            },
            TotalItemsNoExentos(){
                let total = 0;
                total = this.ItemNoExento.reduce((a,b)=>a+(b.cantidad*b.costo),0)
                return total
            },
            TotalItems(){
                let total = 0;
                total = this.TotalItemsExcentos+this.TotalItemsNoExentos
                return 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
            },
            FiltroCart(){
                if(this.search!=''){
                    return this.cart_item.filter((e)=>{
                        return e.nombre.toLowerCase().indexOf(this.search.toLowerCase())>-1 ||e.codigo_barra.toLowerCase().indexOf(this.search.toLowerCase())>-1
                    })
                }

                return this.cart_item
            },
            moneda(){
                return this.sucursal.moneda
            }

        },
        methods: {
            async getData() {
                try {
                    let res = await axios.get("{{url('')}}/api/v1/proveedors");
                    return res.data;
                } catch (e) {
                } finally {
                }
            },
            SumCantidad(item){

                item.cantidad = Number(Number(item.cantidad)+1)

                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
            },
            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
            },
            async Save() {
                let self = this;

                try {
                    if (this.add == false) {
                        let res = await axios.put(
                            "{{url('')}}/api/v1/proveedors/" + 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/proveedors",
                            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();
                }
            },
            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/proveedors')}}/" + 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 {
                }
            },
            agregarItem(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.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{
                    if(item.is_perecedero==1){
                        item.fecha_ven={
                            fecha_1:'',
                            fecha_2:'',
                        }
                    }
                    this.cart_item.push(item)
                    Snackbar.show({
                            text: 'Se ha agregado a la lista',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                }

               i.cantidad = ""
            },
            async guardarCompra(){
                this.loading = true
                try {
                    this.model.total = this.TotalItems
                    this.model.sumas = this.TotalItemsNoExentos
                    this.model.exento = this.TotalItemsExcentos
                    this.model.subtotal = this.SubTotal
                    this.model.iva = this.TotalIva
                    this.model.retencion = this.TotalRetencion
                    this.model.cart = this.cart_item
                    this.model.arqueo = this.arqueo
                    let res = await axios.post(
                            "{{url('')}}/api/v1/compras",
                            this.model
                        )
                        this.compra_report = res.data
                        this.cart_item = []
                        this.model = {
                                    fecha_comprobante:'',
                                    fecha_limite:'',
                                    nro_comprobante:'',
                                    lote:'',
                                    tipo_pago:1,
                                    almacen:{

                                    },
                                    proveedor_id:1,
                                    comprobante_id:1,
                                }
                        Swal.fire({
                            position: "center",
                            icon: "success",
                            title: "Guardado!",
                            timer:1000
                        });
                         $("#comprobanteModal").modal("show");
                } catch (error) {

                }finally{
                    this.loading = false
                }
            },
            asset(url){
                return "{{asset('')}}"+url
            },
            url(url){
                return "{{url('')}}"+url
            },
            async actualizarProductos(){
                let self = this
                try {
                    dt.destroy();
                    await Promise.all([

                        self.getUrl("productos"),


                    ]).then((v) => {

                        this.productos = v[0];


                    });

                } catch (error) {

                }finally{
                    Snackbar.show({
                            text: 'Productos Actualizados',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                    dt.create();
                }
            }
        },
        mounted() {
            this.$nextTick(async () => {
$("#module_compra").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("proveedors"),
                        self.getUrl("formapagos"),
                        self.getUrl("almacen/sucursal-active"),
                        self.getUrl2('get-arqueo'),
                        self.getUrl('sucursals-session'),

                    ]).then((v) => {
                        this.data = v[0];
                        this.documentos = v[1];
                        this.productos = v[2];
                        this.comprobantes = v[3];
                        this.proveedors = v[4];
                        this.formapagos = v[5];
                        this.almacens = v[6];
                        this.arqueo = v[7];
                        if(this.almacens.length){
                            this.model.almacen = this.almacens[0]
                        }
                        if(this.proveedors.length){
                            this.model.proveedor = this.proveedors[0]
                        }
                        this.sucursal = v[8];

                    });
                    dt.create();
                } catch (e) {
                } finally {
                    this.loading = false
                    if(!this.arqueo.hasOwnProperty('id')){

                        $("#arqueoModal").modal('show')
                     }
                     new TomSelect("#select-proveedor",{
                            create: true,
                            sortField: {
                                field: "text",
                                direction: "asc"
                            }
                        })
                }

            });
        },
    }).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: #5c1ac3;
        background-color: #dccff7;
        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: #5c1ac3;
        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;
    }
</style>
@endslot @endcomponent