@php
    use App\Enums\EducationalLevel;
        use App\Enums\ReligiousAffiliation;
        use App\Enums\PoliticalBelief;
        use App\Enums\DatingGoal;
        use App\Enums\RelationshipIntention;
@endphp
<form method="post" action="{{ route('principles.update') }}" id="user-principle-form" class="mt-6 mb-6" x-data="formErrorScroll" x-init="$nextTick(() => $dispatch('init-success-scroll'))">
    @csrf
    @method('patch')

    <div class="mb-2">
        <h4 class="mb-4">My Principles</h4>
        <!-- Success Message -->
        @if (session('status') === 'user-principle-updated' && session('form_id') === 'user-principle-form')
            <p
                x-data="{ show: true }"
                x-show="show"
                x-transition
                x-init="setTimeout(() => show = false, 5000)"
                class="alert alert-success fw-medium"
            >{{ __('Successfully updated.') }}</p>
        @endif

        <div class="row g-3">

            <!-- Work -->
            <div class="col-12 col-sm-6">
                <x-text-input
                    id="work"
                    name="work"
                    :value="optional($user->principles)->work ?? ''"
                    autofocus
                    placeholder="Work"
                    icon="fa-solid fa-id-badge"
                />
            </div>

            <!-- Job Title -->
            <div class="col-12 col-sm-6">
                <x-text-input
                    id="job_title"
                    name="job_title"
                    :value="optional($user->principles)->job_title ?? ''"
                    autofocus
                    placeholder="Job Title"
                    icon="fa-solid fa-briefcase"
                />
            </div>

            <!-- Education Level -->
            <div class="col-12 col-sm-6">
                <x-select-field
                    name="educational_level"
                    label="Educational Level"
                    :selected="optional($user->principles)->educational_level"
                    :options="EducationalLevel::values()"
                    icon="fa-solid fa-graduation-cap"
                />
            </div>

            <!-- School -->
            <div class="col-12 col-sm-6">
                <x-text-input
                    id="school"
                    name="school"
                    :value="optional($user->principles)->school ?? ''"
                    autofocus
                    placeholder="School"
                    icon="fa-solid fa-school"
                />
            </div>

            <!-- Religious Affiliation -->
            <div class="col-12 col-sm-6">
                <x-select-field
                    name="religious_affiliation"
                    label="Religious Affiliation"
                    :selected="optional($user->principles)->religious_affiliation"
                    :options="ReligiousAffiliation::values()"
                    icon="fa-solid fa-praying-hands"
                />
            </div>

            <!-- Political Beliefs -->
            <div class="col-12 col-sm-6">
                <x-select-field
                    name="political_beliefs"
                    label="Political Beliefs"
                    :selected="optional($user->principles)->political_beliefs"
                    :options="PoliticalBelief::values()"
                    icon="fa-solid fa-landmark"
                />
            </div>

            <!-- Dating Goals -->
            <div class="col-12 col-sm-6">
                <x-select-field
                    name="dating_goals"
                    label="Dating Goals"
                    :selected="optional($user->principles)->dating_goals"
                    :options="DatingGoal::values()"
                    icon="fa-solid fa-heart"
                />
            </div>

            <!-- Relationship Intentions -->
            <div class="col-12 col-sm-6">
                <x-select-field
                    name="relationship_intentions"
                    label="Relationship Intentions"
                    :selected="optional($user->principles)->relationship_intentions"
                    :options="RelationshipIntention::values()"
                    icon="fa-solid fa-handshake"
                />
            </div>

            <!-- City of Birth -->
            <div class="col-12 col-sm-6">
                <x-text-input
                    id="city_of_birth"
                    name="city_of_birth"
                    :value="optional($user->principles)->city_of_birth ?? ''"
                    autofocus
                    placeholder="City of Birth"
                    icon="fa-solid fa-city"
                />
            </div>
        </div>
    </div>

    <div class="flex items-center justify-end">
        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
    </div>
</form>