{{--
    Shared Featured Properties dual-list picker — included inside BOTH
    create.blade.php and edit.blade.php's own <form>, so property_ids[]
    submits alongside title/body/etc in the exact same save action (see
    ContentPageController::syncFeaturedProperties()). Nothing here persists
    on its own — every add/remove/reorder only ever mutates the in-page
    `selected` array and the hidden inputs derived from it; saving the page
    is what actually attaches/detaches/reorders the pivot.

    Expects $attachedProperties (a Collection of Property, in display order —
    empty when creating a new page) and $attachedAvailability (a
    [property id => 'sold'|'rented'|'available'] map for those same
    properties — see ContentPageController::availabilityMap()).
--}}
@php
    $attachedAvailability = $attachedAvailability ?? [];
    $initialSelected = $attachedProperties->map(function ($property) use ($attachedAvailability) {
        return [
            'id'      => $property->id,
            'title'   => $property->title,
            'city'    => $property->city,
            'type'    => \App\Models\Property::typeLabels()[$property->type] ?? $property->type,
            'status'  => $property->status,
            'status_label' => \App\Models\Property::STATUS_LABELS[$property->status] ?? $property->status,
            'availability_status' => $attachedAvailability[$property->id] ?? 'available',
            'trashed' => $property->trashed(),
        ];
    })->values();
