@extends('layouts.app')
@section('title', '請假審核')

@section('content')
<div class="container-fluid py-4 px-4">

  <div class="mb-4">
    <a href="{{ route('leave.index') }}" class="text-decoration-none text-muted small">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
    <h4 class="fw-bold mt-2 mb-0"><i class="bi bi-inbox me-2 text-warning"></i>待審核申請</h4>
  </div>

  @foreach(['success','error'] as $t)
    @if(session($t))
      <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show py-2 mb-3">
        {{ session($t) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif
  @endforeach

  {{-- 主管審核區（≤3天） --}}
  @if($supervisorQueue->isNotEmpty() || !$isBoss)
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-transparent fw-semibold py-3">
      <i class="bi bi-person-check me-2 text-primary"></i>主管審核
      <span class="badge bg-warning text-dark ms-2">{{ $supervisorQueue->count() }}</span>
      <span class="text-muted small fw-normal ms-2">（請假 ≤ 3 天）</span>
    </div>
    <div class="card-body p-0">
      @if($supervisorQueue->isEmpty())
        <div class="text-center py-4 text-muted small">目前無待審申請</div>
      @else
        @foreach($supervisorQueue as $r)
          @include('leave._approval_row', ['r' => $r, 'role' => 'supervisor'])
        @endforeach
      @endif
    </div>
  </div>
  @endif

  {{-- 老闆審核區（>3天） --}}
  @if($isBoss)
  <div class="card shadow-sm border-0">
    <div class="card-header bg-transparent fw-semibold py-3">
      <i class="bi bi-person-badge me-2 text-danger"></i>老闆最終核准
      <span class="badge bg-danger ms-2">{{ $bossQueue->count() }}</span>
      <span class="text-muted small fw-normal ms-2">（請假 > 3 天）</span>
    </div>
    <div class="card-body p-0">
      @if($bossQueue->isEmpty())
        <div class="text-center py-4 text-muted small">目前無待審申請</div>
      @else
        @foreach($bossQueue as $r)
          @include('leave._approval_row', ['r' => $r, 'role' => 'boss'])
        @endforeach
      @endif
    </div>
  </div>
  @endif

</div>

{{-- 拒絕 Modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">拒絕申請</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="rejectForm" method="POST">
        @csrf
        <div class="modal-body">
          <label class="form-label fw-semibold small">拒絕原因（必填）</label>
          <textarea name="note" class="form-control" rows="3" placeholder="請說明拒絕原因…" required></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-danger btn-sm">確認拒絕</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('[data-reject-url]').forEach(btn => {
  btn.addEventListener('click', function() {
    document.getElementById('rejectForm').action = this.dataset.rejectUrl;
    new bootstrap.Modal(document.getElementById('rejectModal')).show();
  });
});
</script>
@endpush