@extends('layouts.app')
@section('title', 'إحصائيات البائعين')
@section('page_heading', 'إحصائيات البائعين')

@section('content')
@include('dashboard.statistics.partials.nav')

@php
    $rankedUsers = collect($usersData)->map(function($u) {
        $u['score'] = $u['salesCount'] + $u['reservationsCount'] + $u['fittingAppointmentsCount'] + $u['deliveryAppointmentsCount'];
        return $u;
    })->sortByDesc('score')->values();
    $activeCount = $rankedUsers->filter(fn($u) => $u['score'] > 0)->count();
    $totalServiceOps = $totalFittingAppointmentsCount + $totalDeliveryAppointmentsCount;
@endphp

{{-- Filter --}}
<form action="{{ route('dashboard.staff_performance') }}" method="GET"
      style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap">
    <div style="display:flex;flex-direction:column;gap:.3rem">
        <label style="font-size:.72rem;font-weight:700;color:var(--text-muted)">التاريخ</label>
        <input type="date" name="date" class="app-input" value="{{ $selectedDate->format('Y-m-d') }}">
    </div>
    <button type="submit" class="app-btn app-btn--primary"><i class="fa-solid fa-filter me-1"></i>فلتر</button>
    <a href="{{ route('dashboard.staff_performance') }}" class="app-btn app-btn--secondary">اليوم</a>
</form>

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-users',         '#eff6ff','#2563eb', $activeCount,                              'بائعون نشطون',          $selectedDate->format('Y-m-d')],
        ['fa-solid fa-cart-shopping', '#f0fdf4','#16a34a', number_format($totalSalesValue,2),         'إجمالي قيمة المبيعات',  number_format($totalSalesCount).' فاتورة'],
        ['fa-solid fa-calendar-check','#fffbeb','#d97706', number_format($totalReservationsCount),    'عدد الحجوزات',          number_format($totalReservationsValue,2).' ج.م'],
        ['fa-solid fa-screwdriver-wrench','#faf5ff','#7c3aed', number_format($totalServiceOps),       'إجراءات الخدمة',        'معاينات + تسليمات'],
    ] as [$ic,$bg,$cl,$val,$lbl,$meta])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;box-shadow:var(--shadow-card)">
        <div style="width:38px;height:38px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:.75rem"><i class="{{ $ic }}"></i></div>
        <div style="font-size:1.25rem;font-weight:900;color:var(--text-primary);line-height:1;margin-bottom:.2rem">{{ $val }}</div>
        <div style="font-size:.75rem;font-weight:800;color:var(--text-primary);margin-bottom:.1rem">{{ $lbl }}</div>
        <div style="font-size:.68rem;color:var(--text-muted)">{{ $meta }}</div>
    </div>
    @endforeach
</div>

{{-- Staff Table --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-id-badge" style="color:var(--c-primary)"></i>
            أداء البائعين
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $rankedUsers->count() }}</span>
        </div>
        <div style="font-size:.75rem;font-weight:700;color:var(--text-muted)">{{ $selectedDate->format('Y-m-d') }}</div>
    </div>

    @if($rankedUsers->isEmpty())
    <div style="padding:3rem;text-align:center">
        @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-users','title'=>'لا توجد بيانات لهذا اليوم','message'=>''])
    </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['الترتيب','البائع','المبيعات','قيمة المبيعات','الحجوزات','قيمة الحجوزات','العربون','معاينات','تسليمات','النشاط الكلي'] as $h)
                    <th style="padding:.65rem 1.25rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($rankedUsers as $idx => $ud)
                @php $isActive = $ud['score'] > 0; @endphp
                <tr style="border-top:1px solid var(--border-subtle);{{ !$isActive ? 'opacity:.5' : '' }}" onmouseover="this.style.background='var(--surface-50)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem">
                        <div style="width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:900;
                            background:{{ $idx===0?'#2563eb':($idx===1?'#d97706':($idx===2?'#ea580c':'var(--surface-200)')) }};
                            color:{{ $idx<3?'#fff':'var(--text-muted)' }}">{{ $idx+1 }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;align-items:center;gap:.625rem">
                            <div style="width:34px;height:34px;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;flex-shrink:0">
                                {{ mb_substr($ud['user']->name,0,1) }}
                            </div>
                            <div>
                                <div style="font-weight:800;color:var(--text-primary)">{{ $ud['user']->name }}</div>
                                <div style="font-size:.7rem;color:var(--text-muted)">{{ $ud['user']->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary);text-align:center">{{ $ud['salesCount'] }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#16a34a">{{ number_format($ud['salesTotalValue'],2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary);text-align:center">{{ $ud['reservationsCount'] }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#d97706">{{ number_format($ud['reservationsTotalValue'],2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#7c3aed">{{ number_format($ud['reservationsDepositSum'],2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:#0ea5e9;text-align:center">{{ $ud['fittingAppointmentsCount'] }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:#2563eb;text-align:center">{{ $ud['deliveryAppointmentsCount'] }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;align-items:center;gap:.5rem">
                            <div style="flex:1;height:6px;border-radius:999px;background:var(--border);overflow:hidden;min-width:60px">
                                @php $maxScore = $rankedUsers->max('score') ?: 1; @endphp
                                <div style="height:100%;border-radius:inherit;width:{{ min($ud['score']/$maxScore*100,100) }}%;background:linear-gradient(90deg,var(--c-primary),#38bdf8)"></div>
                            </div>
                            <span style="font-size:.78rem;font-weight:900;color:var(--text-primary);white-space:nowrap">{{ $ud['score'] }}</span>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background:var(--border-subtle);border-top:2px solid var(--border)">
                    <td colspan="2" style="padding:.75rem 1.25rem;font-size:.78rem;font-weight:800;color:var(--text-muted)">الإجمالي</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-primary);text-align:center">{{ $totalSalesCount }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#16a34a">{{ number_format($totalSalesValue,2) }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-primary);text-align:center">{{ $totalReservationsCount }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#d97706">{{ number_format($totalReservationsValue,2) }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#7c3aed">{{ number_format($totalReservationsDeposit,2) }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#0ea5e9;text-align:center">{{ $totalFittingAppointmentsCount }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#2563eb;text-align:center">{{ $totalDeliveryAppointmentsCount }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-primary)">{{ $rankedUsers->sum('score') }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endif
</div>

@endsection