@extends('admin.layouts.app')

@section('title', 'Create Article')
@section('page-title', 'Create Article')
@section('page-subtitle', 'Write new article or story')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Article Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.news.store') }}" enctype="multipart/form-data">
        @csrf
        
        <div class="p-6 space-y-4">
          <!-- Title -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Title *</label>
            <input type="text" name="title" value="{{ old('title') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('title') border-red-500 @enderror" placeholder="Article title">
            @error('title')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Excerpt -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Excerpt * (500 characters max)</label>
            <textarea name="excerpt" rows="3" required maxlength="500" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('excerpt') border-red-500 @enderror" placeholder="Brief summary of the article...">{{ old('excerpt') }}</textarea>
            @error('excerpt')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Content -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Content *</label>
            <textarea name="content" rows="12" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('content') border-red-500 @enderror" placeholder="Full article content...">{{ old('content') }}</textarea>
            @error('content')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Category -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Category</label>
            <input type="text" name="category" value="{{ old('category') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('category') border-red-500 @enderror" placeholder="Mental Health, Wellness, Research, etc.">
            @error('category')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Featured Image -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Featured Image</label>
            <input type="file" name="featured_image" accept="image/*" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('featured_image') border-red-500 @enderror">
            <p class="mt-1 text-xs text-slate-500">Upload article image (JPG, PNG, max 2MB)</p>
            @error('featured_image')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Status and Options -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
              <select name="status" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('status') border-red-500 @enderror">
                <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                <option value="archived" {{ old('status') == 'archived' ? 'selected' : '' }}>Archived</option>
              </select>
              @error('status')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div class="space-y-3 pt-8">
              <div class="flex items-center">
                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                <label class="ml-2 text-sm text-slate-700">Feature this article</label>
              </div>
              <div class="flex items-center">
                <input type="checkbox" name="allow_comments" value="1" {{ old('allow_comments', 1) ? 'checked' : '' }} class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                <label class="ml-2 text-sm text-slate-700">Allow comments</label>
              </div>
            </div>
          </div>

          <!-- Publication Date -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Publication Date</label>
            <input type="datetime-local" name="published_at" value="{{ old('published_at') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('published_at') border-red-500 @enderror">
            <p class="mt-1 text-xs text-slate-500">Leave empty to publish immediately when status is set to published</p>
            @error('published_at')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.news.index') }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">
            Cancel
          </a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">
            Create Article
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection