@extends($layout)

@section('title', 'جدول الأنشطة الأسبوعي')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-7xl mx-auto">
        
        <!-- Header with Week Navigation -->
        <div class="mb-8">
            <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
                <div>
                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-2">جدول الأنشطة الأسبوعي</h1>
                    <p class="text-gray-600">من {{ $startDate->format('d/m/Y') }} إلى {{ $endDate->format('d/m/Y') }}</p>
                </div>

                <!-- Week Navigation - الأسهم مصححة -->
                <div class="flex items-center gap-3 bg-white rounded-2xl shadow-lg p-2">
                    <!-- السهم الأيسر = الأسبوع السابق -->
                    <a href="{{ route('live-activities.weekly-schedule', ['week' => $weekOffset - 1]) }}" 
                       class="p-3 hover:bg-gray-100 rounded-xl transition-colors" 
                       title="الأسبوع السابق">
                        <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </a>
                    
                    <a href="{{ route('live-activities.weekly-schedule') }}" 
                       class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl font-medium hover:from-blue-700 hover:to-blue-800 transition-all shadow-md">
                        الأسبوع الحالي
                    </a>
                    
                    <!-- السهم الأيمن = الأسبوع القادم -->
                    <a href="{{ route('live-activities.weekly-schedule', ['week' => $weekOffset + 1]) }}" 
                       class="p-3 hover:bg-gray-100 rounded-xl transition-colors"
                       title="الأسبوع القادم">
                     

                           <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <!-- Week Stats -->
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 lg:gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-90 mb-1">إجمالي الأنشطة</p>
                        <p class="text-4xl font-bold">{{ $stats['total_week'] }}</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-6 text-white shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-90 mb-1">مؤكدة</p>
                        <p class="text-4xl font-bold">{{ $stats['confirmed'] }}</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl p-6 text-white shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-90 mb-1">قيد الانتظار</p>
                        <p class="text-4xl font-bold">{{ $stats['pending'] }}</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 text-white shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-90 mb-1">أنشطتي</p>
                        <p class="text-4xl font-bold">{{ $stats['my_activities'] }}</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Tabs -->
        <div class="mb-6">
            <div class="bg-white rounded-2xl shadow-lg p-2 inline-flex gap-2">
                <button onclick="showAllActivities()" 
                        id="btn-all" 
                        class="px-6 py-3 rounded-xl font-medium transition-all bg-gradient-to-r from-blue-600 to-blue-700 text-white">
                    كل الأنشطة
                </button>
                <button onclick="showMyActivities()" 
                        id="btn-my" 
                        class="px-6 py-3 rounded-xl font-medium transition-all text-gray-700 hover:bg-gray-100">
                    أنشطتي فقط
                </button>
            </div>
        </div>

        <!-- Week Days Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            @foreach($weekDays as $dayKey => $dayData)
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
                <!-- Day Header -->
                <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">{{ $dayData['day_name'] }}</h3>
                            <p class="text-sm opacity-90 mt-1">{{ $dayData['date']->format('d/m/Y') }}</p>
                        </div>
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <span class="text-2xl font-bold">{{ $dayData['date']->format('d') }}</span>
                        </div>
                    </div>
                    
                    <div class="mt-4 flex items-center gap-4">
                        @if(count($dayData['all_activities']) > 0)
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                            <span class="text-sm font-medium">{{ count($dayData['all_activities']) }} نشاط</span>
                        </div>
                        @endif
                        @if(count($dayData['my_activities']) > 0)
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-yellow-300 rounded-full animate-pulse"></div>
                            <span class="text-sm font-medium">{{ count($dayData['my_activities']) }} لي</span>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Activities List - كل الأنشطة -->
                <div class="p-6 activity-list all-activities">
                    @if(count($dayData['all_activities']) > 0)
                        <div class="space-y-4">
                            @foreach($dayData['all_activities'] as $activity)
                            @php
                                $isMyActivity = $activity->participants->where('user_id', auth()->id())->count() > 0;
                            @endphp
                            <div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl p-4 hover:shadow-md transition-all duration-300 border-r-4 
                                {{ $isMyActivity ? 'border-purple-500 bg-purple-50/50' : ($activity->status === 'confirmed' ? 'border-green-500' : 'border-blue-500') }}">
                                
                                @if($isMyActivity)
                                <div class="mb-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded-lg text-xs font-bold bg-purple-100 text-purple-700">
                                        ⭐ نشاطي
                                    </span>
                                </div>
                                @endif

                                <!-- Activity Icon & Type -->
                                <div class="flex items-start gap-3 mb-3">
                                    @if($activity->activityType->icon === 'video')
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                                        </svg>
                                    </div>
                                    @elseif($activity->activityType->icon === 'users')
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                                        </svg>
                                    </div>
                                    @else
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/>
                                        </svg>
                                    </div>
                                    @endif
                                    
                                    <div class="flex-1 min-w-0">
                                        <h4 class="font-bold text-gray-900 mb-1">{{ $activity->activityType->display_name }}</h4>
                                        @if($activity->title)
                                        <p class="text-sm text-gray-600 line-clamp-1">{{ $activity->title }}</p>
                                        @endif
                                    </div>
                                </div>

                                <!-- Activity Time -->
                                <div class="flex items-center gap-2 mb-3">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                                    </svg>
                                    <span class="text-sm font-medium text-gray-700">{{ date('h:i A', strtotime($activity->scheduled_time)) }}</span>
                                    <span class="text-sm text-gray-500">• {{ $activity->duration }}</span>
                                </div>

                                <!-- Participants Count -->
                                <div class="flex items-center gap-2 mb-3">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3z"/>
                                    </svg>
                                    <span class="text-sm text-gray-700">{{ $activity->participants->count() }} مشارك</span>
                                </div>

                        <!-- Status Badge & Link -->
