@extends('layouts.superadmin')
@section('title', 'تقرير الاجتماع - ' . $meeting->title)

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <!-- Breadcrumb -->
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('superadmin.meetings.index') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        إدارة الاجتماعات
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <a href="{{ route('superadmin.meetings.show', $meeting) }}" 
                           class="mr-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:mr-2 dark:text-gray-400 dark:hover:text-white">
                            {{ Str::limit($meeting->title, 30) }}
                        </a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تقرير الاجتماع</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                    تقرير الاجتماع #{{ $meeting->id }}
                </h1>
                <p class="text-gray-600 dark:text-gray-400">{{ $meeting->title }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">{{ $meeting->formatted_date }}</p>
            </div>
            <div class="flex gap-2 no-print">
                <button onclick="window.print()" 
                        class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 shadow-sm">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                    </svg>
                    طباعة التقرير
                </button>
                <a href="{{ route('superadmin.meetings.show', $meeting) }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200 shadow-sm">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للاجتماع
                </a>
            </div>
        </div>
    </div>

    <!-- Main Report Card -->
    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 print:shadow-none print:border-0">
        <!-- Card Header -->
        <div class="px-6 py-6 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border-b border-gray-200 dark:border-gray-700 rounded-t-lg print:bg-white print:border-b-2 print:border-gray-300">
            <div class="text-center">
                <div class="flex justify-center mb-4">
                    <div class="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-full">
                        <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">تقرير اجتماع إداري</h2>
                <h3 class="text-xl font-semibold text-indigo-600 dark:text-indigo-400 mb-2">{{ $meeting->title }}</h3>
                <p class="text-gray-600 dark:text-gray-400">{{ $meeting->formatted_date }}</p>
                @if($meeting->location)
                    <p class="text-sm text-purple-600 dark:text-purple-400 flex items-center justify-center mt-2">
                        <svg class="w-4 h-4 ml-1" 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"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        {{ $meeting->location }}
                    </p>
                @endif
            </div>
        </div>

        <!-- Card Content -->
        <div class="px-6 py-6 space-y-8">
            <!-- معلومات أساسية عن الاجتماع -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 print:grid-cols-2">
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800">
                    <div class="flex items-center mb-4">
                        <div class="p-2 bg-blue-500 rounded-lg">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h4 class="text-lg font-semibold text-blue-900 dark:text-blue-100 mr-3">معلومات الاجتماع</h4>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-blue-700 dark:text-blue-300">التاريخ:</span>
                            <span class="text-sm text-blue-900 dark:text-blue-100">{{ $meeting->meeting_date->format('Y/m/d') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-blue-700 dark:text-blue-300">الوقت المجدول:</span>
                            <span class="text-sm text-blue-900 dark:text-blue-100">{{ $meeting->meeting_date->format('H:i') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-blue-700 dark:text-blue-300">عدد المشاركين:</span>
                            <span class="text-sm text-blue-900 dark:text-blue-100">{{ $meeting->participants->count() }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-blue-700 dark:text-blue-300">منشئ الاجتماع:</span>
                            <span class="text-sm text-blue-900 dark:text-blue-100">{{ $meeting->creator->name }}</span>
                        </div>
                    </div>
                </div>

                @if($meeting->report)
                <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-6 border border-green-200 dark:border-green-800">
                    <div class="flex items-center mb-4">
                        <div class="p-2 bg-green-500 rounded-lg">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h4 class="text-lg font-semibold text-green-900 dark:text-green-100 mr-3">التوقيت الفعلي</h4>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-green-700 dark:text-green-300">وقت البداية:</span>
                            <span class="text-sm text-green-900 dark:text-green-100">{{ $meeting->report->formatted_start_time }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-green-700 dark:text-green-300">وقت النهاية:</span>
                            <span class="text-sm text-green-900 dark:text-green-100">{{ $meeting->report->formatted_end_time }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-green-700 dark:text-green-300">المدة:</span>
                            <span class="text-sm text-green-900 dark:text-green-100">{{ $meeting->report->formatted_duration }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-green-700 dark:text-green-300">كاتب التقرير:</span>
                            <span class="text-sm text-green-900 dark:text-green-100">{{ $meeting->report->creator->name }}</span>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- جدول الأعمال -->
            @if($meeting->report && $meeting->report->agenda)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-4">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">جدول الأعمال</h4>
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-6 border-r-4 border-blue-500">
                            <p class="text-gray-900 dark:text-white whitespace-pre-line leading-relaxed text-base">{{ $meeting->report->agenda }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- المناقشات -->
            @if($meeting->report && $meeting->report->discussions)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-4">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                            <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">المناقشات</h4>
                        <div class="bg-green-50 dark:bg-green-900/20 rounded-xl p-6 border-r-4 border-green-500">
                            <p class="text-gray-900 dark:text-white whitespace-pre-line leading-relaxed text-base">{{ $meeting->report->discussions }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- القرارات المتخذة -->
            @if($meeting->report && $meeting->report->decisions)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-4">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                            <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">القرارات المتخذة</h4>
                        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-6 border-r-4 border-purple-500">
                            <p class="text-gray-900 dark:text-white whitespace-pre-line leading-relaxed text-base">{{ $meeting->report->decisions }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- الإجراءات المطلوبة -->
            @if($meeting->report && $meeting->report->action_items)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-4">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
                            <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">الإجراءات المطلوبة</h4>
                        <div class="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-6 border-r-4 border-orange-500">
                            <p class="text-gray-900 dark:text-white whitespace-pre-line leading-relaxed text-base">{{ $meeting->report->action_items }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- ملاحظات إضافية -->
            @if($meeting->report && $meeting->report->notes)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-4">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">ملاحظات إضافية</h4>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6 border-r-4 border-gray-500">
                            <p class="text-gray-900 dark:text-white whitespace-pre-line leading-relaxed text-base">{{ $meeting->report->notes }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- قائمة الحضور والغياب -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
                <div class="flex items-start space-x-3 space-x-reverse mb-6">
                    <div class="flex-shrink-0">
                        <div class="p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                            <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" 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.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">قائمة الحضور والغياب</h4>
                        
                        @php
                            $attendanceGroups = $meeting->participants->groupBy('attendance_status');
                            $attended = $attendanceGroups->get('attended', collect());
                            $absentExcused = $attendanceGroups->get('absent_excused', collect());
                            $absentUnexcused = $attendanceGroups->get('absent_unexcused', collect());
                            $total = $meeting->participants->count();
                        @endphp

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 print:grid-cols-3 mb-6">
                            <!-- الحاضرون -->
                            @if($attended->count() > 0)
                            <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-5 border border-green-200 dark:border-green-800">
                                <h5 class="font-medium text-green-800 dark:text-green-200 mb-3 flex items-center">
                                    <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                    </svg>
                                    الحاضرون ({{ $attended->count() }})
                                </h5>
                                <ul class="space-y-2">
                                    @foreach($attended as $participant)
                                    <li class="flex items-center text-sm text-green-700 dark:text-green-300">
                                        <div class="w-2 h-2 bg-green-500 rounded-full ml-2"></div>
                                        {{ $participant->user->name }}
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <!-- غائب بعذر -->
                            @if($absentExcused->count() > 0)
                            <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 rounded-xl p-5 border border-yellow-200 dark:border-yellow-800">
                                <h5 class="font-medium text-yellow-800 dark:text-yellow-200 mb-3 flex items-center">
                                    <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                    </svg>
                                    غائب بعذر ({{ $absentExcused->count() }})
                                </h5>
                                <ul class="space-y-2">
                                    @foreach($absentExcused as $participant)
                                    <li class="text-sm text-yellow-700 dark:text-yellow-300">
                                        <div class="flex items-start">
                                            <div class="w-2 h-2 bg-yellow-500 rounded-full ml-2 mt-2"></div>
                                            <div>
                                                <div>{{ $participant->user->name }}</div>
                                                @if($participant->excuse_reason)
                                                <div class="text-xs text-yellow-600 dark:text-yellow-400 mt-1 italic">
                                                    ({{ $participant->excuse_reason }})
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <!-- غائب بدون عذر -->
                            @if($absentUnexcused->count() > 0)
                            <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-xl p-5 border border-red-200 dark:border-red-800">
                                <h5 class="font-medium text-red-800 dark:text-red-200 mb-3 flex items-center">
                                    <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                    </svg>
                                    غائب بدون عذر ({{ $absentUnexcused->count() }})
                                </h5>
                                <ul class="space-y-2">
                                    @foreach($absentUnexcused as $participant)
                                    <li class="flex items-center text-sm text-red-700 dark:text-red-300">
                                        <div class="w-2 h-2 bg-red-500 rounded-full ml-2"></div>
                                        {{ $participant->user->name }}
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                        </div>

                        <!-- إحصائيات الحضور -->
                        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-xl p-6 border border-indigo-200 dark:border-indigo-800">
                            <h5 class="font-semibold text-indigo-800 dark:text-indigo-200 mb-4 flex items-center">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                                إحصائيات الحضور
                            </h5>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 print:grid-cols-4">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-600 dark:text-green-400 mb-1">{{ $attended->count() }}</div>
                                    <div class="text-sm text-indigo-700 dark:text-indigo-300">حاضر</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-1">{{ $absentExcused->count() }}</div>
                                    <div class="text-sm text-indigo-700 dark:text-indigo-300">غائب بعذر</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-red-600 dark:text-red-400 mb-1">{{ $absentUnexcused->count() }}</div>
                                    <div class="text-sm text-indigo-700 dark:text-indigo-300">غائب بدون عذر</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mb-1">{{ $total > 0 ? round(($attended->count() / $total) * 100) : 0 }}%</div>
                                    <div class="text-sm text-indigo-700 dark:text-indigo-300">نسبة الحضور</div>
                                </div>
                            </div>
                            
                            <!-- شريط النسبة -->
                            @if($total > 0)
                            <div class="mt-4">
                                <div class="flex justify-between text-sm text-indigo-700 dark:text-indigo-300 mb-2">
                                    <span>نسبة الحضور الإجمالية</span>
                                    <span>{{ round(($attended->count() / $total) * 100) }}%</span>
                                </div>
                                <div class="w-full bg-indigo-200 dark:bg-indigo-700 rounded-full h-3">
                                    <div class="bg-gradient-to-r from-green-500 to-green-600 h-3 rounded-full transition-all duration-300" 
                                         style="width: {{ ($attended->count() / $total) * 100 }}%"></div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- معلومات التقرير -->
            @if($meeting->report)
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6 print:border-t-2 print:border-gray-300">
                <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-xl p-6 border border-gray-200 dark:border-gray-600">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                        <div class="flex items-center">
                            <div class="p-2 bg-gray-500 rounded-lg ml-3">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </div>
                            <div>
                                <h6 class="text-sm font-semibold text-gray-800 dark:text-gray-200">أعد التقرير</h6>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $meeting->report->creator->name }}</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="p-2 bg-blue-500 rounded-lg ml-3">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <h6 class="text-sm font-semibold text-gray-800 dark:text-gray-200">تاريخ إعداد التقرير</h6>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $meeting->report->created_at->format('Y/m/d H:i') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- تحسينات الطباعة -->
<style>
@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 12px;
    }
    
    .no-print {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .rounded-lg, .rounded-t-lg, .rounded-xl {
        border-radius: 0 !important;
    }
    
    .shadow-sm {
        box-shadow: none !important;
    }
    
    .bg-gradient-to-r, .bg-gradient-to-br {
        background: #f8fafc !important;
    }
    
    .dark\:bg-gray-800 {
        background: white !important;
    }
    
    .dark\:text-white {
        color: black !important;
    }
    
    .dark\:text-gray-400 {
        color: #6b7280 !important;
    }
    
    .text-gray-600 {
        color: #4b5563 !important;
    }
    
    .text-gray-500 {
        color: #6b7280 !important;
    }
    
    .page-break-before {
        page-break-before: always;
    }
    
    .page-break-after {
        page-break-after: always;
    }
    
    .page-break-inside-avoid {
        page-break-inside: avoid;
    }
    
    /* إخفاء التنقل والأزرار عند الطباعة */
    nav, .no-print, button, a[href*="show"] {
        display: none !important;
    }
    
    /* تحسين ألوان الطباعة */
    .border-blue-500, .border-green-500, .border-purple-500, 
    .border-orange-500, .border-gray-500, .border-indigo-200,
    .border-green-200, .border-yellow-200, .border-red-200 {
        border-color: #e5e7eb !important;
    }
    
    /* تحسين الخلفيات للطباعة */
    .bg-blue-50, .bg-green-50, .bg-purple-50, 
    .bg-orange-50, .bg-gray-50, .bg-indigo-50,
    .bg-yellow-50, .bg-red-50 {
        background-color: #f9fafb !important;
    }
    
    /* تحسين النصوص للطباعة */
    .text-blue-600, .text-green-600, .text-purple-600,
    .text-orange-600, .text-indigo-600, .text-yellow-600,
    .text-red-600 {
        color: #374151 !important;
    }
    
    /* تحسين العناوين */
    h1, h2, h3, h4, h5, h6 {
        color: #111827 !important;
    }
    
    /* إضافة حدود للأقسام */
    .border-t {
        border-top: 2px solid #e5e7eb !important;
    }
    
    /* تباعد أفضل للطباعة */
    .space-y-8 > * + * {
        margin-top: 1.5rem !important;
    }
    
    /* تحسين الجداول والقوائم */
    ul, ol {
        margin: 0.5rem 0;
    }
    
    li {
        margin: 0.25rem 0;
    }
}

/* تحسينات إضافية للعرض */
.transition-all {
    transition: all 0.3s ease;
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* تحسين الألوان للوضع المظلم */
@media (prefers-color-scheme: dark) {
    .bg-gradient-to-br {
        background: linear-gradient(to bottom right, var(--tw-gradient-stops));
    }
}
</style>

<!-- سكريبت للطباعة المحسنة -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // تحسين الطباعة
    window.addEventListener('beforeprint', function() {
        document.body.classList.add('printing');
    });
    
    window.addEventListener('afterprint', function() {
        document.body.classList.remove('printing');
    });
    
    // إضافة تأثيرات بصرية عند التحميل
    const cards = document.querySelectorAll('.bg-gradient-to-br');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.6s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 150);
    });
});
</script>
@endsection