@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

    <!-- Breadcrumb -->
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('member.live-stream-requests.index') }}" 
                   class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                    طلبات البث المباشر
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                    </svg>
                    <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تفاصيل الطلب</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                تفاصيل طلب البث المباشر #{{ $liveStreamRequest->id }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400">عرض تفصيلي لطلبك المقدم للبث المباشر</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('member.live-stream-requests.index') }}" 
               class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                العودة للقائمة
            </a>
        </div>
    </div>

    <!-- Main Card -->
    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <!-- Card Header -->
        <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-b border-gray-200 dark:border-gray-700 rounded-t-lg">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-full ml-3">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" 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>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">طلب البث المباشر #{{ $liveStreamRequest->id }}</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                            <svg class="w-4 h-4 ml-1" 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>
                            تم التقديم: {{ $liveStreamRequest->created_at->format('Y/m/d H:i') }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center space-x-2 space-x-reverse">
                    @if($liveStreamRequest->status == 'approved')
                        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200">
                            معتمد
                        </span>
                    @elseif($liveStreamRequest->status == 'pending')
                        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200">
                            قيد المراجعة
                        </span>
                    @else
                        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200">
                            مرفوض
                        </span>
                    @endif
                </div>
            </div>
        </div>

    <div class="px-6 py-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">

        {{-- user_id --}}
        @if($liveStreamRequest->user)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A12.042 12.042 0 0112 15c3.042 0 5.847 1.131 7.879 3l-13.758 2.804zM12 12a5 5 0 110-10 5 5 0 010 10z" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">صاحب الطلب</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ $liveStreamRequest->user->name }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $liveStreamRequest->user->email }}</p>
            </div>
        </div>
        @endif

        {{-- request_type --}}
        @if($liveStreamRequest->request_type)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h1l1-2 1 2h10l1-2 1 2h1M12 12v8m2-4H10" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">نوع الطلب</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $liveStreamRequest->request_type_text }}</p>
            </div>
        </div>
        @endif

        {{-- platform_name --}}
        @if($liveStreamRequest->platform_name)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-teal-50 dark:bg-teal-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-teal-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">اسم المنصة</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $liveStreamRequest->platform_name }}</p>
            </div>
        </div>
        @endif

        {{-- requested_date --}}
        @if($liveStreamRequest->requested_date)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m0 0a3 3 0 116 0v4m-6 10v4m0 0a3 3 0 116 0v-4m-6 0h6" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">تاريخ الجلسة</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $liveStreamRequest->requested_date->format('Y-m-d') }}</p>
            </div>
        </div>
        @endif

        {{-- requested_time --}}
        @if($liveStreamRequest->requested_time)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <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>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">وقت الجلسة</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ \Carbon\Carbon::parse($liveStreamRequest->requested_time)->format('H:i') }}</p>
            </div>
        </div>
        @endif

        {{-- duration_hours --}}
        @if($liveStreamRequest->duration_hours)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.345 6.052M12 14L5.84 17.578a12.083 12.083 0 00-.345-6.052" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">مدة الجلسة (ساعات)</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $liveStreamRequest->duration_hours }}</p>
            </div>
        </div>
        @endif

        {{-- requested_type --}}
        @if($liveStreamRequest->requested_type)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-pink-50 dark:bg-pink-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-pink-600 dark:text-pink-400" 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>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">نوع البث</label>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $liveStreamRequest->requested_type_text }}</p>
            </div>
        </div>
        @endif

        {{-- notes --}}
        @if($liveStreamRequest->notes)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-cyan-50 dark:bg-cyan-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m-2 8v-6m8-2v6m-6 0h2" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">ملاحظات المرسل</label>
                <p class="text-sm text-gray-900 dark:text-white whitespace-pre-line">{{ $liveStreamRequest->notes }}</p>
            </div>
        </div>
        @endif

        {{-- additional_data --}}
        @if($liveStreamRequest->additional_data)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5v14l7-7-7-7z" />
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">بيانات إضافية</label>
                <pre class="text-sm bg-gray-50 dark:bg-gray-700 p-3 rounded whitespace-pre-wrap text-gray-800 dark:text-gray-100">{{ json_encode($liveStreamRequest->additional_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
            </div>
        </div>
        @endif

        {{-- status --}}
        @if($liveStreamRequest->status)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600 dark:text-red-400" 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>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">الحالة</label>
                <p class="text-sm text-gray-900 dark:text-white">{{ $liveStreamRequest->status_text }}</p>
            </div>
        </div>
        @endif

        {{-- reviewed_by --}}
        @if($liveStreamRequest->reviewedBy)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">راجع الطلب</label>
                <p class="text-sm text-gray-900 dark:text-white">{{ $liveStreamRequest->reviewedBy->name }}</p>
            </div>
        </div>
        @endif

        {{-- reviewer_notes --}}
        @if($liveStreamRequest->reviewer_notes)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-600 dark:text-green-400" 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>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">ملاحظات المراجع</label>
                <p class="text-sm text-gray-900 dark:text-white whitespace-pre-line">{{ $liveStreamRequest->reviewer_notes }}</p>
            </div>
        </div>
        @endif

        {{-- admin_notes --}}
        @if($liveStreamRequest->admin_notes)
        <div class="flex items-start space-x-3 space-x-reverse">
            <div class="flex-shrink-0">
                <div class="p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-4 4v-4z"/>
                    </svg>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">ملاحظات الإدارة العليا</label>
                <p class="text-sm text-gray-900 dark:text-white whitespace-pre-line">{{ $liveStreamRequest->admin_notes }}</p>
            </div>
        </div>
        @endif

    </div>
</div>

    </div>
</div>
@endsection