@extends('layouts.account', ['title' => 'لوحة التحكم | RaseedNow'])

@section('account_content')
    <div class="kd-page-head">
        <h1>لوحة التحكم</h1>
    </div>

    <div class="kd-stats-grid">
        <a href="{{ route('account.favorites') }}" class="kd-stat-card">
            <span>المفضلة</span>
            <strong>{{ $favoritesCount }}</strong>
            <i class="tone-red"><svg viewBox="0 0 24 24" fill="none"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z" stroke="currentColor" stroke-width="1.8"/></svg></i>
        </a>
        <a href="{{ route('account.orders') }}" class="kd-stat-card">
            <span>الطلبات هذا الشهر</span>
            <strong>{{ $ordersThisMonth }}</strong>
            <i><svg viewBox="0 0 24 24" fill="none"><path d="M7 4h10l2 4v12H5V8l2-4Zm-2 4h14M9 13h6m-6 4h4" stroke="currentColor" stroke-width="1.8"/></svg></i>
        </a>
    </div>

    <section class="kd-card kd-chart-card">
        <div class="kd-card-head">
            <div>
                <h2>إحصائيات الطلبات</h2>
                <p>هذا الشهر</p>
            </div>
        </div>
        <div class="kd-month-chart" aria-label="إحصائيات الطلبات لهذا الشهر">
            @for($day = 1; $day <= now()->daysInMonth; $day++)
                <span style="--h: {{ $recentOrders->where('created_at', '>=', now()->startOfMonth()->addDays($day - 1))->where('created_at', '<', now()->startOfMonth()->addDays($day))->count() * 18 + 6 }}px" title="{{ $day }}"></span>
            @endfor
        </div>
    </section>

    <div class="kd-promo">
        <div>
            <h2>تسوق بطاقات الهدايا</h2>
            <p>تصفح المجموعة واختر الباقة المناسبة لك.</p>
        </div>
        <a href="{{ route('home') }}">↗</a>
    </div>

    <div class="kd-two-col">
        <section class="kd-card">
            <div class="kd-card-head">
                <h2>آخر الطلبات</h2>
                <a href="{{ route('account.orders') }}">عرض الكل</a>
            </div>
            <div class="kd-list">
                @forelse($recentOrders as $order)
                    <a href="{{ route('orders.show', $order) }}" class="kd-list-row">
                        <span>{{ $order->order_number }}</span>
                        <strong>{{ number_format($order->total_minor / 100, 2) }} {{ $order->currency_code }}</strong>
                        <em>{{ $order->payment_status }}</em>
                    </a>
                @empty
                    <div class="kd-empty"><h3>لا توجد طلبات بعد</h3><p>ابدأ بتصفح المنتجات وإضافة أول طلب.</p></div>
                @endforelse
            </div>
        </section>

        <section class="kd-card">
            <div class="kd-card-head">
                <h2>آخر الإشعارات</h2>
                <a href="{{ route('account.notifications') }}">عرض الكل</a>
            </div>
            <div class="kd-list">
                @forelse($recentNotifications as $notification)
                    <a href="{{ $notification->order ? route('orders.show', $notification->order) : route('account.notifications') }}" class="kd-list-row stacked">
                        <strong>{{ $notification->title }}</strong>
                        <span>{{ $notification->created_at->diffForHumans() }}</span>
                    </a>
                @empty
                    <div class="kd-empty"><h3>لا توجد إشعارات</h3><p>ستظهر تحديثات الطلبات هنا.</p></div>
                @endforelse
            </div>
        </section>
    </div>
@endsection