{{-- The bar over an admin list for acting on the rows ticked in it.

     The row checkboxes sit in the table, outside this form, and join it with
     form="{{ $id }}" and class "bulk-row"; the header box is #{{ $id }}-all.
     The bar shows once something is ticked. The slot holds the extra fields
     an action needs, each wrapped in <span class="bulk-fields" data-for="action">.

     actions   [value => label]
     confirms  [value => question asked before it runs]
     hints     [value => line shown under the bar]
     dangers   values whose confirmation is shown as destructive
--}}
@props(['id', 'action', 'actions', 'confirms' => [], 'hints' => [], 'dangers' => []])
@once
<style>
    /* app.css gives every .form-control width:100% !important; in this bar they sit in a row. */
    .admin-bulk-bar select.form-control, .admin-bulk-bar input.form-control{display:inline-block!important;width:auto!important;max-width:100%}
</style>
@endonce
<form method="POST" action="{{ $action }}" id="{{ $id }}">
@csrf
<div class="card admin-bulk-bar" id="{{ $id }}-bar" style="margin-bottom:10px;display:none;">
    <div class="card-body" style="padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
        <strong style="font-size:13px;"><span id="{{ $id }}-count">0</span> {{ __('admin.bulk_bar.selected') }}</strong>
        <select name="bulk_action" id="{{ $id }}-action" class="form-control input-sm" style="width:auto;" aria-label="{{ __('admin.bulk_bar.action') }}">
            @foreach($actions as $value => $label)
            <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>
        {{ $slot }}
        <button type="submit" class="btn btn-primary btn-sm">{{ __('admin.bulk_bar.go') }}</button>
        <a href="#" id="{{ $id }}-clear" style="font-size:12px;">{{ __('admin.bulk_bar.clear') }}</a>
        <span id="{{ $id }}-hint" style="font-size:12px;color:#777;flex-basis:100%;"></span>
    </div>
</div>
</form>
<script>
// Run once the page is parsed: the bar comes before the table, so the
// select-all box (#id-all, in the table header) does not exist yet when the
// browser reaches this script.
(function (init) {
    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); }
})(function () {
    var id = @json($id), form = document.getElementById(id), bar = document.getElementById(id + '-bar');
    var all = document.getElementById(id + '-all'), count = document.getElementById(id + '-count');
    var action = document.getElementById(id + '-action'), hint = document.getElementById(id + '-hint');
    var hints = @json((object) $hints), confirms = @json((object) $confirms), dangers = @json(array_values($dangers));
    var boxes = function () { return Array.prototype.slice.call(document.querySelectorAll('input.bulk-row[form="' + id + '"]')); };
    var refresh = function () {
        var n = boxes().filter(function (b) { return b.checked; }).length;
        count.textContent = n;
        bar.style.display = n ? '' : 'none';
        if (all) { all.checked = n > 0 && n === boxes().length; all.indeterminate = n > 0 && n < boxes().length; }
    };
    var show = function () {
        form.querySelectorAll('.bulk-fields').forEach(function (f) {
            var on = f.dataset.for.split(' ').indexOf(action.value) !== -1;
            f.style.display = on ? 'flex' : 'none';
            f.querySelectorAll('input,select').forEach(function (i) { i.disabled = !on; });
        });
        hint.textContent = hints[action.value] || '';
    };
    if (all) all.addEventListener('change', function () { boxes().forEach(function (b) { b.checked = all.checked; }); refresh(); });
    document.addEventListener('change', function (e) { if (e.target.matches && e.target.matches('input.bulk-row')) refresh(); });
    document.getElementById(id + '-clear').addEventListener('click', function (e) { e.preventDefault(); boxes().forEach(function (b) { b.checked = false; }); refresh(); });
    action.addEventListener('change', show);
    form.addEventListener('submit', function (e) {
        var n = boxes().filter(function (b) { return b.checked; }).length;
        var q = confirms[action.value];
        if (!q) return true;
        return pnConfirm(e, q.replace(':count', n), dangers.indexOf(action.value) !== -1 ? { danger: true } : undefined);
    });
    show(); refresh();
});
</script>