@extends('layouts.site')

@section('title', __('site.account_page_title'))

@section('content')
@php
    $lc = ['locale' => app()->getLocale()];
    $siteAuth = app(\App\Services\Site\SiteAuthService::class);
    $defaultName = __('site.auth_default_name');
    $displayName = ($user->name && $user->name !== $defaultName) ? $user->name : '';
    $requestTypes = site_request_types();
    $accountBoot = [
        'user' => [
            'id' => $user->id,
            'name' => $displayName,
            'mobile' => $user->mobile ? $siteAuth->toLocalMobile($user->mobile) : '',
        ],
        'requestsCount' => $complaints->total(),
        'unreadNotifications' => $unreadNotifications ?? 0,
        'commissionUnreadCount' => $commissionUnreadCount ?? 0,
        'commissionPendingSurveyCount' => $commissionPendingSurveyCount ?? 0,
        'commissionBadgeCount' => (int) ($commissionUnreadCount ?? 0) + (int) ($commissionPendingSurveyCount ?? 0),
        'requestCounts' => $requestCounts ?? ['all' => 0, 'repair' => 0, 'price_inquiry' => 0],
        'activeTab' => $activeTab ?? 'requests',
        'mobileVerified' => filled($user->mobile_verified_at) || filled($user->mobile),
        'avatarUrl' => \App\Support\UserAvatar::url($user->avatar),
        'resendSeconds' => (int) config('site_auth.otp_resend_seconds', 60),
        'routes' => [
            'updateName' => route('site.account.name.update', $lc),
            'updateAvatar' => route('site.account.avatar.update', $lc),
            'updatePassword' => site_auth_method_enabled('password') ? route('site.account.password.update', $lc) : null,
            'sendMobileOtp' => route('site.account.mobile.otp.send', $lc),
            'verifyMobile' => route('site.account.mobile.verify', $lc),
        ],
        'labels' => [
            'nameSaved' => __('site.account_name_saved'),
            'avatarSaved' => __('site.account_avatar_saved'),
            'avatarInvalid' => __('site.account_avatar_invalid'),
            'mobileSaved' => __('site.account_mobile_saved'),
            'passwordSaved' => __('site.account_password_saved'),
            'sendFailed' => __('site.auth_otp_send_failed'),
            'invalid' => __('site.auth_otp_invalid'),
            'resend' => __('site.auth_resend'),
            'resendIn' => __('site.auth_resend_in'),
            'errorGeneric' => __('site.auth_otp_send_failed'),
            'logoutConfirm' => __('site.account_logout_confirm'),
            'passwordMismatch' => __('site.account_password_mismatch'),
            'passwordWeak' => __('site.account_password_strength_weak'),
            'passwordFair' => __('site.account_password_strength_fair'),
            'passwordStrong' => __('site.account_password_strength_strong'),
        ],
    ];
@endphp

<div
    class="site-container eca-account-page"
    x-data="siteAccount(@js($accountBoot))"
    data-commissions-enabled="{{ ! empty($commissionsEnabled) ? '1' : '0' }}"
