@extends('layouts.header')

@section('content')
<main class="container">
    <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">Blog Upload Form</h2>
                    <form action="{{ route('blog.upload.post') }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf

                        <div class="mb-3">
                            <label for="title" class="form-label">Title:</label>
                            <input type="text" id="title" name="title" class="form-control" 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></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 required>
                        </div>

                        <div id="selectedImages" class="mb-3"></div>

                        <button type="submit" class="btn btn-primary">Upload 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
</main>
@endsection