@extends('layouts.store', ['title' => $title ?? 'لوحة التحكم | RaseedNow', 'accountMode' => true])

@php
    $siteSettings = \App\Models\SiteSetting::current();
    $siteLogo = $siteSettings->logo_path ?: 'images/brand/raseednow-logo.png';
    $accountUser = auth()->user();
    $walletBalance = ($accountUser?->wallet?->balance_minor ?? 0) / 100;
    $avatarLetter = mb_strtoupper(mb_substr($accountUser?->display_name ?: $accountUser?->name ?: 'U', 0, 1));
    $accountAvatar = $accountUser?->avatarSrc();
    $accountRank = $accountUser?->rankMeta();
    $accountUnreadCount = $accountUser?->customerNotifications()->whereNull('read_at')->count() ?? 0;
    $accountCurrencies = \App\Models\Currency::where('is_active', true)->orderByDesc('is_base')->orderBy('code')->get();
    $accountCurrencyCode = session('store_currency', 'EGP');
    $accountCurrency = $accountCurrencies->firstWhere('code', $accountCurrencyCode) ?: $accountCurrencies->first();
    $accountCurrencyFlags = ['EGP' => 'eg.png', 'USD' => 'us.png', 'EUR' => 'eu.png', 'SAR' => 'sa.png', 'AED' => 'ae.png'];
    $isAccountDashboard = request()->routeIs('dashboard') || request()->routeIs('account.dashboard');
    $navItems = [
        ['route' => 'account.dashboard', 'label' => 'الرئيسية', 'mobile' => 'الرئيسية', 'icon' => 'M4 10.5 12 4l8 6.5V20H5v-9.5Z'],
        ['route' => 'account.orders', 'label' => 'طلباتي', 'mobile' => 'طلباتي', 'icon' => 'M7 4h10l2 4v12H5V8l2-4Zm-2 4h14M9 13h6m-6 4h4'],
        ['route' => 'account.games', 'label' => 'الألعاب', 'mobile' => 'الألعاب', 'icon' => 'M8 13h8m-6-3v6M7 18h10a4 4 0 0 0 4-4v-2a6 6 0 0 0-6-6H9a6 6 0 0 0-6 6v2a4 4 0 0 0 4 4Z'],
        ['route' => 'account.gift-cards', 'label' => 'الجيفت كارد', 'mobile' => 'البطاقات', 'icon' => 'M4 7h16v10H4V7Zm0 4h16m-9-7v16m6-13 2-2m-2 8 2 2'],
        ['route' => 'account.accounts', 'label' => 'الحسابات', 'mobile' => 'حسابات', 'icon' => 'M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 21a7 7 0 0 1 14 0m-3-13h4m-2-2v4'],
        ['route' => 'account.wallet', 'label' => 'المحفظة', 'mobile' => 'الرصيد', 'icon' => 'M4 7h16v12H4V7Zm0 4h16M16 15h2'],
        ['route' => 'account.ranks', 'label' => 'الترقيات', 'mobile' => 'الترقيات', 'icon' => 'm12 3 2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4L7.5 17l.9-5L4.8 8.2l5-.7L12 3Zm-3 16 3 2 3-2'],
        ['route' => 'account.offers', 'label' => 'العروض', 'mobile' => 'العروض', 'icon' => 'M20 12 12 20 4 12l8-8 8 8Zm-8 4v-4h4'],
        ['route' => 'account.favorites', 'label' => 'المفضلة', 'mobile' => 'المفضلة', 'icon' => 'M12 21s-7-4.4-9-9a5.2 5.2 0 0 1 9-5 5.2 5.2 0 0 1 9 5c-2 4.6-9 9-9 9Z'],
        ['route' => 'account.notifications', 'label' => 'الإشعارات', 'mobile' => 'الإشعارات', 'icon' => 'M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8ZM10 20h4'],
        ['route' => 'account.tickets', 'label' => 'الدعم', 'mobile' => 'الدعم', 'icon' => 'M4 5h16v11H8l-4 4V5Zm5 5h6m-6 4h4'],
        ['route' => 'account.profile', 'label' => 'الإعدادات', 'mobile' => 'حسابي', 'icon' => 'M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-12v2m0 13v2m8.5-8.5h-2m-13 0h-2m14.1-6.1-1.4 1.4M7.8 16.2l-1.4 1.4m0-11.2 1.4 1.4m8.4 8.4 1.4 1.4'],
    ];
@endphp

