<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                <router-link :to="{ name: 'Clients' }">{{ $t('Client and Guarantee') }}</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-client-tab" data-bs-toggle="pill" href="#pills-client" role="tab" aria-controls="pills-client" aria-selected="true">
                            ព័ត៍មានអ្នកខ្ចី
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="text-nowrap nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-guarantor" role="tab" aria-controls="pills-guarantor" aria-selected="false">
                            ព័ត៍មានអ្នកធានា
                        </a>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-client" role="tabpanel" aria-labelledby="pills-client-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 text-center text-white p-1" style="background-color:#6b9d6b;"><strong>អ្នកខ្ចី</strong></div>
                                <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('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('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('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('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('Issued By') }}</label>
                                    <Multiselect
                                        v-model="form.client.issued_by"
                                        :placeholder="$t('Issued By')"
                                        :class="{ 'is-invalid': form.errors.has(['client.issued_by']) }"
                                        trackBy="issued_by"
                                        value="id"
                                        label="issued_by"
                                        :searchable="true" 
                                        :options="[
                                        { value: 1, issued_by:'ក្រសួងមហាផ្ទៃ'},
                                        { value: 2, issued_by:'អធិការដ្ឋាន,ប៉ុស្តិ៍រដ្ឋបាល'},
                                        { value: 3, issued_by:'មន្រ្តីអត្រានុកូលដ្ឋាន'},
                                        { value: 4, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                    ]"
                                    />
                                    <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('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('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('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('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('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>
                            <!-- អ្នករួមខ្ចី -->
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3 text-center text-white p-1" style="background-color:#6b9d6b;"><strong>អ្នករួមខ្ចី</strong></div>


                                <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')" :class="{ 'is-invalid': form.errors.has(['client_relate.name']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client_relate.name'])" v-html="form.errors.get(['client_relate.name'])"></div>
                                </div>
                                <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('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.client_relate.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :class="{ 'is-invalid': form.errors.has(['client_relate.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_relate.gender'])" v-html="form.errors.get(['client_relate.gender'])"></div>
                                </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')"
                                        :class="{ 'is-invalid': form.errors.has(['client_relate.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_relate.type_document'])" v-html="form.errors.get(['client_relate.type_document'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <Multiselect
                                        v-model="form.client_relate.issued_by"
                                        :placeholder="$t('Issued By')"
                                        :class="{ 'is-invalid': form.errors.has(['client_relate.issued_by']) }"
                                        trackBy="issued_by"
                                        value="id"
                                        label="issued_by"
                                        :searchable="true"
                                        :options="[
                                        { value: 1, issued_by:'ក្រសួងមហាផ្ទៃ'},
                                        { value: 2, issued_by:'អធិការដ្ឋាន,ប៉ុស្តិ៍រដ្ឋបាល'},
                                        { value: 3, issued_by:'មន្រ្តីអត្រានុកូលដ្ឋាន'},
                                        { value: 4, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                    ]"
                                    />
                                </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')" :class="{ 'is-invalid': form.errors.has(['client_relate.id_card']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client_relate.id_card'])" v-html="form.errors.get(['client_relate.id_card'])"></div>
                                </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 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('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.client_relate.phone" :placeholder="$t('Phone')" :class="{ 'is-invalid': form.errors.has(['client_relate.phone']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['client_relate.phone'])" v-html="form.errors.get(['client_relate.phone'])"></div>
                                </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('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 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>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3" style="visibility: hidden;">AAA</div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Profile')}}</label>
                                            <ImageCropper
                                                @croped="handleProfile"
                                                :modalId="'1'"
                                                :croppedImage="this.form.client.photo"
                                            />
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Image')}}</label>
                                            <ImageCropper
                                                @croped="handleImage"
                                                :modalId="'2'"
                                                :croppedImage="this.form.client.image"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3 mt-3">
                                    <label class="form-label">{{ $t('Accommodation') }}</label>
                                    <Multiselect
                                        v-model="form.client.accommodation"
                                        :placeholder="$t('Accommodation')"
                                        trackBy="accommodation" value="id" label="accommodation"
                                        :searchable="true" :options="[
                                            { value: 1, accommodation: 'ផ្ទះផ្ទាល់ខ្លួន' },
                                            { value: 2, accommodation: 'ផ្ទះជួល/បន្ទប់ជួល' },
                                            { value: 3, accommodation: 'ផ្សេងៗ' },
                                        ]" />
                                        <div class="valid text-danger" v-if="form.errors.has(['client.accommodation'])" v-html="form.errors.get(['client.accommodation'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('House No') }}</label>
                                    <input type="text" class="form-control" v-model="form.client.house_no" :placeholder="$t('House 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('House No')" />
                                </div>
                                <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('Home Map') }}</label>
                                    <textarea type="text" class="form-control" v-model="form.client.link_map_house" :placeholder="$t('Home Map')" :class="{ 'is-invalid': form.errors.has('Map') }" rows="1"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Business Map') }}</label>
                                    <textarea type="text" class="form-control" v-model="form.client.link_map_business" :placeholder="$t('Business Map')" :class="{ 'is-invalid': form.errors.has('Map') }" rows="1"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Google Map Latitude') }}</label>
                                    <input type="text"
                                        class="form-control"
                                        v-model="form.client.google_map_lat"
                                        :placeholder="$t('Latitude')"
                                        :class="{ 'is-invalid': form.errors.has('google_map_lat') }">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Google Map Longitude') }}</label>
                                    <input type="text"
                                        class="form-control"
                                        v-model="form.client.google_map_lng"
                                        :placeholder="$t('Longitude')"
                                        :class="{ 'is-invalid': form.errors.has('google_map_lng') }">
                                </div>

                                <!-- <div class="mb-3">
                                    <label class="form-label">{{ $t('Google Map URL') }}</label>
                                    <textarea class="form-control"
                                            v-model="form.client.google_map_url"
                                            :placeholder="$t('Google Map URL')"
                                            :class="{ 'is-invalid': form.errors.has('google_map_url') }"
                                            rows="2"></textarea>
                                </div> -->

                                <!-- <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Profile')}}</label>
                                            <ImageCropper
                                                @croped="handleProfile"
                                                :modalId="'1'"
                                                :croppedImage="this.form.client.photo"
                                            />
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Image')}}</label>
                                            <ImageCropper
                                                @croped="handleImage"
                                                :modalId="'2'"
                                                :croppedImage="this.form.client.image"
                                            />
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <!-- ធានា -->
                    <div class="tab-pane fade" id="pills-guarantor" role="tabpanel" aria-labelledby="pills-guarantor-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 text-center text-white p-1" style="background-color:#6b9d6b;"><strong>អ្នកធានា</strong></div>
                                <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')" :class="{ 'is-invalid': form.errors.has(['guarantor_one.name']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_one.name'])" v-html="form.errors.get(['guarantor_one.name'])"></div>
                                </div>
                                <!-- <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('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_one.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_one.gender']) }"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_one.gender'])" v-html="form.errors.get(['guarantor_one.gender'])"></div>
                                </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')"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_one.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(['guarantor_one.type_document'])" v-html="form.errors.get(['guarantor_one.type_document'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_one.issued_by"
                                        :placeholder="$t('Issued By')"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_one.issued_by']) }"
                                        trackBy="issued_by"
                                        value="id"
                                        label="issued_by"
                                        :searchable="true"
                                        :options="[
                                        { value: 1, issued_by:'ក្រសួងមហាផ្ទៃ'},
                                        { value: 2, issued_by:'អធិការដ្ឋាន,ប៉ុស្តិ៍រដ្ឋបាល'},
                                        { value: 3, issued_by:'មន្រ្តីអត្រានុកូលដ្ឋាន'},
                                        { value: 4, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                    ]"
                                    />
                                </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')" :class="{ 'is-invalid': form.errors.has(['guarantor_one.id_card']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_one.id_card'])" v-html="form.errors.get(['guarantor_one.id_card'])"></div>
                                </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 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('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_one.phone" :placeholder="$t('Phone')" :class="{ 'is-invalid': form.errors.has(['guarantor_one.phone']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_one.phone'])" v-html="form.errors.get(['guarantor_one.phone'])"></div>
                                </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('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>

                            <!-- អ្នករួមធានា -->
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3 text-center text-white p-1" style="background-color:#6b9d6b;"><strong>អ្នករួមធានា</strong></div>
                                <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')" :class="{ 'is-invalid': form.errors.has(['guarantor_two.name']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_two.name'])" v-html="form.errors.get(['guarantor_two.name'])"></div>
                                </div>
                                <!-- <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('Gender') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_two.gender"
                                        :placeholder="$t('Gender')"
                                        trackBy="gender"
                                        value="id"
                                        label="gender"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_two.gender']) }"
                                        :searchable="true"
                                        :options="[{ value: 1, gender: $t('Male') }, { value: 2, gender:$t('Female') }]"
                                    />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_two.gender'])" v-html="form.errors.get(['guarantor_two.gender'])"></div>
                                </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')"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_two.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(['guarantor_two.type_document'])" v-html="form.errors.get(['guarantor_two.type_document'])"></div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Issued By') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_two.issued_by"
                                        :placeholder="$t('Issued By')"
                                        :class="{ 'is-invalid': form.errors.has(['guarantor_two.issued_by']) }"
                                        trackBy="issued_by"
                                        value="id"
                                        label="issued_by"
                                        :searchable="true"
                                        :options="[
                                        { value: 1, issued_by:'ក្រសួងមហាផ្ទៃ'},
                                        { value: 2, issued_by:'អធិការដ្ឋាន,ប៉ុស្តិ៍រដ្ឋបាល'},
                                        { value: 3, issued_by:'មន្រ្តីអត្រានុកូលដ្ឋាន'},
                                        { value: 4, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                    ]"
                                    />
                                </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')" :class="{ 'is-invalid': form.errors.has(['guarantor_two.id_card']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_two.id_card'])" v-html="form.errors.get(['guarantor_two.id_card'])"></div>
                                </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 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('Phone') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.phone" :placeholder="$t('Phone')" :class="{ 'is-invalid': form.errors.has(['guarantor_two.phone']) }" />
                                    <div class="valid text-danger" v-if="form.errors.has(['guarantor_two.phone'])" v-html="form.errors.get(['guarantor_two.phone'])"></div>
                                </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('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>
                            <div class="col-12 col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                                <div class="mb-3" style="visibility: hidden;">BBB</div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Profile')}}</label>
                                            <ImageCropper
                                                @croped="handleProfileGuarantor"
                                                :modalId="'3'"
                                                :croppedImage="this.form.guarantor_one.photo"
                                            />
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{$t('Image')}}</label>
                                            <ImageCropper
                                                @croped="handleImageGuarantor"
                                                :modalId="'4'"
                                                :croppedImage="this.form.guarantor_one.image"
                                            />
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 mt-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 class="mb-3">
                                    <label class="form-label">{{ $t('Accommodation') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.accommodation" :placeholder="$t('Accommodation')" />
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Accommodation') }}</label>
                                    <Multiselect
                                        v-model="form.guarantor_two.accommodation"
                                        :placeholder="$t('Accommodation')"
                                        trackBy="accommodation" value="id" label="accommodation"
                                        :searchable="true" :options="[
                                            { value: 1, accommodation: 'ផ្ទះផ្ទាល់ខ្លួន' },
                                            { value: 2, accommodation: 'ផ្ទះជួល/បន្ទប់ជួល' },
                                            { value: 3, accommodation: 'ផ្សេងៗ' },
                                        ]" />
                                </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('Street No') }}</label>
                                    <input type="text" class="form-control" v-model="form.guarantor_two.street_no" :placeholder="$t('House No')" />
                                </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('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 theme="dark" 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('Home Map') }}</label>
                                    <textarea type="text" class="form-control" v-model="form.guarantor_one.link_map_house" :placeholder="$t('Home Map')" :class="{ 'is-invalid': form.errors.has('Map') }" rows="1"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Business Map') }}</label>
                                    <textarea type="text" class="form-control" v-model="form.guarantor_one.link_map_business" :placeholder="$t('Business Map')" :class="{ 'is-invalid': form.errors.has('Map') }" rows="1"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{$t('Profile')}}</label>
                                    <button type="button" @click="toggleShow" class="w-100 bg-body-tertiary rounded-3 border-0 ">
                                        <div class="upload-image" v-if="this.form.guarantor_one.photo == '' ">
                                            <div class="text-center">
                                                <p class="mb-3"><i class="fa-solid fa-arrow-up-from-bracket fa-2xl text-body-tertiary"></i></p>
                                                <p class="text-secondary">Browse File</p>
                                            </div>
                                        </div>
                                        <div v-else class="upload-image bg-body-tertiary border-0">
                                            <img :src="this.form.guarantor_one.photo" alt="Uploaded Image" />
                                        </div>
                                    </button>
                                    <my-upload field="img" :langType="'en'" v-model="showLogo" @crop-success="cropClient"></my-upload>
                                </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 ThemeTable from "../../components/ThemeTable.vue";
    import ImageCropper from "../../components/ImageCropper.vue";
    export default {
        props: ["id"],
        components: {
            ThemeTable,
            ImageCropper,
        },
        data() {
            return {
                provinces: [],
                districts: [], 
                communes : [],
                villages : [],
                // GuarantorOne
                province_guarantor_one: [],
                district_guarantor_one: [],
                commune_guarantor_one : [],
                village_guarantor_one : [],
                form: new Form({
                    client: {
                        id: "",
                        code: "",
                        name: "",
                        name_en: "",
                        gender: 1,
                        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: "",
                        image: "",
                        income: 0,
                        expense: 0,
                        balance: 0,
                        province_id: "",
                        district_id: "",
                        commune_id: "",
                        village_id: "",
                        accommodation:"",
                        link_map_house: "",
                        link_map_business:"",
                        google_map_lat: "",
                        google_map_lng: "",
                        google_map_url: "",
                    },
                    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: "",
                        photo: "",
                        image: "",
                    },
                    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: "",
                        accommodation:"",
                        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) {
                        if(res.data.branch_id !=res.data.client.branch_id){
                            this.$toast.warning("អតិថិជនមិនស្ថិតនៅក្នុងសាខានេះទេ!");
                            this.$router.push({name:'Clients'})
                        } else{
                            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();
                    // GuarantorOne
                    this.fProGuarantorOne();
                    this.fDistGuarantorOne();
                    this.fCommGuarantorOne();
                    this.fVillGuarantorOne();
                }).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;
            },
            handleProfile(croppedImageUrl) {
                this.form.client.photo = croppedImageUrl;
            },
            handleImage(croppedImageUrl) {
                this.form.client.image = croppedImageUrl;
            },
            handleProfileGuarantor(croppedImageUrl) {
                this.form.guarantor_one.photo = croppedImageUrl;
            },

            handleImageGuarantor(croppedImageUrl) {
                this.form.guarantor_one.image = croppedImageUrl;
            },
            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)
                    );
            },
            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)
                    );
            },
        },
    };
</script>