@extends('layouts.app')

@section('title', 'الورش التدريبية - ايوان')

@section('styles')
<style>
    .workshops-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;
    }

    .workshop-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);
        height: 100%;
    }

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

    .workshop-number {
        background: var(--secondary-color);
        color: var(--primary-color);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

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

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

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

    .workshop-meta {
        display: flex;
        gap: 1.5rem;
        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;
    }

    .btn-workshop-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;
        width: 100%;
        justify-content: center;
    }

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

    .workshops-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) {
        .workshops-hero {
            padding: 4rem 0 2rem;
        }
        
        .workshop-card {
            padding: 1.5rem;
        }
        
        .workshop-meta {
            flex-direction: column;
            gap: 1rem;
        }
        
        .workshops-stats {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
@endsection

@section('content')
<!-- Workshops Hero -->
<section class="workshops-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>

<!-- Workshops Stats -->
<section class="py-5">
    <div class="container">
        <div class="workshops-stats">
            <div class="stat-item">
                <span class="stat-number">{{ $workshops->count() }}</span>
                <div class="stat-label">ورشة تدريبية</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $workshops->sum('max_participants') }}</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">8</span>
                <div class="stat-label">جهات منظمة</div>
            </div>
        </div>
    </div>
</section>

<!-- Workshops List -->
<section class="py-5">
    <div class="container">
        <div class="row">
            @forelse($workshops as $index => $workshop)
            <div class="col-lg-6 mb-4">
                <div class="workshop-card">
                    <div class="workshop-number">{{ $index + 1 }}</div>
                    
                    <h3 class="workshop-title">{{ $workshop->title }}</h3>
                    
                    <div class="workshop-partner">
                        <i class="fas fa-handshake me-2"></i>
                        {{ $workshop->partner }}
                    </div>
                    
                    <p class="workshop-description">{{ $workshop->description }}</p>
                    
                    <div class="workshop-meta">
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>{{ $workshop->event_date }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-clock"></i>
                            <span>{{ $workshop->duration }} دقيقة</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-users"></i>
                            <span>{{ $workshop->max_participants }} مشارك</span>
                        </div>
                    </div>
                    
                    <a href="{{ route('events.show', $workshop->id) }}" class="btn-workshop-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-chalkboard-teacher 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