@endphp

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <h6 class="mb-0 fw-semibold"><i class="bi bi-houses me-2 text-primary"></i>Featured Properties</h6>
        <div class="text-muted small">Search across all properties (any status) and move the ones this page should feature into the right-hand list. Drag, or use the arrow buttons, to reorder — changes save together with the rest of this form.</div>
    </div>
    <div class="card-body p-4">
        <div class="row g-2 mb-3">
            <div class="col-md-5">
                <input type="text" id="picker-q" class="form-control" placeholder="Search by title, locality, city, or owner name…">
            </div>
            <div class="col-md-3">
                <select id="picker-type" class="form-select">
                    <option value="">All types</option>
                    @foreach (\App\Models\Property::typeLabels() as $slug => $label)
                        <option value="{{ $slug }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <select id="picker-status" class="form-select">
                    <option value="">All statuses</option>
                    @foreach (\App\Models\Property::STATUS_LABELS as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-6">
                <h6 class="fw-semibold small text-uppercase text-muted mb-2">Available properties</h6>
                <div id="picker-available" class="list-group" style="max-height:420px;overflow-y:auto;"></div>
                <div class="text-center">
                    <button type="button" id="picker-load-more" class="btn btn-sm btn-link d-none">Load more</button>
                </div>
            </div>
            <div class="col-md-6">
                <h6 class="fw-semibold small text-uppercase text-muted mb-2">Featured (display order)</h6>
                <div id="picker-selected" class="list-group" style="max-height:420px;overflow-y:auto;"></div>
            </div>
        </div>

        <div id="picker-hidden-inputs"></div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var searchUrl = '{{ route('admin.settings.content-pages.properties.search') }}';

    var qInput         = document.getElementById('picker-q');
    var typeSelect     = document.getElementById('picker-type');
    var statusSelect   = document.getElementById('picker-status');
    var availableEl    = document.getElementById('picker-available');
    var selectedEl     = document.getElementById('picker-selected');
    var loadMoreBtn    = document.getElementById('picker-load-more');
    var hiddenInputsEl = document.getElementById('picker-hidden-inputs');

    var selected = @json($initialSelected);
    var offset = 0;
    var searchTimer;
    var dragging = null;

    var statusBadgeClass = {
        published:    'bg-success text-white',
        under_review: 'bg-warning text-dark',
        unavailable:  'bg-secondary text-white',
    };

    // Same Sold/Rented badge admin/properties shows alongside a Published
    // property's plain status badge (see property/index.blade.php) — a
    // Published property here can still have actually been sold/rented out
    // since being published; this makes that visible in the picker too,
    // not just the main property list.
    var availabilityBadgeClass = { sold: 'bg-danger', rented: 'bg-warning text-dark' };
    var availabilityBadgeLabel = { sold: 'Sold', rented: 'Rented' };

    function escapeHtml(s) {
        return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }

    function statusBadge(property) {
        if (property.trashed) {
            return '<span class="badge bg-danger bg-opacity-10 text-danger">Deleted</span>';
        }
        var cls = statusBadgeClass[property.status] || 'bg-secondary text-white';
        var html = '<span class="badge ' + cls + '">' + escapeHtml(property.status_label) + '</span>';
        if (availabilityBadgeClass[property.availability_status]) {
            html += ' <span class="badge ' + availabilityBadgeClass[property.availability_status] + '">'
                + availabilityBadgeLabel[property.availability_status] + '</span>';
        }
        return html;
    }

    function metaLine(property) {
        return '<span class="text-muted small">' + escapeHtml(property.type)
            + (property.city ? ' · ' + escapeHtml(property.city) : '') + '</span>';
    }

    function renderHiddenInputs() {
        hiddenInputsEl.innerHTML = selected.map(function (p) {
            return '<input type="hidden" name="property_ids[]" value="' + p.id + '">';
        }).join('');
    }

    function renderSelected() {
        if (!selected.length) {
            selectedEl.innerHTML = '<div class="list-group-item text-muted small py-4 text-center">No properties selected yet.</div>';
            renderHiddenInputs();
            return;
        }

        selectedEl.innerHTML = selected.map(function (p, index) {
            return '<div class="list-group-item d-flex justify-content-between align-items-center py-2" data-id="' + p.id + '" draggable="true">'
                + '<span style="cursor:grab" class="me-2 text-muted"><i class="bi bi-grip-vertical"></i></span>'
                + '<span class="flex-grow-1">' + escapeHtml(p.title) + ' ' + metaLine(p) + ' ' + statusBadge(p) + '</span>'
                + '<span class="d-flex gap-1">'
                + '<button type="button" class="btn btn-sm btn-outline-secondary move-up-btn" title="Move up" ' + (index === 0 ? 'disabled' : '') + '><i class="bi bi-arrow-up"></i></button>'
                + '<button type="button" class="btn btn-sm btn-outline-secondary move-down-btn" title="Move down" ' + (index === selected.length - 1 ? 'disabled' : '') + '><i class="bi bi-arrow-down"></i></button>'
                + '<button type="button" class="btn btn-sm btn-outline-danger remove-btn" title="Remove"><i class="bi bi-x-lg"></i></button>'
                + '</span>'
                + '</div>';
        }).join('');
        renderHiddenInputs();
    }

    function isSelected(id) {
        return selected.some(function (p) { return String(p.id) === String(id); });
    }

    // Each row's full property payload rides along as a data attribute
    // (JSON-encoded) so the "Add" click handler can push the exact same
    // shape into `selected` (and re-render it, badge included) without a
    // second network round-trip or re-parsing the row's rendered text.
    function renderAvailable(results, append) {
        var html = results.map(function (p) {
            return '<div class="list-group-item d-flex justify-content-between align-items-center py-2" data-id="' + p.id + '" data-property=\'' + escapeHtml(JSON.stringify(p)) + '\'>'
                + '<span class="flex-grow-1">' + escapeHtml(p.title) + ' ' + metaLine(p) + ' ' + statusBadge(p) + '</span>'
                + '<button type="button" class="btn btn-sm btn-outline-primary add-btn" title="Add"><i class="bi bi-arrow-right"></i></button>'
                + '</div>';
        }).join('');

        if (append) {
            availableEl.insertAdjacentHTML('beforeend', html);
        } else {
            availableEl.innerHTML = html || '<div class="list-group-item text-muted small py-4 text-center">No matching properties.</div>';
        }
    }

    function doSearch(append) {
        if (!append) { offset = 0; }

        var params = new URLSearchParams({ q: qInput.value, type: typeSelect.value, status: statusSelect.value, offset: offset });
        selected.forEach(function (p) { params.append('exclude[]', p.id); });

        fetch(searchUrl + '?' + params.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                renderAvailable(data.results || [], append);
                loadMoreBtn.classList.toggle('d-none', !data.has_more);
            });
    }

    qInput.addEventListener('input', function () { clearTimeout(searchTimer); searchTimer = setTimeout(function () { doSearch(false); }, 300); });
    typeSelect.addEventListener('change', function () { doSearch(false); });
    statusSelect.addEventListener('change', function () { doSearch(false); });
    loadMoreBtn.addEventListener('click', function () { offset += 20; doSearch(true); });

    availableEl.addEventListener('click', function (e) {
        var btn = e.target.closest('.add-btn');
        if (!btn) return;
        var row = btn.closest('[data-id]');
        if (isSelected(row.dataset.id)) return;

        selected.push(JSON.parse(row.dataset.property));
        row.remove();
        renderSelected();
    });

    selectedEl.addEventListener('click', function (e) {
        var row = e.target.closest('[data-id]');
        if (!row) return;
        var index = selected.findIndex(function (p) { return String(p.id) === row.dataset.id; });
        if (index === -1) return;

        if (e.target.closest('.remove-btn')) {
            selected.splice(index, 1);
            renderSelected();
            doSearch(false);
        } else if (e.target.closest('.move-up-btn') && index > 0) {
            var prev = selected[index - 1];
            selected[index - 1] = selected[index];
            selected[index] = prev;
            renderSelected();
        } else if (e.target.closest('.move-down-btn') && index < selected.length - 1) {
            var next = selected[index + 1];
            selected[index + 1] = selected[index];
            selected[index] = next;
            renderSelected();
        }
    });

    // Drag-to-reorder within the Featured list — same interaction as the
    // original picker (Settings > Property Types uses the same pattern).
    selectedEl.addEventListener('dragstart', function (e) {
        dragging = e.target.closest('[data-id]');
        if (dragging) dragging.style.opacity = '0.5';
    });
    selectedEl.addEventListener('dragover', function (e) {
        e.preventDefault();
        var target = e.target.closest('[data-id]');
        if (target && target !== dragging && dragging) {
            var mid = target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2;
            selectedEl.insertBefore(dragging, e.clientY < mid ? target : target.nextSibling);
        }
    });
    selectedEl.addEventListener('dragend', function () {
        if (dragging) dragging.style.opacity = '';
        dragging = null;
        var ids = Array.from(selectedEl.querySelectorAll('[data-id]')).map(function (r) { return r.dataset.id; });
        selected.sort(function (a, b) { return ids.indexOf(String(a.id)) - ids.indexOf(String(b.id)); });
        renderHiddenInputs();
    });

    renderSelected();
    doSearch(false);
}());
</script>
@endpush