@extends('layouts.member')

@section('title', 'إدارة طلبات البث المباشر')

@section('content')

<div class="container mx-auto px-4 py-6 rtl">

    @if(session('success'))
        <div class="mb-4 alert alert-success text-green-800 bg-green-100 border border-green-200 rounded-lg p-4 flex items-center">
            <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    <div class="mb-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">إدارة طلباتي للبث المباشر</h1>
                <p class="text-gray-600 dark:text-gray-400">إدارة طلباتك المقدمة ومتابعة حالتها</p>
            </div>
            <div class="flex gap-2">
                <button onclick="openRequestModal()" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700
                text-white font-medium rounded-lg transition duration-200">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    طلب جديد
                </button>
            </div>
        </div>
    </div>

    <!-- إحصائيات الطلبات -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-blue-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $stats['my_total'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">طلبات الكل</div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-yellow-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ $stats['my_pending'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">طلبات معلقة</div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-green-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $stats['my_approved'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">طلبات مقبولة</div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-red-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{ $stats['my_rejected'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">طلبات مرفوضة</div>
            </div>
        </div>
    </div>

    <!-- فلترة الطلبات -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6 p-4">
        <form method="GET" action="{{ route('member.live-stream-requests.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">حالة الطلب</label>
                <select name="status" class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">الكل</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>معلقة</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>مقبولة</option>
                    <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>مرفوضة</option>
                </select>
            </div>

            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">بحث</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث بالمنصة أو الملاحظات"
                    class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
            </div>

            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">من تاريخ</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                    class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
            </div>

            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">إلى تاريخ</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}"
                    class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
            </div>

            <div class="md:col-span-4 mt-2 flex gap-4">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white rounded-md py-2 px-4 transition duration-200">
                    تطبيق الفلتر
                </button>
                <a href="{{ route('member.live-stream-requests.index') }}"
                   class="bg-gray-500 hover:bg-gray-600 text-white rounded-md py-2 px-4 transition duration-200">
                    إعادة تعيين
                </a>
            </div>
        </form>
    </div>

    <!-- عرض الطلبات في كاردات -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
    @forelse($requests as $request)
        <div class="bg-white dark:bg-gray-800 rounded-lg border shadow p-5 flex flex-col gap-3">
            <div class="flex justify-between items-center">
                <span class="font-bold text-indigo-600">{{ $request->platform_name }}</span>
                <span class="px-2 py-1 text-xs font-semibold rounded-full 
                    @if($request->status == 'approved') bg-green-100 text-green-700
                    @elseif($request->status == 'rejected') bg-red-100 text-red-700
                    @else bg-yellow-100 text-yellow-700 @endif">
                    {{ $request->status_text }}
                </span>
            </div>

            <div class="flex gap-4">
                <div><strong>التاريخ:</strong> {{ $request->requested_date->format('Y-m-d') }}</div>
                <div><strong>الوقت:</strong> {{ \Carbon\Carbon::parse($request->requested_time)->format('H:i') }}</div>
            </div>
            <div class="flex gap-4">
                <div><strong>المدة (ساعات):</strong> {{ $request->duration_hours }}</div>
                <div><strong>نوع البث:</strong> {{ $request->requested_type_text }}</div>
            </div>

            @if($request->notes)
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded text-sm">{{ $request->notes }}</div>
            @endif

            <div class="mt-auto flex gap-3 justify-end">
                <button type="button" onclick="openEditModal({{ $request->id }})"
                    class="p-2 rounded bg-yellow-100 text-yellow-700 hover:bg-yellow-200" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                </button>
                <form method="POST" action="{{ route('member.live-stream-requests.destroy', $request) }}" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="p-2 rounded bg-red-100 text-red-700 hover:bg-red-200" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                </form>
                <a href="{{ route('member.live-stream-requests.show', $request) }}" class="p-2 rounded bg-blue-100 text-blue-700 hover:bg-blue-200" 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>
            </div>
        </div>
    @empty
        <p class="text-center text-gray-500 dark:text-gray-400 py-12">لا توجد طلبات لعرضها.</p>
    @endforelse
</div>


</div>

{{-- مودال الطلب (إضافة وتعديل) --}}
@include('member.live-stream-requests.partials.request-modal')

@endsection

@push('scripts')
<script>
    function openRequestModal() {
        document.getElementById('requestForm').reset();
        document.getElementById('requestMethod').value = 'POST';
        document.getElementById('requestId').value = '';
        document.getElementById('requestForm').action = "{{ route('member.live-stream-requests.store') }}";
        document.getElementById('requestModal').classList.remove('hidden');
    }

    function openEditModal(request) {
        document.getElementById('requestMethod').value = 'PUT';
        document.getElementById('requestId').value = request.id;
        document.getElementById('platform_name').value = request.platform_name;
        document.getElementById('requested_date').value = request.requested_date;
        document.getElementById('requested_time').value = request.requested_time;
        document.getElementById('duration_hours').value = request.duration_hours;
        document.getElementById('requested_type').value = request.requested_type;
        document.getElementById('notes').value = request.notes;
        document.getElementById('requestForm').action = `/member/live-stream-requests/${request.id}`;
        document.getElementById('requestModal').classList.remove('hidden');
    }

    function closeRequestModal() {
        document.getElementById('requestModal').classList.add('hidden');
        document.getElementById('requestForm').reset();
    }
</script>
@endpush