@extends('admin.layouts.admin')

@section('title', 'إدارة قسم الفيديو')

@section('content')
<div class="max-w-4xl mx-auto bg-white p-8 rounded-xl shadow-lg" dir="rtl">
    <h2 class="text-2xl font-bold mb-6 text-right border-b pb-4 text-gray-800">إدارة قسم الفيديو (يوتيوب)</h2>
    
    <form action="{{ route('admin.video.update') }}" method="POST" class="space-y-6 text-right">
        @csrf
        <div>
            <label class="block font-bold mb-2">عنوان القسم</label>
            <input type="text" name="title" value="{{ $video->title }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 text-right" required>
        </div>

        <div>
            <label class="block font-bold mb-2">الوصف</label>
            <textarea name="description" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 text-right" rows="4" required>{{ $video->description }}</textarea>
        </div>

        <div>
            <label class="block font-bold mb-2">رابط فيديو اليوتيوب</label>
            <input type="url" name="video_link" value="{{ $video->video_link }}" placeholder="https://www.youtube.com/watch?v=..." class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 text-left" dir="ltr" required>
            <p class="text-xs text-gray-400 mt-1 italic">انسخ الرابط كاملاً من المتصفح.</p>
        </div>

        @if($video->video_link)
        <div class="mt-6">
            <label class="block font-bold mb-2 text-gray-500">معاينة الفيديو الحالي:</label>
            <div class="aspect-video rounded-xl overflow-hidden shadow-inner bg-black">
                @php
                    $url = $video->video_link;
                    parse_str(parse_url($url, PHP_URL_QUERY), $vars);
                    $videoId = $vars['v'] ?? '';
                @endphp
                @if($videoId)
                    <iframe class="w-full h-full" src="https://www.youtube.com/embed/{{ $videoId }}" frameborder="0" allowfullscreen></iframe>
                @else
                    <div class="flex items-center justify-center h-full text-white">الرابط غير صالح للمعاينة</div>
                @endif
            </div>
        </div>
        @endif

        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow transition duration-300">حفظ التعديلات</button>
    </form>
</div>
@endsection