@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-12">
                        <div class="page-header mb-3">
                            <div class="page-title">
                                <h3>Kardex de productos</h3>
                            </div>
                        </div>
                        <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                                <div class="row">
                                    <div class="col-md-6 my-4 mx-2">
                                        <label for="">Producto</label>
                                       <select name="" class="form-control form-control-sm" id="select-producto" v-model="producto_id" @change="loadData">
                                        <option value="" disabled>Seleccionar </option>
                                        <template v-for="m in productos">
                                            <option :value="m.id"> {{m.codigo_barra}}| {{m.nombre}}</option>
                                        </template>
                                       </select>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content widget-content-area br-8 p-0 table-responsive">
                               <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>Fecha</th>
                                            <th>U.M</th>
                                            <th>Categoría</th>
                                            <th>Marca</th>
                                            <th>Lote</th>
                                            <th>Total Mov.</th>
                                            <th>F.V</th>
                                            <th>Tipo</th>
                                            <th>Cantidad</th>
                                            <th>Stock Lote</th>
                                            <th>Stock Global</th>
                                            <th>Motivo</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                                            <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.fecha}}
                                                </td>
                                                <td>
                                                    {{ m.producto.medida.prefijo }}
                                                </td>
                                                <td>
                                                    {{ m.producto.categoria.name }}
                                                </td>
                                                <td>
                                                    {{ m.producto.marca.name }}
                                                </td>
                                                <td>
                                                    {{ m.lote }}
                                                </td>

                                                <td>
                                                    {{m.total_movimiento}}
                                                </td>
                                                <td>
                                                    <div v-if="m.perecedero!=null" class="badge " :class="{'badge-success':(m.perecedero.f1==0&&m.perecedero.f2==0),'badge-danger':(m.perecedero.f1==1),'badge-dark':(m.perecedero.f2==1)}">
                                                        {{m.perecedero.fecha_ven}}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="badge"
                                                        :class="m.tipo==1?'badge-success':'badge-danger'">
                                                        {{ m . tipo == 1 ? 'ENTRADA' : 'SALIDA' }}

                                                    </div>
                                                </td>
                                                <td>
                                                    {{ m.cantidad }}
                                                </td>
                                                <td>
                                                    {{ m.stock_lote }}
                                                </td>
                                                <td>
                                                    {{ m.stock_global }}
                                                </td>
                                                <td>
                                                    {{ m.motivo }}
                                                </td>



                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                               </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>Lote</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" type="text" placeholder="Ejm. 10" @keyup.enter="agregarStock(m)"
                                                                class="form-control"></td>
                                                        <td>
                                                            <input v-model="m.lote" v-if="m.is_lote==1" type="text"
                                                             @keyup.enter="agregarStock(m)"
                                                                class="form-control">
                                                        </td>
                                                        <td class="text-center">
                                                            <button @click="agregarStock(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 fade" id="PerecederoModal" tabindex="-1" role="dialog" aria-labelledby="PerecederoModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="PerecederoModalLabel">Agregar Percedero</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

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

                                                <div class="col-12 text-center">
                                                 <a v-if="perecedero.hasOwnProperty('img')" class=" profile-img"
                                                        href="javascript: void(0);">
                                                        <img :src="perecedero.img" alt="product" style="width: 80px;">
                                                    </a></div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="exampleFormControlInput1">Nombre</label>
                                                        <input type="text" class="form-control form-control-sm" v-model="perecedero.nombre" readonly="true">
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="exampleFormControlInput1">Fecha 1</label>
                                                        <input type="date" class="form-control form-control-sm" v-model="perecedero.fecha_1" >
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="exampleFormControlInput1">Fecha 2</label>
                                                        <input type="date" class="form-control form-control-sm" v-model="perecedero.fecha_2" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-light-dark" data-bs-dismiss="modal">Cerrar</button>
                                        <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="SavePerecedero">Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        @endverbatim
    @endslot
    @slot('script')
        <script type="module">
            import Table from "{{ asset('config/dt.js') }}"
            const {
                createApp
            } = Vue
            let dt = new Table()
            createApp({

                data() {
                    return {
                        add: true,
                        model: {
                            name: ''
                        },
                        data: [],
                        productos: [],
                        almacen: {
                            items_list: []
                        },
                        items_list: [],
                        perecedero:{

                        },
                        loading: false,
                        producto_id:""
                    }
                },
                methods: {
                    async loadData() {
                        let self = this
                        this.loading = true
                        try {
                            dt.destroy()
                            await axios.post("{{ url('') }}/api/v1/kardex/producto",{
                                producto_id:this.producto_id
                            }).then((res) => {

                                this.items_list = res.data
                            })
                            dt.create()
                        } catch (e) {

                        } finally {
                            this.loading = false
                        }

                    },
                    async getUrl(path) {
                        try {
                            let res = await axios.get("{{ url('') }}/api/v1/" + path)
                            return res.data
                        } catch (e) {

                        } finally {

                        }
                    },
                    async agregarStock(item) {
                        this.loading = true
                        try {
                            if(item.cantidad===null || item.cantidad==''||item.cantidad==0) return false

                            $('#exampleModal').modal('hide');
                            item.almacen = this.almacen
                            if(item.is_perecedero==1){
                                this.perecedero = {...item}
                                $('#PerecederoModal').modal('show');
                                item.cantidad = ""
                            }else{
                                let res = await axios.post("{{ url('') }}/api/v1/items", item)
                                Snackbar.show({
                                    text: 'Se ha agregado Stock',
                                    pos: 'top-right',
                                    actionTextColor: '#fff',
                                    backgroundColor: '#00ab55',
                                    actionText: 'Cerrar'
                                });
                            dt.destroy()
                            await Promise.all([
                                this.getUrl('almacens'),

                            ]).then((v) => {

                                this.almacen = v[0]

                            })
                              dt.create()
                            }

                        } catch (e) {

                        } finally {
                            this.loading = false
                        }

                    },
                    async SavePerecedero() {

                       $('#PerecederoModal').modal('hide');
                       this.loading = true
                        try {
                           this.perecedero.almacen = this.almacen
                           dt.destroy()
                             let res = await axios.post("{{ url('') }}/api/v1/items-perecedero", this.perecedero)
                                Snackbar.show({
                                    text: 'Se ha agregado Stock',
                                    pos: 'top-right',
                                    actionTextColor: '#fff',
                                    backgroundColor: '#00ab55',
                                    actionText: 'Cerrar'
                                });

                            await Promise.all([
                                this.getUrl('almacens'),

                            ]).then((v) => {

                                this.almacen = v[0]

                            })


                        } catch (e) {

                        } finally {
                     dt.create()
                     this.loading = false
                        }

                    },
                    deleteItem(id) {
                        let self = this

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


                                    let url = "{{ url('api/v1/personas') }}/" + id

                                    await axios.delete(url)
                                    dt.destroy()
                                    await Promise.all([self.getData()]).then((v) => {
                                        self.data = v[0]
                                    })
                                    dt.create()
                                } catch (e) {

                                }
                            }
                        })
                    }

                },
                mounted() {
                    this.$nextTick(async () => {
$("#module_kardex").addClass("module_active")
                        let self = this
                        this.loading = true
                        try {
                            await Promise.all([

                                this.getUrl('productos'),

                            ]).then((v) => {


                                this.productos = v[0]

                            })
                            dt.create()

                        } catch (e) {

                        } finally {


                            this.loading = false
                            new TomSelect("#select-producto",{
                                create: true,
                                sortField: {
                                    field: "text",
                                    direction: "asc"
                                }
                            })

                        }




                    })

                }
            }).mount('#app')
        </script>
    @endslot
    @slot('style')
        <style>
            body {}
        </style>
    @endslot
@endcomponent