@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 por fecha</h3>
                            </div>
                        </div>
                        <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                                <div class="row">
                                    <div class="col-md-4 col-12 my-4 mx-2">
                                        <label for="">Vendedor</label>
                                        <select name="" class="form-control form-control-sm" id="" v-model="user">
                                            <template v-for="m in users">
                                                <option :value="m">{{m.persona.nombre}}</option>
                                            </template>

                                        </select>
                                    </div>
                                    <div class="col-md-2 col-12 my-4 mx-2">
                                        <label for="">Fecha Inicio</label>
                                        <input type="date" class="form-control form-control-sm" v-model="fecha_1">
                                    </div>
                                    <div class="col-md-2 col-12 my-4 mx-2">
                                        <label for="">Fecha Fin</label>
                                        <input type="date" class="form-control form-control-sm" v-model="fecha_2">
                                    </div>
                                    <div class="col-md-2 col-12 my-4 mx-2" style="align-content: end;">
                                        <button class="btn btn-dark " @click="ConsultarFecha" >
                                            CONSULTAR
                                        </button>
                                    </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>U.M</th>
                                            <th>Categoría</th>
                                            <th>Marca</th>

                                            <th>Cantidad</th>
                                            <th>Precio Publico</th>
                                            <th>Total Compra</th>
                                            <th>Total Venta</th>
                                            <th>Ganancia</th>
                                            <th>Vendedor</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                                            <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.cantidad }}
                                                </td>
                                                <td>
                                                    {{ m.producto.precio_4 }}
                                                </td>
                                                <td>
                                                    {{ Number(m.cantidad * m.producto.costo).toFixed(2) }}
                                                </td>

                                                <td>
                                                    {{ Number(m.cantidad * m.producto.precio_4).toFixed(2) }}
                                                </td>

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

                                                <td>
                                                    {{ m.user.persona.nombre }}
                                                </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">Cantidad</th>
                                            <th class="invisible">Precio Publico</th>
                                            <th >Total Compra</th>
                                            <th >Total Venta</th>
                                            <th >Ganancia</th>
                                            <th class="invisible">Vendedor</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.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><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,
                        fecha_1:'',
                        fecha_2:'',
                        producto_id:"",
                        users:[],
                        user:{},
                    }
                },
                methods: {
                    async ConsultarFecha() {
                        let self = this
                        try{
                            let data ={
                                fecha_1:this.fecha_1,
                                fecha_2:this.fecha_2,
                                user:this.user
                            }
                            dt.destroy()
                            let res =await axios.post("{{ url('') }}/api/v1/kardex/valorizado-fecha",data).then(function (response) {
                                self.data = response.data

                            })
                            dt.create("Kardex Valorizado por Fechas",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 6;
                                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++;
                                }
                            },this)

                        }catch(e){

                        }finally{
                        }
                    },

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

                        } finally {

                        }
                    },
                    printPDF(){
                        let id = "{{$sucursal->id}}";
                        let user_id = this.user.hasOwnProperty("id")?this.user.id:"all"
                        let fecha_1 = this.fecha_1==""?"all":this.fecha_1
                        let fecha_2 = this.fecha_2==""?"all":this.fecha_2
                        window.open("{{url('')}}/custom-reports/kardex-valorizado-fecha/pdf/"+id+"/"+fecha_1+"/"+fecha_2+"/"+user_id,"_blank")
                    },
                    printExcel(){
                        let id = "{{$sucursal->id}}";
                        let fecha_1 = this.fecha_1==""?"all":this.fecha_1
                        let fecha_2 = this.fecha_2==""?"all":this.fecha_2
                        let user_id = this.user.hasOwnProperty("id")?this.user.id:"all"
                        window.open("{{url('')}}/custom-reports/kardex-valorizado-fecha/excel/"+id+"/"+fecha_1+"/"+fecha_2+"/"+user_id,"_blank")
                }
                },
                mounted() {
                    this.$nextTick(async () => {
                    $("#module_kardex").addClass("module_active")
                        let self = this
                        this.loading = true
                        try {
                            await Promise.all([


                                self.getUrl('users'),
                            ]).then((v) => {



                                this.users = v[0]

                            })
                            dt.create("Kardex Valorizado por Fechas",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 6;
                                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++;
                                }
                            },this)

                        } 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