@extends('admin.layout')

@section('content')
<div class="max-w-4xl mx-auto bg-white p-8 rounded-2xl shadow-lg mt-8">

    <!-- Header -->
    <div class="mb-6">
        <h2 class="text-3xl font-bold text-gray-800">Edit Content</h2>
        <p class="text-gray-500 mt-1">Update content details and optionally change the image</p>
    </div>

    <form action="{{ route('content.update', $content->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Page -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Page</label>
            <input type="text" name="page" value="{{ old('page', $content->page) }}"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
        </div>

        <!-- Section -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Section</label>
            <input type="text" name="section" value="{{ old('section', $content->section) }}"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
        </div>

        <!-- Title -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
            <input type="text" name="title" value="{{ old('title', $content->title) }}"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
        </div>

        <!-- Content -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
            <textarea name="content" rows="6"
                      class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">{{ old('content', $content->content) }}</textarea>
        </div>

        <!-- Image Upload -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Image (optional)</label>
            <input type="file" name="image" accept="image/*"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
        </div>

        <!-- Actions -->
        <div class="flex justify-end gap-4">
            <a href="{{ route('content.index') }}" class="px-5 py-2 border rounded-lg text-gray-700 hover:bg-gray-100 transition">Cancel</a>
            <button type="submit" class="px-6 py-2 bg-red-700 text-white rounded-lg hover:bg-red-800 shadow-md transition">Update Content</button>
        </div>

    </form>
</div>
@endsection
