@extends('backend.layout.sidebar')

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

      <form action="{{ route('testimonials.update', $testimonial->id) }}" method="POST" enctype="multipart/form-data"
    class="p-6 bg-white rounded-lg shadow-md">
    @csrf
    @method('PUT') <!-- This is required for PUT/PATCH requests -->

    <!-- Title Field -->
    <div class="mb-4">
        <label for="title" class="block text-sm font-medium text-gray-700">Title:</label>
        <input type="text" id="title" name="title" value="{{ old('title', $testimonial->name) }}"
            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>
        @error('title')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <!-- Image Field (Optional) -->
    <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>
        <!-- Display current image if exists -->
        @if ($testimonial->image)
            <div class="mt-2">
                <img src="{{ asset($testimonial->image) }}" alt="Current Image" class="w-32 h-32 object-cover">
            </div>
        @endif

        <!-- Display error message for image -->
        @error('image')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <!-- Testimony Field -->
    <div class="mb-4">
        <label for="testimony" class="block text-sm font-medium text-gray-700">Testimony:</label>
        <textarea id="testimony" name="testimony" rows="4"
            class="mt-1 block w-full rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 @error('testimony') border-red-500 @enderror"
            placeholder="Enter testimony">{{ old('testimony', $testimonial->testimony) }}</textarea>

        @error('testimony')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <!-- Include CKEditor CDN -->
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

    <script>
        // Initialize CKEditor
        ClassicEditor
            .create(document.querySelector('#testimony'))
            .catch(error => {
                console.error('Error initializing CKEditor:', error);
            });
    </script>

    <!-- 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
            Testimony</button>
    </div>
</form>

    </div>
@endsection