@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')
                <div class="row">
                    <div class="mb-3 col-12 col-md-8">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" value="{{ old('name', $message->name) }}" class="form-control">
                        @error('name')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-4">
                        <label class="form-label">
                            Designation <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="designation" value="{{ old('designation', $message->designation) }}"
                            class="form-control">

                        @error('designation')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="mb-3">
                        <label class="form-label">Photo</label>
                        <div class="d-flex align-items-center gap-3">
                            <input type="file" name="photo" class="form-control" accept="image/*">
                            @if ($message->photo)
                                <img src="{{ asset($message->photo) }}" class="image-preview">
                            @else
                                <img src="{{ asset('placeholder.png') }}" class="image-preview">
                            @endif
                        </div>
                        @error('photo')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <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>
                </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