@extends('layouts.admin')

@section('pageTitle', 'اعلان جدید')

@section('content')
<div class="container mx-auto px-6 py-8">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center mb-4">
            <a href="{{ route('notifications.index') }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition">
                <i class="fas fa-arrow-right ml-1"></i>
                <span>بازگشت به اعلان‌ها</span>
            </a>
        </div>
        <h3 class="text-gray-700 dark:text-white text-3xl font-medium">اعلان جدید</h3>
        <p class="text-gray-600 dark:text-gray-400 mt-2">یک اعلان جدید برای کاربران ایجاد کنید</p>
    </div>

    <!-- Form Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <form action="{{ route('notifications.store') }}" method="POST" class="p-6 space-y-6">
            @csrf

            <!-- Title Field -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-heading ml-1 text-indigo-600 dark:text-indigo-400"></i>
                    عنوان
                </label>
                <input 
                    type="text" 
                    name="title" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition @error('title') border-red-500 dark:border-red-500 @enderror"
                    value="{{ old('title') }}" 
                    placeholder="عنوان اعلان را وارد کنید"
                    required>
                @error('title')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">
                        <i class="fas fa-exclamation-circle ml-1"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <!-- Message Field -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-envelope ml-1 text-indigo-600 dark:text-indigo-400"></i>
                    محتوای اعلان
                </label>
                <textarea 
                    name="message" 
                    rows="6"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition resize-none @error('message') border-red-500 dark:border-red-500 @enderror"
                    placeholder="متن اعلان را اینجا بنویسید..."
                    required>{{ old('message') }}</textarea>
                @error('message')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">
                        <i class="fas fa-exclamation-circle ml-1"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <!-- Type Field -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-tag ml-1 text-indigo-600 dark:text-indigo-400"></i>
                    نوع اعلان
                </label>
                <select 
                    name="type" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition @error('type') border-red-500 dark:border-red-500 @enderror"
                    required>
                    <option value="">-- انتخاب کنید --</option>
                    <option value="info" @selected(old('type') == 'info')>
                        <i class="fas fa-info-circle"></i> اطلاعات
                    </option>
                    <option value="warning" @selected(old('type') == 'warning')>
                        <i class="fas fa-exclamation-triangle"></i> هشدار
                    </option>
                    <option value="success" @selected(old('type') == 'success')>
                        <i class="fas fa-check-circle"></i> موفقیت
                    </option>
                    <option value="error" @selected(old('type') == 'error')>
                        <i class="fas fa-times-circle"></i> خطا
                    </option>
                </select>
                @error('type')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">
                        <i class="fas fa-exclamation-circle ml-1"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <!-- Info Box -->
            <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
                <p class="text-sm text-blue-800 dark:text-blue-200">
                    <i class="fas fa-info-circle ml-2"></i>
                    <strong>توجه:</strong> این اعلان بعد از ذخیره می‌توانید آن را ارسال کنید. اعلان ذخیره‌شده به‌صورت "پیش‌نویس" نگهداری می‌شود.
                </p>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button 
                    type="submit" 
                    class="inline-flex items-center px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition">
                    <i class="fas fa-save ml-2"></i>
                    <span>ذخیره اعلان</span>
                </button>
                <a 
                    href="{{ route('notifications.index') }}" 
                    class="inline-flex items-center px-6 py-2 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">
                    <i class="fas fa-times ml-2"></i>
                    <span>انصراف</span>
                </a>
            </div>
        </form>
    </div>
</div>
@endsection