@extends('layouts.app')

@section('title', 'تعليمات الحضور')

@section('content')
<div class="min-h-screen py-12">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <!-- العنوان -->
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-white mb-4">تعليمات الحضور</h1>
                <p class="text-gray-400 text-lg">ليبقى هذا الحفل ذكرى خالدة</p>
            </div>

            <!-- التعليمات -->
            <div class="glass rounded-3xl p-8">
                <div class="space-y-6">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" 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"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">الحضور في الوقت المحدد</h3>
                            <p class="text-gray-400">الحضور في الوقت المخصص لكم من قبل منشأتكم التدريبية.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">إبراز بطاقة الدعوة</h3>
                            <p class="text-gray-400">إبراز بطاقة الدعوة عند الدخول لمقر الحفل.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">الالتزام بتعليمات السلامة</h3>
                            <p class="text-gray-400">الالتزام بكافة تعليمات السلامة والاطلاع على باركود مخارج السلامة الموضح على تذكرة الدخول.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" 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"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">التعاون مع المنظمين</h3>
                            <p class="text-gray-400">التعاون مع أعضاء اللجان المنظمة والحراسات الأمنية وتقبل توجيهاتهم.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">الجلوس في المقعد المخصص</h3>
                            <p class="text-gray-400">الجلوس في المقعد المخصص لك حسب المجموعة الظاهرة في بطاقة الدعوة (A, B, C, D, E, F, G, H) كما يرجى عدم ترك المقعد حتى انتهاء الحفل.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">مكان الصلاة ودورات المياه</h3>
                            <p class="text-gray-400">يوجد مكان مخصص لإقامة الصلاة كما يوجد لوحات إرشادية لدورات المياه.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">المحافظة على المرافق</h3>
                            <p class="text-gray-400">يجب المحافظة على كافة مرافق المسرح.</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-primary" 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"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-lg">الالتزام بلائحة الذوق العام</h3>
                            <p class="text-gray-400">الالتزام بجميع ما ورد في لائحة الذوق العام.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- صورة الملصق -->
            <div class="mt-12">
                <div class="glass rounded-3xl p-4 overflow-hidden">
                    <img src="{{ asset('images/event-poster.jpg') }}" alt="ملصق الحفل" class="w-full rounded-2xl"/>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .glass {
        background: rgba(26, 31, 53, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(79, 209, 197, 0.2);
    }
</style>
@endsection