@component('components.master') @slot('body')
@verbatim
<div class="layout-px-spacing" id="app">
<div class="overlay "></div>
<div class="search-overlay"></div>

    <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>Productos</h3>
                </div>
            </div>
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-md-12 text-end">
                            <div class="d-flex  m-4 justify-content-end">
                                <a
                                    class="btn btn-success mx-2"
                                    data-bs-toggle="modal" data-bs-target="#exampleModal"
                                >
                                <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>
                                    Importar
                                </a>
                                <a
                                    class="btn btn-primary"
                                    href="./producto/add"
                                >
                                    <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-plus"
                                    >
                                        <line x1="12" y1="5" x2="12" y2="19"></line>
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                    Nuevo
                                </a>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Formulario</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">
                                        <div class="custom-file-container" data-upload-id="myFirstImage">
                                            <label>Subir Excel con productos <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>
                                            <label class="custom-file-container__custom-file" >
                                            <input type="file" id="file" type="file" name="file" class="custom-file-container__custom-file__custom-file-input" @change="changeFile"  accept="xlsx">
                                                <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                                <span class="custom-file-container__custom-file__custom-file-control"></span>
                                            </label>
                                            <div class="custom-file-container__image-preview"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a :href="url('descargar-plantilla')" target="_blank" class="btn btn-info"><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-printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Descargar plantilla</a>
                                <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="Importar">Importar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-8 p-0 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>Detalle</th>

                                            <th>U.M</th>
                                            <th>Categoría</th>
                                            <th>Marca</th>
                                            <th>P.Compra</th>
                                            <th>P.Venta</th>

                                            <th class="text-center">Opción</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                                            <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.detalle}}
                                                </td>
                                                <td>
                                                   {{m.medida.prefijo}}
                                                </td>
                                                <td>
                                                   {{m.categoria.name}}
                                                </td>
                                                <td>
                                                   {{m.marca.name}}
                                                </td>
                                                <td>
                                                   {{m.costo}}
                                                </td>
                                                <td>
                                                   {{m.precio_4}}
                                                </td>

                                                <td class="text-center">
                                                   <div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
                                                        <a :href="'./producto/edit/'+m.id" class="btn btn-primary btn-sm">
                                                            <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-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                                                        </a>
                                                        <button type="button" class="btn btn-danger btn-sm" @click="deleteItem(m.id)">
                                                            <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-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                                        </button>
                                                        <button type="button" @click="pressProducto(m)" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#qrModal">
                                                            <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-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg>
                                                        </button>


                                                    </div>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="qrModalLabel">Imprimir QR /Codigo de barra </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-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Codigo</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.codigo">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Producto</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.producto">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Precio</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.precio">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Altura</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.altura">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Ancho</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.ancho">
                               </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Cantidad</label>
                                    <input type="text" class="form-control form-control-sm" v-model="code_info.cantidad">
                               </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-success " data-bs-dismiss="modal" @click="ImprimirQr(1)">Imprimir QR</button>
                        <button type="button" class="btn btn-danger " data-bs-dismiss="modal" @click="ImprimirQr(2)">Imprimir Codigo Barra</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:''
                    },
                    code_info:{
                        producto:"",
                        codigo:"",
                        precio:"",
                        cantidad:10,
                        ancho:10,
                        altura:50
                    },
                    producto:{},
                    data:[],
                    image:null,
                    loading:false
                }
            },
            methods:{
                ImprimirQr(t){
                    let tipo = t == 1 ? "qr" : "barra"
                    window.open("{{url('')}}/custom-reports/producto/"+tipo+"/"+this.code_info.codigo+"/"+this.code_info.producto+"/"+this.code_info.precio+"/"+this.code_info.cantidad+"/"+this.code_info.altura+"/"+this.code_info.ancho)
                },
                pressProducto(p){
                    let m = p
                    this.code_info.producto = m.nombre
                    this.code_info.codigo = m.codigo_barra
                    this.code_info.precio = m.precio_4
                },
                changeFile(e){
                    this.image = e.target.files[0];
                },
                async getData(){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/productos")
                        return res.data
                    }catch(e){

                    }finally{

                    }
                },
                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/productos')}}/"+id

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

                            }
                        }
                    })
                },
                url(url){
                    return "{{url('')}}/"+url
                },
                async Importar() {
                    let self = this
                    try {
                            let form = new FormData()
                            form.append('file',this.image)

                            let res = await axios.post("{{url('')}}/api/v1/import-productos", form)
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Importacion completa!',

                            }).then((re)=>{
                                location.href = "{{url('admin/producto')}}"
                            })



                    } catch (e) {

                    } finally {


                    }
                },

             },
            mounted(){
                this.$nextTick(async () => {
$("#module_producto").addClass("module_active")
                    let self = this
                    self.loading=true
                    try {
                        await Promise.all([self.getData()]).then((v) => {
                            this.data = v[0]
                        })
                        dt.create()

                    } catch (e) {

                    } finally {
                        var firstUpload = new FileUploadWithPreview('myFirstImage');

                        self.loading=false
                    }




                })

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

        }
    </style>
@endslot
@endcomponent