@section('content')
    <section id="{{ $isAccountDashboard ? 'rn-dashboard-shell' : '' }}" @class(['kd-shell', 'is-dashboard' => $isAccountDashboard])>
        <button type="button" class="kd-drawer-backdrop" data-rn-sidebar-close aria-label="إغلاق القائمة"></button>
        <aside class="kd-side-nav" aria-label="قائمة لوحة التحكم">
            <div class="kd-side-brand">
                <img src="{{ asset($siteLogo) }}" alt="{{ $siteSettings->site_name_ar }}">
            </div>
            @foreach($navItems as $item)
                <a href="{{ $item['url'] ?? route($item['route']) }}" @class(['is-active' => $item['active'] ?? (isset($item['route']) && request()->routeIs($item['route']))]) title="{{ $item['label'] }}">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="{{ $item['icon'] }}" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>{{ $item['label'] }}</span>
                </a>
            @endforeach
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" title="تسجيل الخروج">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 3h4v18h-4M10 17l5-5-5-5M15 12H3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>خروج</span>
                </button>
            </form>

            <section class="kd-side-promo">
                <img src="{{ asset('assets/images/account/06-weekly-offer-banner.png') }}" alt="عرض الأسبوع" loading="lazy" decoding="async">
                <div>
                    <h2>عرض الأسبوع</h2>
                    <p>خصومات تصل حتى 30% على باقات مختارة</p>
                    <a href="{{ route('home') }}#offers">عرض العروض</a>
                </div>
            </section>

            <section class="kd-side-help">
                <strong>تحتاج مساعدة؟</strong>
                <span>فريق الدعم متاح 24/7</span>
                <a href="{{ route('account.tickets') }}">تواصل معنا</a>
            </section>

            <section class="kd-side-currency">
                <span>العملة</span>
                <div>
                    @foreach($accountCurrencies as $currency)
                        <form method="POST" action="{{ route('preferences.currency') }}" data-rn-ajax-form>
                            @csrf
                            <input type="hidden" name="currency" value="{{ $currency->code }}">
                            <button type="submit" data-rn-preference-option="currency" data-rn-preference-value="{{ $currency->code }}" @class(['is-active' => $accountCurrencyCode === $currency->code])>
                                <img src="{{ asset('images/flags/'.($accountCurrencyFlags[$currency->code] ?? 'eg.png')) }}" alt="">
                                <b>{{ $currency->code }}</b>
                                <small>{{ $currency->symbol }}</small>
                            </button>
                        </form>
                    @endforeach
                </div>
            </section>
        </aside>

        <div class="kd-mobile-head">
            <button type="button" data-rn-sidebar-open aria-label="فتح القائمة">
                <svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>
            <a href="{{ route('account.dashboard') }}" class="kd-mobile-brand" aria-label="الصفحة الرئيسية">
                <img src="{{ asset($siteLogo) }}" alt="{{ $siteSettings->site_name_ar }}">
            </a>
            <a href="{{ route('account.notifications') }}" class="kd-mobile-notify" aria-label="الإشعارات">
                <svg viewBox="0 0 24 24" fill="none"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8ZM10 20h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                @if($accountUnreadCount > 0)<em>{{ $accountUnreadCount }}</em>@endif
            </a>
            <span class="kd-avatar">@if($accountAvatar)<img src="{{ $accountAvatar }}" alt="صورة الحساب">@else{{ $avatarLetter }}@endif @if($accountRank)<i class="rn-rank-verify is-{{ $accountRank['class'] }}" title="{{ $accountRank['label'] }}">{{ $accountRank['icon'] }}</i>@endif</span>
        </div>

        <div class="kd-content">
            <header class="kd-account-topbar">
                <div class="kd-user-chip">
                    <span class="kd-avatar">@if($accountAvatar)<img src="{{ $accountAvatar }}" alt="صورة الحساب">@else{{ $avatarLetter }}@endif</span>
                    <b>{{ $accountUser?->display_name ?: $accountUser?->name }}</b>
                    @if($accountRank)<span class="rn-rank-verify is-{{ $accountRank['class'] }}" title="{{ $accountRank['label'] }}">{{ $accountRank['icon'] }}</span>@endif
                </div>
                <a href="{{ route('account.notifications') }}" class="kd-top-icon" aria-label="الإشعارات">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8ZM10 20h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
                <a href="{{ route('account.wallet') }}" class="kd-top-wallet">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7Zm0 4h16M16 15h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>{{ number_format($walletBalance, 2) }} ج.م</span>
                    <b>+</b>
                </a>
                <a href="{{ route('account.tickets') }}" class="kd-support-link">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M4 12a8 8 0 1 1 16 0v3a2 2 0 0 1-2 2h-2v-6h4M4 15a2 2 0 0 0 2 2h2v-6H4v4Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>الدعم</span>
                </a>
            </header>

            @if(session('status'))
                <div class="kd-alert success">{{ session('status') }}</div>
            @endif
            @if($errors->any())
                <div class="kd-alert danger">{{ $errors->first() }}</div>
            @endif

            @yield('account_content')
        </div>
    </section>

    <nav id="{{ $isAccountDashboard ? 'rn-dashboard-bottom-nav' : '' }}" @class(['kd-bottom-nav', 'is-inner-nav' => ! $isAccountDashboard]) aria-label="قائمة لوحة التحكم للموبايل">
        <a href="{{ route('account.dashboard') }}" @class(['is-active' => $isAccountDashboard])>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V20H5v-9.5Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>الرئيسية</span>
        </a>
        <a href="{{ route('account.games') }}" @class(['is-active' => request()->routeIs('account.games')])>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 13h8m-6-3v6M7 18h10a4 4 0 0 0 4-4v-2a6 6 0 0 0-6-6H9a6 6 0 0 0-6 6v2a4 4 0 0 0 4 4Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>الألعاب</span>
        </a>
        <a href="{{ route('home') }}#games" class="kd-charge-now">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m13 2-7 11h5l-1 9 8-12h-5V2Z" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>اشحن الآن</span>
        </a>
        <a href="{{ route('account.notifications') }}" @class(['is-active' => request()->routeIs('account.notifications')])>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8ZM10 20h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
            @if($accountUnreadCount > 0)<em class="kd-nav-badge">{{ $accountUnreadCount }}</em>@endif
            <span>الإشعارات</span>
        </a>
        <a href="{{ route('account.profile') }}" @class(['is-active' => request()->routeIs('account.profile')])>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-12v2m0 13v2m8.5-8.5h-2m-13 0h-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>المزيد</span>
        </a>
    </nav>

@endsection