@php use Illuminate\Support\Facades\Auth; @endphp
<x-layout.app>
    <x-slot:page_title>User Profile</x-slot:page_title>
    <div class="space-y-10 divide-y divide-gray-900/10">
        <x-layout.page-section
            section_name="Personal Information"
            section_description="Use a permanent address where you receive mail"
        >
            @if (session('status') === 'profile-information-updated')
                <div class="mt-4 px-8 font-medium text-sm text-green-600">
                    Profile Info has been updated.
                </div>
            @endif

            <form action="/user/profile-information" method="POST">
                @csrf
                @method('PUT')
                <div class="px-4 py-6 sm:p-8">
                    <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <x-auth.form-field name="first_name" label="First Name" value="{{ Auth::user()->first_name }}" div_classes="sm:col-span-3" />
                        <x-auth.form-field name="last_name" label="Last Name" value="{{ Auth::user()->last_name }}" div_classes="sm:col-span-3" />
                        <x-auth.form-field name="email" label="Email Address" value="{{ Auth::user()->email }}" div_classes="sm:col-span-3" />
                        <x-auth.form-field name="cell_phone" label="Cell Phone" value="{{ Auth::user()->cell_phone }}" div_classes="sm:col-span-3" />
                        <x-auth.form-field name="judging_preference" label="Judging Preference" value="{{ Auth::user()->judging_preference }}" div_classes="sm:col-span-5" />
                    </div>
                </div>
                <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                    <x-auth.form-button-nocolor type="button">Cancel</x-auth.form-button-nocolor>
                    <x-auth.form-button>Update Profile</x-auth.form-button>
                </div>
            </form>

        </x-layout.page-section>

        <x-layout.page-section
            section_name="Change Password"
            section_description="Update your user password"
        >
            @if (session('status') === 'password-updated')
                <div class="mt-4 px-8 font-medium text-sm text-green-600">
                   Password has been updated.
                </div>
            @endif

            <x-auth.form-card method="PUT" action="/user/password" cols="1" submit-button-text="Change Password">
                <x-auth.form-field name="current_password" label="Current Password" type="password" autocomplete="current-password" required />
                <x-auth.form-field name="password" label="New Password" type="password" autocomplete="new-password" required />
                <x-auth.form-field name="password_confirmation" label="Confirm New Password" autocomplete="new-password" type="password" required />
            </x-auth.form-card>

        </x-layout.page-section>
    </div>
</x-layout.app>