@extends('backend.layout.sidebar')

@section('content')
    <div class="container px-4 py-8 mx-auto">
        <h1 class="mb-6 text-2xl font-bold">Edit Banner</h1>

        <form action="{{ route('banners.update', $banner->id) }}" method="POST" enctype="multipart/form-data"
    class="p-6 bg-white rounded-lg shadow-md">
    @csrf
    @method('PUT')

    <!-- Title Field -->
    <div class="mb-4">
        <label for="title" class="block text-sm font-medium text-gray-700">Title:</label>
        <textarea id="title" name="title"
            class="block w-full px-4 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
            {{ old('title', $banner->Title ?? '') }}
        </textarea>
        @error('title')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
    <script>
        // Initialize CKEditor
        CKEDITOR.replace('title');
    </script>

    <!-- Image Field -->
    <div class="mb-4">
        <label for="image" class="block text-sm font-medium text-gray-700">Image:</label>
        <input type="file" id="image" name="image"
            class="block w-full px-4 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <p class="text-xs text-blue-500">Maximum size of 2MB per image upload.</p>
        @error('image')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
        @if ($banner->image)
            <div class="mt-2">
                <img src="{{ asset($banner->image) }}" alt="Banner Image" class="object-cover w-32 h-32">
            </div>
        @endif
    </div>

    <!-- Type Field -->
    <div class="hidden mb-4">
        <label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
        <input type="text" id="type" name="type" value="{{ old('type', $banner->type) }}"
            class="block w-full px-4 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
            required>
    </div>

    <!-- Submit Button -->
    <div class="flex justify-end">
        <button type="submit"
            class="px-6 py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            Update Banner
        </button>
    </div>
</form>

    </div>
@endsection