<template>
    <theme-table :route="'ClientsCreate'" :permisName="'Client Create'" @input="Searching">
        <span slot="main-title">
            {{ $t('Clients') }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr>
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Profile") }}</th>
                            <th>{{ $t("Code") }}</th>
                            <th>{{ $t("Name") }}</th>
                            <th>{{ $t("Name EN") }}</th>
                            <th>{{ $t("Gender") }}</th>
                            <th>{{ $t("Phone") }}</th>
                            <th>{{ $t("Type Card") }}</th>
                            <th>{{ $t("ID Card") }}</th>
                            <th>{{ $t("DateOfBirth") }}</th>
                            <th>{{ $t("Created By") }}</th>
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(client, index) in dataClients.data" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>
                                <a :href="client.photo">
                                    <img v-bind:src="'/'+ client.photo"
                                    style="width: 40px !important;height: 40px !important;-o-object-fit: cover;object-fit: cover;border-radius: 50%;">
                                </a>
                            </td>
                            <td>{{ client.code }}</td>
                            <td>{{ client.name }}</td>
                            <td>{{ client.name_en }}</td>
                            <td>{{ client.gender==1?'ប្រុស':'ស្រី' }}</td>
                            <td>{{ client.phone }}</td>
                            <td>{{ funTypeCard(client.type_document) }}</td>
                            <td>{{ client.id_card }}</td>
                            <td>{{ client.date_of_birth | onlyDate}}</td>
                            <td>{{ client.created_by}}</td>
                            <td>
                                <router-link v-if="$can('Client Edit')" :to="{ name: 'ClientsCreate',params:{id:client.id} }" :title="$t('Edit')" class="btn btn-dark s-btn-xs">
                                    <i class="fa-solid fa-pen-to-square fa-sm"></i>
                                </router-link>
                                <button type="button" :title="$t('Show')" @click="funShowInfo(client.id)" class="btn btn-success s-btn-xs">
                                    <i class="fa-solid fa-eye fa-sm"></i>
                                </button>
                                <button v-if="$can('Client Delete')" type="button" :title="$t('Delete')" @click="funDelete(client.id)" class="btn btn-danger s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataClients" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>

        <div slot="modal-custom">
            <div class="fade modal" id="showClientModal" aria-hidden="true" role="dialog" data-backdrop="static">
                <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><strong>{{$t('Show Information')}}</strong></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="menu">
                                <ul class="nav nav-underline mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active required" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">ព័ត៌មានអតិថិជន</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">ព័ត៌មានអ្នករួមខ្ចី</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-one-tab" data-bs-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="false">ព័ត៌មានអ្នកធានា</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-one-tab" data-bs-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">ព័ត៌មានអ្នកធានា</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                        <div class="row px-3 pt-2" v-if="clients!=null">
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Name')}} : {{clients.name}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Gender')}} : {{clients.gender==1?'ប្រុស':'ស្រី'}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Type Card')}} : {{funTypeCard(clients.type_document)}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('ID Card')}} : {{clients.id_card}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Issued By')}} : {{clients.issued_by}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Date of Birth')}} : {{clients.date_of_birth | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Create Card Date')}} : {{clients.create_card_date | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expire Card Date')}} : {{clients.expired_card_date | onlyDate}}
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Income')}} : {{clients.income | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expense')}} : {{clients.expense | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Balance')}} : {{clients.balance | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Institution')}} : {{clients.institution}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Position')}} : {{clients.position}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Work Place')}} : {{clients.work_place}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Relationship')}} : {{clients.relationship}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Phone')}} : {{clients.phone}}
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    {{$t('Address')}}:
                                                    <span v-if="clients.village_id">ភូមិ{{clients.village_kh}}</span>
                                                    <span v-if="clients.commune_id">ឃុំ/សង្កាត់{{clients.commune_kh}}</span>
                                                    <span v-if="clients.district_id">ស្រុក/ខណ្ឌ{{clients.district_kh}}</span>
                                                    <span v-if="clients.province_id">ខេត្ត/រាជធានី{{clients.province_kh}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="row px-3 pt-2" v-if="client_relate!=null">
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Name')}} : {{client_relate.name}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Gender')}} : {{client_relate.gender==1?'ប្រុស':'ស្រី'}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Type Card')}} : {{funTypeCard(client_relate.type_document)}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('ID Card')}} : {{client_relate.id_card}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Issued By')}} : {{client_relate.issued_by}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Date of Birth')}} : {{client_relate.date_of_birth | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Create Card Date')}} : {{client_relate.create_card_date | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expire Card Date')}} : {{client_relate.expired_card_date | onlyDate}}
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Income')}} : {{client_relate.income | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expense')}} : {{client_relate.expense | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Balance')}} : {{client_relate.balance | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Institution')}} : {{client_relate.institution}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Position')}} : {{client_relate.position}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Work Place')}} : {{client_relate.work_place}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Relationship')}} : {{client_relate.relationship}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Phone')}} : {{client_relate.phone}}
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    {{$t('Address')}}:
                                                    <span v-if="client_relate.village_id">ភូមិ{{client_relate.village_kh}}</span>
                                                    <span v-if="client_relate.commune_id">ឃុំ/សង្កាត់{{client_relate.commune_kh}}</span>
                                                    <span v-if="client_relate.district_id">ស្រុក/ខណ្ឌ{{client_relate.district_kh}}</span>
                                                    <span v-if="client_relate.province_id">ខេត្ត/រាជធានី{{client_relate.province_kh}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                                        <div class="row px-3 pt-2" v-if="guarantor_one!=null">
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Name')}} : {{guarantor_one.name}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Gender')}} : {{guarantor_one.gender==1?'ប្រុស':'ស្រី'}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Type Card')}} : {{funTypeCard(guarantor_one.type_document)}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('ID Card')}} : {{guarantor_one.id_card}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Issued By')}} : {{guarantor_one.issued_by}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Date of Birth')}} : {{guarantor_one.date_of_birth | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Create Card Date')}} : {{guarantor_one.create_card_date | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expire Card Date')}} : {{guarantor_one.expired_card_date | onlyDate}}
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Income')}} : {{guarantor_one.income | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expense')}} : {{guarantor_one.expense | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Balance')}} : {{guarantor_one.balance | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Institution')}} : {{guarantor_one.institution}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Position')}} : {{guarantor_one.position}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Work Place')}} : {{guarantor_one.work_place}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Relationship')}} : {{guarantor_one.relationship}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Phone')}} : {{guarantor_one.phone}}
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    {{$t('Address')}}:
                                                    <span v-if="guarantor_one.village_id">ភូមិ{{guarantor_one.village_kh}}</span>
                                                    <span v-if="guarantor_one.commune_id">ឃុំ/សង្កាត់{{guarantor_one.commune_kh}}</span>
                                                    <span v-if="guarantor_one.district_id">ស្រុក/ខណ្ឌ{{guarantor_one.district_kh}}</span>
                                                    <span v-if="guarantor_one.province_id">ខេត្ត/រាជធានី{{guarantor_one.province_kh}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                                        <div class="row px-3 pt-2" v-if="guarantor_two!=null">
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Name')}} : {{guarantor_two.name}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Gender')}} : {{guarantor_two.gender==1?'ប្រុស':'ស្រី'}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Type Card')}} : {{funTypeCard(guarantor_two.type_document)}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('ID Card')}} : {{guarantor_two.id_card}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Issued By')}} : {{guarantor_two.issued_by}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Date of Birth')}} : {{guarantor_two.date_of_birth | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Create Card Date')}} : {{guarantor_two.create_card_date | onlyDate}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expire Card Date')}} : {{guarantor_two.expired_card_date | onlyDate}}
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    {{$t('Income')}} : {{guarantor_two.income | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Expense')}} : {{guarantor_two.expense | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Balance')}} : {{guarantor_two.balance | numberFomartValue}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Institution')}} : {{guarantor_two.institution}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Position')}} : {{guarantor_two.position}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Work Place')}} : {{guarantor_two.work_place}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Relationship')}} : {{guarantor_two.relationship}}
                                                </div>
                                                <div class="mb-3">
                                                    {{$t('Phone')}} : {{guarantor_two.phone}}
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    {{$t('Address')}}:
                                                    <span v-if="guarantor_two.village_id">ភូមិ{{guarantor_two.village_kh}}</span>
                                                    <span v-if="guarantor_two.commune_id">ឃុំ/សង្កាត់{{guarantor_two.commune_kh}}</span>
                                                    <span v-if="guarantor_two.district_id">ស្រុក/ខណ្ឌ{{guarantor_two.district_kh}}</span>
                                                    <span v-if="guarantor_two.province_id">ខេត្ត/រាជធានី{{guarantor_two.province_kh}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{$t('Close')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import CumstomPagination from "../../components/CustomPagination.vue";
    import HeaderReport from "../../components/report/header.vue";
    import FooterReport from "../../components/report/footer.vue";
    import ThemeTable from '../../components/ThemeTable.vue';
    export default {
        components: {
            CumstomPagination,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                dataClients : {data:[]},
                // Show File
                clients      : "",
                client_relate: "",
                guarantor_one: "",
                guarantor_two: "",
                form: new Form({

                }),
                params: {
                    search_text: "",
                    page: 1,
                    per_page: 25,
                },
            };
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("admin-api/clients", {
                    params: this.params,
                }).then((res) => {
                    this.dataClients = res.data;
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            Searching(e) {
                this.params.search_text = e.target.value;
                this.funGetData();
            },
            funTypeCard(card) {
                if (card == 1) {
                    return "អត្តសញ្ញាណប័ណ្ណ";
                } else if (card == 2) {
                    return "សៀវភៅគ្រួសារ";
                } else if (card == 3) {
                    return "សៀវភៅស្នាក់នៅ";
                } else if (card == 4) {
                    return "លិខិតឆ្លងដែន";
                } else {
                    return "សំបុត្រកំណើត";
                }
            },
            funShowInfo(id) {
                $("#showClientModal").modal("show");
                axios.get("admin-api/clients/create", {
                    params: { id: id },
                }).then((res) => {
                    if (res.data.status == 1) {
                        this.clients       = res.data.client;
                        this.client_relate = res.data.client_relate;
                        this.guarantor_one = res.data.guarantor_one;
                        this.guarantor_two = res.data.guarantor_two;
                    }
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            funDelete(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.delete("admin-api/clients/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
        },
    };
</script>
