@section('title', '')

<div class="space-y-6">
    <!-- Welcome Header (no background — clean page title) -->
    <div class="flex items-center justify-between px-1 pt-1">
        <div>
            <span class="text-xs font-semibold text-slate-400">مرحباً بك،</span>
            <h2 class="text-lg font-bold text-slate-800 mt-0.5">{{ $agent->full_name_ar }}</h2>
            <p class="text-xs text-[#00316D] font-medium mt-1">المشرف: {{ $agent->supervisor?->name ?? 'غير محدد' }}</p>
        </div>
        <div class="h-12 w-12 rounded-2xl bg-[#00316D]/5 border border-[#00316D]/10 flex items-center justify-center text-[#00316D]">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
    </div>

    <!-- Active Announcements (between name card and KPIs) -->
    @if($announcements->count() > 0)
    <div class="space-y-3">
        <h3 class="text-xs font-bold text-slate-400 px-1">آخر الإعلانات والتنبيهات</h3>
        <div class="space-y-2">
            @foreach($announcements as $ann)
            @php
                $cfg = match($ann->type) {
                    'warning' => ['bg'=>'#fffbeb','border'=>'#fde68a','text'=>'#d97706','label'=>'تنبيه هام','icon'=>'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'],
                    'promo'   => ['bg'=>'#f0fdf4','border'=>'#bbf7d0','text'=>'#16a34a','label'=>'عرض ترويجي','icon'=>'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'],
                    default   => ['bg'=>'#eff6ff','border'=>'#bfdbfe','text'=>'#1d4ed8','label'=>'معلومة عامة','icon'=>'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                };
            @endphp
            <div class="rounded-2xl border p-4 flex items-start gap-3"
                 style="background:{{ $cfg['bg'] }}; border-color:{{ $cfg['border'] }};">
                <svg class="h-5 w-5 mt-0.5 shrink-0" fill="none" stroke="{{ $cfg['text'] }}" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $cfg['icon'] }}"/>
                </svg>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-[10px] font-bold px-2 py-0.5 rounded-full"
                              style="background:{{ $cfg['border'] }}; color:{{ $cfg['text'] }};">
                            {{ $cfg['label'] }}
                        </span>
                        <span class="text-[10px] text-slate-400">{{ $ann->created_at_utc ? \Carbon\Carbon::parse($ann->created_at_utc)->format('Y/m/d') : '' }}</span>
                    </div>
                    <p class="font-bold text-slate-800 text-xs leading-normal">{{ $ann->title }}</p>
                    <p class="text-xs text-slate-600 mt-1 leading-relaxed">{{ $ann->body }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- KPIs -->
    <div class="space-y-4">
        <!-- Visits KPI (full width) -->
        <div class="bg-white rounded-3xl border border-slate-100 p-5 shadow-sm space-y-4">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold text-slate-400 block">زيارات اليوم</span>
                    <span class="text-2xl font-extrabold text-slate-800 leading-none">
                        {{ $completedVisits }} <span class="text-sm font-medium text-slate-400">/ {{ $totalVisits }} زيارة</span>
                    </span>
                </div>
                <div class="h-10 w-10 rounded-xl bg-blue-50 text-[#00316D] flex items-center justify-center">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                    </svg>
                </div>
            </div>

            @php
                $pct = $totalVisits > 0 ? min(100, round(($completedVisits / $totalVisits) * 100)) : 0;
            @endphp
            <!-- Progress Bar -->
            <div class="space-y-1.5">
                <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                    <div class="bg-[#00316D] h-full rounded-full transition-all duration-500" style="width: {{ $pct }}%"></div>
                </div>
                <div class="flex justify-between text-[10px] font-semibold text-slate-400">
                    <span>نسبة الإنجاز</span>
                    <span>{{ $pct }}%</span>
                </div>
            </div>
        </div>

        <!-- Sales quantity + Active customers on one row -->
        <div class="grid grid-cols-2 gap-4">
            <!-- Sales quantity KPI -->
            <div class="bg-white rounded-3xl border border-slate-100 p-5 shadow-sm space-y-3">
                <div class="h-10 w-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                    </svg>
                </div>
                <div>
                    <span class="text-xs font-semibold text-slate-400 block">مبيعات اليوم (كمية)</span>
                    <span class="text-2xl font-extrabold text-slate-800 leading-none block mt-1">{{ number_format($salesQuantity) }}</span>
                    <span class="text-[11px] font-medium text-slate-400">عبوة / حبة</span>
                </div>
            </div>

            <!-- Active Customers KPI -->
            <div class="bg-white rounded-3xl border border-slate-100 p-5 shadow-sm space-y-3">
                <div class="h-10 w-10 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857"/>
                    </svg>
                </div>
                <div>
                    <span class="text-xs font-semibold text-slate-400 block">العملاء النشطين</span>
                    <span class="text-2xl font-extrabold text-slate-800 leading-none block mt-1">{{ $activeCustomers }}</span>
                    <span class="text-[11px] font-medium text-slate-400">عميل نشط</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="space-y-2">
        <h3 class="text-xs font-bold text-slate-400 px-1">إجراءات سريعة</h3>
        <div class="grid grid-cols-3 gap-2">
            <a href="{{ route('agent.visits') }}" class="bg-white border border-slate-100 rounded-2xl p-4 text-center space-y-2 shadow-sm hover:bg-slate-50 transition-colors">
                <div class="mx-auto h-8 w-8 rounded-full bg-blue-50 text-[#00316D] flex items-center justify-center">
                    <svg class="h-4.5 w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                    </svg>
                </div>
                <span class="text-[11px] font-bold text-slate-700 block">مسار الزيارات</span>
            </a>

            <a href="{{ route('agent.customers') }}" class="bg-white border border-slate-100 rounded-2xl p-4 text-center space-y-2 shadow-sm hover:bg-slate-50 transition-colors">
                <div class="mx-auto h-8 w-8 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center">
                    <svg class="h-4.5 w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <span class="text-[11px] font-bold text-slate-700 block">إضافة عميل</span>
            </a>

            <a href="{{ route('agent.orders') }}" class="bg-white border border-slate-100 rounded-2xl p-4 text-center space-y-2 shadow-sm hover:bg-slate-50 transition-colors">
                <div class="mx-auto h-8 w-8 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center">
                    <svg class="h-4.5 w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                </div>
                <span class="text-[11px] font-bold text-slate-700 block">طلب جديد</span>
            </a>
        </div>
    </div>
</div>