@php
    // Normalize modal target
    $target = ltrim($btn['target'] ?? 'bulk-action-modal', '#');
@endphp

{{-- ✅ Bulk Action Button --}}
<button id="{{ $btn['id'] ?? 'bulk-action-open' }}" type="button"
    class="{{ $btn['cls'] ?? 'btn btn-primary text-white' }}" data-bs-toggle="modal" data-bs-target="#{{ $target }}">

    @if (!empty($btn['icon']))
        <i class="{{ $btn['icon'] }}"></i>
    @endif

    {{ $btn['title'] ?? 'Bulk Action' }}
</button>


{{-- ✅ Bulk Action Modal --}}
<div class="modal fade" id="{{ $target }}" tabindex="-1" aria-labelledby="{{ $target }}-label"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content text-wrap">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $target }}-label">{{ $modal['title'] ?? 'Confirm Bulk Action' }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p id="{{ $target }}-msg">
                    {{ $modal['msg'] ?? 'Are you sure you want to apply this action to selected items?' }}
                </p>

                <div class="mb-3">
                    <label class="form-label fw-bold">Selected IDs:</label>
                    <div id="{{ $target }}-selected-ids" class="border rounded p-2 bg-light"
                        style="min-height: 50px; font-family: monospace; white-space: pre-wrap;">
                        <em>No items selected</em>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="{{ $target }}-reason" class="form-label fw-bold">Reason:</label>
                    <textarea class="form-control" id="{{ $target }}-reason" name="reason" rows="3"
                        placeholder="Enter reason for this action..." style="min-height: 80px; resize: vertical;"></textarea>
                </div>

                <p id="{{ $target }}-error" class="text-danger mt-2"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="{{ $target }}-btn"
                    class="btn {{ $modal['btnClass'] ?? 'btn-success' }}"
                    data-action="{{ $modal['actionUrl'] ?? '#' }}">
                    {{ $modal['btnText'] ?? 'Confirm' }}
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", () => {
        const modalId = "{{ $target }}";
        const modal = document.getElementById(modalId);
        const msg = document.getElementById(`${modalId}-msg`);
        const idsBox = document.getElementById(`${modalId}-selected-ids`);
        const actionBtn = document.getElementById(`${modalId}-btn`);
        const reasonField = document.getElementById(`${modalId}-reason`);
        const errorMsg = document.getElementById(`${modalId}-error`);
        const footer = actionBtn.parentElement;

        const updateModalUI = () => {
            const selected = Array.from(document.querySelectorAll('input[name="entryId[]"]:checked'));
            const hasSelection = selected.length > 0;

            msg.textContent = hasSelection ?
                "{{ $modal['msg'] ?? 'Are you sure you want to apply this action to selected items?' }}" :
                "No items selected. Please select at least one entry.";

            idsBox.innerHTML = hasSelection ?
                selected.map(el => el.value).join(', ') :
                '<em>No items selected</em>';

            if (hasSelection && !footer.contains(actionBtn)) {
                footer.appendChild(actionBtn);
            } else if (!hasSelection && footer.contains(actionBtn)) {
                footer.removeChild(actionBtn);
            }
        };

        modal.addEventListener("show.bs.modal", updateModalUI);

        actionBtn.addEventListener("click", () => {
            const selected = Array.from(document.querySelectorAll('input[name="entryId[]"]:checked'));
            const reason = reasonField.value.trim();

            if (selected.length === 0) {
                errorMsg.textContent = "Please select at least one item.";
                return;
            }

            if (!reason) {
                errorMsg.textContent = "Please provide a reason for this action.";
                return;
            }

            errorMsg.textContent = "";
            const ids = selected.map(el => el.value);
            const actionUrl = actionBtn.getAttribute("data-action");
            const params = new URLSearchParams();

            ids.forEach(id => params.append('ids[]', id));
            params.append('reason', reason);

            window.location.href = `${actionUrl}?${params.toString()}`;
        });
    });
</script>