@extends('layouts.admin')

@section('title', 'إدارة التذاكر')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">إدارة التذاكر</h1>
            <p class="text-gray-400 mt-1">عرض وإدارة جميع تذاكر الحفل</p>
        </div>
        <div class="flex gap-3">
            <button onclick="document.getElementById('importModal').classList.remove('hidden')" 
                    class="px-4 py-2 bg-[#1e293b] text-white rounded-lg hover:bg-[#334155] transition flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                </svg>
                استيراد Excel
            </button>
            <a href="{{ route('admin.tickets.export') }}" 
               class="px-4 py-2 bg-[#2dd4bf] text-[#0f172a] rounded-lg hover:bg-[#14b8a6] transition flex items-center gap-2 font-medium">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
                تصدير Excel
            </a>
        </div>
    </div>

    <!-- Stats Summary -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-xl border border-[#334155] p-4 text-center">
            <div class="text-2xl font-bold text-[#2dd4bf]">{{ $stats['total'] ?? 0 }}</div>
            <div class="text-sm text-gray-400">إجمالي التذاكر</div>
        </div>
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-xl border border-[#334155] p-4 text-center">
            <div class="text-2xl font-bold text-green-400">{{ $stats['checked_in'] ?? 0 }}</div>
            <div class="text-sm text-gray-400">حضر</div>
        </div>
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-xl border border-[#334155] p-4 text-center">
            <div class="text-2xl font-bold text-yellow-400">{{ $stats['pending'] ?? 0 }}</div>
            <div class="text-sm text-gray-400">في الانتظار</div>
        </div>
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-xl border border-[#334155] p-4 text-center">
            <div class="text-2xl font-bold text-amber-400">{{ $stats['vip'] ?? 0 }}</div>
            <div class="text-sm text-gray-400">VIP</div>
        </div>
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-xl border border-[#334155] p-4 text-center">
            <div class="text-2xl font-bold text-purple-400">
                {{ ($stats['total'] ?? 0) > 0 ? round((($stats['checked_in'] ?? 0) / $stats['total']) * 100) : 0 }}%
            </div>
            <div class="text-sm text-gray-400">نسبة الحضور</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] p-6">
        <form action="{{ route('admin.tickets.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div class="md:col-span-2">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث بالاسم، رقم التذكرة، الباركود..."
                       class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
            </div>
            <div>
                <select name="type" class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-2.5 text-white focus:border-[#2dd4bf] outline-none">
                    <option value="">كل الأنواع</option>
                    <option value="vip" {{ request('type') == 'vip' ? 'selected' : '' }}>VIP</option>
                    <option value="excellent" {{ request('type') == 'excellent' ? 'selected' : '' }}>متفوقين</option>
                    <option value="march" {{ request('type') == 'march' ? 'selected' : '' }}>مسيرة</option>
                    <option value="regular" {{ request('type') == 'regular' ? 'selected' : '' }}>عادي</option>
                    <option value="companion" {{ request('type') == 'companion' ? 'selected' : '' }}>مرافقين</option>
                </select>
            </div>
            <div>
                <select name="status" class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-2.5 text-white focus:border-[#2dd4bf] outline-none">
                    <option value="">كل الحالات</option>
                    <option value="checked_in" {{ request('status') == 'checked_in' ? 'selected' : '' }}>حضر</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>لم يحضر</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 px-4 py-2.5 bg-[#2dd4bf] text-[#0f172a] rounded-lg hover:bg-[#14b8a6] transition font-medium">
                    بحث
                </button>
                @if(request()->hasAny(['search', 'type', 'status']))
                <a href="{{ route('admin.tickets.index') }}" class="px-4 py-2.5 bg-[#334155] text-white rounded-lg hover:bg-[#475569] transition">
                    إعادة
                </a>
                @endif
            </div>
        </form>
    </div>

    @if(session('success'))
    <div class="bg-green-500/20 border border-green-500/30 text-green-400 px-4 py-3 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="bg-red-500/20 border border-red-500/30 text-red-400 px-4 py-3 rounded-lg">
        {{ session('error') }}
    </div>
    @endif

    <!-- Tickets Table -->
    <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[#0f172a]/50">
                    <tr>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">رقم التذكرة</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">الاسم</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">الجوال</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">النوع</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">المقعد</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">الحالة</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-400">الإجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#334155]">
                    @forelse($tickets as $ticket)
                    <tr class="hover:bg-[#334155]/30 transition">
                        <td class="px-6 py-4">
                            <span class="font-mono text-[#2dd4bf]">{{ $ticket->ticket_number }}</span>
                        </td>
                        <td class="px-6 py-4 text-white font-medium">{{ $ticket->name }}</td>
                        <td class="px-6 py-4 text-gray-300 font-mono" dir="ltr">{{ $ticket->phone }}</td>
                        <td class="px-6 py-4">
                            @php
                                $typeColors = [
                                    'vip' => 'bg-amber-500/20 text-amber-400 border-amber-500/30',
                                    'excellent' => 'bg-purple-500/20 text-purple-400 border-purple-500/30',
                                    'march' => 'bg-blue-500/20 text-blue-400 border-blue-500/30',
                                    'regular' => 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
                                    'companion' => 'bg-gray-500/20 text-gray-400 border-gray-500/30',
                                ];
                                $typeLabels = [
                                    'vip' => 'VIP',
                                    'excellent' => 'متفوقين',
                                    'march' => 'مسيرة',
                                    'regular' => 'عادي',
                                    'companion' => 'مرافقين',
                                ];
                            @endphp
                            <span class="px-3 py-1 rounded-full text-sm border {{ $typeColors[$ticket->type] ?? $typeColors['regular'] }}">
                                {{ $typeLabels[$ticket->type] ?? $ticket->type }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-gray-300">{{ $ticket->seat?->label ?? '-' }}</td>
                        <td class="px-6 py-4">
                            @if($ticket->is_checked_in)
                                <span class="px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400 border border-green-500/30 flex items-center gap-1 w-fit">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                    حضر
                                </span>
                            @else
                                <span class="px-3 py-1 rounded-full text-sm bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 flex items-center gap-1 w-fit">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                                    </svg>
                                    انتظار
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('admin.tickets.show', $ticket) }}" 
                                   class="p-2 text-gray-400 hover:text-white hover:bg-[#334155] rounded-lg transition" title="عرض">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                </a>
                                @if(!$ticket->is_checked_in)
                                <form action="{{ route('admin.tickets.checkin', $ticket) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="p-2 text-green-400 hover:text-green-300 hover:bg-green-500/20 rounded-lg transition" title="تسجيل حضور">
                                        <svg class="w-5 h-5" 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>
                                    </button>
                                </form>
                                @endif
                                <a href="{{ route('ticket.print', $ticket) }}" target="_blank"
                                   class="p-2 text-gray-400 hover:text-white hover:bg-[#334155] rounded-lg transition" title="طباعة">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                                    </svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto mb-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            لا توجد تذاكر مطابقة للبحث
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($tickets->hasPages())
        <div class="px-6 py-4 border-t border-[#334155]">
            {{ $tickets->withQueryString()->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Import Modal -->
<div id="importModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="fixed inset-0 bg-black/70 backdrop-blur-sm" onclick="document.getElementById('importModal').classList.add('hidden')"></div>
        <div class="relative bg-[#1e293b] rounded-2xl border border-[#334155] p-6 w-full max-w-md">
            <h3 class="text-xl font-bold text-white mb-4">استيراد التذاكر من Excel</h3>
            <form action="{{ route('admin.tickets.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm text-gray-400 mb-2">ملف Excel</label>
                    <input type="file" name="file" accept=".xlsx,.xls,.csv" required
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-2 text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[#2dd4bf] file:text-[#0f172a] file:font-medium hover:file:bg-[#14b8a6]">
                    <p class="mt-2 text-sm text-gray-500">يجب أن يحتوي على: الاسم، النوع، المقعد، المنشأة</p>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="flex-1 px-4 py-2.5 bg-[#2dd4bf] text-[#0f172a] rounded-lg hover:bg-[#14b8a6] transition font-medium">
                        استيراد
                    </button>
                    <button type="button" onclick="document.getElementById('importModal').classList.add('hidden')" 
                            class="px-4 py-2.5 bg-[#334155] text-white rounded-lg hover:bg-[#475569] transition">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection