<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid max-width-webkit-fill-available">
            <h2 class="text-center g-py-20">Warehouse Stock</h2>
            <div class="row g-mb-30">
                <!-- <div class="text-right col-12 col-md-12 col-lg-12 g-mb-20">
                    <router-link to="/kategoriaset/tambahkategoriaset" class="btn btn-md btn-orange">
                        Tambah Warehouse Stock
                    </router-link>
                </div> -->
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col col-sm-3 col-xs-12">
                                    <h4 class="title">Data <span>List</span></h4>
                                </div>
                                <div class="col-sm-9 col-xs-12 text-right">
                                    <div class="btn_group">
                                        <input type="text" class="form-control" placeholder="Search by nama" id="myInput" onkeyup="searchFilterWS()">
                                        <!-- <button class="btn btn-default g-ml-10" title="Reload"><i class="fa fa-refresh"></i></button>
                                        <button class="btn btn-default g-ml-10" title="Pdf"><i class="fa fa-file-pdf-o"></i></button> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nama</th>
                                        <th>Warehouse Qty</th>
                                        <th>Accurate Qty</th>
                                        <th>Supplier</th>
                                        <th>Jenis</th>
                                        <th>Ukuran</th>
                                        <th>Harga Beli</th>
                                        <th>Harga Jual</th>
                                        <th>Additional Cost</th>
                                        <th>Payment Type</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="myUL">
                                    <tr v-for="(warehousestock, index) in warehousestock" :key="index">
                                        <td>{{ index+1 }}</td>
                                        <td>{{ warehousestock.product.nama }}</td>
                                        <td>{{ warehousestock.qty }}</td>
                                        <td>{{ warehousestock.product.qty }}</td>
                                        <td>{{ warehousestock.product.supplier }}</td>
                                        <td>{{ warehousestock.product.jenis }}</td>
                                        <td>{{ warehousestock.product.ukuran }}</td>
                                        <td>Rp {{ warehousestock.product.harga_beli }}</td>
                                        <td>Rp {{ warehousestock.product.harga_jual }}</td>
                                        <td>Rp {{ warehousestock.product.additional_cost }}</td>
                                        <td>{{ warehousestock.product.payment_type }}</td>
                                        <td>
                                            <ul class="action-list">
                                                <li><a v-if="getPermissions.includes('edit-warehousestock')" data-toggle="modal" :data-target="'#myModal' +warehousestock.id" data-tip="update"><i class="fa fa-edit"></i></a></li>
                                                <!-- <li><router-link @click="deleteAset(warehousestock.id)" to="" data-tip="delete"><i class="fa fa-trash"></i></router-link></li> -->
                                            </ul>
                                        </td>
                                        <!-- Modal -->
                                        <div class="modal fade" :id="'myModal' +warehousestock.id" role="dialog">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                        <h4 class="modal-title">Update Warehouse Stock</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form class="row text-left" action="" v-on:submit.prevent="updateForm(warehousestock.id)">
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="nama">Nama</label>
                                                                <input type="text" class="form-control" id="nama" :value="warehousestock.product.nama" readonly>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="stockexisting">Stock Existing</label>
                                                                <input type="text" class="form-control" id="stockexisting" :value="warehousestock.product.qty" readonly>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="qtywarehouse">Qty Warehouse</label>
                                                                <input type="number" class="form-control" id="qtywarehouse" :placeholder="warehousestock.qty" v-model="form.qty" required>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="supplier">Supplier</label>
                                                                <input type="text" class="form-control" id="supplier" :placeholder="warehousestock.product.supplier" v-model="form.supplier" required>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="jenis">Jenis</label>
                                                                <input type="text" class="form-control" id="jenis" :placeholder="warehousestock.product.jenis" v-model="form.jenis" required>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="ukuran">Ukuran</label>
                                                                <input type="text" class="form-control" id="ukuran" :placeholder="warehousestock.product.ukuran" v-model="form.ukuran" required>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="harga_jual">Harga Jual</label>
                                                                <input type="number" class="form-control" id="harga_jual" :placeholder="warehousestock.product.harga_jual" v-model="form.harga_jual" required>
                                                            </div>
                                                            <div class="col-12 col-md-6 col-lg-6 form-group g-mb-15">
                                                                <label for="additional_cost">Additional Cost</label>
                                                                <input type="number" class="form-control" id="additional_cost" :placeholder="warehousestock.product.additional_cost" v-model="form.additional_cost" required>
                                                            </div>
                                                            <div class="col-12 col-md-12 col-lg-12 form-group g-mb-15">
                                                                <label for="payment_type">Payment Type</label>
                                                                <input type="text" class="form-control" id="payment_type" :placeholder="warehousestock.product.payment_type" v-model="form.payment_type" required>
                                                            </div>
                                                            <div class="col-12 col-md-12 col-lg-12 form-group g-mb-15">
                                                                <label for="deskripsi">Deskripsi</label>
                                                                <input type="text" class="form-control" id="deskripsi" v-model="form.deskripsi">
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-md btn-secondary m-auto" data-dismiss="modal">Close</button>
                                                                <button id="submit" type="submit" class="btn btn-md btn-primary m-auto" @click="checkDeskripsi(form.deskripsi)">Update</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Modal -->
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- <div class="panel-footer">
                            <div class="row">
                                <div class="col col-sm-6 col-xs-6">showing <b>5</b> out of <b>25</b> entries</div>
                                <div class="col-sm-6 col-xs-6">
                                    <ul class="pagination hidden-xs pull-right">
                                        <li><a href="#"><i class="fa fa-chevron-circle-left"></i></a></li>
                                        <li class="active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#"><i class="fa fa-chevron-circle-right"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
