{{-- Shared by the full CRM Transfer Log page and by the popup on the customer list,
     so both always show the same columns in the same order (newest first). --}}
{{-- The style rides along with the markup because this partial is also served on its
     own to the popup, where there is no layout to push a stylesheet into. --}}
<style>
    /* The scrolling happens in here so the header has something to stick to.
       Deliberately not .table-responsive: that wrapper is auto height, so it never
       scrolls vertically and sticky would have nothing to pin against. overflow:auto
       still covers the horizontal axis. */
    .crm-log-wrap {
        max-height: 60vh;
        overflow: auto;
        position: relative;
    }

    .crm-log-wrap .crm-log-table {
        margin-bottom: 0;
    }

    .crm-log-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        /* Opaque, or the rows scrolling underneath show through the heading. */
        background-color: #343a40 !important;
        color: #fff !important;
        /* A sticky cell loses its collapsed borders once it detaches from the flow,
           so the rules are drawn as insets instead. */
        box-shadow: inset 0 1px 0 #454d55, inset 0 -1px 0 #454d55;
    }
</style>

{{-- What is on screen, and the way to the rest of it. The button is a real link so it
     still works on the full page, where there is no script to intercept it; in the popup
     the handler catches it and reloads the popup body in place. --}}
@if (!empty($since))
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
        <small class="text-muted mr-2">
            Since the current expire date, {{ $since->format('d-M-Y') }}.
        </small>
        <a href="{{ $allUrl }}" class="btn btn-outline-primary btn-sm crmHistoryLoadAll">
            <i class="fa fa-history"></i> Load all history
        </a>
    </div>
@else
    <small class="text-muted d-block mb-2">Full history.</small>
@endif

<div class="crm-log-wrap">
    <table class="table table-bordered table-sm mb-0 crm-log-table">
        <thead class="table-dark">
            <tr>
                <th style="width:70px">#</th>
                <th>Previous</th>
                <th>New</th>
                <th>Description</th>
                <th>Change By</th>
                <th>Check Date</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($logs as $log)
                <tr>
                    <td>{{ $log->id }}</td>
                    <td>{{ $log->previous_crm_status }}</td>
                    <td>{{ $log->new_crm_status }}</td>
                    <td>{{ $log->description }}</td>
                    {{-- optional(): the user who made the change may since have been deleted. --}}
                    <td>{{ optional($log->changeBy)->name ?? '' }}</td>
                    <td>{{ $log->crm_check_date ?? '' }}</td>
                    <td>{{ $log->created_at }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        @if (!empty($since))
                            No transfer since the current expire date.
                        @else
                            No transfer has been recorded for this customer.
                        @endif
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>