@extends('admin.layout')

@section('title', 'إضافة إعلان جديد')
@section('header', 'إضافة إعلان جديد')

@section('content')
<div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow">
    <form action="{{ route('admin.announcements.store') }}" method="POST">
        @csrf
        
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">عنوان الإعلان</label>
            <input type="text" name="title" value="{{ old('title') }}" class="w-full border p-2 rounded focus:ring-blue-500 focus:border-blue-500" required>
            @error('title') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">نص الإعلان</label>
            <textarea name="message" rows="4" class="w-full border p-2 rounded focus:ring-blue-500 focus:border-blue-500" required>{{ old('message') }}</textarea>
            @error('message') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-gray-700 font-bold mb-2">نوع الإعلان</label>
                <select name="type" class="w-full border p-2 rounded focus:ring-blue-500 focus:border-blue-500">
                    <option value="info" {{ old('type') == 'info' ? 'selected' : '' }}>ℹ️ معلومة (أزرق)</option>
                    <option value="success" {{ old('type') == 'success' ? 'selected' : '' }}>✅ نجاح (أخضر)</option>
                    <option value="warning" {{ old('type') == 'warning' ? 'selected' : '' }}>⚠️ تنبيه (أصفر)</option>
                    <option value="danger" {{ old('type') == 'danger' ? 'selected' : '' }}>🛑 هام جداً (أحمر)</option>
                </select>
                @error('type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
            
            <div class="pt-8">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }} class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="text-gray-900 font-bold">إعلان نشط</span>
                </label>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div>
                <label class="block text-gray-700 font-bold mb-2">تاريخ البدء (اختياري)</label>
                <input type="datetime-local" name="start_at" value="{{ old('start_at') }}" class="w-full border p-2 rounded focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-500 mt-1">اتركه فارغاً للنشر فوراً</p>
                @error('start_at') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-gray-700 font-bold mb-2">تاريخ الانتهاء (اختياري)</label>
                <input type="datetime-local" name="end_at" value="{{ old('end_at') }}" class="w-full border p-2 rounded focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-500 mt-1">اتركه فارغاً ليبقى دائماً</p>
                @error('end_at') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>

        <div class="flex justify-end gap-4 border-t pt-4">
            <a href="{{ route('admin.announcements.index') }}" class="px-4 py-2 border rounded text-gray-600 hover:bg-gray-50">إلغاء</a>
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 font-bold">حفظ ونشر</button>
        </div>
    </form>
</div>
@endsection