@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. The wrapper is what makes the layout -
 * the nav classes alone render as full-width stacked bars. 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 ?? [];
@endphp
<div class="qm-settings">
<nav class="qm-settings-nav" aria-label="{!! t('account.my_account') !!}">
    <button type="button" class="is-active" data-panel="profile"><i class="fas fa-user" aria-hidden="true"></i>{!! t('account.profile_details_title') !!}</button>
    <button type="button" data-panel="notifications"><i class="fas fa-bell" aria-hidden="true"></i>{!! t('notif.settings_title') !!}</button>
</nav>

<div>
<section class="qm-settings-panel is-active" id="profile">
<div class="qm-card qm-account-edit">
    <h2 class="qm-section-title">{!! t('account.profile_details_title') !!}</h2>
    <p class="text-muted">{!! t('account.edit_intro') !!}</p>

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

        <div class="qm-avatar-row"@if(!empty($user['avatar'])) data-img-field data-img-default="{{ asset('assets/admin/avatar-placeholder.svg') }}"@endif>
            <div class="qm-img-preview">
                <img id="acc-avatar-preview" src="{{ avatar_src($user['avatar'] ?? null) }}"
                     alt="" class="qm-avatar qm-avatar-img" width="72" height="72">
                @if(!empty($user['avatar']))<button type="button" class="qm-img-remove-btn" data-img-remove aria-label="{!! t('account.remove_photo') !!}" title="{!! t('account.remove_photo') !!}"><i class="fas fa-times" aria-hidden="true"></i></button>@endif
            </div>
            <div class="qm-avatar-field">
                <label class="form-label" for="acc-avatar">{!! t('account.profile_photo_label') !!}</label>
                <input type="file" id="acc-avatar" name="avatar" class="form-control" accept="image/*"
                       data-avatar-preview="acc-avatar-preview" aria-describedby="acc-avatar-help">
                <p id="acc-avatar-help" class="text-muted qm-hint">{!! t('account.avatar_help') !!}</p>
                @if(!empty($user['avatar']))
                <div class="qm-img-removed" hidden>{!! t('vendor.staff.photo_remove_notice') !!} <button type="button" class="qm-linkish" data-img-undo>{!! t('common.undo') !!}</button></div>
                <input type="hidden" name="remove_avatar" value="0" data-img-flag>
                @endif
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label" for="acc-first">{!! t('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('auth.first_name_placeholder') !!}">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="acc-last">{!! t('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('auth.last_name_placeholder') !!}">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="acc-nickname">{!! t('account.nickname_label') !!} <span class="text-muted">{!! t('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('account.nickname_placeholder') !!}">
            </div>
            <div class="col-md-6">
                @php $nd = old('name_display', (string) ($user['name_display'] ?? 'full'));
@endphp
                <label class="form-label" for="acc-name-display">{!! t('account.name_display_label') !!}</label>
                <select id="acc-name-display" name="name_display" class="form-select">
                    <option value="full"{!! $nd === 'full' ? ' selected' : '' !!}>{!! t('auth.full_name') !!}</option>
                    <option value="first"{!! $nd === 'first' ? ' selected' : '' !!}>{!! t('account.name_display_first_only') !!}</option>
                    <option value="nickname"{!! $nd === 'nickname' ? ' selected' : '' !!}>{!! t('account.nickname_label') !!}</option>
                </select>
                <p class="text-muted qm-hint">{!! t('account.name_display_help') !!}</p>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="acc-email">{!! t('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('auth.email_placeholder') !!}">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="acc-phone">{!! t('common.phone') !!}</label>
                <input type="tel" id="acc-phone" name="phone" class="form-control" autocomplete="tel"
                       value="{!! old('phone', (string) ($user['phone'] ?? '')) !!}" placeholder="{!! t('auth.phone_placeholder') !!}">
            </div>
        </div>

        <hr class="qm-account-divider">

        <h3 class="qm-section-subtitle">{!! t('account.change_password_heading') !!}</h3>
        <p class="text-muted">{!! t('account.password_keep_current_help') !!}</p>
        @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('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('account.current_password_placeholder') !!}">
                    <button type="button" class="qm-pw-toggle" data-toggle-password="acc-current-password" aria-pressed="false" aria-label="{!! t('common.show_password') !!}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                </div>
                <p id="acc-current-password-hint" class="qm-hint">{!! t('account.current_password_help') !!}</p>
            </div>
            <div class="col-md-4">
                <label class="form-label" for="acc-password">{!! t('account.new_password_label') !!}</label>
                <div class="qm-pw-wrap">
                    <input type="password" id="acc-password" name="password" class="form-control"
                           minlength="12" pattern="(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{12,}" autocomplete="new-password" aria-describedby="acc-password-hint" placeholder="{!! t('auth.password_placeholder') !!}">
                    <button type="button" class="qm-pw-toggle" data-toggle-password="acc-password" aria-pressed="false" aria-label="{!! t('common.show_password') !!}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                </div>
                <p id="acc-password-hint" class="qm-hint">{!! t('account.new_password_policy_help') !!}</p>
            </div>
            <div class="col-md-4">
                <label class="form-label" for="acc-password-confirm">{!! t('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('auth.password_placeholder') !!}">
                    <button type="button" class="qm-pw-toggle" data-toggle-password="acc-password-confirm" aria-pressed="false" aria-label="{!! t('common.show_password') !!}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

        @if(staff_has_pin($user))
        <hr class="qm-account-divider">
        <h3 class="qm-section-subtitle">{!! t('account.change_pin_heading') !!}</h3>
        <p class="text-muted">{!! t('account.change_pin_help') !!}</p>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label" for="acc-pin">{!! t('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('account.pin_placeholder') !!}">
                    <button type="button" class="qm-pw-toggle" data-toggle-password="acc-pin" aria-pressed="false" aria-label="{!! t('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('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('account.pin_placeholder') !!}">
                    <button type="button" class="qm-pw-toggle" data-toggle-password="acc-pin-confirm" aria-pressed="false" aria-label="{!! t('common.show_pin') !!}"><i class="fas fa-eye" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
        @endif

        @if(!empty($driver))
        <hr class="qm-account-divider">
        <h3 class="qm-section-subtitle">{!! t('account.vehicle_availability_heading') !!}</h3>
        <p class="text-muted">{!! t('account.vehicle_availability_help') !!}</p>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label" for="acc-vehicle">{!! t('account.vehicle_type_label') !!}</label>
                <input type="text" id="acc-vehicle" name="vehicle_type" class="form-control" maxlength="60"
                       value="{{ (string) ($driver['vehicle_type'] ?? '') }}" placeholder="{!! t('account.vehicle_type_placeholder') !!}">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="acc-plate">{!! t('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('account.license_plate_placeholder') !!}">
            </div>
            <div class="col-12">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="acc-available" name="is_available" value="1" {!! !empty($driver['is_available']) ? 'checked' : '' !!}>
                    <label class="form-check-label" for="acc-available">{!! t('account.available_for_deliveries_label') !!}</label>
                </div>
            </div>
        </div>
        @endif

        <div class="qm-account-actions">
            <button type="submit" class="qm-btn">{!! t('vendor.reservations.save_changes_btn') !!}</button>
        </div>
    </form>
</div>
</section>

<section class="qm-settings-panel" id="notifications">
@include('partials.notification-prefs', ['returnTab' => 'notifications'])
</section>
</div>
</div>
<script src="{!! asset('js/avatar-preview.js') !!}"></script>
@endsection