@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 method="GET" class="row g-2 mb-3">
      <div class="col-12 col-sm-auto">
        <label for="month" class="form-label">查詢月份：</label>
        <input type="month" name="month" id="month" class="form-control"
          value="{{ request('month', now()->format('Y-m')) }}">
      </div>
      <div class="col-12 col-sm-auto">
        <label class="form-label">&nbsp;</label>
        <button type="submit" class="btn btn-primary d-block">查詢</button>
      </div>
    </form>

    {{-- 總加班時數 --}}
    @if (isset($displayTotal))
      <div class="mt-3 text-end">
        <strong>本月核准加班總時數：</strong> {{ $displayTotal }}
      </div>
    @endif
    {{-- 資料表格 --}}
    <div class="card shadow-sm">
      <div class="card-body table-responsive">
        <table id="overtimeTable" class="table table-bordered table-striped align-middle">
          <thead class="table-light">
            <tr>
              <th>申請日期</th>
              <th>時間</th>
              <th>申請人</th>
              <th>單位</th>
              <th>事由</th>
              <th>加班時數</th>
              <th>加班計費公式</th>
              <th>狀態</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($list as $row)
              <tr>
                <td>{{ $row->overtime_date }}</td>
                <td>{{ $row->start_time }} - {{ $row->end_time }}</td>
                <td>{{ $row->user->name }}</td>
                <td>{{ $row->user->department }}</td>
                <td>{{ $row->reason }}</td>
                <td>{{ $row->overtime_hours }}</td>
                <td>{{ $row->overtime_formula }}</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>
                </td>
              </tr>
              @empty
                <tr>
                  <td colspan="7" class="text-center">尚無紀錄</td>
                </tr>
              @endforelse
            </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: [
            [0, 'desc']
          ],
          language: {
            url: '/vendor/datatables/i18n/zh-HANT.json'
          }
        });
      });
    </script>
  @endpush