@extends('layout.page', [
    'type' => 'edit',
    'model' => new \App\Models\PartnerForm(),
    'index' => route('partner-form.index'),
    'action' => route('partner-form.update', ['partner_form' => $partner_form]),
])

@section('fields')
    <div class="grid grid-cols-1 xl:mx-auto xl:w-3/4">

        <div>
            <p>รายละเอียดผู้สมัคร</p>
            <div class="mt-2 grid grid-cols-12 gap-2">
                <div class="col-span-12">
                    @include('layout.components.forms.image', [
                        'name' => 'photo',
                        'label' => 'รูปถ่ายขนาด 1.5 นิ้ว',
                        'query' => $partner_form->applicantDetail->photo,
                    ])
                </div>
                <div class="col-span-12 md:col-span-2">
                    @include('layout.components.forms.select', [
                        'name' => 'applicant_prefix',
                        'label' => 'คำนำหน้า',
                        'value' => $partner_form->applicantDetail->prefix,
                        'query' => $prefix_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_first_name',
                        'label' => 'ชื่อ',
                        'value' => $partner_form->applicantDetail->first_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_last_name',
                        'label' => 'นามสกุล',
                        'value' => $partner_form->applicantDetail->last_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.input', [
                        'type' => 'date',
                        'name' => 'birth_date',
                        'label' => 'วัน/เดือน/ปีเกิด',
                        'value' => $partner_form->applicantDetail->birth_date,
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_phone',
                        'label' => 'เบอร์โทรศัพท์มือถือ',
                        'value' => $partner_form->applicantDetail->phone,
                    ])
                </div>
                <div class="col-span-12 md:col-span-12">
                    @include('layout.components.forms.input', [
                        'name' => 'id_card',
                        'label' => 'หมายเลขบัตรประชาชน',
                        'value' => $partner_form->applicantDetail->id_card,
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.input', [
                        'type' => 'date',
                        'name' => 'id_card_date_of_issue',
                        'label' => 'วันที่ออกบัตร',
                        'value' => $partner_form->applicantDetail->id_card_date_of_issue,
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.input', [
                        'type' => 'date',
                        'name' => 'id_card_date_of_expiry',
                        'label' => 'วันหมดอายุบัตร',
                        'value' => $partner_form->applicantDetail->id_card_date_of_expiry,
                    ])
                </div>
                <div class="col-span-12">
                    <div class="grid grid-cols-12 gap-2">
                        <div class="col-span-12 md:col-span-3">
                            @include('layout.components.forms.image', [
                                'name' => 'id_card_image',
                                'label' => 'สําเนาบัตรประชาชน',
                                'query' => $partner_form->applicantDetail->id_card_image,
                            ])
                        </div>
                        <div class="col-span-12 md:col-span-3">
                            @include('layout.components.forms.image', [
                                'name' => 'vaccination_certificate',
                                'label' => 'หลักฐานการได้รับวัคซีน',
                                'query' => $partner_form->applicantDetail->vaccination_certificate,
                            ])
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6 border-t pt-6">
            <p>ที่อยู่ปัจจุบัน</p>
            <div class="mt-2 grid grid-cols-4 gap-2">
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_house_no',
                        'label' => 'บ้านเลขที่',
                        'value' => $partner_form->currentAddress->house_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_village',
                        'label' => 'หมู่บ้าน',
                        'value' => $partner_form->currentAddress->village,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_village_no',
                        'label' => 'หมู่',
                        'value' => $partner_form->currentAddress->village_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_alley',
                        'label' => 'ซอย',
                        'value' => $partner_form->currentAddress->alley,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'applicant_road',
                        'label' => 'ถนน',
                        'value' => $partner_form->currentAddress->road,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'sub_district',
                        'name' => 'applicant_sub_district',
                        'label' => 'ตำบล/แขวง',
                        'value' => $partner_form->currentAddress->sub_district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'district',
                        'name' => 'applicant_district',
                        'label' => 'อำเภอ/เขต',
                        'value' => $partner_form->currentAddress->district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'province',
                        'name' => 'applicant_province',
                        'label' => 'จังหวัด',
                        'value' => $partner_form->currentAddress->province,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'zipcode',
                        'name' => 'applicant_zipcode',
                        'label' => 'รหัสไปรษณีย์',
                        'value' => $partner_form->currentAddress->zipcode,
                    ])
                </div>
            </div>
        </div>

        <div class="mt-6 border-t pt-6">
            <p>ที่อยู่ตามทะเบียนบ้าน</p>
            <div class="mt-2 grid grid-cols-4 gap-2">
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'permanent_house_no',
                        'label' => 'บ้านเลขที่',
                        'value' => $partner_form->permanentAddress->house_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'permanent_village',
                        'label' => 'หมู่บ้าน',
                        'value' => $partner_form->permanentAddress->village,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'permanent_village_no',
                        'label' => 'หมู่',
                        'value' => $partner_form->permanentAddress->village_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'permanent_alley',
                        'label' => 'ซอย',
                        'value' => $partner_form->permanentAddress->alley,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'permanent_road',
                        'label' => 'ถนน',
                        'value' => $partner_form->permanentAddress->road,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'current_sub_district',
                        'name' => 'permanent_sub_district',
                        'label' => 'ตำบล/แขวง',
                        'value' => $partner_form->permanentAddress->sub_district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'current_district',
                        'name' => 'permanent_district',
                        'label' => 'อำเภอ/เขต',
                        'value' => $partner_form->permanentAddress->district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'current_province',
                        'name' => 'permanent_province',
                        'label' => 'จังหวัด',
                        'value' => $partner_form->permanentAddress->province,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'id' => 'current_zipcode',
                        'name' => 'permanent_zipcode',
                        'label' => 'รหัสไปรษณีย์',
                        'value' => $partner_form->permanentAddress->zipcode,
                    ])
                </div>
            </div>
        </div>

        <div class="mt-6 border-t pt-6">
            <p>บุคคลที่ติดต่อได้กรณีฉุกเฉิน</p>
            <div class="mt-2 grid grid-cols-12 gap-2">
                <div class="col-span-12 md:col-span-2">
                    @include('layout.components.forms.select', [
                        'name' => 'emergency_prefix',
                        'label' => 'คำนำหน้า',
                        'value' => $partner_form->emergencyContact->prefix,
                        'query' => $prefix_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'emergency_first_name',
                        'label' => 'ชื่อ',
                        'value' => $partner_form->emergencyContact->first_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'emergency_last_name',
                        'label' => 'นามสกุล',
                        'value' => $partner_form->emergencyContact->last_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.select', [
                        'name' => 'relation',
                        'label' => 'ความสัมพันธ์',
                        'value' => $partner_form->emergencyContact->relation,
                        'query' => $relation_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12 md:col-span-6">
                    @include('layout.components.forms.input', [
                        'name' => 'emergency_phone',
                        'label' => 'เบอร์โทรศัพท์มือถือ',
                        'value' => $partner_form->emergencyContact->phone,
                    ])
                </div>
            </div>
            <div class="mt-2">
                <p>ที่อยู่บุคคลที่ติดต่อได้กรณีฉุกเฉิน</p>
                <div class="mt-2 grid grid-cols-4 gap-2">
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'name' => 'emergency_house_no',
                            'label' => 'บ้านเลขที่',
                            'value' => $partner_form->emergencyContact->house_no,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'name' => 'emergency_village',
                            'label' => 'หมู่บ้าน',
                            'value' => $partner_form->emergencyContact->village,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'name' => 'emergency_village_no',
                            'label' => 'หมู่',
                            'value' => $partner_form->emergencyContact->village_no,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'name' => 'emergency_alley',
                            'label' => 'ซอย',
                            'value' => $partner_form->emergencyContact->alley,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'name' => 'emergency_road',
                            'label' => 'ถนน',
                            'value' => $partner_form->emergencyContact->road,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'id' => 'emergency_sub_district',
                            'name' => 'emergency_sub_district',
                            'label' => 'ตำบล/แขวง',
                            'value' => $partner_form->emergencyContact->sub_district,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'id' => 'emergency_district',
                            'name' => 'emergency_district',
                            'label' => 'อำเภอ/เขต',
                            'value' => $partner_form->emergencyContact->district,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'id' => 'emergency_province',
                            'name' => 'emergency_province',
                            'label' => 'จังหวัด',
                            'value' => $partner_form->emergencyContact->province,
                        ])
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        @include('layout.components.forms.input', [
                            'id' => 'emergency_zipcode',
                            'name' => 'emergency_zipcode',
                            'label' => 'รหัสไปรษณีย์',
                            'value' => $partner_form->emergencyContact->zipcode,
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-1 mt-6 border-t pt-6">
            <p>การครอบครองรถยนต์</p>
            <div class="mt-2 grid grid-cols-12 gap-4">
                <div class="col-span-12">
                    @include('layout.components.forms.select', [
                        'name' => 'ownership',
                        'label' => 'การครอบครองรถยนต์',
                        'value' => $partner_form->carOwner->ownership,
                        'query' => $car_owner_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12">
                    @include('layout.components.forms.textarea', [
                        'id' => \Str::random(6),
                        'name' => 'other',
                        'label' => 'อื่นๆ โปรดระบุ',
                        'value' => $partner_form->carOwner->other,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'id_card_owner_car',
                        'label' => 'สําเนาบัตรประจําตัวประชาชน (เจ้าของ)',
                        'query' => $partner_form->carOwner->id_card_owner_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'vehicle_license_owner_car',
                        'label' => 'สําเนาใบอนุญาตขับขี่ (เจ้าของ)',
                        'query' => $partner_form->carOwner->vehicle_license_owner_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'vehicle_registration_owner_car',
                        'label' => 'สําเนาทะเบียนรถ (เจ้าของ)',
                        'query' => $partner_form->carOwner->vehicle_registration_owner_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'house_registration_owner_car',
                        'label' => 'สําเนาทะเบียนบ้าน (เจ้าของ)',
                        'query' => $partner_form->carOwner->house_registration_owner_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'consent_owner_car',
                        'label' => 'หนังสือยินยอมจากเจ้าของรถ (ผู้ครอบครองรถ)',
                        'query' => $partner_form->carOwner->consent_owner_car,
                    ])
                </div>

                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'id_card_holder_car',
                        'label' => 'สําเนาบัตรประจําตัวประชาชน (ผู้ครอบครองรถ)',
                        'query' => $partner_form->carOwner->id_card_holder_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'vehicle_license_holder_car',
                        'label' => 'สําเนาใบอนุญาตขับขี่ (ผู้ครอบครองรถ)',
                        'query' => $partner_form->carOwner->vehicle_license_holder_car,
                    ])
                </div>
                <div class="col-span-12 md:col-span-4">
                    @include('layout.components.forms.image', [
                        'name' => 'house_registration_holder_car',
                        'label' => 'สําเนาทะเบียนบ้าน (ผู้ครอบครองรถ)',
                        'query' => $partner_form->carOwner->house_registration_holder_car,
                    ])
                </div>
                <div class="col-span-12 pt-6">
                    @include('layout.components.forms.image', [
                        'name' => 'photo_car',
                        'label' => 'รูปถ่ายด้านหน้ารถ , รูปถ่ายด้านหลังรถ',
                        'query' => $partner_form->carOwner->photo_car,
                        'multiple' => true,
                    ])
                </div>
            </div>

        </div>
    </div>
@endsection

@push('page_script')
    <script>
        window.validateElements = []

        $('.btn-img-remove').on('click', function() {
            const id = $(this).attr('data-id')
            const src = $(this).attr('data-src')
            swal({
                title: `ยืนยันการลบ?`,
                text: "",
                icon: "warning",
                dangerMode: true,
                buttons: {
                    confirm: {
                        text: "ตกลง",
                        value: true,
                        visible: true,
                    },
                    cancel: {
                        text: "ยกเลิก",
                        value: false,
                        visible: true,
                    },
                },
            }).then((confirm) => {
                if (confirm) {
                    $.post('/ajax/car-photo/remove', {
                        id: '{{ $partner_form->partner_car_ownership_id }}',
                        src: src,
                    }, function() {
                        $(`#img-${id}`).remove()
                    })
                }
            })
        });
    </script>
@endpush