<template>
    <section>
        <h2 class="text-center g-py-20 g-mb-30">Ubah Data Karyawan</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 action="" enctype="multipart/form-data" v-on:submit.prevent="updateForm()">
                            <div class="form-group g-mb-15">
                                <label for="nama_lengkap">Nama Lengkap</label>
                                <input type="text" class="form-control" id="nama_lengkap" :placeholder="karyawan.nama_lengkap" v-model="form.nama_lengkap" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="posisi_jabatan">Posisi Jabatan</label>
                                <input type="text" class="form-control" id="posisi_jabatan" :placeholder="karyawan.posisi_jabatan" v-model="form.posisi_jabatan" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="email">Email</label>
                                <input type="text" class="form-control" id="email" :placeholder="karyawan.email" v-model="form.email" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="handphone">Handphone</label>
                                <input type="number" class="form-control" id="handphone" :placeholder="karyawan.handphone" v-model="form.handphone" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="alamat">Alamat</label>
                                <input type="text" class="form-control" id="alamat" :placeholder="karyawan.alamat" v-model="form.alamat" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="no_npwp">No NPWP</label>
                                <input type="number" class="form-control" id="no_npwp" :placeholder="karyawan.no_npwp" v-model="form.no_npwp" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="no_ktp">No KTP</label>
                                <input type="number" class="form-control" id="no_ktp" :placeholder="karyawan.no_ktp" v-model="form.no_ktp" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="status_pekerja">Status Pekerja</label>
                                <input type="text" class="form-control" id="status_pekerja" :placeholder="karyawan.status_pekerja" v-model="form.status_pekerja" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="gaji">Gaji</label>
                                <input type="number" class="form-control" id="gaji" :placeholder="karyawan.gaji" v-model="form.gaji" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="nama_bank_rekening_gaji">Nama Bank Rekening Gaji</label>
                                <input type="text" class="form-control" id="nama_bank_rekening_gaji" :placeholder="karyawan.nama_bank_rekening_gaji" v-model="form.nama_bank_rekening_gaji" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="no_rekening_gaji">No Rekening Gaji</label>
                                <input type="number" class="form-control" id="no_rekening_gaji" :placeholder="karyawan.no_rekening_gaji" v-model="form.no_rekening_gaji" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="atas_nama_rekening_gaji">Atas Nama Rekening Gaji</label>
                                <input type="text" class="form-control" id="atas_nama_rekening_gaji" :placeholder="karyawan.atas_nama_rekening_gaji" v-model="form.atas_nama_rekening_gaji" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="tanggal_join">Tanggal Join : {{ currentDateTime2(karyawan.tanggal_join) }}</label>
                                <input type="date" :formatter="currentDateTime('YYYY-MM-DD')" class="form-control" id="tanggal_join" :placeholder="karyawan.tanggal_join" v-model="form.tanggal_join" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="tanggal_resign">Tanggal Resign : {{ currentDateTime2(karyawan.tanggal_resign) }}</label>
                                <input type="date" :formatter="currentDateTime('YYYY-MM-DD')" class="form-control" id="tanggal_resign" :placeholder="karyawan.tanggal_resign" v-model="form.tanggal_resign">
                            </div>
                            <button id="submit" type="submit" class="btn btn-orange d-block text-center g-mt-40">Ubah Data Karyawan</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;
}
</style>

<script>
import axios from 'axios'
import { useRoute } from 'vue-router'
import {ref} from 'vue'
import moment from 'moment'

export default {
    name: 'UpdateFormAxios',
    data(){
        return{
            form: {
                nama_lengkap: '',
                posisi_jabatan: '',
                email: '',
                handphone: [],
                alamat: '',
                no_npwp: [],
                no_ktp: [],
                status_pekerja: '',
                gaji: [],
                nama_bank_rekening_gaji: '',
                no_rekening_gaji: [],
                atas_nama_rekening_gaji: '',
                tanggal_join: '',
                tanggal_resign: ''
            }
        }
    },
    setup() {
        //reactive state
        let karyawan = ref([]);

        const route = useRoute();
        const id = route.params.id;

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

        return {
            karyawan
        }
    },
    created() {
        const route = useRoute();
        const id = route.params.id;

        axios.get('https://werp-api.pt-gti.co.id/api/karyawan/' +id)
        .then((response) => {
            // console.log(response.data)
            this.form.nama_lengkap = response.data.nama_lengkap
            this.form.posisi_jabatan = response.data.posisi_jabatan
            this.form.email = response.data.email
            this.form.handphone = response.data.handphone
            this.form.alamat = response.data.alamat
            this.form.no_npwp = response.data.no_npwp
            this.form.no_ktp = response.data.no_ktp
            this.form.status_pekerja = response.data.status_pekerja
            this.form.gaji = response.data.gaji
            this.form.nama_bank_rekening_gaji = response.data.nama_bank_rekening_gaji
            this.form.no_rekening_gaji = response.data.no_rekening_gaji
            this.form.atas_nama_rekening_gaji = response.data.atas_nama_rekening_gaji
            this.form.tanggal_join = response.data.tanggal_join
            this.form.tanggal_resign = response.data.tanggal_resign
        }).catch((err) => {
            console.log(err.response)
        });
    },
    methods: {
        updateForm(){
            const id = this.$route.params.id;
            axios.post('https://werp-api.pt-gti.co.id/api/karyawan/' +id, this.form)
                .then((response) => {
                    //Perform Success Action
                    // console.log(response.data);
                    location.href = '/karyawan';
                })
                .catch((error) => {
                    // error.response.status Check status code
                    console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        },
        currentDateTime(date) {
            return moment(date).format('YYYY-MM-DD')
        },
        currentDateTime2(date) {
            return moment(date).format('DD-MM-YYYY')
        },
    }
}
</script>