@extends('layouts.app')

@section('title', 'خريطة القاعة')

@section('content')
<div class="min-h-screen py-12">
    <div class="container mx-auto px-4">
        <!-- العنوان -->
        <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>

        <!-- خريطة القاعة SVG -->
        <div class="max-w-5xl mx-auto">
            <div class="glass rounded-3xl p-8">
                <svg viewBox="0 0 800 600" class="w-full h-auto">
                    <!-- خلفية -->
                    <rect x="0" y="0" width="800" height="600" fill="#1a1f35" rx="20"/>
                    
                    <!-- المسرح -->
                    <rect x="200" y="30" width="400" height="60" rx="10" fill="url(#stageGradient)" class="filter drop-shadow-lg"/>
                    <text x="400" y="68" text-anchor="middle" fill="white" font-size="20" font-weight="bold" font-family="Tajawal">خشبة المسرح</text>
                    
                    <!-- VIP Section -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="VIP">
                        <path d="M 250 120 L 550 120 L 580 180 L 220 180 Z" fill="url(#vipGradient)" stroke="#d4af37" stroke-width="2"/>
                        <text x="400" y="158" text-anchor="middle" fill="#1a1f35" font-size="16" font-weight="bold" font-family="Tajawal">VIP</text>
                        <text x="400" y="175" text-anchor="middle" fill="#1a1f35" font-size="10" font-family="Tajawal">{{ $sectionStats['VIP']['occupied'] ?? 0 }}/{{ $sectionStats['VIP']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم A -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="A">
                        <path d="M 100 200 L 200 200 L 180 320 L 80 320 Z" fill="url(#sectionGradientA)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="140" y="265" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">A</text>
                        <text x="140" y="290" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['A']['occupied'] ?? 0 }}/{{ $sectionStats['A']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم B -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="B">
                        <path d="M 210 200 L 320 200 L 310 320 L 190 320 Z" fill="url(#sectionGradientB)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="255" y="265" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">B</text>
                        <text x="255" y="290" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['B']['occupied'] ?? 0 }}/{{ $sectionStats['B']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم C -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="C">
                        <path d="M 330 200 L 470 200 L 470 320 L 330 320 Z" fill="url(#sectionGradientC)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="400" y="265" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">C</text>
                        <text x="400" y="290" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['C']['occupied'] ?? 0 }}/{{ $sectionStats['C']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم D -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="D">
                        <path d="M 480 200 L 590 200 L 610 320 L 490 320 Z" fill="url(#sectionGradientD)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="545" y="265" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">D</text>
                        <text x="545" y="290" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['D']['occupied'] ?? 0 }}/{{ $sectionStats['D']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم E -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="E">
                        <path d="M 600 200 L 700 200 L 720 320 L 620 320 Z" fill="url(#sectionGradientE)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="660" y="265" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">E</text>
                        <text x="660" y="290" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['E']['occupied'] ?? 0 }}/{{ $sectionStats['E']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم F -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="F">
                        <path d="M 120 340 L 280 340 L 260 460 L 100 460 Z" fill="url(#sectionGradientF)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="190" y="405" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">F</text>
                        <text x="190" y="430" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['F']['occupied'] ?? 0 }}/{{ $sectionStats['F']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم G -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="G">
                        <path d="M 300 340 L 500 340 L 500 460 L 300 460 Z" fill="url(#sectionGradientG)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="400" y="405" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">G</text>
                        <text x="400" y="430" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['G']['occupied'] ?? 0 }}/{{ $sectionStats['G']['total'] ?? 0 }}</text>
                    </g>

                    <!-- القسم H -->
                    <g class="cursor-pointer hover:opacity-80 transition-opacity section-group" data-section="H">
                        <path d="M 520 340 L 680 340 L 700 460 L 540 460 Z" fill="url(#sectionGradientH)" stroke="#4fd1c5" stroke-width="2"/>
                        <text x="610" y="405" text-anchor="middle" fill="white" font-size="24" font-weight="bold" font-family="Tajawal">H</text>
                        <text x="610" y="430" text-anchor="middle" fill="white" font-size="12" font-family="Tajawal">{{ $sectionStats['H']['occupied'] ?? 0 }}/{{ $sectionStats['H']['total'] ?? 0 }}</text>
                    </g>

                    <!-- مخارج الطوارئ -->
                    <g class="exit-marker">
                        <rect x="20" y="180" width="50" height="30" rx="5" fill="#22c55e"/>
                        <text x="45" y="200" text-anchor="middle" fill="white" font-size="10" font-family="Tajawal">مخرج 1</text>
                    </g>
                    <g class="exit-marker">
                        <rect x="730" y="180" width="50" height="30" rx="5" fill="#22c55e"/>
                        <text x="755" y="200" text-anchor="middle" fill="white" font-size="10" font-family="Tajawal">مخرج 2</text>
                    </g>
                    <g class="exit-marker">
                        <rect x="20" y="400" width="50" height="30" rx="5" fill="#22c55e"/>
                        <text x="45" y="420" text-anchor="middle" fill="white" font-size="10" font-family="Tajawal">مخرج 3</text>
                    </g>
                    <g class="exit-marker">
                        <rect x="730" y="400" width="50" height="30" rx="5" fill="#22c55e"/>
                        <text x="755" y="420" text-anchor="middle" fill="white" font-size="10" font-family="Tajawal">مخرج 4</text>
                    </g>

                    <!-- المدخل الرئيسي -->
                    <g>
                        <rect x="350" y="530" width="100" height="40" rx="5" fill="#3b82f6"/>
                        <text x="400" y="555" text-anchor="middle" fill="white" font-size="12" font-weight="bold" font-family="Tajawal">المدخل الرئيسي</text>
                    </g>

                    <!-- التدرجات -->
                    <defs>
                        <linearGradient id="stageGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#4fd1c5"/>
                            <stop offset="100%" style="stop-color:#38b2ac"/>
                        </linearGradient>
                        <linearGradient id="vipGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#f6e05e"/>
                            <stop offset="100%" style="stop-color:#d69e2e"/>
                        </linearGradient>
                        @foreach(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] as $section)
                        <linearGradient id="sectionGradient{{ $section }}" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#2d3748"/>
                            <stop offset="100%" style="stop-color:#1a202c"/>
                        </linearGradient>
                        @endforeach
                    </defs>
                </svg>
            </div>
        </div>

        <!-- مفتاح الألوان -->
        <div class="max-w-3xl mx-auto mt-8">
            <div class="glass rounded-2xl p-6">
                <h3 class="text-white font-bold mb-4 text-center">دليل الألوان</h3>
                <div class="flex flex-wrap justify-center gap-6">
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded bg-gradient-to-r from-yellow-400 to-yellow-600"></div>
                        <span class="text-gray-300">VIP</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded bg-gradient-to-r from-teal-400 to-teal-600"></div>
                        <span class="text-gray-300">الأقسام العادية</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded bg-green-500"></div>
                        <span class="text-gray-300">مخارج الطوارئ</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded bg-blue-500"></div>
                        <span class="text-gray-300">المدخل الرئيسي</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- إحصائيات الأقسام -->
        <div class="max-w-5xl mx-auto mt-8">
            <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
                @foreach(['VIP', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] as $section)
                <div class="glass rounded-xl p-4 text-center">
                    <div class="text-2xl font-bold {{ $section === 'VIP' ? 'text-yellow-400' : 'text-primary' }}">{{ $section }}</div>
                    <div class="text-sm text-gray-400 mt-1">
                        {{ $sectionStats[$section]['occupied'] ?? 0 }}/{{ $sectionStats[$section]['total'] ?? 0 }}
                    </div>
                    <div class="mt-2 h-2 bg-gray-700 rounded-full overflow-hidden">
                        <div class="h-full {{ $section === 'VIP' ? 'bg-yellow-400' : 'bg-primary' }}" 
                             style="width: {{ $sectionStats[$section]['percentage'] ?? 0 }}%"></div>
                    </div>
                </div>
                @endforeach
            </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);
    }
    .section-group:hover {
        filter: brightness(1.2);
    }
</style>
@endsection