@extends('layouts.account')

@section('title', __('Profile & settings'))
@section('heading', __('Profile & settings'))
@section('subheading', __('Your details, how sellers reach you, and what we alert you about.'))

@section('account')
    <div class="space-y-6">

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="details-heading">
            <h2 id="details-heading" class="font-display text-title font-bold text-text">{{ __('Your details') }}</h2>

            <form action="{{ route('account.profile.update') }}" method="POST" enctype="multipart/form-data"
                  class="mt-6 space-y-5" x-data="submitGuard" @submit="submit()">
                @csrf
                @method('PUT')

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-form.input name="name" :label="__('Full name')" :value="$user->name" required autocomplete="name" />
                    <x-form.input name="phone" type="tel" :label="__('Phone')" :value="$user->phone" autocomplete="tel" />
                </div>

                <x-form.input name="email" type="email" :label="__('Email address')" :value="$user->email" required
                              autocomplete="email"
                              :hint="__('Changing this means confirming the new address before you can contact sellers again.')" />

                <x-form.file name="avatar" :label="__('Profile photo')" accept="image/*" :existing="$user->avatar" />

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-form.select name="contact_preference" :label="__('How sellers should reach you')"
                                   :placeholder="false"
                                   :value="$buyerProfile->contact_preference"
                                   :options="[
                                       'any' => __('Any way'),
                                       'phone' => __('Phone'),
                                       'email' => __('Email'),
                                       'message' => __('On-site messages only'),
                                   ]" />

                    <x-form.select name="alert_frequency" :label="__('Alerts for saved searches')"
                                   :placeholder="false"
                                   :value="$buyerProfile->alert_frequency"
                                   :options="[
                                       'instant' => __('As soon as something matches'),
                                       'daily' => __('A daily summary'),
                                       'weekly' => __('A weekly summary'),
                                       'never' => __('Never'),
                                   ]" />
                </div>

                <x-form.checkbox name="accepts_marketing" :checked="$buyerProfile->accepts_marketing"
                                 :label="__('Send me occasional market updates')" />

                <div class="flex justify-end border-t border-border pt-5">
                    <button type="submit" class="btn btn-primary" :disabled="submitting">
                        <span x-show="!submitting">{{ __('Save changes') }}</span>
                        <span x-show="submitting" x-cloak>{{ __('Saving…') }}</span>
                    </button>
                </div>
            </form>
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="password-heading">
            <h2 id="password-heading" class="font-display text-title font-bold text-text">{{ __('Password') }}</h2>

            <form action="{{ route('account.profile.password') }}" method="POST" class="mt-6 space-y-5"
                  x-data="submitGuard" @submit="submit()">
                @csrf
                @method('PUT')

                <x-form.input name="current_password" type="password" :label="__('Current password')" required
                              autocomplete="current-password" />

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-form.input name="password" type="password" :label="__('New password')" required
                                  autocomplete="new-password" />
                    <x-form.input name="password_confirmation" type="password" :label="__('Confirm new password')"
                                  required autocomplete="new-password" />
                </div>

                <div class="flex justify-end border-t border-border pt-5">
                    <button type="submit" class="btn btn-outline" :disabled="submitting">
                        <span x-show="!submitting">{{ __('Change password') }}</span>
                        <span x-show="submitting" x-cloak>{{ __('Saving…') }}</span>
                    </button>
                </div>
            </form>
        </section>
    </div>
@endsection