@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>Combo</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-8 col-md-12 mb-4">
                                                    <label for="producto">Nombre del Combo</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 combo</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="form-group mb-3 col-sm-3">
                                                    <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-3 col-sm-3">
                                                    <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-3 col-sm-3">
                                                    <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-3 mb-3">
                                                    <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-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 class="col-12">
                                                    <hr>
                                                    <div class="row">
                                                        <div class="col-md-8 mb-4">
                                                            <label for="option_marca">Productos</label>
                                                            <select id="option_producto" v-model="producto_id" @change="getProducto"  type="text"  name="linea" class="form-control">
                                                                <template v-for="m in productos">
                                                                    <option :value="m.id">{{m.codigo_barra}} | {{m.nombre}}  MARCA({{m.marca.name}})</option>
                                                                </template>
                                                            </select>
                                                        </div>
                                                        <div class="mb-4 col-sm-4">
                                                            <label for="stock1">Cantidad</label>
                                                            <input v-model="cantidad" type="text" class="form-control"
                                                                placeholder="EJ. 30" required>
                                                        </div>
                                                        <div class="col-12 text-center mb-3">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-success btn-sm" @click="addProducto">AGREGAR</button>
                                                                <button type="button" class="btn btn-dark btn-sm" @click="detalles=[]">VACIAR</button>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">

                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Cantidad</th>
                                                                        <th>Detalle</th>
                                                                        <th>Precio Compra</th>
                                                                        <th>Precio Venta</th>
                                                                        <th>Accion</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <template v-for="(m,i) in detalles">

                                                                        <tr>
                                                                            <td>
                                                                                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
                                                                                    <span class="input-group-btn input-group-prepend"><button @click="restarCantidad(m)" class="btn btn-primary btn-sm bootstrap-touchspin-down" type="button">-</button></span>
                                                                                    <input type="text" class="touchs_cantidad form-control form-control-sm" name="" id="" v-model="m.cantidad">
                                                                                    <span class="input-group-btn input-group-append"><button @click="SumCantidad(m)" class="btn btn-primary btn-sm  bootstrap-touchspin-up" type="button">+</button></span>
                                                                                </div>

                                                                            </td>
                                                                            <td>{{m.producto.nombre}} | {{m.producto.detalle}}</td>
                                                                            <td>{{m.producto.costo}}</td>
                                                                            <td>{{m.producto.precio_4}}</td>
                                                                            <td>
                                                                                <button type="button" class="btn btn-danger btn-sm" @click="detalles.splice(i,1)">ELIMINAR</button>
                                                                            </td>
                                                                        </tr>

                                                                    </template>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </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 combo <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:1,
                    is_exento:0,
                    is_servicio:0,
                    stock_minimo:'',
                    stock_medio:'',
                    stock_moderado:'',
                    proveedor_id:null,
                    stock_inicial:0,
                    almacen:{}
                },
                data: [],
                medidas: [],
                productos:[],
                marcas: [],
                categorias: [],
                proveedors: [],
                almacens: [],
                detalles:[],
                cantidad:0,
                image:null,
                user:{},
                producto:{},
                producto_id:1,
            }
        },
        methods: {
            restarCantidad(item){
                if(item.cantidad>1){
                    item.cantidad = Number(Number(item.cantidad)-1)
                }

                return item
            },
            SumCantidad(item){
                let cantidad  = Number(Number(item.cantidad)+1)
                item.cantidad = cantidad
                return item
            },
            addProducto(){
                let data = {
                    producto:this.producto,
                    cantidad:this.cantidad
                }
                this.detalles.push(data)
                this.cantidad = 0
            },
            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 {

                }
            },
            getProducto(){
                let find = this.productos.find(x => x.id == this.producto_id)
                this.producto = find
            },
            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('user_id',this.user.id)
                    form.append('file',this.image)
                    form.append('detalles',JSON.stringify(this.detalles))

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

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



                } 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'),
                        this.getUrl('productos')

                    ]).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]
                        this.productos = v[6]
                    })


                } 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');
                    this.select_tom = new TomSelect("#option_producto",{
                            create: true,
                            sortField: {
                                field: "text",
                                direction: "asc"
                            }
                        })
                }




            })

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