@extends('layouts.app')

@section('title', '📝 新增加班申請')

@section('content')
  <div class="container py-4">
    <h1 class="mb-4">📝 新增加班申請</h1>

    @if ($errors->any())
      <div class="alert alert-danger">
        <strong>請修正以下錯誤：</strong>
        <ul class="mb-0 mt-2">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="card shadow-sm">
      <div class="card-body">
        <form method="POST" action="{{ route('overtime-requests.store') }}">
          @csrf

          {{-- 加班日期 --}}
          <div class="mb-3">
            <label for="overtime_date" class="form-label">加班日期 <span class="text-danger">*</span></label>
            <input type="date" id="overtime_date" name="overtime_date" class="form-control"
              value="{{ old('overtime_date') }}" required>
          </div>

          {{-- 加班時間 --}}
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="start_time" class="form-label">開始時間 <span class="text-danger">*</span></label>
              <input type="time" id="start_time" name="start_time" class="form-control" value="{{ old('start_time') }}"
                required>
            </div>
            <div class="col-md-6">
              <label for="end_time" class="form-label">結束時間 <span class="text-danger">*</span></label>
              <input type="time" id="end_time" name="end_time" class="form-control" value="{{ old('end_time') }}"
                required>
            </div>
          </div>

          {{-- 加班費率說明 --}}
          <div class="mb-3">
            <small class="text-danger">
              ※ 加班費依據《勞基法》計算：<strong>前兩小時為 1.34 倍</strong>，<strong>兩小時後為 1.67 倍</strong>。
            </small>
          </div>

          {{-- 時間錯誤提示 --}}
          <div id="timeError" class="alert alert-warning d-none" role="alert">
            ⚠️ 結束時間不能早於開始時間，請重新確認。
          </div>

          {{-- 加班專案（複選） --}}
          <div class="mb-3">
            <label class="form-label" for="project_ids">加班專案（可複選，非必填）</label>
            <div class="row">
              @forelse ($projects as $project)
                <div class="col-md-4">
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="project_ids[]" value="{{ $project->id }}"
                      id="project_{{ $project->id }}"
                      {{ in_array($project->id, old('project_ids', [])) ? 'checked' : '' }}>
                    <label class="form-check-label" for="project_{{ $project->id }}">
                      {{ $project->name }}
                    </label>
                  </div>
                </div>
              @empty
                <div class="text-muted">目前無可用專案</div>
              @endforelse
            </div>
          </div>

          {{-- 加班事由 --}}
          <div class="mb-3">
            <label for="reason" class="form-label">加班事由 <span class="text-danger">*</span></label>
            <textarea id="reason" name="reason" class="form-control" rows="4" required>{{ old('reason') }}</textarea>
          </div>

          {{-- 送出 --}}
          <div class="d-flex justify-content-end">
            <a href="{{ route('overtime-requests.index') }}" class="btn btn-secondary me-2">返回</a>
            <button type="submit" class="btn btn-primary">提交申請</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const startInput = document.getElementById('start_time');
      const endInput = document.getElementById('end_time');
      const alertBox = document.getElementById('timeError');

      function validateTime() {
        const start = startInput.value;
        const end = endInput.value;

        if (start && end && end <= start) {
          alertBox.classList.remove('d-none');
        } else {
          alertBox.classList.add('d-none');
        }
      }

      startInput.addEventListener('change', validateTime);
      endInput.addEventListener('change', validateTime);
    });
  </script>
@endsection