@extends('layouts.app')

@section('title', __('auth::messages.profile.title'))

@section('content')
    <x-page-header :title="__('auth::messages.profile.title')" :subtitle="$user->email" />

    {{--
        One form over both panels, and one Save.

        There were two — details on the left, password on the right — so
        somebody who corrected their phone number and also changed their
        password had to press Save twice, with nothing on the screen saying the
        first press had not covered both.

        The password boxes are optional here: left empty they mean "leave it
        alone". Filled, they are governed by exactly the rules they were before,
        the current password included.

        Two-factor and the session list stay outside this form. They are not
        settings being saved but actions, each with its own button — and a form
        may not contain another form.
    --}}
    <form method="POST" action="{{ route('profile.update') }}">
        @csrf
        @method('PUT')

        <div class="row g-3">
            <div class="col-12 col-lg-6">
                <x-px.panel :title="__('auth::messages.profile.details')">
                    <x-form.input name="name" :label="__('auth::messages.fields.name')" :value="$user->name" required />
                    <x-form.input name="email" type="email" :label="__('auth::messages.fields.email')" :value="$user->email" required />
                    <x-form.input name="phone" :label="__('auth::messages.fields.phone')" :value="$user->phone" />

                    <x-form.select name="locale" :label="__('auth::messages.fields.locale')"
                                   :options="collect($locales)->mapWithKeys(fn ($l, $code) => [$code => $l['native']])->all()"
                                   :selected="$user->locale" required />
                </x-px.panel>
            </div>

            <div class="col-12 col-lg-6">
                <x-px.panel :title="__('auth::messages.profile.password')">
                    <p class="px-hint mt-0">{{ __('auth::messages.profile.password_optional') }}</p>

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

                    <x-form.input name="password" type="password"
                                  :label="__('auth::messages.profile.new_password')"
                                  :help="__('auth::messages.profile.password_help', ['min' => $passwordMinLength])"
                                  autocomplete="new-password" />

                    <x-form.input name="password_confirmation" type="password"
                                  :label="__('auth::messages.profile.confirm_password')"
                                  autocomplete="new-password" />
                </x-px.panel>
            </div>
        </div>

        <div class="mt-3 mb-3">
            <button type="submit" class="btn px-btn-primary">{{ __('common.save') }}</button>
        </div>
    </form>

    <div class="row g-3">
        <div class="col-12 col-lg-6">
            <x-px.panel :title="__('auth::messages.profile.two_factor')">
                @if ($twoFactorEnabled)
                    <p class="small text-success">
                        <i class="bi bi-shield-check"></i> {{ __('auth::messages.profile.two_factor_enabled') }}
                    </p>

                    <form method="POST" action="{{ url('/user/two-factor-authentication') }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm px-btn-danger-ghost">
                            {{ __('auth::messages.profile.two_factor_disable') }}
                        </button>
                    </form>
                @else
                    <p class="px-hint">{{ __('auth::messages.profile.two_factor_disabled') }}</p>

                    <form method="POST" action="{{ url('/user/two-factor-authentication') }}">
                        @csrf
                        <button type="submit" class="btn btn-sm px-btn-primary">
                            {{ __('auth::messages.profile.two_factor_enable') }}
                        </button>
                    </form>
                @endif

                @if (session('status') === 'two-factor-authentication-enabled')
                    <hr>
                    <p class="small">{{ __('auth::messages.profile.two_factor_scan') }}</p>
                    <div class="mb-2">{!! request()->user()->twoFactorQrCodeSvg() !!}</div>

                    <p class="small text-muted mb-1">{{ __('auth::messages.profile.recovery_codes_help') }}</p>
                    <ul class="small font-monospace">
                        @foreach (json_decode(decrypt(request()->user()->two_factor_recovery_codes), true) as $code)
                            <li>{{ $code }}</li>
                        @endforeach
                    </ul>

                    <form method="POST" action="{{ url('/user/confirmed-two-factor-authentication') }}">
                        @csrf
                        <x-form.input name="code" :label="__('auth.two_factor_code')" inputmode="numeric" required />
                        <button type="submit" class="btn btn-sm px-btn-primary">{{ __('common.confirm') }}</button>
                    </form>
                @endif
            </x-px.panel>
        </div>

        <div class="col-12">
            <x-px.panel :title="__('auth::messages.profile.sessions')" :subtitle="__('auth::messages.profile.sessions_help')">
                <x-slot:actions>
                    @if (count($sessions) > 1)
                        <form method="POST" action="{{ route('profile.sessions.others') }}"
                              data-clinic-confirm="{{ __('auth::messages.profile.sign_out_others') }}?">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm px-btn-danger-ghost">
                                {{ __('auth::messages.profile.sign_out_others') }}
                            </button>
                        </form>
                    @endif
                </x-slot:actions>

                @forelse ($sessions as $session)
                    <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                        <div>
                            <div class="small fw-medium">
                                {{ $session->device() }}
                                @if ($session->isCurrent)
                                    <span class="px-pill px-pill--green">{{ __('auth::messages.profile.session_current') }}</span>
                                @endif
                            </div>
                            <div class="px-hint">
                                {{ $session->ip }} · {{ $session->lastActiveAt->diffForHumans() }}
                            </div>
                        </div>

                        @unless ($session->isCurrent)
                            <form method="POST" action="{{ route('profile.sessions.destroy', $session->id) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm px-btn-ghost">
                                    <i class="bi bi-box-arrow-right"></i>
                                </button>
                            </form>
                        @endunless
                    </div>
                @empty
                    <div class="px-empty py-4">
                        <div class="px-empty__art" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2.5" y="4" width="19" height="12" rx="2" /><path d="M8 20h8M12 16v4" />
                            </svg>
                        </div>

                        <p class="px-empty__title">{{ __('auth::messages.profile.no_sessions') }}</p>
                        <p class="px-empty__text mb-0">{{ __('auth::messages.profile.no_sessions_text') }}</p>
                    </div>
                @endforelse
            </x-px.panel>
        </div>
    </div>
@endsection