@extends('layouts.dashboard')

@section('content')
@php
/**
 * Shared personal account edit page for EVERY signed-in role — super_admin,
 * vendor, the vendor staff sub-roles (manager / kitchen / host / waiter) and the
 * driver. Rendered inside the dashboard layout, so no header/sidebar here - just
 * the body. Expects: $user (the signed-in user row), $backUrl (post target for
 * this area). Optional: $driver (rider row) renders the extra vehicle section.
 *
 * Split into sections the same way the Settings pages are: the .qm-settings grid
 * (sticky nav column + panel column) with .qm-settings-panel sections driven by
 * qm-tabs.js, so personal details and notification preferences are two
 * destinations rather than one long scroll. Each section uses the shared card
 * anatomy (.qm-card-head over .qm-card-body, a .qm-tip on the title for its note)
 * so this page reads identically to the admin/vendor Settings pages. The two panels
 * hold independent forms posting to different endpoints, so switching section never
 * discards anything the other form is holding.
 */
$backUrl = $backUrl ?? '/';
$user    = $user ?? [];
$driver  = $driver ?? [];
/* A number waiting on a texted code, when the host controller requires one. Only the vendor
   dashboard passes it, so admin and driver render exactly as before. */
$phonePend = is_array($pendingPhone ?? null) ? $pendingPhone : null;
@endphp
<div class="qm-settings">
<nav class="qm-settings-nav" aria-label="{{ t_raw('account.my_account_dash') }}">
    <button type="button" class="is-active" data-panel="profile"><i class="fas fa-user" aria-hidden="true"></i>{{ t_raw('account.profile_details_title') }}</button>
    <button type="button" data-panel="notifications"><i class="fas fa-bell" aria-hidden="true"></i>{{ t_raw('notif.settings_title') }}</button>
    @php /* Only the role that has something to pay for. Staff and drivers are paid BY the platform
             and never charged by it, so a card manager on their account would be a tab with no
             purpose; a super-admin owns the platform rather than buying from it. */
@endphp
    @if (\App\Support\Auth::is('vendor'))
    <button type="button" data-panel="payment"><i class="fas fa-credit-card" aria-hidden="true"></i>{{ t_raw('account.payment') }}</button>
    @php /* Billing sits beside the methods because they answer two halves of one question: what can
             I pay with, and what have I paid. Plans and placements are both charges from this
             platform, so they are one record here rather than two on separate pages. */
@endphp
    <button type="button" data-panel="billing"><i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>{{ t_raw('nav.billing') }}</button>
    @endif
</nav>

<div>
<section class="qm-settings-panel is-active" id="profile">
    @php /* Its own form, above the profile: the profile form posts every field it holds, and a
             code answered inside it would carry the whole profile along with it. Same split the
             customer account page makes, and cancel is a third form for the same reason. */
@endphp
    @if ($phonePend)
    <div class="qm-card">
        <div class="qm-card-head">
            <h2 class="mb-0">{{ t_raw('account.phone_verify_title') }}</h2>
        </div>
        <div class="qm-card-body">
            @php // Raw number into t(): t() escapes the finished sentence, so escaping the
                  // parameter first only got it escaped twice.
@endphp
            <p class="qm-hint">{{ t_raw('account.phone_verify_sub', [':phone' => (string) $phonePend['phone']]) }}</p>
            <form method="post" action="{{ url($backUrl) }}">
                @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="d-flex justify-content-end gap-2 mt-3">
                    <button type="submit" name="intent" value="phone_cancel" class="qm-btn qm-btn-outline" formnovalidate>{{ t_raw('common.cancel') }}</button>
                    <button type="submit" name="intent" value="phone_resend" class="qm-btn qm-btn-outline" formnovalidate>{{ t_raw('auth.verify_resend_btn') }}</button>
                    <button type="submit" name="intent" value="phone_verify" class="qm-btn">{{ t_raw('auth.verify_btn') }}</button>
                </div>
            </form>
        </div>
    </div>
    @endif

    <form method="post" action="{{ url($backUrl) }}" enctype="multipart/form-data">
        @csrf

        <div class="qm-card">
            <div class="qm-card-head">
                <div class="d-flex align-items-center gap-2">
                    <h2 class="mb-0">{{ t_raw('account.profile_details_title') }}</h2>
                    <button type="button" class="qm-tip" aria-label="{{ t_raw('account.edit_intro') }}" data-qm-tip="{{ t_raw('account.edit_intro') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                </div>
            </div>
            <div class="qm-card-body">
                @php // Picker BESIDE the details rather than stacked above them: a circular avatar
                      // in a full-width block is mostly empty space, and it pushed every field below
                      // the fold. .qm-form-grid for the details, never a Bootstrap .row — a .row
                      // negative-margins itself out of a grid cell and misaligns with the cards.
