<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid w-auto g-mb-25">
            <h2 class="text-center g-py-20">Karyawan</h2>
            <div class="row">
                <div class="text-right col-12 col-md-12 col-lg-12 g-mb-20">
                    <router-link to="/tambahkaryawan" class="btn btn-md btn-orange" v-if="getPermissions.includes('create-karyawan')">
                        Tambah Karyawan
                    </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 karyawan" id="myInput" onkeyup="searchFilterKaryawan()">
                                        <!-- <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 Lengkap</th>
                                        <th>Posisi Jabatan</th>
                                        <th>Email</th>
                                        <th>Handphone</th>
                                        <th>Alamat</th>
                                        <th>No NPWP</th>
                                        <th>No KTP</th>
                                        <th>Status Pekerja</th>
                                        <th>Gaji</th>
                                        <th>Nama Bank Rekening Gaji</th>
                                        <th>No Rekening Gaji</th>
                                        <th>Atas Nama Rekening Gaji</th>
                                        <th>Tanggal Join</th>
                                        <th>Tanggal Resign</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="myUL">
                                    <tr v-for="(karyawan, index) in karyawan" :key="index">
                                        <td>{{ index+1 }}</td>
                                        <td>{{ karyawan.nama_lengkap }}</td>
                                        <td>{{ karyawan.posisi_jabatan }}</td>
                                        <td>{{ karyawan.email }}</td>
                                        <td>{{ karyawan.handphone }}</td>
                                        <td>{{ karyawan.alamat }}</td>
                                        <td>{{ karyawan.no_npwp }}</td>
                                        <td>{{ karyawan.no_ktp }}</td>
                                        <td>{{ karyawan.status_pekerja }}</td>
                                        <td>Rp {{ karyawan.gaji }}</td>
                                        <td>{{ karyawan.nama_bank_rekening_gaji }}</td>
                                        <td>{{ karyawan.no_rekening_gaji }}</td>
                                        <td>{{ karyawan.atas_nama_rekening_gaji }}</td>
                                        <td>{{ currentDateTime(karyawan.tanggal_join) }}</td>
                                        <td>{{ currentDateTime(karyawan.tanggal_resign) }}</td>
                                        <td>
                                            <ul class="action-list">
                                                <li><router-link v-if="getPermissions.includes('edit-karyawan')" v-bind:to="{ path: '/editkaryawan/' +karyawan.id}" data-tip="edit"><i class="fa fa-edit"></i></router-link></li>
                                                <li><router-link v-if="getPermissions.includes('delete-karyawan')" @click="deleteKaryawan(karyawan.id)" to="" data-tip="delete"><i class="fa fa-trash"></i></router-link></li>
                                            </ul>
                                        </td>
                                    </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>
.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;
}

.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'
import moment from 'moment'

export default{
    components: {
        'app-header': Header
    },
    created() {
        this.getPermissions = JSON.parse(localStorage.getItem('permissions'));
        // console.log(this.getPermissions);
    },
    setup() {
        //reactive state
        let karyawan = ref([]);

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

        return {
            karyawan
        }
    },
    methods: {
        deleteKaryawan($id) {
            if(confirm("Apakah Anda yakin untuk dihapus ?")) {
                axios.delete('https://werp-api.pt-gti.co.id/api/karyawan/' +$id)
                .then((response) => {
                    // console.log(response.data)
                    location.href = '/karyawan';
                }).catch((err) => {
                    console.log(err.response)
                });
            }
        },
        currentDateTime(date) {
            return moment(date).format('Do MMMM YYYY')
        },
    }
}
</script>