@extends('layouts.app')

@section('title', 'الفعاليات - ايوان')

@section('styles')
<style>
    .events-hero {
        background: linear-gradient(rgba(30, 58, 95, 0.9), rgba(44, 95, 65, 0.9)), 
                    url('/images/design/geometric-1.jpg') center/cover;
        padding: 6rem 0 4rem;
        position: relative;
        overflow: hidden;
    }

    .events-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="events-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><rect x="8" y="8" width="4" height="4" fill="%23d4af37" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23events-pattern)"/></svg>');
    }

    .event-card {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        border-right: 5px solid var(--secondary-color);
    }

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }

    .event-date {
        background: var(--secondary-color);
        color: var(--primary-color);
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 700;
        font-size: 0.9rem;
        display: inline-block;
        margin-bottom: 1rem;
    }

    .event-title {
        color: var(--primary-color);
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        font-family: 'Amiri', serif;
    }

    .event-description {
        color: #666;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .event-meta {
        display: flex;
        gap: 2rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #666;
        font-size: 0.9rem;
    }

    .meta-item i {
        color: var(--secondary-color);
        width: 16px;
    }

    .event-partner {
        background: var(--light-gold);
        padding: 0.75rem 1.25rem;
        border-radius: 15px;
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
        display: inline-block;
    }

    .btn-event-details {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-blue) 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-event-details:hover {
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(30, 58, 95, 0.3);
        text-decoration: none;
    }

    .events-filter {
        background: white;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-bottom: 3rem;
    }

    .filter-btn {
        background: #f8f9fa;
        border: 2px solid #e0e0e0;
        color: #666;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        margin: 0.25rem;
        transition: all 0.3s ease;
        font-weight: 600;
    }

    .filter-btn.active,
    .filter-btn:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--primary-color);
    }

    .events-stats {
        display: flex;
        gap: 2rem;
        justify-content: center;
        margin-bottom: 3rem;
        flex-wrap: wrap;
    }

    .stat-item {
        text-align: center;
        background: white;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        min-width: 150px;
    }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--secondary-color);
        display: block;
    }

    .stat-label {
        color: var(--primary-color);
        font-weight: 600;
        margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
        .events-hero {
            padding: 4rem 0 2rem;
        }
        
        .event-card {
            padding: 1.5rem;
        }
        
        .event-meta {
            flex-direction: column;
            gap: 1rem;
        }
        
        .events-stats {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
@endsection

@section('content')
<!-- Events Hero -->
<section class="events-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center text-white">
                <h1 class="display-3 fw-bold mb-4 fade-in">الفعاليات والأحداث</h1>
                <p class="lead mb-4 fade-in">استكشف جميع الفعاليات والورش التدريبية في المعرض</p>
            </div>
        </div>
    </div>
</section>

<!-- Events Stats -->
<section class="py-5">
    <div class="container">
        <div class="events-stats">
            <div class="stat-item">
                <span class="stat-number">{{ $events->count() }}</span>
                <div class="stat-label">إجمالي الفعاليات</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $events->where('type', 'workshop')->count() }}</span>
                <div class="stat-label">ورش تدريبية</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">5</span>
                <div class="stat-label">أيام</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $events->sum('max_participants') }}</span>
                <div class="stat-label">إجمالي المقاعد</div>
            </div>
        </div>
    </div>
</section>

<!-- Events Filter -->
<section class="py-3">
    <div class="container">
        <div class="events-filter">
            <div class="text-center">
                <h3 class="section-title mb-3">تصفية الفعاليات</h3>
                <div class="filter-buttons">
                    <button class="filter-btn active" data-filter="all">جميع الفعاليات</button>
                    <button class="filter-btn" data-filter="workshop">الورش التدريبية</button>
                    <button class="filter-btn" data-filter="seminar">الندوات</button>
                    <button class="filter-btn" data-filter="exhibition">المعارض</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Events List -->
<section class="py-5">
    <div class="container">
        <div class="row">
            @forelse($events as $event)
            <div class="col-lg-6 mb-4">
                <div class="event-card" data-type="{{ $event->type }}">
                    <div class="event-date">
                        <i class="fas fa-calendar-alt me-2"></i>
                        {{ $event->event_date }}
                    </div>
                    
                    <h3 class="event-title">{{ $event->title }}</h3>
                    
                    <div class="event-partner">
                        <i class="fas fa-handshake me-2"></i>
                        {{ $event->partner }}
                    </div>
                    
                    <p class="event-description">{{ $event->description }}</p>
                    
                    <div class="event-meta">
                        <div class="meta-item">
                            <i class="fas fa-clock"></i>
                            <span>{{ $event->duration }} دقيقة</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-users"></i>
                            <span>{{ $event->max_participants }} مشارك</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ $event->location }}</span>
                        </div>
                    </div>
                    
                    <a href="{{ route('events.show', $event->id) }}" class="btn-event-details">
                        <i class="fas fa-info-circle"></i>
                        تفاصيل أكثر
                    </a>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">لا توجد فعاليات متاحة حالياً</h4>
                    <p class="text-muted">سيتم إضافة المزيد من الفعاليات قريباً</p>
                </div>
            </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="section-title mb-4">هل تريد المشاركة؟</h2>
                <p class="lead mb-4">سجل الآن للمشاركة في المعرض واختر الورشة التي تناسبك</p>
                <a href="{{ route('registration.form') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-plus me-2"></i>
                    سجل الآن
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const eventCards = document.querySelectorAll('.event-card');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            this.classList.add('active');
            
            const filterType = this.getAttribute('data-filter');
            
            eventCards.forEach(card => {
                if (filterType === 'all' || card.getAttribute('data-type') === filterType) {
                    card.parentElement.style.display = 'block';
                } else {
                    card.parentElement.style.display = 'none';
                }
            });
        });
    });
});
</script>
@endsection