@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-4 align-items-end">
      {{-- 月份選擇 --}}
      <div class="col-md-auto">
        <label for="month" class="form-label">選擇月份：</label>
        <input type="month" name="month" id="month" class="form-control" value="{{ $monthForInput }}">
      </div>

      {{-- 部門選擇：admin 可切換，主管只顯示自己部門 --}}
      <div class="col-md-auto">
        <label class="form-label">部門：</label>
        @if ($isAdmin)
          <select name="department" id="department" class="form-select">
            <option value="">全部部門</option>
            @foreach ($departments as $dept)
              <option value="{{ $dept }}" {{ $selectedDept === $dept ? 'selected' : '' }}>
                {{ $dept }}
              </option>
            @endforeach
          </select>
        @else
          <input type="hidden" name="department" value="{{ $selectedDept }}">
          <div class="form-control bg-light" style="min-width:120px;">{{ $selectedDept ?: '（未設定）' }}</div>
        @endif
      </div>

      <div class="col-md-auto">
        <button type="submit" class="btn btn-primary">查詢</button>
      </div>
    </form>

    <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>
            </tr>
          </thead>
          <tbody>
            @foreach($list as $row)
              <tr>
                <td>{{ $row->overtime_date }}</td>
                <td>{{ $row->start_time }} - {{ $row->end_time }}</td>
                <td>{{ optional($row->user)->name }}</td>
                <td>{{ optional($row->user)->department }}</td>
                <td>{{ $row->reason }}</td>
                <td>{{ $row->overtime_hours }}</td>
                <td>{{ $row->overtime_formula }}</td>
                <td>
                  <a href="{{ route('overtime-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">檢視</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
        {{-- 總加班時數 --}}
        @if (isset($displayTotal))
          <div class="mt-3 text-end">
            <strong>本月核准加班總時數：</strong> {{ $displayTotal }}
          </div>
        @endif

      </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