@endphp
                <div class="qm-acct-identity">
                <div>
                    <label class="form-label">{{ t_raw('account.profile_photo_label') }}</label>
                    @php // Same pick-from-your-library-or-upload picker as every other tenant field
                          // (circular + crop), scoped to the signed-in user's own media via /account/media.
@endphp
                    {!! media_field_html('avatar', $user['avatar'] ?? null, ['accept' => 'image', 'circle' => true, 'allowClear' => true, 'endpoint' => '/account/media', 'label' => t_raw('account.profile_photo_label')]) !!}
                </div>

                <div class="qm-form-grid">
                    <div>
                        <label class="form-label" for="acc-first">{{ t_raw('auth.first_name') }}</label>
                        <input type="text" id="acc-first" name="first_name" class="form-control" required autocomplete="given-name"
                               maxlength="60" value="{{ old('first_name', (string) ($user['first_name'] ?? '')) }}" placeholder="{{ t_raw('auth.first_name_placeholder') }}">
                    </div>
                    <div>
                        <label class="form-label" for="acc-last">{{ t_raw('auth.last_name') }}</label>
                        <input type="text" id="acc-last" name="last_name" class="form-control" required autocomplete="family-name"
                               maxlength="60" value="{{ old('last_name', (string) ($user['last_name'] ?? '')) }}" placeholder="{{ t_raw('auth.last_name_placeholder') }}">
                    </div>
                    <div>
                        <label class="form-label" for="acc-nickname">{{ t_raw('account.nickname_label') }} <span class="text-muted">{{ t_raw('common.optional') }}</span></label>
                        <input type="text" id="acc-nickname" name="nickname" class="form-control" autocomplete="nickname"
                               maxlength="60" value="{{ old('nickname', (string) ($user['nickname'] ?? '')) }}" placeholder="{{ t_raw('account.nickname_placeholder') }}">
                    </div>
                    <div>
                        @php $nd = old('name_display', (string) ($user['name_display'] ?? 'full'));
@endphp
                        <label class="form-label" for="acc-name-display">{{ t_raw('account.name_display_label') }}</label>
                        <select id="acc-name-display" name="name_display" class="form-select">
                            <option value="full"{{ $nd === 'full' ? ' selected' : '' }}>{{ t_raw('auth.full_name') }}</option>
                            <option value="first"{{ $nd === 'first' ? ' selected' : '' }}>{{ t_raw('account.name_display_first_only') }}</option>
                            <option value="nickname"{{ $nd === 'nickname' ? ' selected' : '' }}>{{ t_raw('account.nickname_label') }}</option>
                        </select>
                        <p class="qm-hint">{{ t_raw('account.name_display_help') }}</p>
                    </div>
                    <div>
                        <label class="form-label" for="acc-email">{{ t_raw('common.email') }}</label>
                        <input type="email" id="acc-email" name="email" class="form-control" required autocomplete="email"
                               maxlength="190" value="{{ old('email', (string) ($user['email'] ?? '')) }}" placeholder="{{ t_raw('auth.email_placeholder') }}">
                    </div>
                    <div>
                        <label class="form-label" for="acc-phone">{{ t_raw('common.phone') }}</label>
                        <input type="tel" id="acc-phone" name="phone" class="form-control" autocomplete="tel"
                               value="{{ old('phone', (string) ($user['phone'] ?? '')) }}" placeholder="{{ t_raw('auth.phone_placeholder') }}">
                    </div>
                </div>
                </div>
            </div>
        </div>

        <div class="qm-card">
            <div class="qm-card-head">
                <div class="d-flex align-items-center gap-2">
                    <h2 class="mb-0">{{ t_raw('account.change_password_heading_dash') }}</h2>
                    <button type="button" class="qm-tip" aria-label="{{ t_raw('account.password_keep_current_help') }}" data-qm-tip="{{ t_raw('account.password_keep_current_help') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                </div>
            </div>
            <div class="qm-card-body">
                @php // Current / new / confirm read as one action, so they share a row rather than
                      // leaving half of one empty.
@endphp
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label" for="acc-current-password">{{ t_raw('account.current_password_label') }}</label>
                        <div class="qm-pw-wrap">
                            <input type="password" id="acc-current-password" name="current_password" class="form-control"
                                   autocomplete="current-password" aria-describedby="acc-current-password-hint" placeholder="{{ t_raw('account.current_password_placeholder') }}">
                            <button type="button" class="qm-pw-toggle" data-toggle-password="acc-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="acc-current-password-hint" class="qm-hint">{{ t_raw('account.current_password_help') }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="acc-password">{{ t_raw('account.new_password_label') }}</label>
                        <div class="qm-pw-wrap">
                            <input type="password" id="acc-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="acc-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' => 'acc-password'])
                        @php // No policy prose here. The rule is enforced by minlength + pattern, and the
                              // browser states it on a failed submit — spelling it out under the field just
                              // made the card taller than the one beside it.
