<template>
    <section>
        <h1 class="text-center g-py-20 g-mb-30">Tambah Karyawan</h1>
        <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="" v-on:submit.prevent="submitForm" enctype="multipart/form-data">
                            <div class="form-group g-mb-15">
                                <label for="nama_lengkap">Nama Lengkap</label>
                                <input type="text" class="form-control" id="nama_lengkap" placeholder="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="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="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="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="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="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="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="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="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="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="text" class="form-control" id="no_rekening_gaji" placeholder="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="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</label>
                                <input type="date" :formatter="currentDateTime('YYYY-MM-DD')" class="form-control" id="tanggal_join" placeholder="Tanggal Join" v-model="form.tanggal_join" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="tanggal_resign">Tanggal Resign</label>
                                <input type="date" :formatter="currentDateTime('YYYY-MM-DD')" class="form-control" id="tanggal_resign" placeholder="Tanggal Resign" v-model="form.tanggal_resign">
                            </div>
                            <button type="submit" class="btn btn-orange text-center g-mt-40 w-100">Tambah 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 moment from 'moment'

export default {
    name: 'PostFormAxios',
    data(){
        return{
            form: {
                nama_lengkap: '',
                posisi_jabatan: '',
                email: '',
                handphone: '62' + [],
                alamat: '',
                no_npwp: [],
                no_ktp: [],
                status_pekerja: '',
                gaji: [],
                nama_bank_rekening_gaji: '',
                no_rekening_gaji: [],
                atas_nama_rekening_gaji: '',
                tanggal_join: '',
                tanggal_resign: ''
            }
        }
    },
    methods:{
        submitForm(){
            axios.post('https://werp-api.pt-gti.co.id/api/karyawan', 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')
        },
    }
}
</script>