@extends('layouts.header')

@section('content')
<main class="container">
     <ol class="breadcrumb mb-4">
    <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
    <li class="breadcrumb-item active"><a href="{{ route('blogs.index') }}">View Blog</a></li>
    <li class="breadcrumb-item active">Edit Blog</li>
</ol>
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Edit Blog</h2>
                    <form action="{{ route('blogs.update', $blog->id) }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label for="title" class="form-label">Title:</label>
                            <input type="text" id="title" name="title" class="form-control" value="{{ $blog->title }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content:</label>
                            <textarea id="content" name="content" class="form-control" rows="4" required>{{ $blog->content }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="images" class="form-label">Images:</label>
                            <input type="file" id="images" name="images[]" class="form-control" accept="image/*" multiple>
                        </div>

                        <div id="selectedImages" class="mb-3">
                            <!-- Display existing images here if needed -->
                        </div>

                        <button type="submit" class="btn btn-primary">Update Blog</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#images').on('change', function() {
            // Display selected images
            let files = Array.from($(this)[0].files);
            files.forEach(function(file) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#selectedImages').append(
                        '<div class="image-wrapper position-relative">' +
                        '<img src="' + e.target.result + '" class="img-thumbnail mr-2">' +
                        '<button class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-btn">X</button>' +
                        '</div>'
                    );
                }
                reader.readAsDataURL(file);
            });
        });

        // Remove image when close button is clicked
        $('#selectedImages').on('click', '.remove-btn', function() {
            $(this).parent('.image-wrapper').remove();
        });
    });
</script>
@endpush
@endsection