.panel{
    background: linear-gradient(to right, #2980b9, #2c3e50);
    padding: 0;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0 5px rgba(0,0,0,0.05),0 0 0 10px rgba(0,0,0,0.05);
}
.panel .panel-heading{
    padding: 20px 15px;
    border-radius: 10px 10px 0 0;
    margin: 0;
}
.panel .panel-heading .title{
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 40px;
    margin: 0;
}
.panel .panel-heading .btn{
    color: rgba(255,255,255,0.5);
    background: transparent;
    font-size: 16px;
    text-transform: capitalize;
    border: 2px solid #fff;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.panel .panel-heading .btn:hover{
    color: #fff;
    text-shadow: 3px 3px rgba(255,255,255,0.2);
}
.panel .panel-heading .form-control{
    color: #fff;
    background-color: transparent;
    width: 35%;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 20px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}
.panel .panel-heading .form-control:focus{
    background-color: rgba(255,255,255,0.2);
    box-shadow: none;
    outline: none;
}
.panel .panel-heading .form-control::placeholder{
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    font-weight: 500;
}
.panel .panel-body{ padding: 0; }
.panel .panel-body .table thead tr th{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 12px;
    border: none;
}
.panel .panel-body .table tbody tr td{
    color: #fff;
    font-size: 15px;
    padding: 10px 12px;
    vertical-align: middle;
    border: none;
}
.panel .panel-body .table tbody tr:nth-child(even){ background-color: rgba(255,255,255,0.05); }
.panel .panel-body .table tbody .action-list{
    padding: 0;
    margin: 0;
    list-style: none;
}
.panel .panel-body .table tbody .action-list li{
    display: inline-block;
    margin: 0 5px;
}
.panel .panel-body .table tbody .action-list li a{
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.panel .panel-body .table tbody .action-list li a:hover{ text-shadow: 3px 3px 0 rgba(255,255,255,0.3); }
.panel .panel-body .table tbody .action-list li a:before,
.panel .panel-body .table tbody .action-list li a:after{
    content: attr(data-tip);
    color: #fff;
    background-color: #111;
    font-size: 12px;
    padding: 5px 7px;
    border-radius: 4px;
    text-transform: capitalize;
    display: none;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: -32px;
    transition: all 0.3s ease 0s;
}
.panel .panel-body .table tbody .action-list li a:after{
    content: '';
    height: 15px;
    width: 15px;
    padding: 0;
    border-radius: 0;
    transform: translateX(-50%) rotate(45deg);
    top: -18px;
    z-index: -1;
}
.panel .panel-body .table tbody .action-list li a:hover:before,
.panel .panel-body .table tbody .action-list li a:hover:after{
    display: block;
}
.panel .panel-footer{
    color: #fff;
    background-color: transparent;
    padding: 15px;
    border: none;
}
.panel .panel-footer .col{ line-height: 35px; }
.pagination{ margin: 0; }
.pagination li a{
    color: #fff;
    background-color: transparent;
    border: 2px solid transparent;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 31px;
    width: 35px;
    height: 35px;
    padding: 10px;
    margin: 0 3px;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.pagination li a:hover{
    color: #fff;
    background-color: transparent;
    border-color: rgba(255,255,255,0.2);
}
.pagination li a:focus,
.pagination li.active a,
.pagination li.active a:hover{
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.pagination li:first-child a,
.pagination li:last-child a{
    border-radius: 50%;
}
@media only screen and (max-width:767px){
    .panel .panel-heading .title{
        text-align: center;
        margin: 0 0 10px;
    }
    .panel .panel-heading .btn_group{ text-align: center; }
}
</style>

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

export default{
    name: 'UpdateFormAxios',
    components: {
        'app-header': Header
    },
    created() {
        this.getPermissions = JSON.parse(localStorage.getItem('permissions'));
        // console.log(this.getPermissions);
    },
    data(){
        return{
            form: {
                qty: '',
                deskripsi: '',
                supplier: '',
                jenis: '',
                ukuran: '',
                harga_jual: [],
                additional_cost: [],
                payment_type: '',
                created_by: sessionStorage.getItem('userlogin')
            },
        }
    },
    setup() {
        //reactive state
        let warehousestock = ref([]);

        onMounted(() => {
            //get data from api endpoint
            axios.get('https://werp-api.pt-gti.co.id/api/warehousestock')
            .then((response) => {
                warehousestock.value = response.data
                // console.log(response.data)
            }).catch((err) => {
                console.log(err.response)
            });
        });

        return {
            warehousestock
        }
    },
    methods: {
        updateForm(id){
            // const id = this.$route.params.id;
            axios.post('https://werp-api.pt-gti.co.id/api/warehousestock/' +id, this.form)
                .then((response) => {
                    //Perform Success Action
                    // console.log(response.data);
                    location.href = '/warehousestock';
                })
                .catch((error) => {
                    // error.response.status Check status code
                    console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        },
        checkDeskripsi(deskripsi) {
            if(deskripsi === '') {
                this.form.deskripsi = 'Tidak ada deskripsi'
            }
        },
    }
}
</script>