<template>
    <section>
        <h2 class="text-center g-py-20 g-mb-30">Tambah Transaction (3/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">
                        <div class="row g-mb-20">
                            <div class="g-font-size-20 g-mb-10">Detail Barang:</div>
                            <div class="col-12 col-md-4 col-lg-4" v-for="index in receivedData" :key="index">
                                <div class="custom-checkbox">
                                    <label class="g-font-size-18">{{ index.nama }} {{ index.jenis }} - {{ index.ukuran }} (Rp {{ index.harga_jual }})</label><br>
                                    <label class="g-mr-10">Qty: {{ index.qty }}</label><br>
                                    <label class="g-mr-10">Diskon: {{ index.diskon }}</label>
                                </div>
                            </div>
                        </div>
                        <form class="row" action="" v-on:submit.prevent="submitForm">
                            <div class="g-font-size-20 g-mb-10">Informasi Customer:</div>
                            <div class="col-12 col-md-12 col-lg-12 g-mb-20">
                                <div class="custom-checkbox">
                                    <div class="form-group g-mb-15">
                                        <label for="nama" class="g-mb-5">Nama</label>
                                        <input type="text" class="form-control" id="nama" placeholder="Nama" v-model="form.customer" required>
                                    </div>
                                    <div class="form-group g-mb-15">
                                        <label for="alamat" class="g-mb-5">Alamat</label>
                                        <input type="text" class="form-control" id="alamat" placeholder="Alamat" v-model="form.address" required>
                                    </div>
                                    <div class="form-group g-mb-15">
                                        <label for="biaya_tambahan" class="g-mb-5">Biaya Tambahan</label>
                                        <input type="number" class="form-control" id="biaya_tambahan" placeholder="Biaya Tambahan" v-model="form.biaya_tambahan" 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() {
        this.receivedData = JSON.parse(this.$route.params.product);
        // console.log(this.$route.params.product);
    },
    data(){
        return{
            form: {
                customer: '',
                address: '',
                biaya_tambahan: null
            },
            receivedData: null,
            product: [],
            loopproduct: [],
            total: null,
        }
    },
    methods:{
        submitForm(){
            let $products = this.receivedData;

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

                var $product = {
                    harga_jual: $products[i].harga_jual,
                    total: ($products[i].harga_jual * $products[i].qty) - $products[i].diskon,
                }
                var $product2 = {
                    product_id: $products[i].id,
                    qty: $products[i].qty,
                    diskon: $products[i].diskon,
                }
                this.total += $product.total;

                this.product.push($product);
                this.loopproduct.push($product2);
            }
            this.totalakhir = this.total + this.form.biaya_tambahan;
            // console.log(this.loopproduct);

            axios.post('https://werp-api.pt-gti.co.id/api/salestransaction', {
                    "customer": this.form.customer,
                    "address": this.form.address,
                    "biaya_tambahan": this.form.biaya_tambahan,
                    "total": this.totalakhir,
                    "product": this.loopproduct,
                    "created_by": sessionStorage.getItem('userlogin'),
                    "code": sessionStorage.getItem('code')
                })
                .then((res) => {
                    //Perform Success Action
                    location.href = "/salestransaction"
                    console.log(res.data)
                })
                .catch((error) => {
                    // error.response.status Check status code
                    console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        }
    }
}
</script>