@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 Valorizado de Combos</h3>
                            </div>
                        </div>
                        <div class="statbox widget box box-shadow">

                            <div class="widget-content widget-content-area br-8 p-3 table-responsive">
                                <div class="table-responsive">
                                  <table class="table dt-table-hover" style="width:100%" id="table_dt">
                                    <thead>
                                        <tr>

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

                                            <th >Imagen</th>
                                            <th>Combo</th>


                                            <th>U.M</th>

                                            <th>Almacen</th>

                                            <th>Existencia</th>
                                            <th>Precio Costo</th>
                                            <th>Precio Venta</th>
                                            <th>Total Costo</th>
                                            <th>Total Venta</th>
                                            <th>Total Ganancia</th>




                                        </tr>
                                    </thead>
                                    <tbody>

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

                                            <tr>

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

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

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

                                                <td>
                                                    {{ m.almacen.name }}
                                                </td>

                                                <td>
                                                    {{ m.stock }}
                                                </td>
                                                <td>
                                                    {{ m.costo }}
                                                </td>
                                                <td>
                                                    {{ m.precio_4 }}
                                                </td>
                                                <td>
                                                    {{ Number(m.stock*m.costo).toFixed(2) }}
                                                </td>
                                                <td>
                                                    {{ Number(m.stock*m.precio_4).toFixed(2) }}
                                                </td>
                                                <td>
                                                    {{ Number((m.stock*m.precio_4)-(m.stock*m.costo)).toFixed(2) }}
                                                </td>

                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                                </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
                    }
                },
                methods: {
                    async getData() {
                        try {
                            let res = await axios.get("{{ url('') }}/api/v1/personas")
                            return res.data
                        } catch (e) {

                        } finally {

                        }
                    },
                    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("Kardex Valorizado")
                            }

                        } 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("Kardex Valorizado")
                     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("Kardex Valorizado")
                                } catch (e) {

                                }
                            }
                        })
                    }

                },
                mounted() {
                    this.$nextTick(async () => {
$("#module_kardex").addClass("module_active")
                        let self = this
                        this.loading = true
                        try {
                            await Promise.all([
                                this.getUrl('inventario/general-combo'),

                            ]).then((v) => {

                                this.items_list = v[0]

                            })
                            dt.create("Kardex Valorizado")

                        } catch (e) {

                        } finally {


                            this.loading = false
                        }




                    })

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