@extends('layouts.public')

@section('content')
@php
/**
 * @var array      $user
 * @var array      $sessions      live browsers for this account, current one flagged
 * @var bool       $twoFactorOn
 * @var array|null $pendingPhone  a new number waiting on a texted code, if any
 */
$sessions    = $sessions ?? [];
$twoFactorOn = (bool) ($twoFactorOn ?? false);
$phonePend   = is_array($pendingPhone ?? null) ? $pendingPhone : null;
@endphp
<div class="qm-page-head">
    <div class="container-fluid">
        <h1 class="qm-page-title">{{ t_raw('account.my_account') }}</h1>
        <nav class="breadcrumb" aria-label="{{ t_raw('common.breadcrumb_aria') }}"><a href="{{ route('home') }}">{{ t_raw('common.home') }}</a><span class="mx-2" aria-hidden="true">/</span><span class="active">{{ t_raw('account.crumb') }}</span></nav>
    </div>
</div>
@php /* The page's messages belong UNDER its title band, inside the page the reader is
         looking at — not floating above it. getFlashes() consumes, so the layout's own
         call further out finds nothing and does not draw it twice. */
@endphp
<div class="container-fluid">@partial('flash')</div>

<section class="qm-section">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-lg-3">@partial('account-nav')</div>
            <div class="col-lg-9">
                <div class="qm-card qm-account-edit">
                    <h2>{{ t_raw('account.profile_details_title') }}</h2>
                    <form method="post" action="{{ route('account') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="avatar" class="form-label">{{ t_raw('account.profile_photo_label') }}</label>
                            <div class="border rounded-3 d-flex justify-content-center align-items-center qm-upload-preview">
                                <input type="file" id="avatar" name="avatar" class="form-control" accept="image/*" data-filepond data-pond-circle @if (!empty($user['avatar'])) data-pond-poster="{{ avatar_src($user['avatar']) }}" data-pond-flag="remove_avatar"@endif>
                                @if (!empty($user['avatar']))<input type="hidden" name="remove_avatar" value="0">@endif
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6"><label for="first_name" class="form-label">{{ t_raw('auth.first_name') }}</label><input type="text" id="first_name" name="first_name" class="form-control" value="{{ $user['first_name'] ?? '' }}" autocomplete="given-name" maxlength="60" required placeholder="{{ t_raw('auth.first_name_placeholder') }}"></div>
                            <div class="col-md-6"><label for="last_name" class="form-label">{{ t_raw('auth.last_name') }}</label><input type="text" id="last_name" name="last_name" class="form-control" value="{{ $user['last_name'] ?? '' }}" autocomplete="family-name" maxlength="60" required placeholder="{{ t_raw('auth.last_name_placeholder') }}"></div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="email" class="form-label">{{ t_raw('common.email') }}</label>
                                <input type="email" id="email" class="form-control" value="{{ $user['email'] }}" autocomplete="email" readonly aria-describedby="email-help">
                                <p id="email-help" class="text-muted qm-hint">{{ t_raw('account.email_change_help') }}</p>
                            </div>
                            @php /* While a code is outstanding the field is READONLY, never disabled:
                                      a disabled input posts nothing, and an empty `phone` is how this
                                      form says "clear my number" — so disabling it would wipe the
                                      number the customer is in the middle of replacing. */
@endphp
                            <div class="col-md-6"><label for="phone" class="form-label">{{ t_raw('common.phone') }}</label><input type="tel" id="phone" name="phone" class="form-control" value="{{ $user['phone'] ?? '' }}" autocomplete="tel" placeholder="{{ t_raw('auth.phone_placeholder') }}"{{ $phonePend ? ' readonly' : '' }}></div>
                        </div>
                        <hr>
                        <h3>{{ t_raw('account.change_password_heading') }}</h3>
                        <p class="text-muted qm-hint">{{ t_raw('account.password_change_help') }}</p>
                        <div class="row g-3">
                            <div class="col-md-4"><label for="current_password" class="form-label">{{ t_raw('account.current_password_label') }}</label>
                                <div class="qm-pw-wrap">
                                    <input type="password" id="current_password" name="current_password" class="form-control" autocomplete="current-password" placeholder="{{ t_raw('account.current_password_placeholder') }}" aria-describedby="current-password-help">
                                    <button type="button" class="qm-pw-toggle" data-toggle-password="current_password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                                </div>
                                <p id="current-password-help" class="text-muted qm-hint">{{ t_raw('account.current_password_help') }}</p>
                            </div>
                            <div class="col-md-4"><label for="password" class="form-label">{{ t_raw('account.new_password_label') }}</label>
                                <div class="qm-pw-wrap">
                                    <input type="password" id="password" name="password" class="form-control" minlength="12" pattern="(?!.*\s)(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{12,}" autocomplete="new-password" placeholder="{{ t_raw('auth.password_placeholder') }}">
                                    <button type="button" class="qm-pw-toggle" data-toggle-password="password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                                </div>
                                @partial('password-rules', ['for' => 'password'])
                            </div>
                            <div class="col-md-4"><label for="password_confirm" class="form-label">{{ t_raw('account.confirm_password_label') }}</label>
                                <div class="qm-pw-wrap">
                                    <input type="password" id="password_confirm" name="password_confirm" class="form-control" minlength="12" autocomplete="new-password" placeholder="{{ t_raw('auth.password_placeholder') }}">
                                    <button type="button" class="qm-pw-toggle" data-toggle-password="password_confirm" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="qm-account-actions">
                            <button type="submit" class="qm-btn">{{ t_raw('vendor.reservations.save_changes_btn') }}</button>
                        </div>
                    </form>
                </div>

                @php /* M39. Shown only while a code is outstanding — a card that appears BECAUSE a
                          number is waiting, in the same .qm-card anatomy as its neighbours, and the
                          code input is auth/verify.php's field verbatim (one-time-code, six digits).

                          Confirm is FIRST in the row, and that is deliberate rather than sloppy: a
                          browser submits a form on Enter using the first submit button in the markup,
                          and this is a field people finish with Enter. With Resend first, every
                          keyboard user would land on the 60-second cooldown instead of confirming.
                          Cancel is a form of its own — a different operation on a different thing —
                          matching the per-device sign-out form already in this view. */
