@extends('layouts.app')
@section('title', '交接項目範本管理')

@section('content')
<div class="container-fluid px-4 py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-0"><i class="bi bi-list-check me-2"></i>交接項目範本管理</h4>
    <a href="{{ route('handovers.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
      {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <div class="row g-4">
    {{-- Add form --}}
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-header fw-bold">新增交接項目</div>
        <div class="card-body">
          <form action="{{ route('handovers.checklist.store') }}" method="POST">
            @csrf
            @if(auth()->user()->role === 'admin')
              <div class="mb-3">
                <label class="form-label fw-semibold" for="department">所屬組別</label>
                <select name="department" class="form-select @error('department') is-invalid @enderror" required id="department">
                  @foreach($deptOptions as $k => $v)
                    <option value="{{ $k }}" {{ old('department') === $k ? 'selected' : '' }}>{{ $v }}</option>
                  @endforeach
                </select>
                @error('department')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
            @else
              <input type="hidden" name="department" value="{{ $myDept }}">
              <div class="mb-3">
                <label class="form-label fw-semibold">所屬組別</label>
                <input class="form-control" value="{{ $deptOptions[$myDept] ?? '' }}" readonly>
              </div>
            @endif
            <div class="mb-3">
              <label class="form-label fw-semibold">項目名稱 <span class="text-danger">*</span></label>
              <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                value="{{ old('title') }}" required>
              @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold" for="description">說明（選填）</label>
              <textarea name="description" class="form-control" rows="2" id="description">{{ old('description') }}</textarea>
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold" for="item_type">題型</label>
              <select name="item_type" class="form-select" required id="item_type">
                <option value="text"  {{ old('item_type','text') === 'text'  ? 'selected' : '' }}>問答題（填寫說明）</option>
                <option value="yesno" {{ old('item_type') === 'yesno' ? 'selected' : '' }}>是否題（是 / 否）</option>
              </select>
            </div>
            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="apply_per_project" id="applyPerProject"
                  value="1" {{ old('apply_per_project') ? 'checked' : '' }}>
                <label class="form-check-label" for="applyPerProject">套用至每個專案</label>
              </div>
              <div class="form-text text-muted">勾選後，每個進行中專案會各自填寫此項目</div>
            </div>
            <div class="mb-3">
              <label class="form-label fw-semibold" for="sort_order">排序</label>
              <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', 0) }}" min="0" id="sort_order">
            </div>
            <button type="submit" class="btn btn-primary w-100">
              <i class="bi bi-plus-lg me-1"></i>新增
            </button>
          </form>
        </div>
      </div>
    </div>

    {{-- Template list --}}
    <div class="col-lg-8">
      @foreach($deptOptions as $dept => $deptLabel)
        @php $deptItems = $templates->where('department', $dept); @endphp
        <div class="card shadow-sm mb-3">
          <div class="card-header fw-bold">{{ $deptLabel }}</div>
          @if($deptItems->isEmpty())
            <div class="card-body text-muted small">尚無交接項目</div>
          @else
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                  <tr><th>排序</th><th>項目名稱</th><th>說明</th><th>題型</th><th>套用專案</th><th>建立人</th><th></th></tr>
                </thead>
                <tbody>
                  @foreach($deptItems->sortBy('sort_order') as $t)
                  <tr>
                    <td class="text-muted small">{{ $t->sort_order }}</td>
                    <td class="fw-semibold">{{ $t->title }}</td>
                    <td class="text-muted small">{{ Str::limit($t->description, 50) ?: '—' }}</td>
                    <td class="small">
                      @if($t->item_type === 'yesno')
                        <span class="badge bg-info text-white">是否題</span>
                      @else
                        <span class="badge bg-secondary">問答題</span>
                      @endif
                    </td>
                    <td class="small text-center">
                      @if($t->apply_per_project)
                        <i class="bi bi-check-circle-fill text-success" title="套用每個專案"></i>
                      @else
                        <span class="text-muted">—</span>
                      @endif
                    </td>
                    <td class="small">{{ $t->creator?->name ?? '—' }}</td>
                    <td>
                      @if(auth()->user()->role === 'admin' || $t->created_by === auth()->id())
                        <div class="d-flex gap-1">
                          <button class="btn btn-sm btn-outline-secondary"
                            data-bs-toggle="modal" data-bs-target="#editModal"
                            data-id="{{ $t->id }}"
                            data-dept="{{ $t->department }}"
                            data-title="{{ $t->title }}"
                            data-description="{{ $t->description }}"
                            data-item_type="{{ $t->item_type }}"
                            data-apply="{{ $t->apply_per_project ? '1' : '0' }}"
                            data-sort="{{ $t->sort_order }}"
                            data-url="{{ route('handovers.checklist.update', $t) }}">
                            <i class="bi bi-pencil"></i>
                          </button>
                          <form action="{{ route('handovers.checklist.destroy', $t) }}" method="POST"
                                onsubmit="return confirm('確定刪除此項目？')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                          </form>
                        </div>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @endif
        </div>
      @endforeach
    </div>
  </div>
</div>
{{-- Edit Modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="editForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-header">
          <h5 class="modal-title fw-bold" id="editModalLabel"><i class="bi bi-pencil me-2"></i>編輯交接項目</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          @if(auth()->user()->role === 'admin')
            <div class="mb-3">
              <label class="form-label fw-semibold">所屬組別</label>
              <select name="department" id="edit_department" class="form-select" required>
                @foreach($deptOptions as $k => $v)
                  <option value="{{ $k }}">{{ $v }}</option>
                @endforeach
              </select>
            </div>
          @endif
          <div class="mb-3">
            <label class="form-label fw-semibold">項目名稱 <span class="text-danger">*</span></label>
            <input type="text" name="title" id="edit_title" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">說明（選填）</label>
            <textarea name="description" id="edit_description" class="form-control" rows="2"></textarea>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">題型</label>
            <select name="item_type" id="edit_item_type" class="form-select" required>
              <option value="text">問答題（填寫說明）</option>
              <option value="yesno">是否題（是 / 否）</option>
            </select>
          </div>
          <div class="mb-3">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="apply_per_project"
                id="edit_apply_per_project" value="1">
              <label class="form-check-label" for="edit_apply_per_project">套用至每個專案</label>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">排序</label>
            <input type="number" name="sort_order" id="edit_sort_order" class="form-control" min="0">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.getElementById('editModal').addEventListener('show.bs.modal', function (e) {
  var btn  = e.relatedTarget;
  var form = document.getElementById('editForm');
  form.action = btn.dataset.url;

  var dept = document.getElementById('edit_department');
  if (dept) dept.value = btn.dataset.dept;

  document.getElementById('edit_title').value       = btn.dataset.title;
  document.getElementById('edit_description').value = btn.dataset.description || '';
  document.getElementById('edit_item_type').value   = btn.dataset.item_type;
  document.getElementById('edit_sort_order').value  = btn.dataset.sort;

  var applyChk = document.getElementById('edit_apply_per_project');
  applyChk.checked = btn.dataset.apply === '1';
});
</script>
@endpush

@endsection