@extends('layout.page', [
    'type' => 'create',
    'model' => new \App\Models\User(),
    'index' => route('user.index'),
    'action' => route('user.store'),
])

@section('fields')
    <div class="grid grid-cols-2 gap-4">
        @include('layout.components.forms.input', [
            'name' => 'first_name',
            'label' => 'ชื่อ',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'last_name',
            'label' => 'นามสกุล',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])
    </div>

    @include('layout.components.forms.input', [
        'type' => 'email',
        'name' => 'email',
        'label' => 'อีเมล',
        'value' => '',
        'placeholder' => 'example@gmail.com',
        'required' => true,
    ])

    @include('layout.components.forms.input', [
        'name' => 'phone_number',
        'label' => 'เบอร์โทรศัพท์',
        'value' => '',
        'placeholder' => '',
        'required' => false,
    ])

    @include('layout.components.forms.input', [
        'name' => 'password',
        'label' => 'รหัสผ่าน (ขั้นต่ำ 6 ตัวอักษร)',
        'value' => \Illuminate\Support\Str::random(10),
        'placeholder' => '',
        'required' => true,
    ])

    @include('layout.components.forms.select', [
        'name' => 'permission',
        'label' => 'สิทธิ์การใช้งาน',
        'value' => '',
        'query' => collect([
            [
                'id' => 0,
                'label' => 'ผู้ใช้งานทั่วไป',
            ],
            [
                'id' => 1,
                'label' => 'ผู้ดูแลระบบ',
            ],
        ]),
        'query_label' => 'label',
    ])

    <div id="permission-field" class="flex flex-col gap-2" style="display: none">
        <dd class="text-sm text-gray-900 sm:col-span-2 sm:mt-0">
            <table class="table">
                <tbody>
                    @foreach (groupPermissions() as $group)
                        <tr>
                            <td>{{ $group['label'] }}</td>
                            @foreach ($group['permissions'] as $permission)
                                <td class="px-2">
                                    @php
                                        $permission_label = '';
                                        $action = explode('_', $permission)[1];
                                        if (count(explode('_', $permission)) > 2) {
                                            $action = explode('_', $permission)[2];
                                        }
                                        if ($action === 'create') {
                                            $permission_label = 'เพิ่ม';
                                        } elseif ($action === 'edit') {
                                            $permission_label = 'แก้ไข';
                                        } elseif ($action === 'show') {
                                            $permission_label = 'ดูข้อมูล';
                                        } else {
                                            $permission_label = 'ลบ';
                                        }
                                    @endphp
                                    <input type="checkbox" id="{{ $permission }}" name="permission_checkbox[]" value="{{ $permission }}" class="mr-1" checked>
                                    <label for="{{ $permission }}">{{ $permission_label }}</label>
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </dd>
    </div>

    <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2">
            <span class="text-lg font-bold">ที่อยู่การรับสินค้า</span>
        </div>
        @include('layout.components.forms.input', [
            'name' => 'shipping_company',
            'label' => 'ชื่อบริษัท/ห้างร้าน/หน่วยงาน (หากมี)',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'shipping_address',
            'label' => 'ที่อยู่รับสินค้า',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'district',
            'label' => 'ตำบล / แขวง',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'amphoe',
            'label' => 'อำเภอ / เขต',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'province',
            'label' => 'จังหวัด',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'zipcode',
            'label' => 'รหัสไปรษณีย์',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])

        @include('layout.components.forms.input', [
            'name' => 'shipping_phone',
            'label' => 'เบอร์โทรศัพท์',
            'value' => '',
            'placeholder' => '',
            'required' => true,
        ])
    </div>
@endsection

@push('page_script')
    <script>
        window.validateElements = [{
                type: 'input',
                name: 'first_name',
                msg: 'กรุณากรอกชื่อ'
            },
            {
                type: 'input',
                name: 'last_name',
                msg: 'กรุณากรอกนามสกุล'
            },
            {
                type: 'email',
                name: 'email',
                msg: 'กรุณาตรวจสอบอีเมล',
                check_exist: true,
                msg_email_exist: 'อีเมลนี้ถูกใช้งานแล้ว'
            },
            {
                type: 'password',
                name: 'password',
                msg: 'กรุณาตรวจสอบรหัสผ่าน',
                min: 6,
                required: true
            },
        ]

        $(document).ready(function() {
            $('select[name="permission"]').on('change', function() {
                console.log(`>>> select changed`, $(this).val())

                if ($(this).val() === '1') {
                    $('#permission-field').show()
                } else {
                    $('#permission-field').hide()
                }
            })
        })
    </script>
@endpush