<template>
    <div class="new_item">
        <div class="container-fluid px-0">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card border-0">
                        <div class="card-body border-0  rounded_8">
                            <div class="d-flex justify-content-between">
                                <h5 class="text-koulen mb-3">
                                    <label>{{ $t('Collateral Information') }}</label>
                                </h5> 
                                
                            </div>
                            <div class="row align-items-center mb-3">
                                    <div class="col-auto pe-0">
                                        <label class="col-form-label">{{ $t('Client') }}<sup class="text-danger">*</sup></label>
                                    </div>
                                    <div class="col-auto position-relative">
                                        <Multiselect style="width: 200px;"  :placeholder="$t('Client')" v-model="form.client_id" trackBy="name" value="id" label="name" :class="{ 'is-invalid': form.errors.has('client_id') }" :searchable="true"  :options="clients" />
                                        <div class="invalid-tooltip text-danger bg-body" v-if="form.errors.has('client_id')" v-html="form.errors.get('client_id')"></div>
                                    </div>
                                    <div class="col-auto pe-0">
                                        <label class="col-form-label">{{ $t('Title') }}<sup class="text-danger">*</sup></label>
                                    </div>
                                    <div class="col-auto position-relative">
                                        <input class="form-control" style="width: 200px;"  :placeholder="$t('Title')" v-model="form.title" :class="{ 'is-invalid': form.errors.has('title') }"/>
                                        <div class="invalid-tooltip text-danger bg-body" v-if="form.errors.has('title')" v-html="form.errors.get('title')"></div>
                                    </div>
                                </div>
                            <div class="menu">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active required" id="pills-one-tab" data-bs-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">អចលនទ្រព្យ (១)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-two-tab" data-bs-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">អចលនទ្រព្យ (២)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-three-tab" data-bs-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">ឡាន</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-four-tab" data-bs-toggle="pill" href="#pills-four" role="tab" aria-controls="pills-four" aria-selected="false">ម៉ូតូ</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-five-tab" data-bs-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-five" aria-selected="false">
                                            គ្រឿងអេឡិចត្រូនិច & គ្រឿងអលង្ការ
                                        </a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-six-tab" data-bs-toggle="pill" href="#pills-six" role="tab" aria-controls="pills-six" aria-selected="false">
                                            ផ្សេងៗ
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.home.model_type"  :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('model_type') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.pawn_type" placeholder="ប្រភេទឯកសារកម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('pawn_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('pawn_type')" v-html="form.errors.get('pawn_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កាលបរិច្ឆេទចេញប័ណ្ណ</label>
                                                <date-picker v-model="form.home.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Issued By') }}</label>
                                                <Multiselect
                                                    v-model="form.home.issued_by"
                                                    :placeholder="$t('Issued By')"
                                                    :class="{ 'is-invalid': form.errors.has(['home.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:'មន្រ្តីភូមិបាល'},
                                                    { value: 5, issued_by:'ក្រសួងសាធារណៈការនិងដឹកជញ្ជូន'},
                                                    { value: 6, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                                ]"
                                                />
                                                <!-- <input type="text" class="form-control" v-model="form.home.issued_by" :placeholder="$t('Issued By')" :class="{ 'is-invalid': form.errors.has('issued_by') }"/> -->
                                                <div class="valid text-danger" v-if="form.errors.has('issued_by')" v-html="form.errors.get('issued_by')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Size Land') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.size" :placeholder="$t('Size Land')" :class="{ 'is-invalid': form.errors.has('size') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខក្បាលដី</label>
                                                <input type="text" class="form-control" v-model="form.home.head_land" placeholder="លេខក្បាលដី" :class="{ 'is-invalid': form.errors.has('head_land') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('head_land')" v-html="form.errors.get('head_land')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Location') }}</label>
                                                <suggestions v-model="form.home.location" :onInputChange="onCountryInputChange"
                                                    inputClass="form-control"></suggestions>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('North') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.north" :placeholder="$t('North')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('South') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.south" :placeholder="$t('South')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('East') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.east" :placeholder="$t('East')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('West') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.west" :placeholder="$t('West')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារ</label>
                                                <input type="text" class="form-control" v-model="form.home.price_market" placeholder="តម្លៃទីផ្សារ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="text" class="form-control" v-model="form.home.price_urgent" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ</label>
                                                <input type="text" class="form-control" v-model="form.home.authority_price" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី(១)</label>
                                                <ImageCropper @croped="handleImg1" :modalId="'1'" :croppedImage="this.form.home.photo"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី(២)</label>
                                                <ImageCropper @croped="handleImg2" :modalId="'2'" :croppedImage="this.form.home.image"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តំណភ្ជាប់</label>
                                                <textarea type="text" class="form-control" rows="1" v-model="form.home.link_map" placeholder="តំណភ្ជាប់"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.home1.model_type" :placeholder="$t('Collateral Name')"  :class="{ 'is-invalid': form.errors.has('model_type') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.pawn_type" placeholder="ប្រភេទឯកសារកម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('pawn_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('pawn_type')" v-html="form.errors.get('pawn_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កាលបរិច្ឆេទចេញប័ណ្ណ</label>
                                                <date-picker v-model="form.home1.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Issued By') }}</label>
                                                <Multiselect
                                                    v-model="form.home1.issued_by"
                                                    :placeholder="$t('Issued By')"
                                                    :class="{ 'is-invalid': form.errors.has(['home1.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:'មន្រ្តីភូមិបាល'},
                                                    { value: 5, issued_by:'ក្រសួងសាធារណៈការនិងដឹកជញ្ជូន'},
                                                    { value: 6, issued_by:'មេភូមិ,ចៅសង្កាត់'},
                                                ]"
                                                />
                                                <div class="valid text-danger" v-if="form.errors.has('issued_by')" v-html="form.errors.get('issued_by')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Size Land') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.size" :placeholder="$t('Size Land')" :class="{ 'is-invalid': form.errors.has('size') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខក្បាលដី</label>
                                                <input type="text" class="form-control" v-model="form.home1.head_land" placeholder="លេខក្បាលដី" :class="{ 'is-invalid': form.errors.has('head_land') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('head_land')" v-html="form.errors.get('head_land')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Location') }}<sup class="text-danger"></sup></label>
                                                <suggestions v-model="form.home1.location" :onInputChange="onCountryInputChange"
                                                    inputClass="form-control"></suggestions>
                                                <div class="valid text-danger" v-if="form.errors.has('location')"
                                                    v-html="form.errors.get('location')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('North') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.north" :placeholder="$t('North')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('South') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.south" :placeholder="$t('South')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('East') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.east" :placeholder="$t('East')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('West') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.west" :placeholder="$t('West')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារ</label>
                                                <input type="text" class="form-control" v-model="form.home1.price_market" placeholder="តម្លៃទីផ្សារ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="text" class="form-control" v-model="form.home1.price_urgent" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ</label>
                                                <input type="text" class="form-control" v-model="form.home1.authority_price" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                             <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី(១)</label>
                                                <ImageCropper @croped="handleImg3" :modalId="'3'" :croppedImage="this.form.home1.photo"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី(២)</label>
                                                <ImageCropper @croped="handleImg4" :modalId="'4'" :croppedImage="this.form.home1.image"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តំណភ្ជាប់</label>
                                                <textarea type="text" class="form-control" rows="1" v-model="form.home1.link_map" placeholder="តំណភ្ជាប់"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.vehicle.model_type" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('model_type') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.pawn_type" placeholder="ប្រភេទឯកសារ" :class="{ 'is-invalid': form.errors.has('pawn_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('pawn_type')" v-html="form.errors.get('pawn_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផ្លាកលេខ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.number_plate" placeholder="ផ្លាកលេខ" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.color" placeholder="ពណ៌	" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លតាប័ត្រ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.latabat" placeholder="លតាប័ត្រ" :class="{ 'is-invalid': form.errors.has('latabat') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('latabat')" v-html="form.errors.get('latabat')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខតួ/លេខសាក់ស៊ី</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.body_number" placeholder="លេខតួ/លេខសាក់ស៊ី" :class="{ 'is-invalid': form.errors.has('body_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('body_number')" v-html="form.errors.get('body_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខម៉ាស៊ីន</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.engine_number" placeholder="លេខម៉ាស៊ីន" :class="{ 'is-invalid': form.errors.has('engine_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('engine_number')" v-html="form.errors.get('engine_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំស៊ីឡាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.cylinder_size" placeholder="ទំហំស៊ីឡាំង" :class="{ 'is-invalid': form.errors.has('cylinder_size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('cylinder_size')" v-html="form.errors.get('cylinder_size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កម្លាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.strength" placeholder="កម្លាំង" :class="{ 'is-invalid': form.errors.has('strength') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('strength')" v-html="form.errors.get('strength')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត</label>
                                                <date-picker v-model="form.vehicle.year"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ថ្ងៃចេញប័ណ្ណលើកដំបូង</label>
                                                <date-picker v-model="form.vehicle.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.price_market" placeholder="តម្លៃទីផ្សារ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.price_urgent" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.other_price" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('other_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('other_price')" v-html="form.errors.get('other_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">រូបភាព</label>

                                                <ImageCropper @croped="handleImg5" :modalId="'5'" :croppedImage="this.form.vehicle.image"/>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.vehicleTwo.model_type" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('model_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.pawn_type" placeholder="ប្រភេទឯកសារ" :class="{ 'is-invalid': form.errors.has('pawn_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('pawn_type')" v-html="form.errors.get('pawn_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផ្លាកលេខ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.number_plate" placeholder="ផ្លាកលេខ" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.color" placeholder="ពណ៌	" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លតាប័ត្រ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.latabat" placeholder="លតាប័ត្រ" :class="{ 'is-invalid': form.errors.has('latabat') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('latabat')" v-html="form.errors.get('latabat')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខតួ/លេខសាក់ស៊ី</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.body_number" placeholder="លេខតួ/លេខសាក់ស៊ី" :class="{ 'is-invalid': form.errors.has('body_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('body_number')" v-html="form.errors.get('body_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខម៉ាស៊ីន</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.engine_number" placeholder="លេខម៉ាស៊ីន" :class="{ 'is-invalid': form.errors.has('engine_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('engine_number')" v-html="form.errors.get('engine_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំស៊ីឡាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.cylinder_size" placeholder="ទំហំស៊ីឡាំង" :class="{ 'is-invalid': form.errors.has('cylinder_size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('cylinder_size')" v-html="form.errors.get('cylinder_size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កម្លាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.strength" placeholder="កម្លាំង" :class="{ 'is-invalid': form.errors.has('strength') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('strength')" v-html="form.errors.get('strength')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត</label>
                                                <date-picker v-model="form.vehicleTwo.year"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ថ្ងៃចេញប័ណ្ណលើកដំបូង</label>
                                                <date-picker v-model="form.vehicleTwo.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.price_market" placeholder="តម្លៃទីផ្សារ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.price_urgent" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.other_price" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('other_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('other_price')" v-html="form.errors.get('other_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">រូបភាព</label>

                                                <ImageCropper @croped="handleImg6" :modalId="'6'" :croppedImage="this.form.vehicleTwo.image"/>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.jewelrys.model_type" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('model_type') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ចំនួនទឹក</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.number_plate"  placeholder="ចំនួនទឹក" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទម្ងន់</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.weight" placeholder="ទម្ងន់" :class="{ 'is-invalid': form.errors.has('weight') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('weight')" v-html="form.errors.get('weight')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.color" placeholder="ពណ៌" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស៊េរី</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.head_land" placeholder="ស៊េរី" :class="{ 'is-invalid': form.errors.has('head_land') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('head_land')" v-html="form.errors.get('head_land')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំ</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.size" placeholder="ទំហំ" :class="{ 'is-invalid': form.errors.has('size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស៊ីម</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.cylinder_size" placeholder="ស៊ីម" :class="{ 'is-invalid': form.errors.has('cylinder_size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('cylinder_size')" v-html="form.errors.get('cylinder_size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស្ថានភាពទ្រព្យ</label>
                                                <Multiselect
                                                    v-model="form.jewelrys.degree"
                                                    placeholder="ស្ថានភាពទ្រព្យ"
                                                    trackBy="degree"
                                                    value="id"
                                                    label="degree"
                                                    :searchable="true"
                                                    :options="[
                                                        { value: 1, degree:'រហែក'},
                                                        { value: 2, degree:'កឹប'},
                                                        { value: 3, degree:'ស្នាមឆូត'},
                                                        { value: 4, degree:'ចោះ'},
                                                        { value: 5, degree:'ទ្រួក'},
                                                    ]"
                                                />
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខសម្គាល់</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.number" placeholder="លេខសម្គាល់" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារពេលវាយតម្លៃ</label>
                                                <input type="number" class="form-control" v-model="form.jewelrys.price_market" placeholder="តម្លៃទីផ្សារពេលវាយតម្លៃ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="number" class="form-control" v-model="form.jewelrys.other_price" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('other_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('other_price')" v-html="form.errors.get('other_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យដាក់បញ្ចាំ</label>
                                                <input type="number" class="form-control" v-model="form.jewelrys.authority_price" placeholder="តម្លៃទ្រព្យដាក់បញ្ចាំ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ម៉ាក និងប្រភេទ</label>
                                                <input type="text" class="form-control" v-model="form.jewelrys.head_land"  placeholder="ម៉ាក និងប្រភេទ" :class="{ 'is-invalid': form.errors.has('head_land') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('head_land')" v-html="form.errors.get('head_land')">
                                                </div>
                                            </div>
                                        </div> -->

                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-six" role="tabpanel" aria-labelledby="pills-six-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input class="form-control" v-model="form.jewelryTwo.model_type" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('model_type') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('model_type')" v-html="form.errors.get('model_type')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ចំនួនទឹក</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.number_plate"  placeholder="ចំនួនទឹក" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទម្ងន់</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.weight" placeholder="ទម្ងន់" :class="{ 'is-invalid': form.errors.has('weight') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('weight')" v-html="form.errors.get('weight')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.color" placeholder="ពណ៌" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស៊េរី</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.head_land" placeholder="ស៊េរី" :class="{ 'is-invalid': form.errors.has('head_land') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('head_land')" v-html="form.errors.get('head_land')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំ</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.size" placeholder="ទំហំ" :class="{ 'is-invalid': form.errors.has('size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស៊ីម</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.cylinder_size" placeholder="ស៊ីម" :class="{ 'is-invalid': form.errors.has('cylinder_size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('cylinder_size')" v-html="form.errors.get('cylinder_size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ស្ថានភាពទ្រព្យ</label>
                                                <Multiselect
                                                    v-model="form.jewelryTwo.degree"
                                                    placeholder="ស្ថានភាពទ្រព្យ"
                                                    trackBy="degree"
                                                    value="id"
                                                    label="degree"
                                                    :searchable="true"
                                                    :options="[
                                                        { value: 1, degree:'រហែក'},
                                                        { value: 2, degree:'កឹប'},
                                                        { value: 3, degree:'ស្នាមឆូត'},
                                                        { value: 4, degree:'ចោះ'},
                                                        { value: 5, degree:'ទ្រួក'},
                                                    ]"
                                                />
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខសម្គាល់</label>
                                                <input type="text" class="form-control" v-model="form.jewelryTwo.number" placeholder="លេខសម្គាល់" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារពេលវាយតម្លៃ</label>
                                                <input type="number" class="form-control" v-model="form.jewelryTwo.price_market" placeholder="តម្លៃទីផ្សារពេលវាយតម្លៃ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់</label>
                                                <input type="number" class="form-control" v-model="form.jewelryTwo.other_price" placeholder="តម្លៃលក់បន្ទាន់" :class="{ 'is-invalid': form.errors.has('other_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('other_price')" v-html="form.errors.get('other_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យដាក់បញ្ចាំ</label>
                                                <input type="number" class="form-control" v-model="form.jewelryTwo.authority_price" placeholder="តម្លៃទ្រព្យដាក់បញ្ចាំ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-success " @click="store">
                                    <i class="fa-solid fa-floppy-disk"></i>
                                    {{ $t('Submit') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ImageCropper from "../../components/ImageCropper.vue";
export default { 
    props:['id'],
    components: {
        ImageCropper 
    },
    data() {
        return {
            clients: [],
            categories: [],
            collateralcustom: [], 
            formatYear: 'YYYY',
            format: 'YYYY-MM-DD',
            form: new Form({
                client_id : '',
                title : '',
                id: '',
                home:{
                    id: '',
                    client_id: '',
                    collateral_id : '',
                    model_type: '',
                    pawn_type: '',
                    body_number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    number: '',
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    status_type: 1,
                    link_map: '',
                },
                home1:{
                    id: '',
                    client_id: '',
                    model_type: '',
                    collateral_id : '',
                    pawn_type: '',
                    body_number: '',
                    engine_number: '',
                    number_plate: '',
                    number: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    status_type: 2,
                    link_map: '',
                },
                vehicle:{
                    id: '',
                    client_id: '',
                    model_type: '',
                    collateral_id : '',
                    pawn_type: '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    status_type: 3,
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    strength: '',
                },
                vehicleTwo:{
                    id: '',
                    client_id: '',
                    model_type: '',
                    collateral_id : '',
                    pawn_type: '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    status_type: 4,
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    strength: '',
                },
                jewelrys:{
                    id: '',
                    client_id: '',
                    collateral_id: '',
                    model_type: '',
                    pawn_type: '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    weight: '',
                    status_type: 5,
                    image: '',
                    photo: '',
                },
                jewelryTwo:{
                    id: '',
                    client_id: '',
                    collateral_id: '',
                    model_type: '',
                    pawn_type: '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    weight: '',
                    status_type: 6,
                    image: '',
                    photo: '',
                },
            }),
        }
    },
    created() {
        this.getCollateral();
        this.getClient();

    },
    methods: {
        handleImg1(croppedImageUrl){
            this.form.home.photo = croppedImageUrl;
        },
        handleImg2(croppedImageUrl){
            this.form.home.image = croppedImageUrl;
        },
        handleImg3(croppedImageUrl){
            this.form.home1.photo = croppedImageUrl;
        },
        handleImg4(croppedImageUrl){
            this.form.home1.image = croppedImageUrl;
        },
        handleImg5(croppedImageUrl){
            this.form.vehicle.image = croppedImageUrl;
        },
        handleImg6(croppedImageUrl){
            this.form.vehicleTwo.image = croppedImageUrl;
        },
        getClient() {axios.get("admin-api/com-client").then((res) => {this.clients = res.data;}).catch((error) => {console.log(error);});},
        funGetProjectByClient(client_id) {
            axios
                .get("admin-api/com-collaterals-cusstom", { params: { client_id: client_id } })
                .then((res) => {
                    this.collateralcustom = res.data;
                })
                .catch((error) => {
                    console.error("Error fetching custom collaterals:", error);
                });
        },
        getCollateral() {
            axios.get('admin-api/create-detail', {
                params:{'id': this.id}
             })
            .then((res) => {
                if(res.data.status == 1){
                    this.form.id = res.data.collateral.id;
                    this.form.client_id = res.data.collateral.client_id??this.form.client_id;
                    this.form.title = res.data.collateral.title??this.form.title;
                    this.form.home = res.data.home??this.form.home;
                    this.form.home1 = res.data.home1??this.form.home1;
                    this.form.vehicle = res.data.vehicle??this.form.vehicle;
                    this.form.vehicleTwo = res.data.vehicleTwo??this.form.vehicleTwo;
                    this.form.jewelrys   = res.data.jewelrys??this.form.jewelrys;
                    this.form.jewelryTwo = res.data.jewelryTwo??this.form.jewelryTwo;
                }
            }).catch((error) => {
                console.log(error);
            });

        },
        store() {
            this.form.post("admin-api/store-detail").then((res) => {
                if (res.data.status == 1) {
                    this.$toast.success(res.data.message);
                    this.$router.go(-1);
                } else {
                    this.$toast.warning(res.data.message);
                }
            }).catch((error) => {
                console.log(error);
                this.$toast.warning(res.data.message);
            })
        },
        async onCountryInputChange(query) {
            if (query.trim().length === 0) {
                return []
            }
            let data = await axios.get('admin-api/address-autocomplete', { params: { 'searchText': query } });
            return data.data;
        },

    }
}
</script>
