@extends('backend.layouts.app')

@section('title', $message->type)

@push('style')
    <style>
        .image-preview {
            width: 150px;
            height: 150px;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid #ddd;
        }
    </style>
@endpush

@section('content')

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">{{ $message->type }}</h5>
        </div>

        <div class="card-body">

            <form action="{{ route('admin.messages.update', $message->type) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                @if ($message->type == 'Our Story')
                    <div class="mb-3">
                        <label class="form-label">Video Link <span class="text-danger">*</span></label>
                        <input type="text" name="video_link" class="form-control" placeholder="Enter Video URL"
                            value="{{ old('video_link', $message->video_link) }}"></input>
                        @error('video_link')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <iframe width="350" height="200" src="https://www.youtube.com/embed/{{ $message->video }}"
                        frameborder="0" allowfullscreen>
                    </iframe>
                @endif
                <div class="mb-3">
                    <label class="form-label">Message <span class="text-danger">*</span></label>
                    <textarea name="message" rows="6" id="editor" class="form-control">{{ old('message', $message->message) }}</textarea>
                    @error('message')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </div>

            </form>

        </div>
    </div>

@endsection
@push('script')
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

    <script>
   ClassicEditor
            .create(document.querySelector('#editor'), {
                toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList','undo', 'redo'
                ]
            })
            .catch(error => {
                console.error(error);
            });
    </script>
@endpush