@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</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 class="text-center">Barra</th>
                                            <th >Imagen</th>
                                            <th>Producto</th>


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

                                            <th>Almacen</th>
                                            <th>Lote</th>
                                            <th>F.V</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="text-center">
                                                    {{ m.producto.codigo_barra }}
                                                </td>
                                                <td class="">
                                                    <a v-if="m.producto.hasOwnProperty('img')" class=" profile-img"
                                                        href="javascript: void(0);">
                                                        <img :src="m.producto.img" alt="product" style="width: 80px;">
                                                    </a>
                                                </td>
                                                <td>
                                                    {{ m.producto.nombre }}
                                                </td>

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

                                            <th class="invisible" > N° </th>
                                            <th class="invisible">Barra</th>
                                            <th class="invisible" >Imagen</th>
                                            <th class="invisible">Producto</th>


                                            <th class="invisible">U.M</th>
                                            <th class="invisible">Categoría</th>
                                            <th class="invisible">Marca</th>

                                            <th class="invisible">Almacen</th>
                                            <th class="invisible">Lote</th>
                                            <th class="invisible">F.V</th>
                                            <th class="invisible">Existencia</th>
                                            <th class="invisible">Precio Costo</th>
                                            <th class="invisible">Precio Venta</th>
                                            <th >Total Costo</th>
                                            <th >Total Venta</th>
                                            <th >Total Ganancia</th>




                                        </tr>
                                    </tfoot>
                                </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
                    }
                },
                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]

                            })
                               this.loading = false
                            }

                        } 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 {
                            this.loading = false
                            dt.create("Kardex Valorizado",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 8;
                                while(j < n_columnas){
                                    let total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                    return parseFloat(a) + parseFloat(b);
                                    }, 0 );
                                    //Actualizar Footer
                                    $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                    j++;
                                }
                            })

                        }

                    },
                    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",function ( row, data, start, end, display ) {
                                        let api = this.api();
                                        let  n_columnas = api.columns().nodes().length;
                                        let j = 8;
                                        while(j < n_columnas){
                                            let total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                            return parseFloat(a) + parseFloat(b);
                                            }, 0 );
                                            //Actualizar Footer
                                            $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                            j++;
                                        }
                                    })
                                } 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'),

                            ]).then((v) => {

                                this.items_list = v[0]

                            })
                            dt.create("Kardex Valorizado",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 8;
                                while(j < n_columnas){
                                    let total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                    return parseFloat(a) + parseFloat(b);
                                    }, 0 );
                                    //Actualizar Footer
                                    $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                    j++;
                                }
                            })

                        } catch (e) {

                        } finally {


                            this.loading = false
                        }




                    })

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