@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>Inventario General</h3>
                            </div>
                        </div>
                        <div class="statbox widget box box-shadow">

                            <div class="widget-content widget-content-area br-8 pt-2 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 class="text-center">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>Stock</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 . 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>
                                                    <div class="badge"
                                                        :class="{
                                                            'bg-success': (m.stock >= m.producto.stock_moderado),
                                                            'bg-warning': (m.stock >= m.producto.stock_medio && m
                                                                .stock < m.producto.stock_moderado),
                                                            'bg-danger': (m.stock < m.producto.stock_medio)
                                                        }">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                            viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-archive">
                                                            <polyline points="21 8 21 21 3 21 3 8"></polyline>
                                                            <rect x="1" y="3" width="22" height="5"></rect>
                                                            <line x1="10" y1="12" x2="14" y2="12">
                                                            </line>
                                                        </svg>
                                                        {{ m . stock }}
                                                    </div>
                                                </td>

                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </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
    @php
$sucursal = Cache::get('sucursal_selectes');

@endphp
    @slot('script')
        <script type="module">
          import TableCustom from "{{asset('config/dtcustom.js')}}"
                const {
                        createApp
                    } = Vue
            let dt = new TableCustom()
            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("Inventario General")
                            }

                        } 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("Inventario General")
                     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("Inventario General")
                                } catch (e) {

                                }
                            }
                        })
                    },
                    printPDF(){
                        let id = "{{$sucursal->id}}";

                        window.open("{{url('')}}/custom-reports/inventario-general/pdf/"+id,"_blank")
                    },
                    printExcel(){
                        let id = "{{$sucursal->id}}";

                        window.open("{{url('')}}/custom-reports/inventario-general/excel/"+id,"_blank")
                    }
                },
                mounted() {
                    this.$nextTick(async () => {
$("#module_inventario").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("Inventario General",function ( row, data, start, end, display ) {

                            },this)
                        } catch (e) {

                        } finally {


                            this.loading = false
                        }




                    })

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