@extends('adminlte::page')

@section('title', 'Galería de Imágenes')

@section('content_header')
    <h1>Galería {{ $albumSelected->title }}</h1>
@stop

@section('content')
    <style>
        /* Lightbox */
        #modalPreview .modal-content {
            background: rgba(0,0,0,0.95);
            border: none;
            text-align: center;
        }
        #modalPreview img {
            max-height: 80vh;
            width: auto;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        #modalPreview .btn-primary {
            background: rgba(255,255,255,0.2);
            border: none;
        }

        /* Loading Modal */
        #loadingModal .modal-content {
            background: rgba(0,0,0,0.7);
            border: none;
            text-align: center;
            color: white;
            font-size: 1.2rem;
        }
        #loadingModal .spinner {
            border: 4px solid rgba(255,255,255,0.2);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin: 20px auto;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    {{-- Dropzone Form (no previews) --}}
    <form action="{{ route('gallery.store') }}" class="dropzone" id="myDropzone" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="album_id" value="{{ $albumSelected->id }}">
{{--        <div class="form-group mt-3">--}}
{{--            <label>Título</label>--}}
{{--            <input type="text" name="title" class="form-control" placeholder="Título de la Imagen">--}}
{{--        </div>--}}
{{--        <div class="form-group mt-2">--}}
{{--            <label>Descripción</label>--}}
{{--            <textarea name="description" class="form-control" placeholder="Descripción de la Imagen"></textarea>--}}
{{--        </div>--}}
    </form>

    <hr>

    <div class="row mt-4" id="galleryContainer">
        @foreach($images as $img)
            <div class="col-md-3 col-sm-6 mb-3 text-center" id="img-{{ $img->id }}">
                <img src="{{ asset($img->path) }}" class="img-fluid rounded mb-2 img-gallery"
                     data-id="{{ $img->id }}" data-toggle="modal" data-target="#modalPreview">
                <p class="mb-0"><strong>{{ $img->title }}</strong></p>
                <small>{{ $img->description }}</small><br>

                {{-- Delete button --}}
                <button class="btn btn-danger btn-sm mt-2" onclick="deleteImage({{ $img->id }})">
                    <i class="fas fa-trash"></i>Eliminar
                </button>

                {{-- Hidden form for AJAX delete --}}
                <form id="delete-form-{{ $img->id }}" action="{{ route('gallery.destroy', $img->id) }}" method="POST" style="display:none;">
                    @csrf
                    <input type="hidden" name="_method" value="DELETE">
                </form>
            </div>
        @endforeach
    </div>

    {{-- Lightbox modal --}}
    <div class="modal fade" id="modalPreview" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content p-2 text-center">
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img id="previewImg" src="" class="img-fluid mb-2">
{{--                <div>--}}
{{--                    <button class="btn btn-primary btn-sm" id="prevBtn">&lt; Previous</button>--}}
{{--                    <button class="btn btn-primary btn-sm" id="nextBtn">Next &gt;</button>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>

    {{-- Loading modal --}}
    <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content p-4">
                <div>Subiendo Imagen... <span id="uploadPercent">0%</span></div>
                <div class="spinner"></div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
        let images = @json($images);
        let currentIndex = 0;

        // Dropzone configuration (default English messages)
        Dropzone.options.myDropzone = {
            paramName: "file",
            maxFilesize: 5,
            acceptedFiles: "image/*",
            autoProcessQueue: true,
            uploadMultiple: false,
            previewsContainer: false,
            dictDefaultMessage: "Arrastrá tus imágenes aquí para subirlas",

            init: function() {
                let dz = this;

                dz.on("sending", function(file, xhr, formData) {
                    $('#loadingModal').modal('show');
                    let title = dz.element.querySelector('input[name="title"]').value;
                    let description = dz.element.querySelector('textarea[name="description"]').value;
                    let album = dz.element.querySelector('input[name="album_id"]').value;
                    formData.append("title", title);
                    formData.append("description", description);
                    formData.append("album_id", album);
                });

                dz.on("uploadprogress", function(file, progress) {
                    $('#uploadPercent').text(Math.round(progress) + '%');
                });

                dz.on("success", function(file, response) {
                    if(response.success){
                        dz.element.querySelector('input[name="title"]').value = '';
                        dz.element.querySelector('textarea[name="description"]').value = '';

                        // Refresh gallery
                        fetch('{{ route("gallery.index", $albumSelected->id) }}')
                            .then(res => res.text())
                            .then(html => {
                                let tempDiv = document.createElement('div');
                                tempDiv.innerHTML = html;
                                document.getElementById('galleryContainer').innerHTML =
                                    tempDiv.querySelector('#galleryContainer').innerHTML;
                                images = Array.from(tempDiv.querySelectorAll('.img-gallery')).map(img => ({
                                    id: parseInt(img.dataset.id),
                                    src: img.src
                                }));
                                initSortable();
                                initLightbox();
                                $('#loadingModal').modal('hide');
                                $('#uploadPercent').text('0%');
                            });
                    }
                });

                dz.on("error", function() {
                    $('#loadingModal').modal('hide');
                    $('#uploadPercent').text('0%');
                    alert('Error uploading image.');
                });
            }
        };

        // Delete image using AJAX + hidden form
        function deleteImage(id) {
            if(!confirm('Eliminar la Imagen?')) return;

            let form = document.getElementById('delete-form-' + id);
            let data = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: data,
                headers: { 'Accept': 'application/json' }
            })
                .then(res => res.json())
                .then(data => {
                    if(data.success){
                        let el = document.getElementById('img-' + id);
                        if(el) el.remove();
                        images = images.filter(im => im.id !== id);
                    } else {
                        alert('Error al eliminar la imagen.');
                    }
                })
                .catch(() => alert('Error al eliminar la imagen.'));
        }

        // Lightbox
        function initLightbox() {
            const galleryImages = document.querySelectorAll('.img-gallery');
            galleryImages.forEach((img, idx) => {
                img.addEventListener('click', () => {
                    currentIndex = idx;
                    let preview = document.getElementById('previewImg');
                    preview.style.opacity = 0;
                    setTimeout(()=> { preview.src = img.src; preview.style.opacity=1; }, 150);
                });
            });

            // document.getElementById('prevBtn').addEventListener('click', () => {
            //     if(images.length === 0) return;
            //     currentIndex = (currentIndex - 1 + images.length) % images.length;
            //     let preview = document.getElementById('previewImg');
            //     preview.style.opacity = 0;
            //     setTimeout(()=> { preview.src = images[currentIndex].src; preview.style.opacity=1; }, 150);
            // });
            // document.getElementById('nextBtn').addEventListener('click', () => {
            //     if(images.length === 0) return;
            //     currentIndex = (currentIndex + 1) % images.length;
            //     let preview = document.getElementById('previewImg');
            //     preview.style.opacity = 0;
            //     setTimeout(()=> { preview.src = images[currentIndex].src; preview.style.opacity=1; }, 150);
            // });
        }

        // Drag & drop
        function initSortable() {
            $("#galleryContainer").sortable({
                placeholder: "ui-state-highlight",
                update: function(event, ui) {
                    let ids = $(this).children().map(function() {
                        return $(this).attr('id').replace('img-', '');
                    }).get();
                    fetch('{{ route("gallery.updateOrder") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ ids: ids })
                    }).then(res => res.json())
                        .then(data => { if(data.success) console.log('Order updated'); });
                }
            });
            $("#galleryContainer").disableSelection();
        }

        // Initialize
        initSortable();
        initLightbox();
    </script>
@stop