>
    <div
        class="eca-account-shell"
        :class="{ 'eca-account-shell--profile': activeTab === 'profile' }"
    >
        <div class="eca-account-sticky-top">
            <header
                class="eca-account-header"
                x-show="activeTab === 'profile'"
                x-cloak
            >
                <div class="eca-account-identity">
                    <div class="eca-account-avatar" data-account-avatar-host aria-hidden="true">
                        <img
                            x-show="avatarUrl"
                            x-cloak
                            :src="avatarUrl"
                            alt=""
                            class="eca-account-avatar__img"
                            data-account-avatar
                        />
                        <span class="eca-account-avatar__initials" x-show="!avatarUrl" x-text="initials()"></span>
                    </div>
                    <div class="eca-account-identity__copy">
                        <p class="eca-account-kicker">{{ __('site.account_page_title') }}</p>
                        <h1 class="eca-account-identity__name" x-text="name || '{{ __('site.auth_default_name') }}'"></h1>
                        <p class="eca-account-identity__meta">
                            <span dir="ltr" x-text="currentMobile || '—'"></span>
                            <span class="eca-account-verified" x-show="mobileVerified && currentMobile">
                                {{ __('site.account_mobile_verified') }}
                            </span>
                        </p>
                    </div>
                </div>
                <div class="eca-account-header__actions">
                    <div x-show="!confirmLogout" class="eca-account-header__logout-wrap">
                        <button type="button" class="eca-account-logout" @click="confirmLogout = true">
                            {{ __('site.auth_logout') }}
                        </button>
                    </div>
                    <div x-show="confirmLogout" x-cloak class="eca-account-logout-confirm">
                        <span>{{ __('site.account_logout_confirm') }}</span>
                        <button type="button" class="eca-account-logout" @click="$store.siteAuth.logout()">{{ __('site.account_logout_confirm_yes') }}</button>
                        <button type="button" class="site-pressable text-sm eca-theme-text-muted" @click="confirmLogout = false">{{ __('site.account_cancel') }}</button>
                    </div>
                </div>
            </header>

            <nav class="eca-account-nav" role="tablist" aria-label="{{ __('site.account_page_title') }}" @keydown="onTabKey($event)">
                <button
                    type="button"
                    id="account-tab-requests"
                    class="eca-account-tab"
                    role="tab"
                    :class="{ 'eca-account-tab--active': activeTab === 'requests' }"
                    :aria-selected="(activeTab === 'requests').toString()"
                    :tabindex="activeTab === 'requests' ? 0 : -1"
                    aria-controls="account-panel-requests"
                    @click="switchTab('requests')"
                >
                    <x-site.svg-icon name="document-add" class="h-4 w-4 shrink-0" />
                    <span>{{ __('site.account_tab_requests') }}</span>
                    <span
                        x-show="requestsCount > 0"
                        class="eca-account-tab__badge"
                        x-text="requestsCount"
                    ></span>
                </button>
                <button
                    type="button"
                    id="account-tab-notifications"
                    class="eca-account-tab"
                    role="tab"
                    :class="{ 'eca-account-tab--active': activeTab === 'notifications' }"
                    :aria-selected="(activeTab === 'notifications').toString()"
                    :tabindex="activeTab === 'notifications' ? 0 : -1"
                    aria-controls="account-panel-notifications"
                    @click="switchTab('notifications')"
                >
                    <x-site.svg-icon name="notification" class="h-4 w-4 shrink-0" />
                    <span>{{ __('site.account_tab_notifications') }}</span>
                    <span
                        x-show="unreadNotifications > 0"
                        class="eca-account-tab__badge"
                        x-text="unreadNotifications"
                    ></span>
                </button>
                @if (! empty($commissionsEnabled))
                <button
                    type="button"
                    id="account-tab-commissions"
                    class="eca-account-tab"
                    role="tab"
                    :class="{ 'eca-account-tab--active': activeTab === 'commissions' }"
                    :aria-selected="(activeTab === 'commissions').toString()"
                    :tabindex="activeTab === 'commissions' ? 0 : -1"
                    aria-controls="account-panel-commissions"
                    @click="switchTab('commissions')"
                >
                    <x-site.svg-icon name="details" class="h-4 w-4 shrink-0" />
                    <span>{{ __('site.account_tab_commissions') }}</span>
                    <span
                        x-show="commissionBadgeCount > 0"
                        class="eca-account-tab__badge"
                        x-text="commissionBadgeCount"
                    ></span>
                </button>
                @endif
                <button
                    type="button"
                    id="account-tab-profile"
                    class="eca-account-tab"
                    role="tab"
                    :class="{ 'eca-account-tab--active': activeTab === 'profile' }"
                    :aria-selected="(activeTab === 'profile').toString()"
                    :tabindex="activeTab === 'profile' ? 0 : -1"
                    aria-controls="account-panel-profile"
                    @click="switchTab('profile')"
                >
                    <x-site.svg-icon name="login" class="h-4 w-4 shrink-0" />
                    <span>{{ __('site.account_tab_profile') }}</span>
                </button>
            </nav>
        </div>

        <div class="eca-account-workspace">
                <div
                    id="account-panel-profile"
                    role="tabpanel"
                    aria-labelledby="account-tab-profile"
                    x-show="activeTab === 'profile'"
                    x-cloak
                    class="eca-account-panel"
                >
                    <div class="eca-account-profile-grid">
                        <section class="eca-profile-card">
                            <div class="eca-profile-card__head">
                                <span class="eca-profile-card__icon" aria-hidden="true">
                                    <x-site.svg-icon name="details" class="h-4 w-4" />
                                </span>
                                <div>
                                    <h2 class="eca-profile-card__title">{{ __('site.account_personal_title') }}</h2>
                                    <p class="eca-profile-card__hint">{{ __('site.account_name_hint') }}</p>
                                </div>
                            </div>
                            <div class="eca-profile-card__row eca-profile-card__row--avatar">
                                <span class="eca-profile-card__label">{{ __('site.account_avatar_label') }}</span>
                                <div class="eca-profile-card__avatar-editor">
                                    <div class="eca-account-avatar eca-account-avatar--lg" aria-hidden="true">
                                        <img x-show="avatarUrl" x-cloak :src="avatarUrl" alt="" class="eca-account-avatar__img" />
                                        <span class="eca-account-avatar__initials" x-show="!avatarUrl" x-text="initials()"></span>
                                    </div>
                                    <div class="eca-profile-card__avatar-actions">
                                        <input
                                            id="account-avatar"
                                            type="file"
                                            class="sr-only"
                                            accept="image/jpeg,image/png,image/webp,image/gif"
                                            @change="onAvatarFile($event)"
                                        />
                                        <label for="account-avatar" class="site-btn-outline eca-profile-card__cta">
                                            {{ __('site.account_avatar_choose') }}
                                        </label>
                                        <button
                                            type="button"
                                            class="site-btn-primary eca-profile-card__cta"
                                            :disabled="avatarLoading || !avatarFile"
                                            @click="saveAvatar()">
                                            <span x-show="!avatarLoading">{{ __('site.account_avatar_save') }}</span>
                                            <span x-show="avatarLoading" x-cloak>{{ __('site.account_avatar_saving') }}</span>
                                        </button>
                                        <p class="eca-profile-card__microhint">{{ __('site.account_avatar_hint') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="eca-profile-card__row">
                                <label class="eca-profile-card__label" for="account-name">{{ __('site.account_name_label') }}</label>
                                <div class="eca-profile-card__control">
                                    <input
                                        id="account-name"
                                        type="text"
                                        class="eca-auth-modal__input"
                                        x-model="name"
                                        autocomplete="name"
                                        maxlength="120"
                                    />
                                    <button
                                        type="button"
                                        class="site-btn-primary eca-profile-card__cta"
                                        :disabled="nameLoading || !String(name).trim()"
                                        @click="saveName()">
                                        <span x-show="!nameLoading">{{ __('site.account_save_changes') }}</span>
                                        <span x-show="nameLoading" x-cloak>{{ __('site.account_name_saving') }}</span>
                                    </button>
                                </div>
                            </div>
                            <p class="eca-account-feedback-slot">
                                <span x-show="nameError" x-text="nameError" class="eca-account-feedback eca-account-feedback--error" x-cloak></span>
                                <span x-show="nameSuccess" x-text="nameSuccess" class="eca-account-feedback eca-account-feedback--success" x-cloak></span>
                                <span x-show="avatarError" x-text="avatarError" class="eca-account-feedback eca-account-feedback--error" x-cloak></span>
                                <span x-show="avatarSuccess" x-text="avatarSuccess" class="eca-account-feedback eca-account-feedback--success" x-cloak></span>
                            </p>
                        </section>

                        @if (site_auth_method_enabled('password'))
                            <section class="eca-profile-card">
                                <div class="eca-profile-card__head">
                                    <span class="eca-profile-card__icon" aria-hidden="true">
                                        <x-site.svg-icon name="lock" class="h-4 w-4" />
                                    </span>
                                    <div>
                                        <h2 class="eca-profile-card__title">{{ __('site.account_security_title') }}</h2>
                                        <p class="eca-profile-card__hint">{{ __('site.account_password_hint') }}</p>
                                    </div>
                                </div>
                                <div class="eca-profile-card__field">
                                    <label class="eca-profile-card__label" for="account-password-current">{{ __('site.account_password_current') }}</label>
                                    <p class="eca-profile-card__microhint">{{ __('site.account_password_current_hint') }}</p>
                                    <x-site.password-input id="account-password-current" class="eca-auth-modal__input" x-model="currentPassword" autocomplete="current-password" />
                                </div>
                                <div class="eca-profile-card__field">
                                    <label class="eca-profile-card__label" for="account-password-new">{{ __('site.account_password_new') }}</label>
                                    <x-site.password-input id="account-password-new" class="eca-auth-modal__input" x-model="password" autocomplete="new-password" />
                                    <div class="eca-password-meter" x-show="String(password).length > 0" x-cloak>
                                        <div class="eca-password-meter__bar" :data-score="passwordScore()"><span></span></div>
                                        <p class="eca-password-meter__label" x-text="passwordStrengthLabel()"></p>
                                        <ul class="eca-password-meter__rules">
                                            <li :class="{ 'is-ok': password.length >= 8 }">{{ __('site.account_password_rule_length') }}</li>
                                            <li :class="{ 'is-ok': /\d/.test(password) }">{{ __('site.account_password_rule_number') }}</li>
                                            <li :class="{ 'is-ok': /[A-Z]/.test(password) }">{{ __('site.account_password_rule_upper') }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="eca-profile-card__field">
                                    <label class="eca-profile-card__label" for="account-password-confirm">{{ __('site.account_password_confirm') }}</label>
                                    <x-site.password-input id="account-password-confirm" class="eca-auth-modal__input" x-model="passwordConfirmation" autocomplete="new-password" />
                                </div>
                                <p class="eca-account-feedback-slot">
                                    <span x-show="passwordError" x-text="passwordError" class="eca-account-feedback eca-account-feedback--error" x-cloak></span>
                                    <span x-show="passwordSuccess" x-text="passwordSuccess" class="eca-account-feedback eca-account-feedback--success" x-cloak></span>
                                </p>
                                <div class="eca-profile-card__actions eca-profile-card__actions--end">
                                    <button type="button" class="site-btn-primary eca-profile-card__cta" :disabled="passwordLoading || !String(password).trim() || password !== passwordConfirmation" @click="savePassword()">
                                        <span x-show="!passwordLoading">{{ __('site.account_password_update') }}</span>
                                        <span x-show="passwordLoading" x-cloak>{{ __('site.account_password_saving') }}</span>
                                    </button>
                                </div>
                            </section>
                        @endif
                    </div>

                    <section class="eca-profile-card">
                        <div class="eca-profile-card__head">
                            <span class="eca-profile-card__icon" aria-hidden="true">
                                <x-site.svg-icon name="contact_us" class="h-4 w-4" />
                            </span>
                            <div>
                                <h2 class="eca-profile-card__title">{{ __('site.account_mobile_change_title') }}</h2>
                                <p class="eca-profile-card__hint">{{ __('site.account_mobile_change_hint') }}</p>
                            </div>
                        </div>

                        <div class="eca-account-mobile-current">
                            <div>
                                <span class="eca-profile-card__label">{{ __('site.account_mobile_current') }}</span>
                                <p class="eca-account-mobile-current__value" dir="ltr" x-text="currentMobile || '—'"></p>
                            </div>
                            <span class="eca-account-verified" x-show="mobileVerified && currentMobile">{{ __('site.account_mobile_verified') }}</span>
                        </div>

                        <div x-show="mobileStep === 'idle'" class="eca-profile-card__row eca-profile-card__row--mobile">
                            <label class="eca-profile-card__label" for="account-new-mobile">{{ __('site.account_mobile_new') }}</label>
                            <div class="eca-profile-card__control">
                                <input
                                    id="account-new-mobile"
                                    type="tel"
                                    class="eca-auth-modal__input"
                                    x-model="newMobile"
                                    :placeholder="'{{ __('site.account_mobile_new_placeholder') }}'"
                                    dir="ltr"
                                    autocomplete="tel"
                                    inputmode="tel"
                                />
                                <button
                                    type="button"
                                    class="site-btn-primary eca-profile-card__cta"
                                    :disabled="mobileLoading || !String(newMobile).trim()"
                                    @click="sendMobileOtp()">
                                    <span x-show="!mobileLoading">{{ __('site.account_mobile_send_code') }}</span>
                                    <span x-show="mobileLoading" x-cloak>{{ __('site.auth_sending') }}</span>
                                </button>
                            </div>
                        </div>

                        <div x-show="mobileStep === 'code'" x-cloak class="eca-otp-inline">
                            <p class="text-sm eca-theme-text-muted">
                                {{ __('site.account_otp_sent_to') }}
                                <span class="font-mono font-semibold eca-theme-text" dir="ltr" x-text="maskMobile(pendingMobile)"></span>
                            </p>
                            <div class="eca-profile-card__field">
                                <label class="eca-profile-card__label" for="account-otp">{{ __('site.auth_otp_label') }}</label>
                                <input
                                    id="account-otp"
                                    type="text"
                                    class="eca-auth-modal__input eca-otp-inline__input text-center tracking-[0.35em]"
                                    x-model="otpCode"
                                    maxlength="6"
                                    dir="ltr"
                                    inputmode="numeric"
                                    pattern="[0-9]*"
                                    autocomplete="one-time-code"
                                    @input="onOtpInput()"
                                />
                            </div>
                            <div class="flex flex-wrap items-center gap-3">
                                <button
                                    type="button"
                                    class="site-btn-primary"
                                    :disabled="mobileLoading || otpCode.length !== 6"
                                    @click="verifyMobileChange()">
                                    <span x-show="!mobileLoading">{{ __('site.account_mobile_verify_save') }}</span>
                                    <span x-show="mobileLoading" x-cloak>{{ __('site.account_mobile_verifying') }}</span>
                                </button>
                                <button
                                    type="button"
                                    class="site-btn-outline text-sm"
                                    :disabled="mobileLoading || resendSeconds > 0"
                                    @click="sendMobileOtp()">
                                    <span x-text="resendLabel()"></span>
                                </button>
                                <button
                                    type="button"
                                    class="site-pressable text-sm eca-theme-text-muted"
                                    @click="cancelMobileChange()">
                                    {{ __('site.account_cancel') }}
                                </button>
                            </div>
                        </div>

                        <p class="eca-account-feedback-slot">
                            <span x-show="mobileError" x-text="mobileError" class="eca-account-feedback eca-account-feedback--error" x-cloak></span>
                            <span x-show="mobileSuccess" x-text="mobileSuccess" class="eca-account-feedback eca-account-feedback--success" x-cloak></span>
                        </p>
                    </section>
                </div>

                <div
                    id="account-panel-requests"
                    role="tabpanel"
                    aria-labelledby="account-tab-requests"
                    x-show="activeTab === 'requests'"
                    x-cloak
                    class="eca-account-panel"
                >
                    <div class="eca-account-section">
                        <div class="eca-account-requests-toolbar">
                            <div>
                                <h2 class="eca-account-section__title">{{ __('site.account_requests_section') }}</h2>
                                <p class="eca-account-section__subtitle">{{ __('site.account_requests_subtitle') }}</p>
                            </div>
                            <span class="eca-account-requests-toolbar__count">
                                {{ __('site.account_requests_count', ['count' => $requestCounts['all'] ?? $complaints->total()]) }}
                            </span>
                        </div>

                        <div class="eca-account-filters" role="tablist" aria-label="{{ __('site.account_requests_section') }}">
                            @foreach($requestTypes as $typeKey => $typeMeta)
                                @php
                                    $label = match ($typeKey) {
                                        'all' => __('site.account_filter_all'),
                                        'repair' => __('site.account_lead_type_repair'),
                                        'price_inquiry' => __('site.account_lead_type_price_inquiry'),
                                        'files_documents' => __('site.account_lead_type_files_documents'),
                                        'invites_reports' => __('site.account_lead_type_invites_reports'),
                                        'commission_membership' => __('site.account_lead_type_commission_membership'),
                                        'support' => __('site.account_lead_type_support'),
                                        default => $typeMeta['label'],
                                    };
                                    $urlParams = array_merge($lc, ['tab' => 'requests'], $typeKey === 'all' ? [] : ['type' => $typeKey]);
                                @endphp
                                <a href="{{ route('site.account.requests', $urlParams) }}" @class(['eca-account-filter', 'eca-account-filter--active' => $filterType === $typeKey])>
                                    {{ $label }}
                                    <span>{{ $requestCounts[$typeKey] ?? 0 }}</span>
                                </a>
                            @endforeach
                        </div>

                        @if ($complaints->isEmpty())
                            @php
                                $leadAssistantEnabled = site_capability('lead_assistant');
                                $canRequestCommissionMembership = ! empty($commissionsEnabled)
                                    && ($joinableCommissionCategories ?? collect())->isNotEmpty();
                                $showCommissionMembershipCta = $canRequestCommissionMembership && (
                                    $filterType === 'commission_membership'
                                    || (! $leadAssistantEnabled && $filterType === 'all')
                                );
                                $showLeadCta = $leadAssistantEnabled && in_array($filterType, ['all', 'repair', 'price_inquiry', 'support'], true);
                                [$emptyTitle, $emptyHint] = match ($filterType) {
                                    'files_documents' => [
                                        __('site.account_requests_empty_files_title'),
                                        __('site.account_requests_empty_files_hint'),
                                    ],
                                    'invites_reports' => [
                                        __('site.account_requests_empty_invites_title'),
                                        __('site.account_requests_empty_invites_hint'),
                                    ],
                                    'commission_membership' => [
                                        __('site.account_requests_empty_commission_title'),
                                        __('site.account_requests_empty_commission_hint'),
                                    ],
                                    default => $showCommissionMembershipCta && ! $leadAssistantEnabled
                                        ? [
                                            __('site.account_requests_empty_title'),
                                            __('site.account_requests_empty_commission_hint'),
                                        ]
                                        : [
                                            __('site.account_requests_empty_title'),
                                            __('site.account_requests_empty_hint'),
                                        ],
                                };
                            @endphp
                            <div class="eca-account-empty">
                                <x-site.svg-icon name="document-add" class="eca-account-empty__icon" />
                                <h3 class="eca-account-empty__title">{{ $emptyTitle }}</h3>
                                <p>{{ $emptyHint }}</p>

                                @if ($showCommissionMembershipCta)
                                    <button
                                        type="button"
                                        class="site-btn-primary mt-4"
                                        @click="switchTab('commissions'); $nextTick(() => document.getElementById('commission-membership-request')?.scrollIntoView({ behavior: 'smooth', block: 'start' }))"
                                    >
                                        {{ __('site.account_commissions_submit') }}
                                    </button>
                                @elseif ($showLeadCta)
                                    <button
                                        type="button"
                                        class="site-btn-primary mt-4"
                                        @click="window.dispatchEvent(new CustomEvent('site-lead:open'))"
                                    >
                                        {{ __('site.account_requests_create') }}
                                    </button>
                                @endif
                            </div>
                        @else
                            <div class="mt-6 space-y-5">
                                @foreach ($complaints as $complaint)
                                    @php
                                        $ticket = \App\Support\RepairTicketPresenter::fromComplaint($complaint);
                                    @endphp
                                    <x-site.repair-ticket-card
                                        :ticket="$ticket"
                                        :href="route('site.account.requests.show', array_merge($lc, ['complaint' => $complaint]))"
                                        :show-actions="false"
                                        :show-financial="(bool) ($ticket['show_financial'] ?? false)"
                                    />
                                @endforeach
                            </div>

                            <div class="mt-8">
                                {{ $complaints->appends(['tab' => 'requests'])->links() }}
                            </div>
                        @endif
                    </div>
                </div>

                @if (! empty($commissionsEnabled))
                <div
                    id="account-panel-commissions"
                    role="tabpanel"
                    aria-labelledby="account-tab-commissions"
                    x-show="activeTab === 'commissions'"
                    x-cloak
                    class="eca-account-panel"
                >
                    <div class="eca-account-section">
                        <div class="eca-account-requests-toolbar">
                            <div>
                                <h2 class="eca-account-section__title">{{ __('site.account_commissions_section') }}</h2>
                                <p class="eca-account-section__subtitle">{{ __('site.account_commissions_subtitle') }}</p>
                            </div>
                            <div class="flex flex-wrap items-center gap-2">
                                @if (($commissionUnreadCount ?? 0) > 0)
                                    <span class="eca-account-requests-toolbar__count">{{ __('site.account_commissions_unread', ['count' => $commissionUnreadCount]) }}</span>
                                @endif
                                @if (($commissionPendingSurveyCount ?? 0) > 0)
                                    <span class="eca-account-requests-toolbar__count">{{ __('site.account_commissions_pending_surveys', ['count' => $commissionPendingSurveyCount]) }}</span>
                                @endif
                            </div>
                        </div>

                        @if (($pendingCommissionSurveys ?? collect())->isNotEmpty())
                            <div class="mb-8">
                                <h3 class="mb-4 text-sm font-bold text-[var(--eca-text)]">{{ __('site.account_commissions_surveys_title') }}</h3>
                                <div class="survey-cards-grid">
                                    @foreach ($pendingCommissionSurveys as $survey)
                                        @php
                                            $optionCount = $survey->options->count();
                                            $isMultiple = $survey->type === 'multiple';
                                            $isText = $survey->type === 'text';
                                        @endphp
                                        <div class="survey-card">
                                            <div class="survey-card__header">
                                                <div class="survey-card__category">{{ $survey->category?->localizedName() }}</div>
                                                <h4 class="survey-card__title">{{ $survey->localizedTitle() }}</h4>
                                                <p class="survey-card__question">{{ $survey->localizedQuestion() }}</p>
                                                @if ($isMultiple)
                                                    <p class="survey-card__hint">{{ __('site.commission_survey_multiple_max', ['max' => $optionCount]) }}</p>
                                                @endif
                                            </div>

                                            <form
                                                method="post"
                                                action="{{ route('site.account.commissions.surveys.submit', array_merge($lc, ['survey' => $survey])) }}"
                                                class="survey-form"
                                                x-data="{
                                                    ready: false,
                                                    sync() {
                                                        const form = this.$el;
                                                        const text = form.querySelector('textarea[name=text_answer]');
                                                        if (text) {
                                                            this.ready = String(text.value || '').trim() !== '';
                                                            return;
                                                        }
                                                        this.ready = form.querySelectorAll('input:checked').length > 0;
                                                    }
                                                }"
                                                x-init="sync()"
                                                @change="sync()"
                                                @input="sync()"
                                            >
                                                @csrf

                                                @if ($isText)
                                                    <label class="survey-text">
                                                        <span class="sr-only">{{ __('site.commission_survey_submit') }}</span>
                                                        <textarea
                                                            name="text_answer"
                                                            rows="4"
                                                            class="survey-text__input"
                                                            required
                                                            placeholder="{{ __('site.commission_survey_text_required') }}"
                                                        >{{ old('text_answer') }}</textarea>
                                                    </label>
                                                    @error('text_answer')<p class="survey-form__error">{{ $message }}</p>@enderror
                                                @else
                                                    <fieldset class="survey-options">
                                                        <legend class="sr-only">{{ __('site.account_commissions_surveys_title') }}</legend>
                                                        @foreach ($survey->options as $option)
                                                            @php
                                                                $optionSelected = $isMultiple
                                                                    ? in_array((string) $option->id, array_map('strval', (array) old('option_ids', [])), true)
                                                                    : (string) old('option_ids') === (string) $option->id;
                                                            @endphp
                                                            <label @class(['survey-option', 'survey-option--multi' => $isMultiple])>
                                                                <input
                                                                    type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
                                                                    name="{{ $isMultiple ? 'option_ids[]' : 'option_ids' }}"
                                                                    value="{{ $option->id }}"
                                                                    @checked($optionSelected)
                                                                    @required(! $isMultiple)
                                                                >
                                                                <span class="survey-option__text">{{ $option->localizedLabel() }}</span>
                                                                <span class="survey-option__indicator" aria-hidden="true"></span>
                                                            </label>
                                                        @endforeach
                                                    </fieldset>
                                                    @error('option_ids')<p class="survey-form__error">{{ $message }}</p>@enderror
                                                @endif

                                                @error('survey')<p class="survey-form__error">{{ $message }}</p>@enderror

                                                <div class="survey-form__actions">
                                                    <button
                                                        type="submit"
                                                        class="survey-submit site-btn-primary"
                                                        :disabled="!ready"
                                                    >
                                                        {{ __('site.commission_survey_submit') }}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if (($commissionCategories ?? collect())->isNotEmpty())
                            <div class="mb-6 flex flex-wrap gap-2">
                                @foreach ($commissionCategories as $cat)
                                    <span class="rounded-full bg-[color-mix(in_srgb,var(--eca-primary)_12%,transparent)] px-3 py-1 text-xs font-semibold text-[var(--eca-text)]">
                                        {{ $cat->localizedName() }}
                                    </span>
                                @endforeach
                            </div>

                            @if (($commissionPosts ?? collect())->isEmpty())
                                <div class="eca-account-empty">
                                    <h3 class="eca-account-empty__title">{{ __('site.account_commissions_posts_empty') }}</h3>
                                </div>
                            @else
                                <div class="space-y-3">
                                    @foreach ($commissionPosts as $post)
                                        <a
                                            href="{{ route('site.account.commissions.posts.show', array_merge($lc, ['commissionPost' => $post])) }}"
                                            class="block rounded-2xl border border-[color-mix(in_srgb,var(--eca-border)_90%,transparent)] bg-[color-mix(in_srgb,var(--eca-card)_92%,transparent)] p-4 transition hover:border-[color-mix(in_srgb,var(--eca-primary)_35%,var(--eca-border))]"
                                        >
                                            <div class="flex items-start gap-3">
                                                @if ($post->image)
                                                    <img src="{{ site_media_url($post->image) }}" alt="" class="h-16 w-20 shrink-0 rounded-xl object-cover" />
                                                @endif
                                                <div class="min-w-0 flex-1">
                                                    <div class="flex flex-wrap items-center gap-2">
                                                        <h3 class="text-sm font-bold text-[var(--eca-text)]">{{ $post->localizedTitle() }}</h3>
                                                        @if ($post->is_unread)
                                                            <span class="rounded-full bg-rose-500 px-2 py-0.5 text-[10px] font-bold text-white">{{ __('site.account_commissions_new') }}</span>
                                                        @endif
                                                    </div>
                                                    <p class="mt-1 text-xs text-[var(--eca-text-muted)]">{{ $post->category?->localizedName() }} · {{ $post->formattedPublishedAt() }}</p>
                                                    @if ($post->localizedExcerpt() !== '')
                                                        <p class="mt-2 line-clamp-2 text-sm text-[var(--eca-text-muted)]">{{ $post->localizedExcerpt() }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div class="eca-account-empty mb-6">
                                <h3 class="eca-account-empty__title">{{ __('site.account_commissions_not_member_title') }}</h3>
                                <p>{{ __('site.account_commissions_not_member_hint') }}</p>
                            </div>
                        @endif

                        @if (($joinableCommissionCategories ?? collect())->isNotEmpty())
                            <div id="commission-membership-request" class="mt-8 rounded-2xl border border-[color-mix(in_srgb,var(--eca-border)_90%,transparent)] p-4">
                                <h3 class="text-sm font-bold text-[var(--eca-text)]">{{ __('site.account_commissions_request_title') }}</h3>
                                <p class="mt-1 text-xs text-[var(--eca-text-muted)]">{{ __('site.account_commissions_request_hint') }}</p>
                                <form method="post" action="{{ route('site.account.commission-membership.store', $lc) }}" class="mt-4 space-y-3">
                                    @csrf
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-[var(--eca-text-muted)]">{{ __('site.account_commissions_select') }}</label>
                                        <select name="commission_category_id" class="eca-auth-modal__input" required>
                                            <option value="">{{ __('site.account_commissions_select_placeholder') }}</option>
                                            @foreach ($joinableCommissionCategories as $cat)
                                                <option value="{{ $cat->id }}" @selected((string) old('commission_category_id') === (string) $cat->id)>{{ $cat->localizedName() }}</option>
                                            @endforeach
                                        </select>
                                        @error('commission_category_id')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                                    </div>
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-[var(--eca-text-muted)]">{{ __('site.account_commissions_note') }}</label>
                                        <textarea name="body" rows="3" class="eca-auth-modal__input">{{ old('body') }}</textarea>
                                    </div>
                                    <button type="submit" class="site-btn-primary text-sm">{{ __('site.account_commissions_submit') }}</button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
                @endif

                <div
                    id="account-panel-notifications"
                    role="tabpanel"
                    aria-labelledby="account-tab-notifications"
                    x-show="activeTab === 'notifications'"
                    x-cloak
                    class="eca-account-panel"
                >
                    <div class="eca-account-section">
                        <div class="eca-account-requests-toolbar">
                            <div>
                                <h2 class="eca-account-section__title">{{ __('site.account_notifications_section') }}</h2>
                                <p class="eca-account-section__subtitle">{{ __('site.account_notifications_subtitle') }}</p>
                            </div>
                            @if (($unreadNotifications ?? 0) > 0)
                                <form method="post" action="{{ route('site.account.notifications.read-all', $lc) }}">
                                    @csrf
                                    <button type="submit" class="site-btn-outline text-sm">{{ __('site.account_notifications_mark_all') }}</button>
                                </form>
                            @endif
                        </div>

                        @if ($notifications->isEmpty())
                            <div class="eca-account-empty">
                                <x-site.svg-icon name="notification" class="eca-account-empty__icon" />
                                <h3 class="eca-account-empty__title">{{ __('site.account_notifications_empty_title') }}</h3>
                                <p>{{ __('site.account_notifications_empty_hint') }}</p>
                            </div>
                        @else
                            <ul class="eca-account-notifications mt-6">
                                @foreach ($notifications as $notification)
                                    <li>
                                        <a
                                            href="{{ route('site.account.notifications.open', array_merge($lc, ['notification' => $notification])) }}"
                                            @class(['eca-account-notification', 'eca-account-notification--unread' => ! $notification->read_at])
                                        >
                                            <div class="eca-account-notification__head">
                                                <h3 class="eca-account-notification__title">{{ $notification->title }}</h3>
                                                <time class="eca-account-notification__time" datetime="{{ $notification->created_at?->toIso8601String() }}">
                                                    {{ site_content_date($notification->created_at) }}
                                                </time>
                                            </div>
                                            @if ($notification->body)
                                                <p class="eca-account-notification__body">{{ $notification->body }}</p>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="mt-8">
                                {{ $notifications->links() }}
                            </div>
                        @endif
                    </div>
                </div>
        </div>
    </div>
</div>
@endsection