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

@section('fields')
    <div class="grid grid-cols-1 xl:w-3/4 xl:mx-auto">
        <div>
            <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' => 'contact_prefix',
                        'label' => 'คำนำหน้า',
                        'value' => $service_form->contact_prefix,
                        'query' => $prefix_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'contact_first_name',
                        'label' => 'ชื่อ',
                        'value' => $service_form->contact_first_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'contact_last_name',
                        'label' => 'นามสกุล',
                        'value' => $service_form->contact_last_name,
                    ])
                </div>
            </div>
        </div>
        <div>
            <div class="grid grid-cols-4 gap-2">
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'type' => 'date',
                        'name' => 'contact_birthday',
                        'label' => 'วัน/เดือน/ปีเกิด',
                        'value' => $service_form->contact_birthday,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'contact_phone_number',
                        'label' => 'เบอร์โทรศัพท์มือถือ',
                        'value' => $service_form->contact_phone_number,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'type' => 'email',
                        'name' => 'contact_email',
                        'label' => 'อีเมล',
                        'value' => $service_form->contact_email,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.select', [
                        'name' => 'contact_relationship',
                        'label' => 'ความเกี่ยวข้องกับผู้ใช้บริการ',
                        'value' => $service_form->contact_relationship,
                        'query' => $relation_options,
                        'query_label' => 'title',
                    ])
                </div>
            </div>
        </div>
        <div class="pt-6 mt-6 border-t">
            <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' => 'prefix',
                        'label' => 'คำนำหน้า',
                        'value' => $service_form->prefix,
                        'query' => $prefix_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'first_name',
                        'label' => 'ชื่อ',
                        'value' => $service_form->first_name,
                    ])
                </div>
                <div class="col-span-12 md:col-span-5">
                    @include('layout.components.forms.input', [
                        'name' => 'last_name',
                        'label' => 'นามสกุล',
                        'value' => $service_form->last_name,
                    ])
                </div>
            </div>
        </div>
        <div>
            <div class="grid grid-cols-4 gap-2">
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'type' => 'date',
                        'name' => 'birthday',
                        'label' => 'วัน/เดือน/ปีเกิด',
                        'value' => $service_form->birthday,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'phone_number',
                        'label' => 'เบอร์โทรศัพท์มือถือ',
                        'value' => $service_form->phone_number,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.select', [
                        'name' => 'assistance_equipment',
                        'label' => 'อุปกรณ์ช่วยเหลือการเดินทาง',
                        'value' => $service_form->assistance_equipment,
                        'query' => $assistance_equipment_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-4">
                    @include('layout.components.forms.textarea', [
                        'id' => 'textarea-1',
                        'name' => 'congenital_disease',
                        'label' => 'อุปกรณ์ช่วยเหลือการเดินทาง',
                        'value' => $service_form->congenital_disease,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'house_no',
                        'label' => 'บ้านเลขที่',
                        'value' => $service_form->house_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'village',
                        'label' => 'หมู่บ้าน',
                        'value' => $service_form->village,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'village_no',
                        'label' => 'หมู่',
                        'value' => $service_form->village_no,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'alley',
                        'label' => 'ซอย',
                        'value' => $service_form->alley,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'road',
                        'label' => 'ถนน',
                        'value' => $service_form->road,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'sub_district',
                        'label' => 'ตำบล/แขวง',
                        'value' => $service_form->sub_district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'district',
                        'label' => 'อำเภอ/เขต',
                        'value' => $service_form->district,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'province',
                        'label' => 'จังหวัด',
                        'value' => $service_form->province,
                    ])
                </div>
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.input', [
                        'name' => 'zipcode',
                        'label' => 'รหัสไปรษณีย์',
                        'value' => $service_form->zipcode,
                    ])
                </div>
            </div>
        </div>
        <div>
            <div class="grid grid-cols-4 gap-2">
                <div class="col-span-4 md:col-span-2">
                    @include('layout.components.forms.image', [
                        'name' => 'vaccination_certificate',
                        'label' => 'หลักฐานการได้รับการฉีดวัคซีนป้องกันเชื้อไวรัสโควิด-19',
                        'query' => $service_form->vaccination_certificate,
                    ])
                </div>
                <div class="col-span-4 md:col-span-4">
                    @include('layout.components.forms.select', [
                        'name' => 'interest_service',
                        'label' => 'บริการที่สนใจ',
                        'value' => $service_form->interest_service,
                        'query' => $service_options,
                        'query_label' => 'title',
                    ])
                </div>
                <div class="col-span-4 md:col-span-4">
                    @include('layout.components.forms.input', [
                        'name' => 'booking_date',
                        'label' => 'วันที่ใช้บริการ',
                        'value' => $service_form->booking_date,
                    ])
                </div>
            </div>
        </div>

    </div>
@endsection

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