@extends('admin.layouts.app')
@section('title', $ad->id ? 'تعديل إعلان' : 'إضافة إعلان')
@section('page-title', $ad->id ? 'تعديل الإعلان' : 'إضافة إعلان جديد')

@section('content')

<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
    <div class="card-header">
        <i class="bi bi-megaphone me-2"></i>
        {{ $ad->id ? 'تعديل الإعلان' : 'إعلان جديد' }}
    </div>
    <div class="card-body">
        <form method="POST"
              action="{{ $ad->id ? route('admin.ads.update', $ad->id) : route('admin.ads.store') }}"
              enctype="multipart/form-data">
            @csrf
            @if($ad->id) @method('PUT') @endif

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">العنوان (عربي) <span class="text-danger">*</span></label>
                    <input type="text" name="title_ar" value="{{ old('title_ar', $ad->title_ar) }}"
                           class="form-control @error('title_ar') is-invalid @enderror">
                    @error('title_ar') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">العنوان (إنجليزي) <span class="text-danger">*</span></label>
                    <input type="text" name="title" value="{{ old('title', $ad->title) }}"
                           class="form-control @error('title') is-invalid @enderror" required>
                    @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-12">
                    <label class="form-label">الوصف</label>
                    <textarea name="description" rows="2"
                              class="form-control">{{ old('description', $ad->description) }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">طريقة العرض <span class="text-danger">*</span></label>
                    <select name="display_mode" id="display_mode" class="form-select" required>
                        <option value="slider" {{ old('display_mode', $ad->display_mode ?? 'slider') === 'slider' ? 'selected' : '' }}>سلايدر في الرئيسية (المريض)</option>
                        <option value="splash" {{ old('display_mode', $ad->display_mode ?? 'slider') === 'splash' ? 'selected' : '' }}>شاشة كاملة عند فتح التطبيق (مرتين/يوم لكل مستخدم)</option>
                    </select>
                    <div class="form-text">الشاشة الكاملة تظهر للمريض أو الطبيب حسب «الجمهور»، مع زر إغلاق وحدّ {{ \App\Services\SplashAdService::MAX_VIEWS_PER_DAY }} مشاهدات يومياً لكل إعلان.</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">نوع الوسيط <span class="text-danger">*</span></label>
                    <select name="media_type" id="media_type" class="form-select" required>
                        <option value="image" {{ old('media_type', $ad->media_type ?? 'image') === 'image' ? 'selected' : '' }}>صورة ثابتة</option>
                        <option value="gif" {{ old('media_type', $ad->media_type ?? 'image') === 'gif' ? 'selected' : '' }}>صورة متحركة (GIF)</option>
                        <option value="video" {{ old('media_type', $ad->media_type ?? 'image') === 'video' ? 'selected' : '' }}>فيديو (MP4 / WebM)</option>
                    </select>
                </div>
                <div class="col-12" id="field-image">
                    <label class="form-label">ملف الصورة أو GIF</label>
                    @if($ad->image)
                        <div class="mb-2">
                            <img src="{{ asset('storage/'.$ad->image) }}"
                                 style="height:100px;border-radius:8px;object-fit:cover">
                        </div>
                    @endif
                    <input type="file" name="image" class="form-control" accept="image/*,.gif">
                    <div class="form-text">PNG، JPG، WebP أو GIF — حتى 5 ميجابايت</div>
                </div>
                <div class="col-12" id="field-video" style="display:none">
                    <label class="form-label">ملف الفيديو</label>
                    @if($ad->video_path)
                        <div class="mb-2">
                            <video src="{{ asset('storage/'.$ad->video_path) }}" controls muted style="max-height:160px;border-radius:8px"></video>
                        </div>
                    @endif
                    <input type="file" name="video" class="form-control" accept="video/mp4,video/webm,.mp4,.webm">
                    <div class="form-text">MP4 أو WebM — حتى ~30 ميجابايت؛ يُشغَّل كاملاً بلا صوت تلقائياً في الشاشة الكاملة (آمن للمتصفحات).</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">رابط الإعلان</label>
                    <input type="url" name="link_url" value="{{ old('link_url', $ad->link_url) }}"
                           class="form-control" placeholder="https://...">
                </div>
                <div class="col-md-6">
                    <label class="form-label">نص الزر</label>
                    <input type="text" name="link_text" value="{{ old('link_text', $ad->link_text) }}"
                           class="form-control" placeholder="اعرف أكثر...">
                </div>
                <div class="col-md-6">
                    <label class="form-label">موضع الإعلان (للسلايدر والصفحات) <span class="text-danger">*</span></label>
                    <select name="position" class="form-select" required>
                        <option value="home_top"       {{ old('position',$ad->position)=='home_top'       ? 'selected':'' }}>أعلى الصفحة الرئيسية</option>
                        <option value="home_middle"    {{ old('position',$ad->position)=='home_middle'    ? 'selected':'' }}>وسط الصفحة الرئيسية</option>
                        <option value="search_results" {{ old('position',$ad->position)=='search_results' ? 'selected':'' }}>بين نتائج البحث</option>
                        <option value="doctor_profile" {{ old('position',$ad->position)=='doctor_profile' ? 'selected':'' }}>صفحة الطبيب</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">الجمهور المستهدف</label>
                    <select name="target" class="form-select">
                        <option value="all"      {{ old('target',$ad->target)=='all'      ? 'selected':'' }}>الجميع</option>
                        <option value="patients" {{ old('target',$ad->target)=='patients' ? 'selected':'' }}>المرضى فقط</option>
                        <option value="doctors"  {{ old('target',$ad->target)=='doctors'  ? 'selected':'' }}>الأطباء فقط</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">تاريخ البدء</label>
                    <input type="datetime-local" name="starts_at"
                           value="{{ old('starts_at', $ad->starts_at?->format('Y-m-d\TH:i')) }}"
                           class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">تاريخ الانتهاء</label>
                    <input type="datetime-local" name="ends_at"
                           value="{{ old('ends_at', $ad->ends_at?->format('Y-m-d\TH:i')) }}"
                           class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">ترتيب العرض</label>
                    <input type="number" name="sort_order" min="0" class="form-control"
                           value="{{ old('sort_order', $ad->sort_order ?? 0) }}">
                </div>
                <div class="col-12">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active"
                               value="1" id="is_active"
                               {{ old('is_active', $ad->is_active ?? true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">تفعيل الإعلان</label>
                    </div>
                </div>
            </div>

            <hr class="my-4">
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('admin.ads.index') }}" class="btn btn-outline-secondary">إلغاء</a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-save me-1"></i> حفظ
                </button>
            </div>
        </form>
    </div>
</div>
</div>
</div>

<script>
(function(){
    var mt=document.getElementById('media_type');
    var fi=document.getElementById('field-image');
    var fv=document.getElementById('field-video');
    function sync(){
        if(!mt||!fi||!fv) return;
        var v=mt.value==='video';
        fi.style.display=v?'none':'block';
        fv.style.display=v?'block':'none';
    }
    if(mt) mt.addEventListener('change',sync);
    sync();
})();
</script>
@endsection