@endphp
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="acc-password-confirm">{{ t_raw('account.confirm_new_password_label') }}</label>
                        <div class="qm-pw-wrap">
                            <input type="password" id="acc-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="acc-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>
        </div>

        @if (staff_has_pin($user))
        <div class="qm-card">
            <div class="qm-card-head">
                <div class="d-flex align-items-center gap-2">
                    <h2 class="mb-0">{{ t_raw('account.change_pin_heading') }}</h2>
                    <button type="button" class="qm-tip" aria-label="{{ t_raw('account.change_pin_help') }}" data-qm-tip="{{ t_raw('account.change_pin_help') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                </div>
            </div>
            <div class="qm-card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="acc-pin">{{ t_raw('account.new_pin_label') }}</label>
                        <div class="qm-pw-wrap">
                            <input type="password" id="acc-pin" name="pin" class="form-control" inputmode="numeric"
                                   pattern="\d{4}" maxlength="4" autocomplete="off" placeholder="{{ t_raw('account.pin_placeholder') }}">
                            <button type="button" class="qm-pw-toggle" data-toggle-password="acc-pin" aria-pressed="false" aria-label="{{ t_raw('common.show_pin') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="acc-pin-confirm">{{ t_raw('account.confirm_new_pin_label') }}</label>
                        <div class="qm-pw-wrap">
                            <input type="password" id="acc-pin-confirm" name="pin_confirm" class="form-control" inputmode="numeric"
                                   pattern="\d{4}" maxlength="4" autocomplete="off" placeholder="{{ t_raw('account.pin_placeholder') }}">
                            <button type="button" class="qm-pw-toggle" data-toggle-password="acc-pin-confirm" aria-pressed="false" aria-label="{{ t_raw('common.show_pin') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if (!empty($driver))
        <div class="qm-card">
            <div class="qm-card-head">
                <div class="d-flex align-items-center gap-2">
                    <h2 class="mb-0">{{ t_raw('account.vehicle_availability_heading') }}</h2>
                    <button type="button" class="qm-tip" aria-label="{{ t_raw('account.vehicle_availability_help') }}" data-qm-tip="{{ t_raw('account.vehicle_availability_help') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                </div>
            </div>
            <div class="qm-card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="acc-vehicle">{{ t_raw('account.vehicle_type_label') }}</label>
                        <input type="text" id="acc-vehicle" name="vehicle_type" class="form-control" maxlength="50"
                               value="{{ (string) ($driver['vehicle_type'] ?? '') }}" placeholder="{{ t_raw('account.vehicle_type_placeholder') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="acc-plate">{{ t_raw('account.license_plate_label') }}</label>
                        <input type="text" id="acc-plate" name="license_plate" class="form-control" maxlength="20"
                               value="{{ (string) ($driver['license_plate'] ?? '') }}" placeholder="{{ t_raw('account.license_plate_placeholder') }}">
                    </div>
                    <div class="col-12">
                        <label class="qm-switch-row mb-0">
                            <span><strong>{{ t_raw('account.available_for_deliveries_label') }}</strong></span>
                            <input class="form-check-input" type="checkbox" role="switch" id="acc-available" name="is_available" value="1" {{ !empty($driver['is_available']) ? 'checked' : '' }}>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="d-flex justify-content-end">
            <button type="submit" class="qm-btn">{{ t_raw('vendor.reservations.save_changes_btn') }}</button>
        </div>
    </form>
</section>

@php /* THE OWNER'S SAVED CARDS, UNDER THE OWNER'S ACCOUNT, INSIDE THE DASHBOARD — the same
         manager the customer side renders, not a second one written for vendors. Sending an owner
         to the public account page to manage a card would drop them out of the dashboard they were
         working in. */
@endphp
@if (\App\Support\Auth::is('vendor'))
<section class="qm-settings-panel" id="billing">
    @partial('billing-history', ['history' => $billingHistory ?? [], 'pager' => $billingPager ?? []])
</section>

<section class="qm-settings-panel" id="payment">
    @partial('payment-methods', ['methods' => $paymentMethods ?? [], 'savable' => $paymentSavable ?? [], 'publicKey' => $paymentPublicKey ?? ''])
</section>
@endif

<section class="qm-settings-panel" id="notifications">
@partial('notification-prefs', ['returnTab' => 'notifications'])
</section>
</div>
</div>
@endsection