<template>
    <section>
        <h2 class="text-center g-py-20 g-mb-30">Tambah Transaction (2/3)</h2>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12 g-mb-20">
                    <div class="border box-shadow g-pa-20">
                        <form class="row" action="" v-on:submit.prevent="nextForm">
                            <div class="g-font-size-20 g-mb-10">Atur Qty:</div>
                            <div class="col-12 col-md-4 col-lg-4 g-mb-20" v-for="(receivedData, index) in receivedData" :key="index">
                                <div class="custom-checkbox">
                                    <p class="g-font-size-18">{{ receivedData.nama }} {{ receivedData.jenis }} - {{ receivedData.ukuran }} (Rp {{ receivedData.harga_jual }})</p>
                                    <div class="g-mb-10">
                                        <label :for="index" class="g-mr-10">Qty :</label>
                                        <input type="number" :id="index" v-model="form.qty[index]" required><br>
                                    </div>
                                    <div class="g-mb-10">
                                        <label :for="index" class="g-mr-10">Diskon : Rp</label>
                                        <input type="number" :id="index" v-model="form.diskon[index]" required>
                                    </div>
                                </div>
                            </div>
                            <button id="submit" type="submit" class="btn btn-orange d-block text-center g-mt-40">Next</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
a {
    color: #ff6d00;
}
.btn-orange {
    border: 1px solid #ff6d00;
    background-color: #ffffff;
    color: #ff6d00;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-orange:hover {
    border: 1px solid #ff6d00;
    background-color: #ff6d00;
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
}
.custom-checkbox {
    background-color: antiquewhite;
    padding: 10px;
    border: 1px solid brown;
    border-radius: 10px;
}
</style>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'

export default {
    name: 'PostFormAxios',
    created() {
        // console.log(this.form.product);
        this.receivedData = JSON.parse(this.$route.params.product);
        
    },
    data(){
        return{
            form: {
                product: this.$route.params.product,
                qty: [],
                diskon: []
            },
            receivedData: null,
            product: []
        }
    },
    methods:{
        nextForm(){
            // const qty = sessionStorage.setItem('qty', this.form.qty);
            // const diskon = sessionStorage.setItem('diskon', this.form.diskon);

            let $products = this.receivedData;

            for(i=0; i < $products.length; i++) {

                var $product = {
                    id: $products[i].id,
                    nama: $products[i].nama,
                    jenis: $products[i].jenis,
                    ukuran: $products[i].ukuran,
                    harga_jual: $products[i].harga_jual,
                    qty: this.form.qty[i],
                    diskon: this.form.diskon[i]
                }

                this.product.push($product);
            }
            console.log(this.product);

            this.$router.push({
                name: 'tambahsalestransaction3',
                params: {
                    product: JSON.stringify(this.product),
                },
                // data() {
                //     return JSON.stringify(qty), JSON.stringify(diskon);
                // }
            });
        }
    }
}
</script>