@extends($layoutView ?? 'admin.layout.app')

@section('content')
<style>
    .property-gallery-card {
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

    .property-gallery-header {
        background: linear-gradient(135deg, #eff6ff, #f8fafc);
        border-bottom: 1px solid #e2e8f0;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }

    .image-tile {
        position: relative;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
        cursor: grab;
    }

    .image-tile.dragging {
        opacity: 0.45;
    }

    .image-preview {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        background: #e2e8f0;
    }

    .image-toolbar {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .image-meta {
        padding: 14px;
    }

    .drop-hint {
        border: 2px dashed #93c5fd;
        background: #eff6ff;
    }
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Property Images</h2>
        <p class="text-muted mb-0">Multiple upload, drag-and-drop ordering, main image selection, and bulk delete.</p>
    </div>
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
    {{-- <a href="{{ route(($routePrefix ?? 'admin') . '.property-image.create') }}" class="btn btn-primary">+ Add Images</a> --}}
</div>

<form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-image.bulk-delete') }}" id="bulk-delete-form" class="d-none">
    @csrf
    <div id="bulk-delete-inputs"></div>
</form>

<div class="d-grid gap-4">
    @forelse($properties as $property)
        <div class="card property-gallery-card">
            <div class="property-gallery-header p-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <h4 class="mb-1">{{ $property->title }}</h4>
                    <div class="text-muted small">
                        Main image: {{ $property->mainImage?->image ? basename($property->mainImage->image) : 'Not set' }}
                    </div>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route(($routePrefix ?? 'admin') . '.property-image.create') }}?property_id={{ $property->id }}" class="btn btn-outline-primary btn-sm">Add More</a>
                    <button type="button" class="btn btn-outline-danger btn-sm select-all-images" data-property-id="{{ $property->id }}">Select All</button>
                    <button type="button" class="btn btn-danger btn-sm bulk-delete-btn" data-property-id="{{ $property->id }}">Delete Selected</button>
                </div>
            </div>
            <div class="card-body p-4">
                @if($property->images->isEmpty())
                    <div class="text-center py-4 text-muted">No gallery images uploaded yet.</div>
                @else
                    <div class="small text-muted mb-3">Drag images to change their order. The image in the first position will become the main image.</div>
                    <div class="image-grid sortable-gallery" data-property-id="{{ $property->id }}">
                        @foreach($property->images as $image)
                            <div class="image-tile" draggable="true" data-image-id="{{ $image->id }}">
                                <img src="{{ asset('storage/' . $image->image) }}" alt="Property image" class="image-preview">
                                <div class="image-toolbar">
                                    <div class="form-check m-0">
                                        <input class="form-check-input gallery-checkbox" type="checkbox" value="{{ $image->id }}" data-property-id="{{ $property->id }}">
                                    </div>
                                    @if($image->is_primary)
                                        <span class="badge text-bg-primary">Main</span>
                                    @else
                                        <span class="badge text-bg-light">#{{ $loop->iteration }}</span>
                                    @endif
                                </div>
                                <div class="image-meta">
                                    <div class="small text-muted mb-2">{{ basename($image->image) }}</div>
                                    <div class="d-flex flex-wrap gap-2">
                                            <form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-image.make-primary', $image->id) }}" class="d-inline">
                                            @csrf
                                            <button class="btn btn-sm btn-outline-primary" @disabled($image->is_primary)>Make Main</button>
                                        </form>
                                        <a href="{{ route(($routePrefix ?? 'admin') . '.property-image.edit', $image->id) }}" class="btn btn-sm btn-warning">Edit</a>
                                        <form method="POST" action="{{ route(($routePrefix ?? 'admin') . '.property-image.destroy', $image->id) }}" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-danger" onclick="return confirm('Delete this image?')">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    @empty
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body text-center py-5 text-muted">No properties found.</div>
        </div>
    @endforelse
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const csrf = @json(csrf_token());
        const reorderUrl = @json(route(($routePrefix ?? 'admin') . '.property-image.reorder'));
        const bulkDeleteForm = document.getElementById('bulk-delete-form');
        const bulkDeleteInputs = document.getElementById('bulk-delete-inputs');
        let draggedTile = null;

        const submitBulkDelete = (propertyId) => {
            const checkboxes = Array.from(document.querySelectorAll(`.gallery-checkbox[data-property-id="${propertyId}"]:checked`));

            if (!checkboxes.length) {
                alert('Please select at least one image.');
                return;
            }

            if (!confirm(`Delete ${checkboxes.length} selected image(s)?`)) {
                return;
            }

            bulkDeleteInputs.innerHTML = '';
            checkboxes.forEach((checkbox, index) => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `image_ids[${index}]`;
                input.value = checkbox.value;
                bulkDeleteInputs.appendChild(input);
            });

            bulkDeleteForm.submit();
        };

        document.querySelectorAll('.select-all-images').forEach((button) => {
            button.addEventListener('click', () => {
                const propertyId = button.dataset.propertyId;
                const checkboxes = Array.from(document.querySelectorAll(`.gallery-checkbox[data-property-id="${propertyId}"]`));
                const shouldCheck = checkboxes.some((checkbox) => !checkbox.checked);
                checkboxes.forEach((checkbox) => {
                    checkbox.checked = shouldCheck;
                });
                button.textContent = shouldCheck ? 'Unselect All' : 'Select All';
            });
        });

        document.querySelectorAll('.bulk-delete-btn').forEach((button) => {
            button.addEventListener('click', () => submitBulkDelete(button.dataset.propertyId));
        });

        document.querySelectorAll('.sortable-gallery').forEach((gallery) => {
            gallery.querySelectorAll('.image-tile').forEach((tile) => {
                tile.addEventListener('dragstart', () => {
                    draggedTile = tile;
                    tile.classList.add('dragging');
                });

                tile.addEventListener('dragend', async () => {
                    tile.classList.remove('dragging');
                    gallery.querySelectorAll('.image-tile').forEach((item) => item.classList.remove('drop-hint'));

                    if (!draggedTile) {
                        return;
                    }

                    const order = Array.from(gallery.querySelectorAll('.image-tile')).map((item) => item.dataset.imageId);

                    await fetch(reorderUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrf,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            property_id: gallery.dataset.propertyId,
                            order,
                        }),
                    });

                    window.location.reload();
                });

                tile.addEventListener('dragover', (event) => {
                    event.preventDefault();
                    const target = event.currentTarget;

                    if (!draggedTile || draggedTile === target) {
                        return;
                    }

                    const bounds = target.getBoundingClientRect();
                    const shouldInsertAfter = event.clientY > bounds.top + bounds.height / 2;

                    target.classList.add('drop-hint');

                    if (shouldInsertAfter) {
                        target.after(draggedTile);
                    } else {
                        target.before(draggedTile);
                    }
                });

                tile.addEventListener('dragleave', (event) => {
                    event.currentTarget.classList.remove('drop-hint');
                });
            });
        });
    });
</script>
@endsection