<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                <router-link :to="{ name: 'Clients' }">{{ $t('Client') }}</router-link>
                <label class="px-1">/</label>
                <label>{{ $t('Add New') }}</label>
            </div>
        </span>
        <div slot="body">
            <div class="menu">
                <ul class="nav flex-nowrap overflow-auto nav-underline mb-3 " id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="text-nowrap 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="text-nowrap nav-link" id="pills-two-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="text-nowrap nav-link" id="pills-profile-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="text-nowrap 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-0 pt-2">
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name') }}<sup class="text-danger">*</sup></label>
                                    <input type="text" class="form-control" v-model="form.client.name" :placeholder="$t('Name')" :class="{ 'is-invalid': form.errors.has(['client.name']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.name'])" v-html="form.errors.get(['client.name'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Gender') }}<sup class="text-danger">*</sup></label>
                                    <Multiselect
                                        v-model="form.client.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :class="{ 'is-invalid': form.errors.has(['client.gender']) }"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.gender'])" v-html="form.errors.get(['client.gender'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.phone" :placeholder="$t('Phone')" :class="{ 'is-invalid': form.errors.has(['client.phone']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.phone'])" v-html="form.errors.get(['client.phone'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Type Document') }}</label>
                                    <Multiselect
                                        v-model="form.client.type_document"
                                        :placeholder="$t('Type Document')"
                                        :class="{ 'is-invalid': form.errors.has(['client.type_document']) }"
                                        trackBy="type_document"
                                        value="id"
                                        label="type_document"
                                        :searchable="true"
                                        :options="[
                                        { value: 1, type_document:'អត្តសញ្ញាណប័ណ្ណ'},
                                        { value: 2, type_document:'សៀវភៅគ្រួសារ'},
                                        { value: 3, type_document:'សៀវភៅស្នាក់នៅ'},
                                        { value: 4, type_document:'លិខិតឆ្លងដែន'},
                                        { value: 5, type_document:'សំបុត្រកំណើត'},
                                    ]"
                                    />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.type_document'])" v-html="form.errors.get(['client.type_document'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('ID Card') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.id_card" :placeholder="$t('ID Card')" :class="{ 'is-invalid': form.errors.has(['client.id_card']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.id_card'])" v-html="form.errors.get(['client.id_card'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Date of Birth') }}</label>
                                    <date-picker v-model="form.client.date_of_birth" type="date" :placeholder="$t('Date of Birth')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Create Card Date') }}</label>
                                    <date-picker v-model="form.client.create_card_date" type="date" :placeholder="$t('Create Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expire Card Date') }}</label>
                                    <date-picker v-model="form.client.expired_card_date" type="date" :placeholder="$t('Expire Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.issued_by" :placeholder="$t('Issued By')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name EN') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.name_en" :placeholder="$t('Name EN')" />
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Client Code') }}<sup class="text-danger">*</sup></label>
                                    <input type="text" class="form-control" v-model="form.client.code" :placeholder="$t('Client Code')" :class="{ 'is-invalid': form.errors.has(['client.code']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client.code'])" v-html="form.errors.get(['client.code'])"></div>
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Income') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.income" :placeholder="$t('Income')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expense') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.expense" :placeholder="$t('Expense')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Balance') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.balance" :placeholder="$t('Balance')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Occupation') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.occupation" :placeholder="$t('Occupation')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Institution') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.institution" :placeholder="$t('Institution')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Position') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.position" :placeholder="$t('Position')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Work Place') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.work_place" :placeholder="$t('Work Place')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Relationship') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.relationship" :placeholder="$t('Relationship')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Province') }}</label>
                                    <Multiselect v-model="form.client.province_id" :placeholder="$t('Province')" label="full_name_km" :searchable="true" :options="provinces" @input="getDistrictClient" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('District') }}</label>
                                    <Multiselect v-model="form.client.district_id" :placeholder="$t('District')" label="full_name_km" :searchable="true" :options="districts" @input="getCommuneClient" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Commune') }}</label>
                                    <Multiselect v-model="form.client.commune_id" :placeholder="$t('Commune')" label="full_name_km" :searchable="true" :options="communes" @input="getVillageClient" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Village') }}</label>
                                    <Multiselect theme="dark" v-model="form.client.village_id" :placeholder="$t('Village')" label="full_name_km" :searchable="true" :options="villages" />
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Place of Birth') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.place_of_birth" :placeholder="$t('Place of Birth')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Group No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.group_no" :placeholder="$t('Group No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Street No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.street_no" :placeholder="$t('Street No')" />
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{$t('Profile')}}</label>

                                    <ImageCropper @croped="handlePhoto" :modalId="'1'" :croppedImage="this.form.client.photo"/>

                                  
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- អ្នករួមខ្ចី-->
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div class="row px-0 pt-2">
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.name" :placeholder="$t('Name')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.client_relate.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.phone" :placeholder="$t('Phone')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Date of Birth') }}</label>
                                    <date-picker v-model="form.client_relate.date_of_birth" type="date" :placeholder="$t('Date of Birth')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Type Document') }}</label>
                                    <Multiselect
                                        v-model="form.client_relate.type_document"
                                        :placeholder="$t('Type Document')"
                                        trackBy="type_document"
                                        value="id"
                                        label="type_document"
                                        :searchable="true"
                                        :options="[
                                            { value: 1, type_document:'អត្តសញ្ញាណប័ណ្ណ'},
                                            { value: 2, type_document:'សៀវភៅគ្រួសារ'},
                                            { value: 3, type_document:'សៀវភៅស្នាក់នៅ'},
                                            { value: 4, type_document:'លិខិតឆ្លងដែន'},
                                            { value: 5, type_document:'សំបុត្រកំណើត'},
                                        ]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('ID Card') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.id_card" :placeholder="$t('ID Card')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Create Card Date') }}</label>
                                    <date-picker v-model="form.client_relate.create_card_date" type="date" :placeholder="$t('Create Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expire Card Date') }}</label>
                                    <date-picker v-model="form.client_relate.expired_card_date" type="date" :placeholder="$t('Expire Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.issued_by" :placeholder="$t('Issued By')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name EN') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.name_en" :placeholder="$t('Name EN')" />
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Place of Birth') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.place_of_birth" :placeholder="$t('Place of Birth')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('House No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.house_no" :placeholder="$t('House No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Group No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.group_no" :placeholder="$t('Group No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Street No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.street_no" :placeholder="$t('Street No')" />
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Income') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.income" :placeholder="$t('Income')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expense') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.expense" :placeholder="$t('Expense')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Balance') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.balance" :placeholder="$t('Balance')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Occupation') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.occupation" :placeholder="$t('Occupation')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Institution') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.institution" :placeholder="$t('Institution')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Position') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.position" :placeholder="$t('Position')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Work Place') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.work_place" :placeholder="$t('Work Place')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Relationship') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.relationship" :placeholder="$t('Relationship')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Province') }}</label>
                                    <Multiselect v-model="form.client_relate.province_id" :placeholder="$t('Province')" label="full_name_km" :searchable="true" :options="province_client_relate" @input="fDistClientRelate" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('District') }}</label>
                                    <Multiselect v-model="form.client_relate.district_id" :placeholder="$t('District')" label="full_name_km" :searchable="true" :options="district_client_relate" @input="fCommClientRelate" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Commune') }}</label>
                                    <Multiselect v-model="form.client_relate.commune_id" :placeholder="$t('Commune')" label="full_name_km" :searchable="true" :options="commune_client_relate" @input="fVillClientRelate" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Village') }}</label>
                                    <Multiselect v-model="form.client_relate.village_id" :placeholder="$t('Village')" label="full_name_km" :searchable="true" :options="village_client_relate" />
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">{{$t('Profile')}}</label>
                                    <ImageCropper @croped="handlePhoto2" :modalId="'2'" :croppedImage="this.form.client_relate.photo"/>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- អ្នកធានាទី១-->
                    <div class="tab-pane fade" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                        <div class="row px-0 pt-2">
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.name" :placeholder="$t('Name')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_one.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.phone" :placeholder="$t('Phone')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Date of Birth') }}</label>
                                    <date-picker v-model="form.guarantor_one.date_of_birth" type="date" :placeholder="$t('Date of Birth')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Type Document') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_one.type_document"
                                        :placeholder="$t('Type Document')"
                                        trackBy="type_document"
                                        value="id"
                                        label="type_document"
                                        :searchable="true"
                                        :options="[
                                            { value: 1, type_document:'អត្តសញ្ញាណប័ណ្ណ'},
                                            { value: 2, type_document:'សៀវភៅគ្រួសារ'},
                                            { value: 3, type_document:'សៀវភៅស្នាក់នៅ'},
                                            { value: 4, type_document:'លិខិតឆ្លងដែន'},
                                            { value: 5, type_document:'សំបុត្រកំណើត'},
                                        ]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('ID Card') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.id_card" :placeholder="$t('ID Card')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Create Card Date') }}</label>
                                    <date-picker v-model="form.guarantor_one.create_card_date" type="date" :placeholder="$t('Create Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expire Card Date') }}</label>
                                    <date-picker v-model="form.guarantor_one.expired_card_date" type="date" :placeholder="$t('Expire Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.issued_by" :placeholder="$t('Issued By')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name EN') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.name_en" :placeholder="$t('Name EN')" />
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Place of Birth') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.place_of_birth" :placeholder="$t('Place of Birth')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('House No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.house_no" :placeholder="$t('House No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Group No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.group_no" :placeholder="$t('Group No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Street No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.street_no" :placeholder="$t('Street No')" />
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Occupation') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.occupation" :placeholder="$t('Occupation')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Income') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.income" :placeholder="$t('Income')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expense') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.expense" :placeholder="$t('Expense')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Balance') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.balance" :placeholder="$t('Balance')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Institution') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.institution" :placeholder="$t('Institution')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Position') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.position" :placeholder="$t('Position')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Work Place') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.work_place" :placeholder="$t('Work Place')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Relationship') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.relationship" :placeholder="$t('Relationship')" />
                                </div>
                            </div>

                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">

                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Province') }}</label>
                                    <Multiselect v-model="form.guarantor_one.province_id" :placeholder="$t('Province')" label="full_name_km" :searchable="true" :options="province_guarantor_one" @input="fDistGuarantorOne" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('District') }}</label>
                                    <Multiselect v-model="form.guarantor_one.district_id" :placeholder="$t('District')" label="full_name_km" :searchable="true" :options="district_guarantor_one" @input="fCommGuarantorOne" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Commune') }}</label>
                                    <Multiselect v-model="form.guarantor_one.commune_id" :placeholder="$t('Commune')" label="full_name_km" :searchable="true" :options="commune_guarantor_one" @input="fVillGuarantorOne" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Village') }}</label>
                                    <Multiselect v-model="form.guarantor_one.village_id" :placeholder="$t('Village')" label="full_name_km" :searchable="true" :options="village_guarantor_one" />
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">{{$t('Profile')}}</label>

                                    <ImageCropper @croped="handlePhoto3" :modalId="'3'" :croppedImage="this.form.guarantor_one.photo"/>
                                  
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- អ្នកធានាទី២-->
                    <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                        <div class="row px-0 pt-2">
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.name" :placeholder="$t('Name')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_two.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.phone" :placeholder="$t('Phone')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Date of Birth') }}</label>
                                    <date-picker v-model="form.guarantor_two.date_of_birth" type="date" :placeholder="$t('Date of Birth')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Type Document') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_two.type_document"
                                        :placeholder="$t('Type Document')"
                                        trackBy="type_document"
                                        value="id"
                                        label="type_document"
                                        :searchable="true"
                                        :options="[
                                            { value: 1, type_document:'អត្តសញ្ញាណប័ណ្ណ'},
                                            { value: 2, type_document:'សៀវភៅគ្រួសារ'},
                                            { value: 3, type_document:'សៀវភៅស្នាក់នៅ'},
                                            { value: 4, type_document:'លិខិតឆ្លងដែន'},
                                            { value: 5, type_document:'សំបុត្រកំណើត'},
                                        ]"
                                    />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('ID Card') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.id_card" :placeholder="$t('ID Card')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Create Card Date') }}</label>
                                    <date-picker v-model="form.guarantor_two.create_card_date" type="date" :placeholder="$t('Create Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expire Card Date') }}</label>
                                    <date-picker v-model="form.guarantor_two.expired_card_date" type="date" :placeholder="$t('Expire Card Date')" valueType="format" format="YYYY-MM-DD"> </date-picker>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.issued_by" :placeholder="$t('Issued By')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Name EN') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.name_en" :placeholder="$t('Name EN')" />
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Place of Birth') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.place_of_birth" :placeholder="$t('Place of Birth')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('House No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.house_no" :placeholder="$t('House No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Group No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.group_no" :placeholder="$t('Group No')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Street No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.street_no" :placeholder="$t('Street No')" />
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Income') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.income" :placeholder="$t('Income')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Expense') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.expense" :placeholder="$t('Expense')" @input="funIncome" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Balance') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.balance" :placeholder="$t('Balance')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Occupation') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.occupation" :placeholder="$t('Occupation')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Institution') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.institution" :placeholder="$t('Institution')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Position') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.position" :placeholder="$t('Position')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Work Place') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.work_place" :placeholder="$t('Work Place')" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Relationship') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.relationship" :placeholder="$t('Relationship')" />
                                </div>
                            </div>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">

                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Province') }}</label>
                                    <Multiselect v-model="form.guarantor_two.province_id" :placeholder="$t('Province')" label="full_name_km" :searchable="true" :options="province_guarantor_two" @input="fDistGuarantorTwo" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('District') }}</label>
                                    <Multiselect v-model="form.guarantor_two.district_id" :placeholder="$t('District')" label="full_name_km" :searchable="true" :options="district_guarantor_two" @input="fCommGuarantorTwo" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Commune') }}</label>
                                    <Multiselect v-model="form.guarantor_two.commune_id" :placeholder="$t('Commune')" label="full_name_km" :searchable="true" :options="commune_guarantor_two" @input="fVillGuarantorTwo" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Village') }}</label>
                                    <Multiselect v-model="form.guarantor_two.village_id" :placeholder="$t('Village')" label="full_name_km" :searchable="true" :options="village_guarantor_two" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{$t('Profile')}}</label>

                                    <ImageCropper @croped="handlePhoto4" :modalId="'4'" :croppedImage="this.form.guarantor_two.photo"/>

                                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button type="submit" :disabled="form.busy || form.submitting" class="btn btn-success" @click="submitData">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ $t('Submit') }}
                </button>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import ImageCropper from "../../components/ImageCropper.vue"; 
    import ThemeTable from "../../components/ThemeTable.vue";
    export default {
        props: ["id"],
        components: {
            ImageCropper,
            ThemeTable,
        },
        data() {
            return {
                provinces: [],
                districts: [],
                communes : [],
                villages : [],
                // ClientRelate
                province_client_relate: [],
                district_client_relate: [],
                commune_client_relate : [],
                village_client_relate : [],
                // GuarantorOne
                province_guarantor_one: [],
                district_guarantor_one: [],
                commune_guarantor_one : [],
                village_guarantor_one : [],
                // GuarantorTwo
                province_guarantor_two: [],
                district_guarantor_two: [],
                commune_guarantor_two : [],
                village_guarantor_two : [],

                form: new Form({
                    client: {
                        id: "",
                        code: "",
                        name: "",
                        name_en: "",
                        gender: "",
                        phone: "",
                        type_document: "",
                        id_card: "",
                        work_place: "",   
                        relationship: "",
                        issued_by: "",
                        position: "",
                        house_no: "",
                        group_no: "",
                        street_no: "",
                        occupation: "",
                        institution: "",
                        place_of_birth: "",
                        date_of_birth: "",
                        create_card_date: "",
                        expired_card_date: "",
                        photo: "",
                        income: 0,
                        expense: 0,
                        balance: 0,
                        province_id: "",
                        district_id: "",
                        commune_id: "",
                        village_id: "",
                    },
                    client_relate: {
                        id: "",
                        code: "",
                        name: "",
                        name_en: "",
                        gender: "",
                        phone: "",
                        type_document: "",
                        id_card: "",
                        work_place: "",
                        relationship: "",
                        issued_by: "",
                        position: "",
                        house_no: "",
                        group_no: "",
                        street_no: "",
                        occupation: "",
                        institution: "",
                        place_of_birth: "",
                        date_of_birth: "",
                        create_card_date: "",
                        expired_card_date: "",
                        photo: "",
                        income: 0,
                        expense: 0,
                        balance: 0,
                        province_id: "",
                        district_id: "",
                        commune_id: "",
                        village_id: "",
                    },
                    guarantor_one: {
                        id: "",
                        code: "",
                        name: "",
                        name_en: "",
                        gender: "",
                        phone: "",
                        type_document: "",
                        id_card: "",
                        work_place: "",
                        relationship: "",
                        issued_by: "",
                        position: "",
                        house_no: "",
                        group_no: "",
                        street_no: "",
                        occupation: "",
                        institution: "",
                        place_of_birth: "",
                        date_of_birth: "",
                        create_card_date: "",
                        expired_card_date: "",
                        photo: "",
                        income: 0,
                        expense: 0,
                        balance: 0,
                        province_id: "",
                        district_id: "",
                        commune_id: "",
                        village_id: "",
                    },
                    guarantor_two: {
                        id: "",
                        code: "",
                        name: "",
                        name_en: "",
                        gender: "",
                        phone: "",
                        type_document: "",
                        id_card: "",
                        work_place: "",
                        relationship: "",
                        issued_by: "",
                        position: "",
                        house_no: "",
                        group_no: "",
                        street_no: "",
                        occupation: "",
                        institution: "",
                        place_of_birth: "",
                        date_of_birth: "",
                        create_card_date: "",
                        expired_card_date: "",
                        photo: "",
                        income: 0,
                        expense: 0,
                        balance: 0,
                        province_id: "",
                        district_id: "",
                        commune_id: "",
                        village_id: "",
                    },
                    submitting : false,
                }),
            };
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData() {
                axios.get("admin-api/clients/create", {
                    params: { id: this.id, is_details: 1 },
                }).then((res) => {
                    if (res.data.status == 1) {
                        this.form.client        = res.data.client;
                        this.form.client_relate = res.data.client_relate ?? this.form.client_relate;
                        this.form.guarantor_one = res.data.guarantor_one ?? this.form.guarantor_one;
                        this.form.guarantor_two = res.data.guarantor_two ?? this.form.guarantor_two;
                    }
                    // Client
                    this.getProvinceClient();
                    this.getDistrictClient();
                    this.getCommuneClient();
                    this.getVillageClient();
                    // ClientRelate
                    this.fProClientRelate();
                    this.fDistClientRelate();
                    this.fCommClientRelate();
                    this.fVillClientRelate();
                    // GuarantorOne
                    this.fProGuarantorOne();
                    this.fDistGuarantorOne();
                    this.fCommGuarantorOne();
                    this.fVillGuarantorOne();
                    // GuarantorTwo
                    this.fProGuarantorTwo();
                    this.fDistGuarantorTwo();
                    this.fCommGuarantorTwo();
                    this.fVillGuarantorTwo();
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            funIncome() {
                this.form.client.balance       = this.form.client.income - this.form.client.expense;
                this.form.client_relate.balance= this.form.client_relate.income - this.form.client_relate.expense;
                this.form.guarantor_one.balance= this.form.guarantor_one.income - this.form.guarantor_one.expense;
                this.form.guarantor_two.balance= this.form.guarantor_two.income - this.form.guarantor_two.expense;
            },
            

            handlePhoto(imgDataUrl) {
                this.form.client.photo = imgDataUrl;
            },
            handlePhoto2(imgDataUrl) {
                this.form.client_relate.photo = imgDataUrl;
            },
            handlePhoto3(imgDataUrl) {
                this.form.guarantor_one.photo = imgDataUrl;
            },
            handlePhoto4(imgDataUrl) {
                this.form.guarantor_two.photo = imgDataUrl;
            },

            submitData() {
                if (this.form.submitting) {
                    return;
                }   
                this.form.submitting = true;
                this.form
                    .post("admin-api/clients")
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.$toast.success(res.data.message);
                            this.$router.push({ name: "Clients" });
                        } else {
                            this.$toast.warning(res.data.message);
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$toast.warning(res.data.message);
                    }).finally(() => {
                        this.form.submitting = false;
                    });
            },
            getProvinceClient: function () {
                axios.get("/admin-api/get-provinces").then(
                    function (response) {
                        this.provinces = response.data;
                    }.bind(this)
                );
            },
            getDistrictClient: function () {
                axios
                    .get("/admin-api/get-districts", {
                        params: { province_id: this.form.client.province_id },
                    })
                    .then(
                        function (response) {
                            this.districts = response.data;
                        }.bind(this)
                    );
            },
            getCommuneClient: function () {
                axios
                    .get("/admin-api/get-communes", {
                        params: { district_id: this.form.client.district_id },
                    })
                    .then(
                        function (response) {
                            this.communes = response.data;
                        }.bind(this)
                    );
            },
            getVillageClient: function () {
                axios
                    .get("/admin-api/get-villages", {
                        params: { commune_id: this.form.client.commune_id },
                    })
                    .then(
                        function (response) {
                            this.villages = response.data;
                        }.bind(this)
                    );
            },
            fProClientRelate: function () {
                axios.get("/admin-api/get-provinces").then(
                    function (response) {
                        this.province_client_relate = response.data;
                    }.bind(this)
                );
            },
            fDistClientRelate: function () {
                axios
                    .get("/admin-api/get-districts", {
                        params: { province_id: this.form.client_relate.province_id },
                    })
                    .then(
                        function (response) {
                            this.district_client_relate = response.data;
                        }.bind(this)
                    );
            },
            fCommClientRelate: function () {
                axios
                    .get("/admin-api/get-communes", {
                        params: { district_id: this.form.client_relate.district_id },
                    })
                    .then(
                        function (response) {
                            this.commune_client_relate = response.data;
                        }.bind(this)
                    );
            },
            fVillClientRelate: function () {
                axios
                    .get("/admin-api/get-villages", {
                        params: { commune_id: this.form.client_relate.commune_id },
                    })
                    .then(
                        function (response) {
                            this.village_client_relate = response.data;
                        }.bind(this)
                    );
            },
            fProGuarantorOne: function () {
                axios.get("/admin-api/get-provinces").then(
                    function (response) {
                        this.province_guarantor_one = response.data;
                    }.bind(this)
                );
            },
            fDistGuarantorOne: function () {
                axios
                    .get("/admin-api/get-districts", {
                        params: { province_id: this.form.guarantor_one.province_id },
                    })
                    .then(
                        function (response) {
                            this.district_guarantor_one = response.data;
                        }.bind(this)
                    );
            },
            fCommGuarantorOne: function () {
                axios
                    .get("/admin-api/get-communes", {
                        params: { district_id: this.form.guarantor_one.district_id },
                    })
                    .then(
                        function (response) {
                            this.commune_guarantor_one = response.data;
                        }.bind(this)
                    );
            },
            fVillGuarantorOne: function () {
                axios
                    .get("/admin-api/get-villages", {
                        params: { commune_id: this.form.guarantor_one.commune_id },
                    })
                    .then(
                        function (response) {
                            this.village_guarantor_one = response.data;
                        }.bind(this)
                    );
            },
            fProGuarantorTwo: function () {
                axios.get("/admin-api/get-provinces").then(
                    function (response) {
                        this.province_guarantor_two = response.data;
                    }.bind(this)
                );
            },
            fDistGuarantorTwo: function () {
                axios
                    .get("/admin-api/get-districts", {
                        params: { province_id: this.form.guarantor_two.province_id },
                    })
                    .then(
                        function (response) {
                            this.district_guarantor_two = response.data;
                        }.bind(this)
                    );
            },
            fCommGuarantorTwo: function () {
                axios
                    .get("/admin-api/get-communes", {
                        params: { district_id: this.form.guarantor_two.district_id },
                    })
                    .then(
                        function (response) {
                            this.commune_guarantor_two = response.data;
                        }.bind(this)
                    );
            },
            fVillGuarantorTwo: function () {
                axios
                    .get("/admin-api/get-villages", {
                        params: { commune_id: this.form.guarantor_two.commune_id },
                    })
                    .then(
                        function (response) {
                            this.village_guarantor_two = response.data;
                        }.bind(this)
                    );
            },
        },
    };
</script>