<div class="card">
    <div class="card-body">
        <div>
            <!-- Section 1: Personal Details -->
            <div class="row g-3 mb-4">
                <div class="col-md-12">
                    <x-ui.select
                            name="title"
                            label="Title"
                            :options="[
                                'Miss' => 'Miss',
                                'Mr' => 'Mr',
                                'Mrs' => 'Mrs',
                                'Ms' => 'Ms',
                            ]"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="firstName"
                            label="First Name"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="middleName"
                            label="Middle Name(s)"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="lastName"
                            label="Last Name"
                    />
                </div>

                <div class="col-md-12">
                    <x-ui.input
                            name="preferredName"
                            label="Preferred Name"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="email"
                            type="email"
                            label="Email"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="phone"
                            label="Tel"
                    />
                </div>

                <div class="col-md-4">
                    <x-ui.input
                            name="dob"
                            type="date"
                            label="Date of Birth"
                    />
                </div>
            </div>

            <!-- Section 2: Home Address -->
            <h5 class="fw-bold mt-5 mb-3">Home Address</h5>

            <div class="row g-3">
                <div class="col-md-6">
                    <x-ui.input
                            name="address1"
                            label="Address Line 1"
                    />
                </div>

                <div class="col-md-6">
                    <x-ui.input
                            name="address2"
                            label="Address Line 2"
                    />
                </div>

                <div class="col-md-6">
                    <x-ui.input
                            name="address3"
                            label="Address Line 3"
                    />
                </div>

                <div class="col-md-6">
                    <x-ui.input
                            name="postcode"
                            label="Postcode *"
                    />
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <x-ui.button wire:click="save">Save</x-ui.button>
    </div>
</div>