@extends('layouts.app', ['page' => __('Administración de Desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-8">
                        <span class="bw-card-title">{{ __('Galeria de imagenes del reporte de avance') }}</span>
                        <span class="bw-card-title-bold">
                            <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                            {{ $hdReportProgress->name }}
                        </span>
                    </div>
                    <div class="col-4 text-right">
                        <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                            {{ __('Regresar a listado') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="form-group">
            <label class="form-control-label" for="input-gallery">{{ __('Galería de Imágenes') }}</label>
            <div id="gallery-container" class="p-3" style="border-style: dashed; border-radius: 10px; cursor: pointer;">
                <p class="text-center mb-0" style="color: #6c757d; font-weight: 500;">Arrastra y suelta imágenes aquí o haz clic para seleccionar</p>
                <input type="file" name="gallery[]" id="input-gallery" class="form-control d-none" multiple>
                <div id="gallery-previews" class="d-flex flex-wrap mt-2"></div> <!-- Contenedor para miniaturas -->
            </div>
        </div>
        <button id="uploadImagesBtn" class="btn btn-gradient mt-3">Subir Imágenes</button>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="gallery d-flex flex-wrap mt-4">
            @foreach ($hdReportProgress->media as $image)
                <div class="gallery-item position-relative m-2" style="flex: 0 0 150px;">
                    <img src="{{ asset('storage/' . $image->path) }}" alt="report-image" class="img-thumbnail img-gallery" data-id="{{ $image->id }}">
                    <i class="fa-solid fa-circle-xmark img-delete-icon" style="display: none; position: absolute; top: 5px; right: 5px; cursor: pointer; color: #a09d90;" data-id="{{ $image->id }}"></i>
                </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal for image enlargement -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-0">
                <img id="imageModalSrc" src="" class="w-100" alt="">
            </div>
            <div class="modal-footer mt-5">
                <button type="button" id="deleteImageBtn" class="btn bw-btn-danger-gradient">Eliminar Imagen</button>
                <button type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    // Trigger file input when clicking on the gallery container
    document.getElementById('gallery-container').addEventListener('click', function() {
        document.getElementById('input-gallery').click();
    });

    // Handle file selection and preview
    document.getElementById('input-gallery').addEventListener('change', function(event) {
        const files = event.target.files;
        const galleryPreviews = document.getElementById('gallery-previews');
        galleryPreviews.innerHTML = ''; // Clear existing previews

        if (files.length > 0) {
            Array.from(files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'img-thumbnail m-2';
                    img.style = 'width: 100px; height: 100px; object-fit: cover;';
                    galleryPreviews.appendChild(img);
                };
                reader.readAsDataURL(file);
            });
        }
    });

    // Hover effect for gallery images
    const galleryItems = document.querySelectorAll('.img-gallery');
    galleryItems.forEach(item => {
        item.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.1)';
            this.style.transition = 'transform 0.3s ease';
            const deleteIcon = this.parentElement.querySelector('.img-delete-icon');
            deleteIcon.style.display = 'block';
        });
        item.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
            this.style.transition = 'transform 0.3s ease';
            const deleteIcon = this.parentElement.querySelector('.img-delete-icon');
            deleteIcon.style.display = 'none';
        });
        item.addEventListener('click', function() {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('imageModalSrc');
            const deleteBtn = document.getElementById('deleteImageBtn');
            modalImg.src = this.src;
            deleteBtn.setAttribute('data-id', this.getAttribute('data-id'));
            $(modal).modal('show');
        });
    });

    // Handle image deletion
    document.getElementById('deleteImageBtn').addEventListener('click', function() {
        const imageId = this.getAttribute('data-id');
        if (imageId) {
            fetch(`/admin/house-development-progress/${imageId}/images-delete`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: '¡Eliminado!',
                    text: data.message || 'Imagen eliminada correctamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload();
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al eliminar la imagen.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }
    });

    // Handle new image upload
    document.getElementById('uploadImagesBtn').addEventListener('click', function() {
        const inputGallery = document.getElementById('input-gallery');
        const files = inputGallery.files;
        if (files.length > 0) {
            const formData = new FormData();
            Array.from(files).forEach(file => {
                formData.append('gallery[]', file);
            });

            formData.append('hd_report_progress_id','{{ $hdReportProgress->id }}');

            fetch('{{ route('house-development-progress-media.store') }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: '¡Exito!',
                    text: data.message || 'Imágenes subidas correctamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload();
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al subir las imágenes.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        } else {
            Swal.fire({
                title: 'Advertencia',
                text: 'No hay imágenes para subir.',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
        }
    });
</script>
@endpush