@php
    $submitText = $submitText ?? 'حفظ المقالة';
    $article = $article ?? null;
@endphp

<form method="POST" action="{{ $action }}" class="space-y-6" enctype="multipart/form-data">
    @csrf
    @if(isset($method) && strtoupper($method) === 'PUT')
        @method('PUT')
    @endif

    <div>
        <label class="block font-medium text-sm text-gray-700" for="title">عنوان المقالة</label>
        <input id="title" name="title" type="text" value="{{ old('title', $article->title ?? '') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
        @error('title')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <label class="block font-medium text-sm text-gray-700" for="slug">رمز المقالة (slug)</label>
        <input id="slug" name="slug" type="text" value="{{ old('slug', $article->slug ?? '') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
        @error('slug')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <label class="block font-medium text-sm text-gray-700" for="excerpt">وصف مختصر</label>
        <textarea id="excerpt" name="excerpt" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('excerpt', $article->excerpt ?? '') }}</textarea>
        @error('excerpt')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <label class="block font-medium text-sm text-gray-700" for="content">محتوى المقالة</label>
        <textarea id="content" name="content" rows="8" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('content', $article->content ?? '') }}</textarea>
        @error('content')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
        <label class="block font-medium text-sm text-gray-700" for="image">صورة المقالة</label>
        <input id="image" name="image" type="file" accept="image/*" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        @if(isset($article) && $article->image)
            <p class="mt-2 text-sm text-gray-500">الصورة الحالية: {{ $article->image }}</p>
            <img src="{{ asset('storage/'.$article->image) }}" alt="{{ $article->title }}" class="mt-2 h-24 w-auto rounded-md object-cover">
        @endif
        @error('image')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
            <label class="block font-medium text-sm text-gray-700" for="order">ترتيب العرض</label>
            <input id="order" name="order" type="number" min="0" value="{{ old('order', $article->order ?? 0) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            @error('order')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
        </div>

        <div class="sm:col-span-2 flex items-end">
            <label class="inline-flex items-center">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $article->is_active ?? true) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                <span class="ms-2 text-sm text-gray-700">نشط</span>
            </label>
        </div>
    </div>

    <div class="flex items-center gap-4">
        <button type="submit" class="inline-flex items-center justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" style="background-color: green;">{{ $submitText }}</button>
        <a href="{{ route('dashboard.articles.index') }}" class="text-sm text-gray-600 hover:text-gray-900">إلغاء</a>
    </div>
</form>