@extends('layouts.app')

@section('title', '🧑‍💼 主管加班審核')

@push('styles')
  <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
  <div class="container py-4">
    <h1 class="mb-4">🧑‍💼 主管加班審核</h1>

    <form class="row g-2 mb-3" method="GET">
      <div class="col-12 col-sm-auto">
        <select name="status" class="form-select">
          <option value="">全部狀態</option>
          @foreach (['pending_supervisor', 'pending_admin', 'approved', 'rejected'] as $s)
            <option value="{{ $s }}" {{ ($status ?? '') == $s ? 'selected' : '' }}>
              @switch($s)
                @case('pending_supervisor')
                  待主管審核
                @break

                @case('pending_admin')
                  待管理者審核
                @break

                @case('approved')
                  已通過
                @break

                @case('rejected')
                  已拒絕
                @break
              @endswitch
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-12 col-sm-auto">
        <button class="btn btn-primary">篩選</button>
      </div>
    </form>

    <div class="card shadow-sm">
      <div class="card-body table-responsive">
        <table id="overtimeTable" class="table table-striped table-bordered align-middle">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>加班日期</th>
              <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->overtime_date }}</td>
                <td>{{ $row->start_time }} ~ {{ $row->end_time }}</td>
                <td>{{ Str::limit($row->reason, 30) }}</td>
                <td>{{ $row->user->name }}</td>
                <td>{{ $row->created_at->format('Y-m-d H:i') }}</td>
                <td>
                  @php
                    $color = match ($row->status) {
                        'approved' => 'success',
                        'rejected' => 'danger',
                        'pending_supervisor' => 'warning',
                        'pending_admin' => 'info',
                        default => 'secondary',
                    };
                  @endphp
                  <span class="badge bg-{{ $color }}">
                    @switch($row->status)
                      @case('pending_supervisor')
                        待主管審核
                      @break

                      @case('pending_admin')
                        待管理者審核
                      @break

                      @case('approved')
                        已通過
                      @break

                      @case('rejected')
                        已拒絕
                      @break

                      @default
                        未知
                    @endswitch
                  </span>
                </td>
                <td>
                  <a href="{{ route('overtime-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">
                    檢視
                  </a>

                  @can('approve-supervisor', $row)
                    <form action="{{ route('overtime-requests.supervisor.approve', $row) }}" method="POST"
                      class="d-inline">
                      @csrf
                      <button class="btn btn-sm btn-success">通過</button>
                    </form>
                    <form action="{{ route('overtime-requests.supervisor.reject', $row) }}" method="POST"
                      class="d-inline">
                      @csrf
                      <button class="btn btn-sm btn-danger">拒絕</button>
                    </form>
                  @endcan
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@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() {
      $('#overtimeTable').DataTable({
        order: [
          [5, 'desc']
        ],
        pageLength: 20,
        language: {
          url: '/vendor/datatables/i18n/zh-HANT.json'
        }
      });
    });
  </script>
@endpush