<div class="flex items-center justify-between">
    <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold
        @if($activity->display_status === 'confirmed') bg-green-100 text-green-700
        @elseif($activity->display_status === 'proof_rejected') bg-red-100 text-red-700
        @elseif($activity->display_status === 'excuse_rejected') bg-red-100 text-red-700
        @elseif($activity->display_status === 'absent_without_excuse') bg-red-100 text-red-700
        @elseif($activity->display_status === 'absent_with_excuse') bg-orange-100 text-orange-700
        @else bg-blue-100 text-blue-700
        @endif">
        @if($activity->display_status === 'confirmed') مؤكد
        @elseif($activity->display_status === 'proof_rejected') إثبات مرفوض
        @elseif($activity->display_status === 'excuse_rejected') عذر مرفوض
        @elseif($activity->display_status === 'absent_without_excuse') غياب بدون عذر
        @elseif($activity->display_status === 'absent_with_excuse') غياب بعذر
        @else مجدول
        @endif
    </span>

    <a href="{{ route('live-activities.show', $activity) }}" 
       class="text-sm font-medium text-blue-600 hover:text-blue-700 flex items-center gap-1">
        التفاصيل
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
    </a>
</div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 text-gray-400" 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"/>
                                </svg>
                            </div>
                            <p class="text-gray-500 text-sm font-medium">لا توجد أنشطة</p>
                        </div>
                    @endif
                </div>

                <!-- Activities List - أنشطتي فقط -->
                <div class="p-6 activity-list my-activities" style="display: none;">
                    @if(count($dayData['my_activities']) > 0)
                        <div class="space-y-4">
                            @foreach($dayData['my_activities'] as $activity)
                            <div class="bg-gradient-to-r from-purple-50 to-purple-100 rounded-xl p-4 hover:shadow-md transition-all duration-300 border-r-4 border-purple-500">
                                
                                <div class="mb-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded-lg text-xs font-bold bg-purple-200 text-purple-800">
                                        ⭐ نشاطي
                                    </span>
                                </div>

                                <!-- نفس محتوى النشاط السابق -->
                                <div class="flex items-start gap-3 mb-3">
                                    @if($activity->activityType->icon === 'video')
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                                        </svg>
                                    </div>
                                    @elseif($activity->activityType->icon === 'users')
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                                        </svg>
                                    </div>
                                    @else
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/>
                                        </svg>
                                    </div>
                                    @endif
                                    
                                    <div class="flex-1 min-w-0">
                                        <h4 class="font-bold text-gray-900 mb-1">{{ $activity->activityType->display_name }}</h4>
                                        @if($activity->title)
                                        <p class="text-sm text-gray-600 line-clamp-1">{{ $activity->title }}</p>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex items-center gap-2 mb-3">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                                    </svg>
                                    <span class="text-sm font-medium text-gray-700">{{ date('h:i A', strtotime($activity->scheduled_time)) }}</span>
                                    <span class="text-sm text-gray-500">• {{ $activity->duration }}</span>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold
                                        @if($activity->status === 'confirmed') bg-green-100 text-green-700
                                        @else bg-blue-100 text-blue-700
                                        @endif">
                                        {{ $activity->status === 'confirmed' ? 'مؤكد' : 'مجدول' }}
                                    </span>

                                   <a href="{{ route('live-activities.show', $activity) }}" 
                                       class="text-sm font-medium text-blue-600 hover:text-blue-700 flex items-center gap-1">
                                        التفاصيل
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12">
                            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                            </div>
                            <p class="text-gray-500 text-sm font-medium">لا توجد أنشطة لك</p>
                            <p class="text-gray-400 text-xs mt-1">في هذا اليوم</p>
                        </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

    </div>
</div>

<script>
function showAllActivities() {
    // إخفاء أنشطتي
    document.querySelectorAll('.my-activities').forEach(el => el.style.display = 'none');
    // عرض كل الأنشطة
    document.querySelectorAll('.all-activities').forEach(el => el.style.display = 'block');
    
    // تحديث الأزرار
    document.getElementById('btn-all').className = 'px-6 py-3 rounded-xl font-medium transition-all bg-gradient-to-r from-blue-600 to-blue-700 text-white';
    document.getElementById('btn-my').className = 'px-6 py-3 rounded-xl font-medium transition-all text-gray-700 hover:bg-gray-100';
}

function showMyActivities() {
    // إخفاء كل الأنشطة
    document.querySelectorAll('.all-activities').forEach(el => el.style.display = 'none');
    // عرض أنشطتي
    document.querySelectorAll('.my-activities').forEach(el => el.style.display = 'block');
    
    // تحديث الأزرار
    document.getElementById('btn-my').className = 'px-6 py-3 rounded-xl font-medium transition-all bg-gradient-to-r from-purple-600 to-pink-600 text-white';
    document.getElementById('btn-all').className = 'px-6 py-3 rounded-xl font-medium transition-all text-gray-700 hover:bg-gray-100';
}
</script>
@endsection