@endphp
                @if ($phonePend)
                <div class="qm-card qm-account-edit">
                    <h2>{{ t_raw('account.phone_verify_title') }}</h2>
                    @php // Raw number into t(): t() escapes the finished sentence, so escaping the
                          // parameter first only got it escaped twice.
@endphp
                    <p class="text-muted qm-hint">{{ t_raw('account.phone_verify_sub', [':phone' => (string) $phonePend['phone']]) }}</p>
                    <form method="post" action="{{ route('account') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="phone_code" class="form-label">{{ t_raw('auth.verify_code_label') }}</label>
                                <input type="text" id="phone_code" name="phone_code" class="form-control" inputmode="numeric"
                                       pattern="\d{6}" maxlength="6" autocomplete="one-time-code" required
                                       placeholder="{{ t_raw('auth.two_factor_code_placeholder') }}">
                            </div>
                        </div>
                        <div class="qm-account-actions gap-2">
                            <button type="submit" name="intent" value="phone_verify" class="qm-btn">{{ t_raw('auth.verify_btn') }}</button>
                            <button type="submit" name="intent" value="phone_resend" class="qm-btn qm-btn-outline" formnovalidate>{{ t_raw('auth.verify_resend_btn') }}</button>
                        </div>
                    </form>
                    <form method="post" action="{{ route('account') }}" class="qm-account-actions">
                        @csrf
                        <input type="hidden" name="intent" value="phone_cancel">
                        <button type="submit" class="qm-btn qm-btn-outline">{{ t_raw('common.cancel') }}</button>
                    </form>
                </div>
                @endif

                @php /* Second factor. A card of its own rather than a field inside the profile form,
                          because switching it on is a handshake with an app rather than a value to
                          save — and the profile form's Save must never be able to change it by
                          accident. Same .qm-card anatomy as the block above. */
@endphp
                <div class="qm-card qm-account-edit">
                    <h2>{{ t_raw('account.two_factor_title') }}</h2>
                    <p class="text-muted qm-hint">{!! $twoFactorOn ? t('account.two_factor_on_sub') : t('account.two_factor_off_sub') !!}</p>
                    <div class="qm-account-actions">
                        <a href="{{ route('account.two-factor') }}" class="qm-btn qm-btn-outline">
                            {!! $twoFactorOn ? t('account.two_factor_manage_btn') : t('account.two_factor_setup_btn') !!}
                        </a>
                    </div>
                </div>

                @php /* Signed-in devices. The list is the new part; ending them is
                          Auth::revokeOtherSessions(), which already existed and is unchanged. */
@endphp
                <div class="qm-card qm-account-edit">
                    <h2>{{ t_raw('account.devices_title') }}</h2>
                    @if ($sessions)
                    <div class="table-responsive">
                    <table class="qm-table">
                        <thead><tr><th>{{ t_raw('account.device_col') }}</th><th>{{ t_raw('account.device_ip_col') }}</th><th>{{ t_raw('account.device_last_seen_col') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
                        <tbody>
                            @foreach ($sessions as $s)
                            <tr>
                                <td>
                                    <div class="qm-tbl-id-text">
                                        <strong>{{ (string) ($s['label'] ?? '') }}</strong>
                                        @if (!empty($s['is_current']))<small>{{ t_raw('account.device_this_one') }}</small>@endif
                                    </div>
                                </td>
                                <td class="qm-cell-body">{{ (string) ($s['ip'] ?? '') }}</td>
                                <td class="qm-cell-body">{!! fmt_datetime($s['last_seen_at']) !!}</td>
                                <td class="qm-actions-cell">
                                    <div class="qm-row-actions">
                                        @if (empty($s['is_current']))
                                        <form method="post" action="{{ route('account') }}">
                                            @csrf
                                            <input type="hidden" name="intent" value="revoke_session">
                                            <input type="hidden" name="session_id" value="{{ (int) $s['id'] }}">
                                            <button type="submit" class="qm-btn qm-btn-outline qm-btn-xs">{{ t_raw('account.device_sign_out_btn') }}</button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                    @else
                    <p class="text-muted qm-hint">{{ t_raw('account.devices_empty') }}</p>
                    @endif
                    @if (count($sessions) > 1)
                    <form method="post" action="{{ route('account') }}" class="qm-account-actions">
                        @csrf
                        <input type="hidden" name="intent" value="revoke_others">
                        <button type="submit" class="qm-btn qm-btn-outline">{{ t_raw('admin.users.action_sign_out') }}</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection