@extends('admin.layouts.app')
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">
                            @isset($page_title)
                                {{ $page_title }}
                            @endisset
                        </h4>
                    </div>
                </div>
                @isset($edit_gallery)
                    <div class="col-6 text-end">
                        <x-admin.back-button route="{{ route('admin.gallery.index') }}" />
                    </div>
                @endisset
            </div>
            <div class="row">
                <div class="card givesps-in">
                    <div class="card-body p-4">
                        @if (isset($gallery) && isset($gallery->id))
                            <form action="{{ route('admin.gallery.update', $gallery->id) }}" method="POST"
                                enctype="multipart/form-data" id="update_form">
                                @method('PUT')
                            @else
                                <form action="{{ route('admin.gallery.store') }}" method="POST"
                                    enctype="multipart/form-data" id="add_form">
                        @endif
                        @csrf
                        <label for="additional_images" class="form-label">Gallery Images</label>
                        <div class="dropzone dz-clickable" id="additional-images-dropzone">
                            <div class="dz-message needsclick">
                                <div class="mb-3">
                                    <i class="display-4 text-muted bx bx-cloud-upload"></i>
                                </div>
                                <h5>Drop files here or click to upload.</h5>
                            </div>
                        </div>

                        <div id="preview-images" class="mt-2 d-flex flex-wrap gap-2">
                            @foreach ($gallery as $image)
                                <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete"
                                    data-existing="{{ $image->id }}">
                                    <div class="dz-image">
                                        <img src="{{ asset('backend/assets/images/' . $image->image) }}" alt="gallery Image"
                                            width="120" height="120" />
                                    </div>
                                    <a href="javascript:void(0)" class="dz-remove text-danger"
                                        data-id="{{ $image->id }}">Remove</a>
                                </div>
                            @endforeach
                        </div>

                        @error('image')
                            <span class="text-danger"><strong>{{ $message }}</strong></span>
                        @enderror
                        <div class="text-center">
                            <button type="submit" class="btn btn-success waves-effect btn-label waves-light mt-3"><i class="bx bx-check-double label-icon"></i> Save</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            Dropzone.autoDiscover = false;

            const uploadedGalleryImages = [];

            const additionalImagesDropzone = new Dropzone("#additional-images-dropzone", {
                url: "{{ route('admin.gallery.upload_gallery_image') }}",
                paramName: "gallery_image",
                maxFilesize: 5,
                acceptedFiles: 'image/*',
                uploadMultiple: false,
                addRemoveLinks: true,
                dictRemoveFile: 'Remove',
                autoProcessQueue: true,
                parallelUploads: 5,

                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },

                success: function(file, response) {
                    uploadedGalleryImages.push(response.filename);
                    file.previewElement.dataset.filename = response.filename;
                },

                removedfile: function(file) {
                    if (file.previewElement != null) {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    }
                    const filename = file.previewElement.dataset.filename;
                    const index = uploadedGalleryImages.indexOf(filename);
                    if (index > -1) {
                        uploadedGalleryImages.splice(index, 1);
                    }
                }
            });

            // Attach submit handler only if update_form exists
            document.addEventListener('DOMContentLoaded', function() {
                const updateForm = document.getElementById('update_form');
                if (updateForm) {
                    updateForm.addEventListener('submit', function(e) {
                        document.querySelectorAll('input[name="uploaded_gallery_images[]"]').forEach(el => el.remove());

                        uploadedGalleryImages.forEach(filename => {
                            let hiddenInput = document.createElement('input');
                            hiddenInput.type = 'hidden';
                            hiddenInput.name = 'uploaded_gallery_images[]';
                            hiddenInput.value = filename;
                            this.appendChild(hiddenInput);
                        });
                    });
                }

                document.getElementById('preview-images').addEventListener('click', function(e) {
                    if (e.target.classList.contains('dz-remove') && e.target.dataset.id) {
                        const imageId = e.target.dataset.id;
                        const container = e.target.closest('.dz-preview');

                        fetch("{{ route('admin.gallery.remove_gallery_image') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": "{{ csrf_token() }}"
                            },
                            body: JSON.stringify({
                                id: imageId
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                container.remove();
                            } else {
                                alert('Could not remove image.');
                            }
                        })
                        .catch(err => {
                            console.error(err);
                            alert('Something went wrong.');
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection