@extends('layouts.app')
@section('content')
    <div class="page-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="title">
                    <h4>Form</h4>
                </div>
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Product</li>
                    </ol>
                    <a href="{{route('admin.blog.index')}}" class="btn btn-success">Back</a>
                </nav>
            </div>
        </div>
    </div>
    <div class="card-box pd-20 height-100-p mb-30">
        <div class="row">
            <div class="col-md-12">
                <form action="{{route('admin.blog.update',$blog->id)}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <label>
                                Title
                            </label>
                            <input class="form-control" type="text" name="title" placeholder="Title"
                                   value="{{$blog->title ?? ''}}">

                            <label>
                                Detail
                            </label>
                            <textarea class="form-control" id="editor" name="detail"
                                      >{{$blog->detail ?? ''}}</textarea>

                            <label>
                                Image
                            </label>
                            <input class="form-control" type="file" name="image" onchange="previewImage(this)">

                            <div id="image-preview">
                                @if($blog->image)
                                    <img src="{{$blog->image }}" width="300">
                                @endif
                            </div>

                        </div>
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary btn-sm scroll-click collapsed">Submit</button>
                </form>
            </div>
        </div>
    </div>

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

    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
    <script>
        function previewImage(input) {
            var imagePreviewContainer = document.getElementById('image-preview');

            // Clear previous previews
            imagePreviewContainer.innerHTML = '';

            // Check if a file is selected
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = 'Image Preview';
                    img.style.maxWidth = '300px';
                    img.style.marginTop = '10px';
                    imagePreviewContainer.appendChild(img);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endpush