@once
  @push('styles')
    <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
  @endpush
  @push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/vendor/datatables/js/dataTables.bootstrap5.min.js"></script>
    <script>
      $(function() {
        $('.dt-devreq').DataTable({
          order: [
            [0, 'desc']
          ],
          pageLength: 20,
          language: {
            url: '/vendor/datatables/i18n/zh-HANT.json'
          }
        });
      });
    </script>
  @endpush
@endonce

<div class="table-responsive"><table class="table table-striped table-bordered align-middle dt-devreq">
  <thead class="table-light">
    <tr>
      <th>#</th>
      <th>申請人</th>
      <th>部門</th>
      <th>申請日期</th>
      <th>狀態</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($list as $row)
      <tr>
        <td>{{ $row->id }}</td>
        <td>{{ $row->user->name }}</td>
        <td>{{ $row->user->department }}</td>
        <td>{{ $row->created_at->format('Y-m-d H:i') }}</td>
        <td>
          @php
            $label =
                [
                    'pending_supervisor' => '待主管',
                    'pending_admin' => '待管理者',
                    'approved' => '已通過',
                    'return_pending_supervisor' => '待主管(攜出)',
                    'return_pending_admin' => '待管理者(攜出)',
                    'returned' => '已攜出',
                ][$row->status] ?? '—';
          @endphp
          {{ $label }}
        </td>
        <td>
          <a href="{{ route('device-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">檢視</a>
          {{-- 額外操作按鈕 --}}
          @isset($extra)
            {!! $extra($row) !!}
          @endisset
        </td>
      </tr>
    @endforeach
  </tbody>
</table></div>