@extends('admin.layouts.app')

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

@section('content')
<div class="container-fluid pt-4 px-4">
    <div class="bg-light rounded p-4">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h6 class="mb-0">جميع التذاكر</h6>
            <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary">
                <i class="fa fa-plus me-2"></i>إضافة تذكرة جديدة
            </a>
        </div>
        
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        
        <!-- فلتر بسيط -->
        <div class="row mb-4 g-3">
            <div class="col-md-3">
                <select class="form-select" id="city_id" onchange="updateSubCities()">
                    <option value="">اختر الدولة</option>
                    @foreach($cities as $city)
                        <option value="{{ $city->id }}" {{ request('city_id') == $city->id ? 'selected' : '' }}>
                            {{ $city->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" id="sub_city_id" onchange="filterTickets()" {{ !request('city_id') ? 'disabled' : '' }}>
                    <option value="">اختر المدينة</option>
                    @if(request('city_id'))
                        @foreach($subCities->where('city_id', request('city_id')) as $subCity)
                            <option value="{{ $subCity->id }}" {{ request('sub_city_id') == $subCity->id ? 'selected' : '' }}>
                                {{ $subCity->name }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            @if(request('city_id') || request('sub_city_id'))
            <div class="col-md-2">
                <a href="{{ route('admin.tickets.index') }}" class="btn btn-outline-secondary w-100">
                    <i class="fa fa-undo me-1"></i>إعادة تعيين
                </a>
            </div>
            @endif
        </div>
        
        <div class="table-responsive">
            <table class="table text-start align-middle table-bordered table-hover mb-0">
                <thead>
                    <tr class="text-dark">
                        <th scope="col">ID</th>
                        <th scope="col">العنوان</th>
                        <th scope="col">القسم</th>
                        <th scope="col">المدينة</th>
                        <th scope="col">السعر</th>
                        <th scope="col">تاريخ الفعالية</th>
                        <th scope="col">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tickets as $ticket)
                    <tr>
                        <td>{{ $ticket->id }}</td>
                        <td>{{ Str::limit($ticket->title, 40) }}</td>
                        <td>{{ $ticket->category->name ?? '-' }}</td>
                        <td>{{ $ticket->city->name ?? '-' }}</td>
                        <td>${{ $ticket->price }}</td>
                        <td>{{ $ticket->event_date ? \Carbon\Carbon::parse($ticket->event_date)->format('Y-m-d') : '-' }}</td>
                        <td>
                            <a class="btn btn-sm btn-info" href="{{ route('admin.tickets.show', $ticket->id) }}">عرض</a>
                            <a class="btn btn-sm btn-warning" href="{{ route('admin.tickets.edit', $ticket->id) }}">تعديل</a>
                            <form action="{{ route('admin.tickets.destroy', $ticket->id) }}" method="POST" class="d-inline" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">حذف</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center">لا توجد تذاكر</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="mt-4">
            {{ $tickets->links() }}
        </div>
    </div>
</div>

<script>
// بيانات المدن
const allSubCities = @json($subCities);

function updateSubCities() {
    const cityId = document.getElementById('city_id').value;
    const subCitySelect = document.getElementById('sub_city_id');
    
    // مسح الخيارات الحالية
    subCitySelect.innerHTML = '<option value="">اختر المدينة</option>';
    
    if (cityId) {
        // تفعيل القائمة
        subCitySelect.disabled = false;
        
        // إضافة المدن المرتبطة بالدولة المختارة
        allSubCities.forEach(subCity => {
            if (subCity.city_id == cityId) {
                const option = document.createElement('option');
                option.value = subCity.id;
                option.textContent = subCity.name;
                subCitySelect.appendChild(option);
            }
        });
        
        // الانتقال للفلترة بالدولة فوراً
        filterTickets();
    } else {
        // تعطيل القائمة إذا لم يتم اختيار دولة
        subCitySelect.disabled = true;
        window.location.href = '{{ route("admin.tickets.index") }}';
    }
}

function filterTickets() {
    const cityId = document.getElementById('city_id').value;
    const subCityId = document.getElementById('sub_city_id').value;
    
    let url = '{{ route("admin.tickets.index") }}?';
    if (cityId) url += 'city_id=' + cityId;
    if (subCityId) url += '&sub_city_id=' + subCityId;
    
    window.location.href = url;
}
</script>
@endsection