@extends('layouts.admin')

@section('header', 'Create Post')

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8 max-w-4xl">
    <form action="{{ route('admin.posts.store') }}" method="POST" class="space-y-6" enctype="multipart/form-data">
        @csrf

        <div>
            <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
            <input type="text" name="title" id="title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('title') }}" required>
            @error('title') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="category_id" class="block text-sm font-medium text-gray-700">Category</label>
            <select name="category_id" id="category_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">
                <option value="">Select a category</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                @endforeach
            </select>
            @error('category_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="excerpt" class="block text-sm font-medium text-gray-700">Excerpt (Optional)</label>
            <textarea name="excerpt" id="excerpt" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">{{ old('excerpt') }}</textarea>
            @error('excerpt') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="body" class="block text-sm font-medium text-gray-700">Content</label>
            <textarea name="body" id="body" rows="10" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" required>{{ old('body') }}</textarea>
            @error('body') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="featured_image" class="block text-sm font-medium text-gray-700">Featured Image</label>
            <input type="file" name="featured_image" id="featured_image" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-theme-50 file:text-theme-700 hover:file:bg-theme-100">
            @error('featured_image') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div class="flex items-center gap-6 pt-4 border-t border-gray-200">
            <div class="flex items-center">
                <input type="checkbox" name="is_published" id="is_published" value="1" class="h-4 w-4 text-theme-600 focus:ring-theme-900 border-gray-300 rounded" {{ old('is_published') ? 'checked' : '' }}>
                <label for="is_published" class="ml-2 block text-sm text-gray-900">Published</label>
            </div>
            
            <div class="flex items-center">
                <input type="checkbox" name="is_featured" id="is_featured" value="1" class="h-4 w-4 text-theme-600 focus:ring-theme-900 border-gray-300 rounded" {{ old('is_featured') ? 'checked' : '' }}>
                <label for="is_featured" class="ml-2 block text-sm text-gray-900">Featured Article</label>
            </div>
        </div>

        <div class="flex justify-end pt-6">
            <a href="{{ route('admin.posts.index') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900 mr-3">Cancel</a>
            <button type="submit" class="bg-theme-900 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-theme-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900">Create Post</button>
        </div>
    </form>
</div>
@endsection