@extends('layouts.admin', ['title' => 'Programs - ESMT Learning Innovation Lab', 'currentPage' => 'programs', 'breadcrumbs' => [
    ['title' => 'Programs', 'url' => null]
]])

@push('head')
    <style>
        .glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); }
        .program-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); }
        .program-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .stat-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15); }
        .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes slideUp { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
        .loading-shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    </style>
@endpush

@section('content')
        <!-- Main Content -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Page Header -->
            <div class="mb-8 animate-slide-up">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-3xl font-bold text-white mb-2">Academic Programs</h2>
                        <p class="text-blue-100">Manage and organize your academic programs and cohorts</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="glass px-4 py-2 rounded-lg">
                            <span class="text-sm text-gray-600">Total Programs: </span>
                            <span class="font-bold text-gray-800">{{ $programs->count() }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="stat-card glass rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.1s">
                    <div class="flex items-center justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-lg">
                            🎓
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-gray-800">{{ $programs->count() }}</div>
                            <div class="text-xs text-gray-500">Programs</div>
                        </div>
                    </div>
                    <div class="text-sm text-gray-600">Active programs</div>
                </div>
                
                <div class="stat-card glass rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.2s">
                    <div class="flex items-center justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-green-600 to-green-800 rounded-full flex items-center justify-center text-white font-bold text-lg">
                            👥
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-gray-800">{{ $programs->sum('cohorts_count') }}</div>
                            <div class="text-xs text-gray-500">Cohorts</div>
                        </div>
                    </div>
                    <div class="text-sm text-gray-600">Total cohorts</div>
                </div>
                
                <div class="stat-card glass rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.3s">
                    <div class="flex items-center justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-purple-800 rounded-full flex items-center justify-center text-white font-bold text-lg">
                            📚
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-gray-800">{{ $programs->sum('courses_count') }}</div>
                            <div class="text-xs text-gray-500">Courses</div>
                        </div>
                    </div>
                    <div class="text-sm text-gray-600">Total courses</div>
                </div>
                
                <div class="stat-card glass rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.4s">
                    <div class="flex items-center justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                            🚀
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-gray-800">{{ $programs->sum('activities_count') }}</div>
                            <div class="text-xs text-gray-500">Activities</div>
                        </div>
                    </div>
                    <div class="text-sm text-gray-600">Total activities</div>
                </div>
            </div>

            <!-- Programs Grid -->
            @if($programs->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($programs as $program)
                        <div class="program-card glass rounded-2xl p-6 animate-slide-up" 
                             style="animation-delay: {{ $loop->index * 0.1 }}s">
                            
                            <!-- Program Header -->
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                                        🎓
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-gray-800">{{ $program->name }}</h3>
                                        <p class="text-sm text-gray-500">{{ $program->cohorts_count }} cohorts</p>
                                    </div>
                                </div>
                                <div class="flex flex-col items-end space-y-1">
                                    @if($program->cohorts_count > 0)
                                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
                                    @endif
                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Program</span>
                                </div>
                            </div>

                            <!-- Program Description -->
                            <div class="mb-4">
                                <p class="text-sm text-gray-600">
                                    @if(str_contains(strtolower($program->name), 'mba'))
                                        Master of Business Administration program with comprehensive business education.
                                    @elseif(str_contains(strtolower($program->name), 'executive'))
                                        Executive education program for senior professionals.
                                    @elseif(str_contains(strtolower($program->name), 'online'))
                                        Online learning program with flexible scheduling.
                                    @else
                                        Academic program designed for professional development and growth.
                                    @endif
                                </p>
                            </div>

                            <!-- Program Stats -->
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div class="text-center">
                                    <div class="text-lg font-bold text-gray-800">{{ $program->cohorts_count }}</div>
                                    <div class="text-xs text-gray-500">Cohorts</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-lg font-bold text-gray-800">{{ $program->courses_count }}</div>
                                    <div class="text-xs text-gray-500">Courses</div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="flex space-x-2">
                                <a href="{{ route('admin.program.cohorts', $program) }}" 
                                   class="flex-1 bg-gradient-to-r from-blue-600 to-blue-800 text-white text-center py-2 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 flex items-center justify-center group">
                                    <i class="fas fa-users mr-2 group-hover:scale-110 transition-transform"></i>
                                    View Cohorts
                                </a>
                                <div class="relative">
                                    <button onclick="toggleProgramMenu({{ $program->id }})" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center group">
                                        <i class="fas fa-cog mr-1 group-hover:rotate-90 transition-transform"></i>
                                    </button>
                                    
                                    <!-- Program Menu Dropdown -->
                                    <div id="program-menu-{{ $program->id }}" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                                        <div class="py-1">
                                            <a href="{{ route('admin.program.cohorts', $program) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                                <i class="fas fa-users mr-3 text-blue-600"></i>
                                                Manage Cohorts
                                            </a>
                                            <button onclick="editProgram({{ $program->id }})" class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                                <i class="fas fa-edit mr-3 text-green-600"></i>
                                                Edit Program
                                            </button>
                                            <button onclick="duplicateProgram({{ $program->id }})" class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                                <i class="fas fa-copy mr-3 text-purple-600"></i>
                                                Duplicate Program
                                            </button>
                                            <div class="border-t border-gray-200 my-1"></div>
                                            <button onclick="archiveProgram({{ $program->id }})" class="flex items-center w-full px-4 py-2 text-sm text-orange-600 hover:bg-orange-50 transition-colors">
                                                <i class="fas fa-archive mr-3"></i>
                                                Archive Program
                                            </button>
                                            <button onclick="deleteProgram({{ $program->id }})" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                                <i class="fas fa-trash mr-3"></i>
                                                Delete Program
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="glass rounded-2xl p-12 text-center animate-bounce-in">
                    <div class="w-24 h-24 bg-gradient-to-r from-gray-300 to-gray-400 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-graduation-cap text-3xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">No Programs Found</h3>
                    <p class="text-gray-600 mb-6">Get started by creating your first academic program.</p>
                    <button class="bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-3 rounded-lg font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300">
                        <i class="fas fa-plus mr-2"></i>
                        Create Program
                    </button>
                </div>
            @endif
        </div>

    <script>
        // Program management functions
        function toggleProgramMenu(programId) {
            // Close all other menus first
            document.querySelectorAll('[id^="program-menu-"]').forEach(menu => {
                if (menu.id !== `program-menu-${programId}`) {
                    menu.classList.add('hidden');
                }
            });
            
            // Toggle current menu
            const menu = document.getElementById(`program-menu-${programId}`);
            menu.classList.toggle('hidden');
        }

        function editProgram(programId) {
            // Close menu
            document.getElementById(`program-menu-${programId}`).classList.add('hidden');
            
            // Show edit modal or redirect to edit page
            alert(`Edit program ${programId} - Feature coming soon!`);
        }

        function duplicateProgram(programId) {
            // Close menu
            document.getElementById(`program-menu-${programId}`).classList.add('hidden');
            
            if (confirm('Are you sure you want to duplicate this program? This will copy all cohorts and courses.')) {
                // Implement duplication logic
                alert(`Duplicating program ${programId} - Feature coming soon!`);
            }
        }

        function archiveProgram(programId) {
            // Close menu
            document.getElementById(`program-menu-${programId}`).classList.add('hidden');
            
            if (confirm('Are you sure you want to archive this program? It will be hidden but not deleted.')) {
                // Implement archive logic
                alert(`Archiving program ${programId} - Feature coming soon!`);
            }
        }

        function deleteProgram(programId) {
            // Close menu
            document.getElementById(`program-menu-${programId}`).classList.add('hidden');
            
            if (confirm('⚠️ WARNING: This will permanently delete the program and ALL associated cohorts and courses. This action cannot be undone!\n\nAre you absolutely sure?')) {
                if (confirm('This is your final warning. Type "DELETE" to confirm.')) {
                    // Implement deletion logic
                    alert(`Deleting program ${programId} - Feature coming soon!`);
                }
            }
        }

        // Close dropdowns when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('[onclick^="toggleProgramMenu"]') && !e.target.closest('[id^="program-menu-"]')) {
                document.querySelectorAll('[id^="program-menu-"]').forEach(menu => {
                    menu.classList.add('hidden');
                });
            }
        });

        // Add some micro-interactions
        document.addEventListener('DOMContentLoaded', function() {
            // Add hover effects to program cards
            const programCards = document.querySelectorAll('.program-card');
            programCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-8px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });

            // Add click animation to buttons
            const buttons = document.querySelectorAll('button, a');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // Create ripple effect
                    const ripple = document.createElement('span');
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.width = ripple.style.height = size + 'px';
                    ripple.style.left = x + 'px';
                    ripple.style.top = y + 'px';
                    ripple.classList.add('ripple');
                    
                    this.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                });
            });
        });
    </script>
@endsection