@extends('layouts.superadmin')

@section('title','لوحة التواجد والغياب الإستراتيجي')
@section('page-title','📊 لوحة التواجد والغياب — Presence Matrix')

@section('content')

<div class="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 text-white py-8">

    <div class="max-w-6xl mx-auto px-4 space-y-6">

        {{-- Header --}}
        <div class="flex flex-col gap-1">
            <h1 class="text-3xl font-bold">لوحة التواجد والغياب</h1>
            <p class="text-slate-300">تحليل حضور أعضاء جيش الوفاء الذهبي</p>
            <p class="text-xs text-slate-400">{{ $from->format('Y-m-d') }} → {{ $to->format('Y-m-d') }}</p>
        </div>

        {{-- Summary Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

            <div class="p-4 rounded-2xl bg-white/10 border border-white/10 text-center">
                <p class="text-sm text-slate-300">إجمالي الأعضاء</p>
                <h2 class="text-2xl font-bold">{{ $summary['total_members'] }}</h2>
            </div>

            <div class="p-4 rounded-2xl bg-emerald-600/20 border border-emerald-400/20 text-center">
                <p class="text-sm text-emerald-200">مشاركات</p>
                <h2 class="text-2xl font-bold">{{ $summary['with_events'] }}</h2>
            </div>

            <div class="p-4 rounded-2xl bg-red-600/20 border border-red-400/20 text-center">
                <p class="text-sm text-red-200">خطر عالي</p>
                <h2 class="text-2xl font-bold">{{ $summary['high_risk_members'] }}</h2>
            </div>

        </div>

        {{-- Table Wrapper --}}
        <div class="bg-white/5 border border-white/10 rounded-2xl mt-4">

            {{-- Scroll Container --}}
            <div class="overflow-x-auto rounded-2xl scrollbar-thin scrollbar-thumb-slate-700 scrollbar-track-slate-900">
                <table class="min-w-[1100px] w-full text-sm text-right">

                    <thead class="bg-white/10 text-slate-200 text-xs uppercase tracking-wider">
                        <tr>
                            <th class="px-4 py-3">العضو</th>
                            <th class="px-4 py-3">الأنشطة</th>
                            <th class="px-4 py-3">بعذر</th>
                            <th class="px-4 py-3">بدون عذر</th>
                            <th class="px-4 py-3">الالتزام</th>
                            <th class="px-4 py-3">الحالة</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-white/10">

                        @foreach ($members as $m)
                        <tr class="hover:bg-white/5 transition">

                            {{-- الاسم --}}
                            <td class="px-4 py-3 font-semibold whitespace-nowrap">
                                <div>{{ $m->name }}</div>
                                <div class="text-[11px] text-slate-400">{{ $m->username }}</div>
                            </td>

                            {{-- confirmed --}}
                            <td class="px-4 py-3 text-center whitespace-nowrap">{{ $m->confirmed_count }}</td>

                            {{-- بعذر --}}
                            <td class="px-4 py-3 text-center whitespace-nowrap">{{ $m->absent_excuse_count }}</td>

                            {{-- بدون عذر --}}
                            <td class="px-4 py-3 text-center whitespace-nowrap">{{ $m->absent_no_excuse_count }}</td>

                            {{-- نسبة الالتزام --}}
                            <td class="px-4 py-3 whitespace-nowrap text-center">
                                @if ($m->commit_ratio !== null)
                                    <span class="font-bold">{{ $m->commit_ratio }}%</span>
                                @else
                                    <span class="text-slate-400 text-xs">—</span>
                                @endif
                            </td>

                            {{-- حالة الخطر --}}
                            <td class="px-4 py-3 whitespace-nowrap">

                                @if($m->risk_level === 'high')
                                    <span class="px-3 py-1 rounded-full bg-red-600/30 text-red-200 text-xs">
                                        خطر عالي
                                    </span>

                                @elseif($m->risk_level === 'medium')
                                    <span class="px-3 py-1 rounded-full bg-amber-600/30 text-amber-200 text-xs">
                                        متوسط
                                    </span>

                                @elseif($m->risk_level === 'low')
                                    <span class="px-3 py-1 rounded-full bg-emerald-600/30 text-emerald-200 text-xs">
                                        آمن
                                    </span>

                                @else
                                    <span class="px-3 py-1 rounded-full bg-slate-600/30 text-slate-300 text-xs">
                                        غير معروف
                                    </span>
                                @endif

                            </td>

                        </tr>
                        @endforeach

                    </tbody>

                </table>
            </div>

        </div>
    </div>

</div>

@endsection