@extends('layouts.admin')

@section('title', 'القائمة الذهبية')

@section('content')
<div class="container-fluid">
    <div class="row">
        @include('components.admin-sidebar')
        <div class="col-md-9 col-lg-10">
            @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title fw-bold mb-0">
                                <i class="fas fa-star text-warning me-2"></i>
                                إضافة فيديو جديد للقائمة الذهبية
                            </h5>
                            <a href="{{ route($routePrefix . '.golden-list.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-right me-2"></i>
                                العودة للقائمة
                            </a>
                        </div>

                        <form method="POST" action="{{ route($routePrefix . '.golden-list.store') }}">
                            @csrf

                            <div class="row">
                                <!-- Video Selection -->
                                <div class="col-md-12 mb-4">
                                    <label class="form-label required">اختر الفيديو</label>
                                    <select name="video_id" class="form-select @error('video_id') is-invalid @enderror" required>
                                        <option value="">-- اختر فيديو --</option>
                                        @foreach($videos as $video)
                                            <option value="{{ $video->id }}" {{ old('video_id') == $video->id ? 'selected' : '' }}>
                                                {{ $video->title }} - (ID: {{ $video->id }})
                                                @if($video->user)
                                                    - {{ $video->user->name }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('video_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">يمكنك البحث عن الفيديو بالعنوان أو رقم ID</small>
                                </div>

                                <!-- Categories (Multiple Selection) -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">التصنيفات</label>
                                    <small class="text-muted d-block mb-2">يمكنك اختيار أكثر من تصنيف (اضغط Ctrl/Cmd للاختيار المتعدد)</small>
                                    <select name="category_ids[]" class="form-select @error('category_ids') is-invalid @enderror" multiple required style="min-height: 150px;">
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ (is_array(old('category_ids')) && in_array($category->id, old('category_ids'))) ? 'selected' : '' }}>
                                                {{ $category->name_ar }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_ids')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">سيتم إضافة الفيديو لكل التصنيفات المختارة</small>
                                </div>

                                <!-- Countries (Multiple Selection) -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">الدول</label>
                                    <small class="text-muted d-block mb-2">يمكنك اختيار أكثر من دولة (اضغط Ctrl/Cmd للاختيار المتعدد)</small>
                                    <select name="countries[]" class="form-select @error('countries') is-invalid @enderror" multiple required style="min-height: 150px;">
                                        @foreach($countries as $code => $name)
                                            <option value="{{ $code }}" {{ (is_array(old('countries')) && in_array($code, old('countries'))) ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('countries')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">سيتم إضافة الفيديو لكل الدول المختارة</small>
                                </div>

                                <!-- Sort Order -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">ترتيب العرض</label>
                                    <input type="number" 
                                           name="sort" 
                                           class="form-control @error('sort') is-invalid @enderror" 
                                           value="{{ old('sort', 0) }}"
                                           min="0"
                                           placeholder="0">
                                    @error('sort')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">الأرقام الأصغر تظهر أولاً (0 = الأعلى)</small>
                                </div>

                                <!-- Notes -->
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">ملاحظات</label>
                                    <textarea name="notes" 
                                              class="form-control @error('notes') is-invalid @enderror" 
                                              rows="3"
                                              placeholder="أضف ملاحظات حول سبب إضافة هذا الفيديو للقائمة الذهبية...">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror>
                                </div>
                            </div>

                            <!-- Info Box -->
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>ملاحظة:</strong> سيتم تمييز الفيديو في القائمة الذهبية وسيكون مرئياً لجميع الوكلاء.
                                تأكد من اختيار التصنيف والدولة المناسبين.
                            </div>

                            <!-- Submit Buttons -->
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>
                                    إضافة للقائمة الذهبية
                                </button>
                                <a href="{{ route($routePrefix . '.golden-list.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i>
                                    إلغاء
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.required::after {
    content: " *";
    color: red;
}
</style>
@endsection