

@extends('admin.layout')

@section('content')
<div class="container mx-auto py-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">Add New Content</h1>

    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('content.index') }}" 
           class="inline-block bg-gray-500 text-white px-4 py-2 rounded-lg shadow hover:bg-gray-600 transition">
           &larr; Back to Content List
        </a>
    </div>

    <!-- Display Validation Errors -->
    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Create Content Form -->
    <div class="bg-white shadow rounded-lg p-6">
        <form action="{{ route('content.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Page -->
            <div class="mb-4">
                <label for="page" class="block text-gray-700 font-medium mb-2">Page</label>
                <input type="text" name="page" id="page" 
                       value="{{ old('page') }}" 
                       class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-700 focus:border-red-700" 
                       placeholder="Enter page name">
            </div>

            <!-- Section -->
            <div class="mb-4">
                <label for="section" class="block text-gray-700 font-medium mb-2">Section</label>
                <input type="text" name="section" id="section" 
                       value="{{ old('section') }}" 
                       class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-700 focus:border-red-700" 
                       placeholder="Enter section name">
            </div>

            <!-- Title -->
            <div class="mb-4">
                <label for="title" class="block text-gray-700 font-medium mb-2">Title</label>
                <input type="text" name="title" id="title" 
                       value="{{ old('title') }}" 
                       class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-700 focus:border-red-700" 
                       placeholder="Enter content title">
            </div>

            <!-- Content -->
            <div class="mb-4">
                <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>
                <textarea name="content" id="content" rows="6" 
                          class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-700 focus:border-red-700" 
                          placeholder="Enter content text">{{ old('content') }}</textarea>
            </div>

            <!-- Image Upload -->
            <div class="mb-6">
                <label for="image" class="block text-gray-700 font-medium mb-2">Upload Image</label>
                <input type="file" name="image" id="image" 
                       class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-700 focus:border-red-700" 
                       accept="image/*">
            </div>

            <!-- Submit Button -->
            <div>
                <button type="submit" 
                        class="bg-red-700 text-white px-6 py-2 rounded-lg shadow hover:bg-red-800 transition font-semibold">
                    Create Content
                </button>
            </div>
        </form>
    </div>
</div>
@endsection
