{{--
    Shared "charges that fall outside the new window" checkbox table, used by every
    confirm screen that may delete charges (groups/confirm-recalc.blade.php,
    students/confirm-status-recalc.blade.php, groups/confirm-schedule-recalc.blade.php).
    Unpaid charges are pre-checked (selected for deletion); paid ones default
    unchecked so money already collected is never removed without an explicit click
    — the header checkbox is there for when the admin does want the whole list gone.

    Expects $toRemove (list of ['id','date','amount','tariff_id','paid', optionally
    'group_name'/'student_name']) plus these optional flags:
      $showGroup   (bool, default false) — adds a "Группа" column, for a screen
                    spanning several groups at once
      $showStudent (bool, default false) — adds an "Ученик" column, for a screen
                    spanning several students at once
      $tableTitle  (string) — card header wording
--}}
@php($showGroup = $showGroup ?? false)
@php($showStudent = $showStudent ?? false)
@php($tableTitle = $tableTitle ?? 'Начисления вне периода')

<div class="card shadow-sm mb-4 js-charges-removal">
    <div class="card-header"><strong>{{ $tableTitle }}</strong></div>
    <div class="card-body pb-2 pt-2 text-muted small border-bottom">
        Отмечены галочкой начисления, которые ещё не оплачены — они будут удалены. Оплаченные
        начисления по умолчанию не выбраны: снимите/поставьте галочку, чтобы изменить решение
        для конкретного начисления. Галочка в шапке таблицы выделяет/снимает все сразу.
    </div>
    <div class="table-responsive" style="max-height:400px; overflow-y:auto;">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
            <tr>
                <th style="width:1%">
                    <input type="checkbox" class="form-check-input js-charges-removal-all"
                           title="Выделить/снять все">
                </th>
                @if ($showStudent)
                    <th>Ученик</th>
                @endif
                @if ($showGroup)
                    <th>Группа</th>
                @endif
                <th>Дата</th>
                <th class="text-end">Сумма</th>
                <th>Статус</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($toRemove as $row)
                <tr>
                    <td>
                        <input type="checkbox" class="form-check-input js-charges-removal-one"
                               name="remove_charge_ids[]"
                               value="{{ $row['id'] }}" @checked(! $row['paid'])>
                    </td>
                    @if ($showStudent)
                        <td>{{ $row['student_name'] ?? '—' }}</td>
                    @endif
                    @if ($showGroup)
                        <td>{{ $row['group_name'] ?? '—' }}</td>
                    @endif
                    <td>{{ date('d.m.Y', strtotime($row['date'])) }}</td>
                    <td class="text-end text-danger">{{ number_format($row['amount'], 0, ',', ' ') }} &#8376;</td>
                    <td>
                        @if ($row['paid'])
                            <span class="badge bg-warning text-dark">Оплачено</span>
                        @else
                            <span class="badge bg-secondary">Не оплачено</span>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>

@once
    @push('scripts')
        <script>
            // Scoped to each .js-charges-removal card rather than the document, so the
            // partial keeps working if a screen ever renders more than one of them.
            document.querySelectorAll('.js-charges-removal').forEach(function (card) {
                const all = card.querySelector('.js-charges-removal-all');
                const boxes = Array.from(card.querySelectorAll('.js-charges-removal-one'));

                if (!all || boxes.length === 0) {
                    return;
                }

                const syncHeader = function () {
                    const checked = boxes.filter(b => b.checked).length;
                    all.checked = checked === boxes.length;
                    all.indeterminate = checked > 0 && checked < boxes.length;
                };

                all.addEventListener('change', function () {
                    boxes.forEach(b => { b.checked = all.checked; });
                    all.indeterminate = false;
                });

                boxes.forEach(b => b.addEventListener('change', syncHeader));
                syncHeader();
            });
        </script>
    @endpush
@endonce