@extends('layouts.app')

@section('title', '🕒 我的加班申請紀錄')

@push('styles')
  {{-- DataTables 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->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>
                  @if ($row->status === 'approved')
                    <a href="{{ route('overtime-requests.download', $row) }}" class="btn btn-sm btn-outline-secondary">
                      下載申請單
                    </a>
                  @else
                    <button class="btn btn-sm btn-outline-secondary" disabled>
                      尚未通過
                    </button>
                  @endif
                </td>
                <td>
                  <a href="{{ route('overtime-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">
                    檢視
                  </a>
                  @if (!in_array($row->status, ['approved', 'rejected']))
                    <form action="{{ route('overtime-requests.destroy', $row) }}" method="POST" class="d-inline"
                      onsubmit="return confirm('確定要取消這筆加班申請嗎？');">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger">
                        取消
                      </button>
                    </form>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  {{-- jQuery & DataTables JS --}}

  <script>
    $(function() {
      $('#overtimeTable').DataTable({
        order: [
          [4, 'desc']
        ], // 申請時間排序
        pageLength: 20,
        language: {
          url: '/vendor/datatables/i18n/zh-HANT.json'
        }
      });
    });
  </script>
@endpush