@extends('layouts.app')
@section('title', '申請離職/調職交接')

@section('content')
<div class="container py-4">
  <div class="mb-3">
    <a href="{{ route('handovers.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回清單
    </a>
  </div>
  <div class="row justify-content-center">
    <div class="col-lg-7">
      <div class="d-flex align-items-center gap-3 mb-4">
        <div>
          <h4 class="fw-bold mb-1" id="formTitle"><i class="bi bi-person-dash me-2"></i>交接申請單</h4>
          <div class="d-flex align-items-center gap-2 flex-wrap mt-1">
            <span class="fw-semibold">{{ auth()->user()->name }}</span>
            @if(auth()->user()->department)
              <span class="badge bg-primary bg-opacity-75">{{ auth()->user()->department }}</span>
            @endif
            @if(auth()->user()->position)
              <span class="badge bg-secondary bg-opacity-75">{{ auth()->user()->position }}</span>
            @endif
          </div>
        </div>
      </div>

      @if($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
      @endif
      @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
      @endif

      <form action="{{ route('handovers.store') }}" method="POST">
        @csrf

        {{-- 基本資訊 --}}
        <div class="card shadow-sm mb-4">
          <div class="card-header fw-semibold">基本資訊</div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label fw-semibold">交接類型</label>
              <div class="d-flex gap-3">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="type" value="resignation" id="t1"
                    {{ old('type','resignation') === 'resignation' ? 'checked' : '' }}>
                  <label class="form-check-label" for="t1">🚪 離職</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="type" value="transfer" id="t2"
                    {{ old('type') === 'transfer' ? 'checked' : '' }}>
                  <label class="form-check-label" for="t2">🔄 調職</label>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold">預計離職/調職日期</label>
              <input type="date" name="expected_date" class="form-control @error('expected_date') is-invalid @enderror"
                value="{{ old('expected_date') }}" required>
              @error('expected_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold" for="reason">離職/調職原因 <span class="text-muted fw-normal small">（選填）</span></label>
              <textarea name="reason" class="form-control" rows="3" placeholder="請簡述原因…" id="reason">{{ old('reason') }}</textarea>
            </div>
          </div>
        </div>

        {{-- 專案選擇 --}}
        @if($activeProjects->isNotEmpty())
          <input type="hidden" name="project_selection_submitted" value="1">
          <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
              <span><i class="bi bi-kanban me-1"></i>選擇要交接的專案（{{ $activeProjects->count() }}）<span class="text-muted small fw-normal ms-2">取消勾選代表不納入本次交接</span></span>
              <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary btn-select-all">全選</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-select-none">全不選</button>
              </div>
            </div>
            <ul class="list-group list-group-flush">
              @foreach($activeProjects as $p)
                <li class="list-group-item">
                  <div class="form-check d-flex align-items-center gap-3 mb-0">
                    <input class="form-check-input project-check" type="checkbox"
                      name="include_projects[]" value="{{ $p->id }}"
                      id="proj_{{ $p->id }}" checked>
                    <label class="form-check-label flex-grow-1 d-flex justify-content-between align-items-center" for="proj_{{ $p->id }}">
                      <span>
                        <span class="text-muted small">{{ $p->client?->name ?? '未分類' }}</span>
                        <span class="fw-semibold ms-1">{{ $p->name }}</span>
                      </span>
                      <span class="badge bg-secondary">{{ $p->project_type }}</span>
                    </label>
                  </div>
                </li>
              @endforeach
            </ul>
            <div class="card-footer d-flex gap-2">
              <button type="button" class="btn btn-sm btn-outline-secondary btn-select-all">全選</button>
              <button type="button" class="btn btn-sm btn-outline-secondary btn-select-none">全不選</button>
            </div>
          </div>
        @else
          <div class="alert alert-info mb-4">您目前沒有負責中的進行中專案。</div>
        @endif

        {{-- 資產預覽 --}}
        @if($myAssets->isNotEmpty())
          <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold"><i class="bi bi-box-seam me-1"></i>將自動帶入的資產（{{ $myAssets->count() }}）</div>
            <ul class="list-group list-group-flush">
              @foreach($myAssets as $a)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  <span class="fw-semibold small">{{ $a->asset_name }}</span>
                  <span class="text-muted small">{{ $a->asset_sn }}</span>
                </li>
              @endforeach
            </ul>
          </div>
        @else
          <div class="alert alert-light border mb-4 small text-muted">您目前沒有管理中的資產。</div>
        @endif

        {{-- 確認並送出 --}}
        <div class="card shadow-sm border-primary mb-4">
          <div class="card-body">
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="confirmCheck" required>
              <label class="form-check-label fw-semibold" for="confirmCheck">
                我已確認上方專案與資產清單，並了解送出後將進入審核流程。
              </label>
            </div>
            <div class="d-flex justify-content-end gap-2">
              <a href="{{ route('handovers.index') }}" class="btn btn-outline-secondary">取消</a>
              <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                <i class="bi bi-check2 me-1"></i>建立申請
              </button>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.btn-select-all').forEach(btn => {
  btn.addEventListener('click', () => document.querySelectorAll('.project-check').forEach(c => c.checked = true));
});
document.querySelectorAll('.btn-select-none').forEach(btn => {
  btn.addEventListener('click', () => document.querySelectorAll('.project-check').forEach(c => c.checked = false));
});

var titleMap = { resignation: '離職交接申請單', transfer: '調職交接申請單' };
var formTitle = document.getElementById('formTitle');
document.querySelectorAll('input[name="type"]').forEach(function(r) {
  r.addEventListener('change', function() {
    formTitle.innerHTML = '<i class="bi bi-person-dash me-2"></i>' + (titleMap[this.value] || '交接申請單');
  });
  if (r.checked) formTitle.innerHTML = '<i class="bi bi-person-dash me-2"></i>' + (titleMap[r.value] || '交接申請單');
});

var confirmCheck = document.getElementById('confirmCheck');
var submitBtn    = document.getElementById('submitBtn');
if (confirmCheck && submitBtn) {
  confirmCheck.addEventListener('change', function () {
    submitBtn.disabled = !this.checked;
  });
}
</script>
@endpush
@endsection