@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="col-sm-8 col-12">
            <div class="page-header mb-3">
                <div class="page-title">
                    <h3>Producto</h3>
                </div>
            </div>
            <div class="statbox widget box box-shadow">
                <div id="wizard_Default" class="col-lg-12 layout-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                    <h4>Formulario</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <div class="bs-stepper stepper-form-one">
                                <div class="bs-stepper-header" role="tablist">
                                    <div class="step" data-target="#defaultStep-one">
                                        <button type="button" class="step-trigger" role="tab">
                                            <span class="bs-stepper-circle">1</span>
                                            <span class="bs-stepper-label">Información</span>
                                        </button>
                                    </div>
                                    <div class="line"></div>
                                    <div class="step" data-target="#defaultStep-two">
                                        <button type="button" class="step-trigger" role="tab">
                                            <span class="bs-stepper-circle">2</span>
                                            <span class="bs-stepper-label">Caracteristicas</span>
                                        </button>
                                    </div>
                                    <div class="line"></div>
                                    <div class="step" data-target="#defaultStep-three">
                                        <button type="button" class="step-trigger" role="tab">
                                            <span class="bs-stepper-circle">3</span>
                                            <span class="bs-stepper-label">
                                                <span class="bs-stepper-title">Imagen</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="bs-stepper-content p-4">
                                    <div id="defaultStep-one" class="content" role="tabpanel">
                                        <section>
                                            <div class="row">
                                                <div class="col-xl-4 col-md-12 mb-4">
                                                    <label for="cod_barra">Codigo de Barra</label>
                                                    <div class="input-group ">
                                                        <input v-model="model.codigo_barra" type="text" name="code_barra" class="form-control"
                                                        maxlength="15" minlength="10" id="cod_barra" required>
                                                        <button class="btn btn-primary " type="button" @click="generateBarcode">Generar</button>

                                                    </div>

                                                </div>


                                                <div class="col-xl-4 col-md-12 mb-4">
                                                    <label for="producto">Nombre del producto</label>
                                                    <input v-model="model.nombre" type="text" name="producto" class="form-control"
                                                        maxlength="100" id="producto" required>
                                                </div>


                                                <div class="col-xl-4  col-md-12 mb-4">
                                                    <label for="option_um">Unidad de medida</label>
                                                    <select  v-model="model.medida_id" id="option_um" name="unidad" class="form-control">
                                                        <template v-for="m in medidas">
                                                            <option :value="m.id">{{m.name}}</option>
                                                        </template>
                                                    </select>
                                                </div>
                                                <div class="col-xl-8 col-md-12 mb-4">
                                                    <label for="ob">Detalles del producto</label>
                                                    <input v-model="model.detalle" type="text" name="ob" class="form-control" id="ob" required>
                                                </div>



                                                <div class="col-xl-4 col-md-12 mb-4">
                                                    <label for="precio_compra">Precio Costo</label>
                                                    <input v-model="model.costo" type="text" name="precio_compra" class="form-control"
                                                        id="precio_compra" required>
                                                </div>


                                                <div class="row col-12">
                                                    <div class="col-xl-3 col-md-12 mb-4">
                                                        <label for="precio_venta">Precio Especial</label>
                                                        <input v-model="model.precio_1"  type="text" name="precio_venta" class="form-control"
                                                            maxlength="100" id="precio_venta" required>
                                                    </div>
                                                    <div class="col-xl-3 col-md-12 mb-4">
                                                        <label for="precio_venta_2">Precio Mayorista</label>
                                                        <input v-model="model.precio_2"  type="text" name="precio_venta_2" class="form-control"
                                                            maxlength="100" id="precio_venta_2" required>
                                                    </div>
                                                    <div class="col-xl-3 col-md-12 mb-4">
                                                        <label for="precio_venta_3">Precio Minorista</label>
                                                        <input v-model="model.precio_3" type="text" name="precio_venta_3" class="form-control"
                                                            maxlength="100" id="precio_venta_3" required>
                                                    </div>
                                                    <div class="col-xl-3 col-md-12 mb-4">
                                                        <label for="precio_venta_4">Precio Normal</label>
                                                        <input v-model="model.precio_4" type="text" name="precio_venta_4" class="form-control"
                                                            maxlength="100" id="precio_venta_4" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                        <div class="button-action mt-5">
                                            <button class="btn btn-secondary btn-prev me-3" disabled>Atras</button>
                                            <button class="btn btn-secondary btn-nxt">Siguiente</button>
                                        </div>
                                    </div>
                                    <div id="defaultStep-two" class="content" role="tabpanel">
                                        <section>
                                            <div class="row">
                                                <div class="col-md-4 mb-4">
                                                    <label for="option_marca">Categoría</label>
                                                    <select v-model="model.categoria_id" id="option_marca" name="linea" class="form-control">
                                                        <template v-for="m in categorias">
                                                            <option :value="m.id">{{m.name}}</option>
                                                        </template>
                                                    </select>
                                                </div>
                                                <div class="col-md-4 mb-4">
                                                    <label for="option_categoria">Marca</label>
                                                    <select v-model="model.marca_id" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <template v-for="m in marcas">
                                                            <option :value="m.id">{{m.name}}</option>
                                                        </template>

                                                    </select>
                                                </div>
                                                <div class="col-md-4 mb-4">
                                                    <label for="option_categoria">Proveedor</label>
                                                    <select v-model="model.proveedor_id" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <template v-for="m in proveedors">
                                                            <option :value="m.id">{{m.nombre}}</option>
                                                        </template>

                                                    </select>
                                                </div>
                                                <div class="form-group mb-4 col-sm-4">
                                                    <label for="stock3">Stock Minimo</label>
                                                    <input v-model="model.stock_minimo" type="text" class="form-control" name="stock1" id="stock1"
                                                        placeholder="EJ. 30" required>
                                                </div>
                                                <div class="form-group mb-4 col-sm-4">
                                                    <label for="stock2">Stock Medio</label>
                                                    <input v-model="model.stock_medio" type="text" class="form-control" name="stock2" id="stock2"
                                                        placeholder="EJ. 30" required>
                                                </div>
                                                <div class="form-group mb-4 col-sm-4">
                                                    <label for="stock1">Stock Moderado</label>
                                                    <input v-model="model.stock_moderado" type="text" class="form-control" name="stock3" id="stock3"
                                                        placeholder="EJ. 30" required>
                                                </div>


                                                <div class="col-md-4 mb-4">
                                                    <label for="option_categoria">Perecedero</label>
                                                    <select v-model="model.is_perecedero" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <option value="1">Si</option>
                                                        <option value="0">No</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4 mb-4">
                                                    <label for="option_categoria">Exento</label>
                                                    <select v-model="model.is_exento" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <option value="1">Si</option>
                                                        <option value="0">No</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4 mb-4">
                                                    <label for="option_categoria">Lote</label>
                                                    <select v-model="model.is_lote" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <option value="1">Si</option>
                                                        <option value="0">No</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <hr>
                                                </div>
                                                <div class="col-md-6 mb-4">
                                                    <label for="option_categoria">Almacen Stock Inicial</label>
                                                    <select v-model="model.almacen" id="option_categoria" name="presentacion"
                                                        class="form-control">
                                                        <template v-for="m in almacens">
                                                            <option :value="m">{{m.name}}</option>
                                                        </template>

                                                    </select>
                                                </div>


                                                <div class="form-group mb-4 col-sm-6">
                                                    <label for="stock1">Stock Inicial</label>
                                                    <input v-model="model.stock_inicial" type="text" class="form-control" name="stock3" id="stock3"
                                                        placeholder="EJ. 30" required>
                                                </div>
                                                <div v-if="model.is_lote==1" class="col-4">
                                                    <label for="">Lote</label>
                                                    <input type="text" v-model="model.lote" class="form-control">
                                                </div>
                                                <div v-if="model.is_perecedero==1" class="col-4">
                                                    <label for="">Fecha Vencimiento 1</label>
                                                    <input type="date" v-model="model.fecha_vencimiento_1" class="form-control">
                                                </div>
                                                <div v-if="model.is_perecedero==1" class="col-4">
                                                    <label for="">Fecha Vencimiento 2</label>
                                                    <input type="date" v-model="model.fecha_vencimiento_2" class="form-control">
                                                </div>
                                            </div>

                                        </section>

                                        <div class="button-action mt-5">
                                            <button class="btn btn-secondary btn-prev me-3">Atras</button>
                                            <button class="btn btn-secondary btn-nxt">Siguiente</button>
                                        </div>
                                    </div>
                                    <div id="defaultStep-three" class="content" role="tabpanel">
                                        <section>
                                            <div class="row">
                                                <div class="custom-file-container" data-upload-id="myFirstImage">
                                                    <label>Subir imagen referencial del articulo <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="image/*">
                                                        <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>
                                        </section>

                                        <div class="button-action mt-3">
                                            <button class="btn btn-secondary btn-prev me-3">Atras</button>
                                            <button class="btn btn-success me-3" @click="Save">Guardar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </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: {
                    nombre: '',
                    codigo_barra: '',
                    detalle: '',
                    costo:'',
                    precio_1:'',
                    precio_2:'',
                    precio_3:'',
                    precio_4:'',
                    marca_id:1,
                    medida_id:1,
                    categoria_id:1,
                    is_perecedero:0,
                    is_lote:0,
                    is_exento:0,
                    is_servicio:0,
                    stock_minimo:'',
                    stock_medio:'',
                    stock_moderado:'',
                    proveedor_id:null,
                    stock_inicial:0,
                    lote:'',
                    fecha_vencimiento_1:'',
                    fecha_vencimiento_2:'',
                    almacen:{}
                },
                data: [],
                medidas: [],
                marcas: [],
                categorias: [],
                proveedors: [],
                almacens: [],
                image:null,
                user:{}
            }
        },
        methods: {
            async getData() {
                try {
                    let res = await axios.get("{{url('')}}/api/v1/comprobantes")
                    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 getUrl2(path) {
                try {
                    let res = await axios.get("{{url('')}}/"+path)
                    return res.data
                } catch (e) {

                } finally {

                }
            },
            async Save() {
                let self = this
                try {
                    let form = new FormData()
                    form.append('codigo_barra',this.model.codigo_barra)
                    form.append('nombre',this.model.nombre)
                    form.append('precio_1',this.model.precio_1)
                    form.append('precio_2',this.model.precio_2)
                    form.append('precio_3',this.model.precio_3)
                    form.append('precio_4',this.model.precio_4)
                    form.append('costo',this.model.costo)
                    form.append('detalle',this.model.detalle)
                    form.append('stock_minimo',this.model.stock_minimo)
                    form.append('stock_moderado',this.model.stock_moderado)
                    form.append('stock_medio',this.model.stock_medio)
                    form.append('marca_id',this.model.marca_id)
                    form.append('medida_id',this.model.medida_id)
                    form.append('categoria_id',this.model.categoria_id)
                    form.append('proveedor_id',this.model.proveedor_id)
                    form.append('is_lote',this.model.is_lote)
                    form.append('is_exento',this.model.is_exento)
                    form.append('is_perecedero',this.model.is_perecedero)
                    form.append('is_servicio',this.model.is_servicio)
                    form.append('almacen_id',this.model.almacen.id)
                    form.append('sucursal_id',this.model.almacen.sucursal_id)
                    form.append('stock_inicial',this.model.stock_inicial)
                    form.append('lote',this.model.lote)
                    form.append('fecha_vencimiento_1',this.model.fecha_vencimiento_1)
                    form.append('fecha_vencimiento_2',this.model.fecha_vencimiento_2)
                    form.append('user_id',this.user.id)
                    form.append('file',this.image)

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

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



                } catch (e) {

                } finally {
                    this.model.name = ""
                    dt.create()
                }
            },
            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/comprobantes')}}/" + id

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

                        }
                    }
                })
            },
            changeFile(e){
                this.image = e.target.files[0];
            },
            generateRandomBarcode(length) {
                let result = '';
                const characters = '0123456789';
                const charactersLength = characters.length;
                for (let i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                return result;
            },
            generateBarcode() {
                const randomBarcode = this.generateRandomBarcode(12);
                this.model.codigo_barra = randomBarcode;
            }
        },
        mounted() {
            this.$nextTick(async () => {
$("#module_producto").addClass("module_active")
                let self = this

                try {
                    await Promise.all([
                        this.getUrl('marcas'),
                        this.getUrl('medidas'),
                        this.getUrl('categorias'),
                        this.getUrl('proveedors'),
                        this.getUrl('sucursal-almacens'),
                        this.getUrl2('auth/userSession'),

                    ]).then((v)=>{
                        this.marcas = v[0]
                        this.medidas = v[1]
                        this.categorias = v[2]
                        this.proveedors = v[3]
                        this.almacens = v[4]
                        this.user = v[5]
                    })


                } catch (e) {

                } finally {
                    var stepperWizardDefault = document.querySelector('.stepper-form-one');
                    var stepperDefault = new Stepper(stepperWizardDefault, {
                        animation: true
                    })
                    var stepperNextButtonDefault = stepperWizardDefault.querySelectorAll('.btn-nxt');
                    var stepperPrevButtonDefault = stepperWizardDefault.querySelectorAll('.btn-prev');

                    stepperNextButtonDefault.forEach(element => {
                        element.addEventListener('click', function () {
                            stepperDefault.next();
                        })
                    });

                    stepperPrevButtonDefault.forEach(element => {
                        element.addEventListener('click', function () {
                            stepperDefault.previous();
                        })
                    });

                    stepperWizardDefault.addEventListener('show.bs-stepper', function (event) {
                        if (event.detail.from < event.detail.to) {
                            stepperWizardDefault.querySelectorAll('.step')[event.detail.from].classList.add('crossed');
                        } else {
                            stepperWizardDefault.querySelectorAll('.step')[event.detail.to].classList.remove('crossed');
                        }
                    })
                    var firstUpload = new FileUploadWithPreview('myFirstImage');

                }




            })

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