{{--
    Image gallery manager.
    Variables: $property (Property model)
--}}
@php $images = $property->images()->get(); @endphp

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-semibold">Image Gallery</h6>
        <span class="badge bg-secondary bg-opacity-10 text-secondary small" id="image-count-badge">
            {{ $images->count() }} {{ Str::plural('photo', $images->count()) }}
        </span>
    </div>
    <div class="card-body">

        {{-- Thumbnail grid --}}
        <div id="image-sortable" class="d-flex flex-wrap gap-2 mb-3" style="min-height: 60px;">
            @foreach($images as $image)
                <div class="image-thumb-card position-relative" data-id="{{ $image->id }}"
                     style="width:110px;height:110px;flex-shrink:0;cursor:grab;border-radius:8px;overflow:hidden;border:2px solid #e3e6ea">
                    <img src="{{ route('admin.media.image', $image) }}"
                         style="width:100%;height:100%;object-fit:cover"
                         alt="{{ $image->original_name }}">
                    @if($loop->first)
                        <span class="position-absolute top-0 start-0 badge bg-warning text-dark m-1"
                              style="font-size:0.6rem"
                              id="cover-badge-{{ $image->id }}">Cover</span>
                    @endif
                    @if(auth()->user()->isAdmin())
                        <button type="button"
                                class="btn btn-sm btn-danger position-absolute top-0 end-0 p-0 delete-image-btn"
                                data-id="{{ $image->id }}"
                                style="width:22px;height:22px;margin:3px;border-radius:50%;font-size:12px;line-height:1">
                            &times;
                        </button>
                    @endif
                </div>
            @endforeach

            @if($images->isEmpty())
                <p class="text-muted small mb-0" id="no-images-msg">No images uploaded yet.</p>
            @endif
        </div>

        {{-- Upload button --}}
        <div class="d-flex align-items-center gap-2">
            <input type="file" id="image-file-input" accept=".jpg,.jpeg,.png,.webp" multiple style="display:none">
            <button type="button" class="btn btn-outline-primary btn-sm" id="add-photos-btn">
                <i class="bi bi-image me-1"></i>Add Photos
            </button>
            <span class="text-muted small">JPG, PNG, WEBP · max 20 MB each</span>
            <span id="upload-progress" class="text-muted small d-none">
                <span class="spinner-border spinner-border-sm me-1"></span>Uploading…
            </span>
        </div>

        <div id="upload-error" class="alert alert-danger alert-dismissible border-0 mt-2 py-2 small d-none">
            <span id="upload-error-msg"></span>
            <button type="button" class="btn-close btn-close-sm" onclick="this.closest('.alert').classList.add('d-none')"></button>
        </div>

    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    var csrfToken   = document.querySelector('meta[name="csrf-token"]').content;
    var sortable    = document.getElementById('image-sortable');
    var fileInput   = document.getElementById('image-file-input');
    var addBtn      = document.getElementById('add-photos-btn');
    var progress    = document.getElementById('upload-progress');
    var errorBox    = document.getElementById('upload-error');
    var errorMsg    = document.getElementById('upload-error-msg');
    var countBadge  = document.getElementById('image-count-badge');
    var noImagesMsg = document.getElementById('no-images-msg');

    var uploadUrl  = '{{ route('admin.property.images.store', $property) }}';
    var reorderUrl = '{{ route('admin.property.images.reorder', $property) }}';
    var deleteBase = '{{ url('admin/properties/' . $property->id . '/images') }}';
    var isAdmin    = {{ auth()->user()->isAdmin() ? 'true' : 'false' }};

    // Init SortableJS
    var sortableInstance = Sortable.create(sortable, {
        animation: 150,
        ghostClass: 'bg-light',
        filter: '.delete-image-btn',
        preventOnFilter: false,
        onEnd: function () { persistOrder(); updateCoverBadge(); },
    });

    function persistOrder() {
        var ids = Array.from(sortable.querySelectorAll('.image-thumb-card')).map(function (el) {
            return parseInt(el.dataset.id, 10);
        });
        fetch(reorderUrl, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ order: ids }),
        });
    }

    function updateCoverBadge() {
        sortable.querySelectorAll('.image-thumb-card').forEach(function (el, idx) {
            var badge = el.querySelector('[id^="cover-badge-"]');
            if (idx === 0) {
                if (! badge) {
                    badge = document.createElement('span');
                    badge.className = 'position-absolute top-0 start-0 badge bg-warning text-dark m-1';
                    badge.style.fontSize = '0.6rem';
                    el.appendChild(badge);
                }
                badge.textContent = 'Cover';
            } else {
                if (badge) badge.remove();
            }
        });
    }

    function updateCount() {
        var n = sortable.querySelectorAll('.image-thumb-card').length;
        countBadge.textContent = n + ' ' + (n === 1 ? 'photo' : 'photos');
        if (n > 0 && noImagesMsg) noImagesMsg.remove();
    }

    function showError(msg) {
        errorMsg.textContent = msg;
        errorBox.classList.remove('d-none');
    }

    // Add photos button
    addBtn.addEventListener('click', function () { fileInput.click(); });

    fileInput.addEventListener('change', function () {
        var files = Array.from(this.files);
        if (! files.length) return;
        errorBox.classList.add('d-none');
        uploadNext(files, 0);
        this.value = '';
    });

    var maxBytes = 20 * 1024 * 1024;

    function uploadNext(files, index) {
        if (index >= files.length) {
            progress.classList.add('d-none');
            return;
        }
        progress.classList.remove('d-none');

        if (files[index].size > maxBytes) {
            showError(files[index].name + ': File size must not exceed 20 MB.');
            uploadNext(files, index + 1);
            return;
        }

        var fd = new FormData();
        fd.append('image', files[index]);
        fd.append('_token', csrfToken);

        fetch(uploadUrl, { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (! res.ok) {
                    var msg = res.data.errors
                        ? Object.values(res.data.errors).flat()[0]
                        : (res.data.message || 'Upload failed.');
                    showError(files[index].name + ': ' + msg);
                } else {
                    appendThumb(res.data);
                    updateCount();
                    updateCoverBadge();
                }
                uploadNext(files, index + 1);
            })
            .catch(function () {
                showError('Network error while uploading ' + files[index].name);
                uploadNext(files, index + 1);
            });
    }

    function appendThumb(data) {
        var card = document.createElement('div');
        card.className = 'image-thumb-card position-relative';
        card.dataset.id = data.id;
        card.style.cssText = 'width:110px;height:110px;flex-shrink:0;cursor:grab;border-radius:8px;overflow:hidden;border:2px solid #e3e6ea';

        var img = document.createElement('img');
        img.src   = data.url;
        img.style.cssText = 'width:100%;height:100%;object-fit:cover';
        card.appendChild(img);

        if (isAdmin) {
            var btn = document.createElement('button');
            btn.type      = 'button';
            btn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0 p-0 delete-image-btn';
            btn.dataset.id = data.id;
            btn.style.cssText = 'width:22px;height:22px;margin:3px;border-radius:50%;font-size:12px;line-height:1';
            btn.innerHTML = '&times;';
            card.appendChild(btn);
            // Delete handled by delegated listener on sortable — no direct binding needed.
        }
        sortable.appendChild(card);
    }

    // Delete handler (delegated + direct)
    sortable.addEventListener('click', function (e) {
        var btn = e.target.closest('.delete-image-btn');
        if (btn) handleDeleteBtn(btn);
    });

    function handleDeleteBtn(btn) {
        var imageId = btn.dataset.id;
        Swal.fire({
            title: 'Remove image?',
            text: 'This cannot be undone.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Remove',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
        }).then(function (result) {
            if (! result.isConfirmed) return;
            fetch(deleteBase + '/' + imageId, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                if (res.ok) {
                    var card = sortable.querySelector('[data-id="' + imageId + '"]');
                    if (card) card.remove();
                    updateCount();
                    updateCoverBadge();
                }
            });
        });
    }

}());
</script>
@endpush