{{--
    Danh sách đơn từ (/approval/order) - nạp lại bằng AJAX khi tìm kiếm / lọc trạng thái.
    Style bảng dùng chung .crm-list-table (components.css) + phần riêng .order-* (cuối components.css).
    Giữ hook JS: #checkAll, input[getdataitem] (chọn đơn để duyệt hàng loạt).
--}}
@php
    // Loại đơn: [nhãn, icon, modifier màu]
    $orderTypes = [
        0 => ['Đơn nghỉ', 'fas fa-calendar-times', 'leave'],
        1 => ['Check-in/Check-out', 'fas fa-user-clock', 'checkin'],
        2 => ['Tăng ca', 'fas fa-business-time', 'overtime'],
    ];
    // Trạng thái: [nhãn, icon, modifier màu]
    $orderStatuses = [
        0 => ['Chờ duyệt', 'fas fa-hourglass-half', 'pending'],
        1 => ['Đã duyệt', 'fas fa-check-circle', 'approved'],
        2 => ['Không duyệt', 'fas fa-ban', 'rejected'],
    ];
@endphp
<div class="crm-list">
    <div class="table-responsive">
        <table class="table crm-list-table order-table">
            <thead>
            <tr>
                <th class="order-table__check"><input type="checkbox" id="checkAll" aria-label="Chọn tất cả"/></th>
                <th>Nhân viên</th>
                <th>Loại đơn</th>
                <th>Trạng thái</th>
                <th>Phòng ban / Chức vụ</th>
                <th>Lý do</th>
                <th>Ngày tạo</th>
                <th class="crm-list-table__actions">Chi tiết</th>
            </tr>
            </thead>
            <tbody>
            @forelse($docs as $item)
                @php
                    $type = $orderTypes[$item->type] ?? $orderTypes[2];
                    $status = $orderStatuses[$item->status] ?? $orderStatuses[2];
                    $fullName = (string) @$item->user->full_name;
                    $words = preg_split('/\s+/u', trim($fullName));
                    $initial = mb_strtoupper(mb_substr(end($words) ?: '?', 0, 1));
                    $detailUrl = '/approval/order/show/' . $item->id . '/' . $item->type;
                @endphp
                <tr class="{{ $item->status == 0 ? 'is-pending' : '' }}">
                    <td class="order-table__check"><input type="checkbox" getdataitem value="{{$item->id}}" aria-label="Chọn đơn của {{ $fullName }}"></td>
                    <td>
                        <div class="order-person">
                            <span class="order-person__avatar">{{ $initial }}</span>
                            <div class="order-person__info">
                                <a class="crm-list-table__title" href="{{ $detailUrl }}">{{ $fullName }}</a>
                                @if(@$item->user->code)
                                    <span class="crm-code-chip">{{ $item->user->code }}</span>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="order-type order-type--{{ $type[2] }}"><i class="{{ $type[1] }}"></i> {{ $type[0] }}</span>
                    </td>
                    <td>
                        <span class="order-status order-status--{{ $status[2] }}"><i class="{{ $status[1] }}"></i> {{ $status[0] }}</span>
                    </td>
                    <td>
                        <div class="order-dept">
                            <span>{{ @$item->user->department->name ?: '—' }}</span>
                            <small>{{ @$item->user->roles->name }}</small>
                        </div>
                    </td>
                    <td class="order-table__reason">{{ @$item->reason->name ?: '—' }}</td>
                    <td class="order-table__date">
                        @if($item->created_at)
                            <span>{{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y') }}</span>
                            <small>{{ \Carbon\Carbon::parse($item->created_at)->format('H:i') }}</small>
                        @endif
                    </td>
                    <td class="crm-list-table__actions">
                        <a class="crm-action-btn crm-action-btn--edit" href="{{ $detailUrl }}" data-toggle="tooltip" title="Xem chi tiết" aria-label="Xem chi tiết đơn">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8">
                        <div class="crm-list-empty">
                            <i class="fas fa-file-signature"></i>
                            <span>Không có đơn từ nào</span>
                        </div>
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="crm-list-footer">
        <span class="crm-list-footer__total">Tổng số <b>{{ number_format($docs->total()) }}</b> đơn</span>
        {{ $docs->links() }}
    </div>
</div>
<script>
    // Tooltip + reset bộ đếm "đã chọn" mỗi lần danh sách được nạp lại
    if ($.fn.tooltip) {
        $('.order-list [data-toggle="tooltip"]').tooltip({trigger: 'hover', placement: 'top'});
    }
    if (typeof updateOrderSelected === 'function') {
        updateOrderSelected();
    }
</script>