{{-- Sticky header + pinned Total row for the manager finance lists (Core Rent, Monthly
     Installment, Real IP Bill, Product Installment, Advance Commission).

     Include it once per page, and give the table's scroll box the .finance-table-wrap
     class. The Total row lives as the second <tr class="total-row"> inside <thead>, so it
     sits above the rows and is never sorted or paginated with them; its `top` is measured
     from JS, since the header can wrap to any height. --}}

@push('styles')
    <style>
        /* The scrolling has to happen inside this box: .table-responsive on its own is a
           scroll container at auto height, which never scrolls vertically and so leaves
           position:sticky nothing to pin against. */
        .finance-table-wrap {
            max-height: calc(100vh - 260px);
            overflow: auto;
            position: relative;
        }

        .finance-table-wrap>table {
            margin-bottom: 0;
        }

        /* A sticky cell paints its own background over whatever the <thead> had, so the
           colour is handed down the chain instead of hard-coded: the thead is black
           unless it carries a bg-* utility (those are !important and win), and the row and
           the cells inherit whatever that turns out to be. Hard-coding white here left a
           bg-secondary head with white text on a white cell — invisible. */
        .finance-table-wrap thead {
            background-color: #000;
            color: #fff;
        }

        .finance-table-wrap thead tr {
            background-color: inherit;
        }

        .finance-table-wrap thead th {
            position: sticky;
            top: 0;
            z-index: 12;
            background-color: inherit;
            /* border-collapse hands a cell's borders to the collapsed grid, and a sticky
               cell loses them once it detaches — so they are drawn as insets. */
            box-shadow: inset 0 -2px 0 #dee2e6;
        }

        .finance-table-wrap thead.thead-dark th {
            background-color: #343a40 !important;
            color: #fff !important;
            box-shadow: inset 0 -2px 0 #454d55;
        }

        .finance-table-wrap thead tr.total-row td {
            position: sticky;
            z-index: 11;
            font-weight: bold;
            background: #f4f6f9 !important;
            color: #212529;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
        }
    </style>
@endpush

@push('js')
    <script>
        $(function () {
            // Pin each Total row directly beneath its header, whatever height that wraps to.
            function positionTotalRows() {
                $('.finance-table-wrap').each(function () {
                    var headerHeight = $(this).find('thead tr').first().outerHeight() || 0;
                    $(this).find('thead tr.total-row > td').css('top', headerHeight + 'px');
                });
            }

            positionTotalRows();
            $(window).on('resize', positionTotalRows);

            // A DataTables redraw and an AJAX-loaded table both change the header height.
            $(document).on('draw.dt', positionTotalRows);
            $(document).ajaxComplete(function () {
                setTimeout(positionTotalRows, 0);
            });
        });
    </script>
@endpush