@extends('layouts.app')

@section('title', '新增專案')

@push('head')
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
@endpush

@section('content')
  <div class="container py-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h1 class="mb-0">➕ 新增專案</h1>
      <a href="{{ route('projects.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>返回專案清單
      </a>
    </div>

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

          {{-- 基本資訊 --}}
          <div class="mb-3">
            <label for="name" class="form-label">系統名稱 <span class="text-danger">*</span> <span class="text-muted small">（去除年份的通用名稱，用於跨年分群）</span></label>
            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
              value="{{ old('name') }}" required>
            @error('name')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="mb-3">
            <label for="client_id" class="form-label">所屬客戶 <span class="text-danger">*</span></label>
            <select name="client_id" id="client_id" class="form-select @error('client_id') is-invalid @enderror" required>
              <option value="">請選擇客戶</option>
              @foreach ($clients as $client)
                <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                  {{ $client->name }}
                </option>
              @endforeach
            </select>
            @error('client_id')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="mb-3">
            <label class="form-label" for="parent_id">父專案</label>
            <select name="parent_id" class="form-select" id="parent_id">
              <option value="">— 無 —</option>
              @foreach ($possibleParents as $p)
                <option value="{{ $p->id }}">
                  {{ $p->client?->name ?? '未分類' }} / {{ $p->name }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <fieldset style="border:none;padding:0;margin:0;">
              <legend class="form-label mb-1">分類 <span class="text-danger">*</span></legend>
              <div class="btn-group">
                @foreach(['專案','產品'] as $cat)
                  <input type="radio" class="btn-check" name="project_category"
                    id="cat_{{ $cat }}" value="{{ $cat }}" autocomplete="off"
                    {{ old('project_category', '專案') === $cat ? 'checked' : '' }}>
                  <label class="btn btn-outline-primary btn-sm" for="cat_{{ $cat }}">{{ $cat }}</label>
                @endforeach
              </div>
              @error('project_category')
                <div class="text-danger small mt-1">{{ $message }}</div>
              @enderror
            </fieldset>
          </div>

          {{-- 合約區塊 --}}
          @php
            $contractRows = old('contracts', []);
          @endphp
          <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="fw-semibold">合約</span>
              <button type="button" class="btn btn-sm btn-outline-primary" id="addContractBtn">
                <i class="bi bi-plus-lg me-1"></i>新增合約
              </button>
            </div>
            <div id="contractsList">
              @foreach($contractRows as $ci => $c)
              <div class="card contract-card mb-2">
                <div class="card-body p-3">
                  <div class="d-flex gap-2 mb-2 align-items-end">
                    <input type="hidden" name="contracts[{{ $ci }}][id]" value="{{ $c['id'] ?? '' }}">
                    <div class="flex-grow-1">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">合約名稱 <span class="text-danger">*</span></label>
                      <input type="text" name="contracts[{{ $ci }}][name]" class="form-control form-control-sm"
                        placeholder="如：2026宜蘭適性學習分析系統" value="{{ $c['name'] ?? '' }}" required>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-contract-btn" title="移除此合約">×</button>
                  </div>
                  <div class="row g-2 mb-2">
                    <div class="col-md-3">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">開始日期 <span class="text-danger">*</span></label>
                      <input type="date" name="contracts[{{ $ci }}][start_date]" class="form-control form-control-sm"
                        value="{{ $c['start_date'] ?? '' }}" required>
                    </div>
                    <div class="col-md-3">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">結束日期 <span class="text-danger">*</span></label>
                      <input type="date" name="contracts[{{ $ci }}][end_date]" class="form-control form-control-sm"
                        value="{{ $c['end_date'] ?? '' }}" required>
                    </div>
                    <div class="col-md-3">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">專案類型 <span class="text-danger">*</span></label>
                      <select name="contracts[{{ $ci }}][project_type]" class="form-select form-select-sm" required>
                        <option value="">請選擇</option>
                        @foreach(['開發','保固','維護','其他'] as $t)
                          <option value="{{ $t }}" {{ ($c['project_type'] ?? '') === $t ? 'selected' : '' }}>{{ $t }}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-3">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">開發工具 <span class="text-danger">*</span></label>
                      <select name="contracts[{{ $ci }}][dev_tool]" class="form-select form-select-sm" required>
                        <option value="">請選擇</option>
                        @foreach(\App\Models\ProjectDevTool::labels() as $dt)
                          <option value="{{ $dt }}" {{ ($c['dev_tool'] ?? '') === $dt ? 'selected' : '' }}>{{ $dt }}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="mb-2">
                    <label class="form-label form-label-sm mb-0" style="font-size:11px;">GitLab 專案</label>
                    <select name="contracts[{{ $ci }}][gitlab_project_id]" class="form-select form-select-sm contract-gitlab-select">
                      <option value="">— 不連結 GitLab —</option>
                      @foreach($gitlabProjects as $gp)
                        <option value="{{ $gp->project_id }}"
                          {{ ($c['gitlab_project_id'] ?? '') == $gp->project_id && $gp->project_id ? 'selected' : '' }}>
                          {{ $gp->name_with_namespace }}
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="row g-2 mb-2">
                    <div class="col-md-4">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">合約金額（元）</label>
                      <input type="number" name="contracts[{{ $ci }}][contract_amount]" class="form-control form-control-sm"
                        value="{{ $c['contract_amount'] ?? '' }}" min="0" step="1" placeholder="未設定">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">評估人天</label>
                      <div class="input-group input-group-sm">
                        <input type="number" name="contracts[{{ $ci }}][estimated_man_days]" class="form-control form-control-sm"
                          value="{{ $c['estimated_man_days'] ?? '' }}" min="0" max="9999" step="0.5" placeholder="未設定">
                        <span class="input-group-text">天</span>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label form-label-sm mb-0" style="font-size:11px;">請款日期</label>
                      <input type="date" name="contracts[{{ $ci }}][invoice_date]" class="form-control form-control-sm"
                        value="{{ $c['invoice_date'] ?? '' }}">
                    </div>
                  </div>
                  <div class="mb-2">
                    <label class="form-label form-label-sm mb-0" style="font-size:11px;">備注／交付項目</label>
                    <textarea name="contracts[{{ $ci }}][notes]" class="form-control form-control-sm" rows="2"
                      placeholder="備注／交付項目">{{ $c['notes'] ?? '' }}</textarea>
                  </div>
                  <div class="mb-1">
                    <label class="form-label form-label-sm mb-0" style="font-size:11px;">定時寄送維護報告</label>
                    <select name="contracts[{{ $ci }}][send_maintenance_report]" class="form-select form-select-sm"
                      onchange="toggleContractMaint(this)">
                      <option value="0" {{ ($c['send_maintenance_report'] ?? '0') != '1' ? 'selected' : '' }}>否</option>
                      <option value="1" {{ ($c['send_maintenance_report'] ?? '0') == '1' ? 'selected' : '' }}>是</option>
                    </select>
                  </div>
                  <div class="contract-maint-extra mt-2 {{ ($c['send_maintenance_report'] ?? '0') == '1' ? '' : 'd-none' }}">
                    <div class="row g-2">
                      <div class="col-md-6">
                        <label class="form-label form-label-sm mb-0" style="font-size:11px;">寄送週期</label>
                        <select name="contracts[{{ $ci }}][maintenance_report_cycle]" class="form-select form-select-sm">
                          <option value="">請選擇</option>
                          <option value="monthly" {{ ($c['maintenance_report_cycle'] ?? '') == 'monthly' ? 'selected' : '' }}>每月</option>
                          <option value="quarterly" {{ ($c['maintenance_report_cycle'] ?? '') == 'quarterly' ? 'selected' : '' }}>每季</option>
                          <option value="semiannually" {{ ($c['maintenance_report_cycle'] ?? '') == 'semiannually' ? 'selected' : '' }}>每半年</option>
                        </select>
                        <div class="form-text" style="font-size:10px;">報告於每周期月底前 1 天自動寄出</div>
                      </div>
                      <div class="col-md-6">
                        <label class="form-label form-label-sm mb-0" style="font-size:11px;">通知信箱</label>
                        <input type="text" name="contracts[{{ $ci }}][maintenance_report_recipient]" class="form-control form-control-sm"
                          value="{{ $c['maintenance_report_recipient'] ?? '' }}" placeholder="多組信箱用逗號隔開">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              @endforeach
            </div>
            <small class="text-muted">依開始日期最新合約的資訊將自動同步為專案屬性（類型、工具、GitLab、日期）</small>
          </div>

          <button type="submit" class="btn btn-success">新增</button>
          <a href="{{ route('projects.index') }}" class="btn btn-secondary ms-2">取消</a>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
@php
  $_jsTypes   = json_encode(['開發','保固','維護','其他'], JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_AMP|JSON_HEX_QUOT);
  $_jsTools   = json_encode(\App\Models\ProjectDevTool::labels(), JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_AMP|JSON_HEX_QUOT);
  $_jsGitlab  = json_encode($gitlabProjects->map(fn($g) => ['id' => $g->project_id, 'text' => $g->name_with_namespace])->values()->all(), JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_AMP|JSON_HEX_QUOT);
@endphp
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function () {
  $('#client_id').select2({ theme: 'bootstrap-5', placeholder: '⚠ 未分類（可輸入關鍵字搜尋）', allowClear: true, width: '100%' });
  $('#parent_id').select2({ theme: 'bootstrap-5', placeholder: '— 無父專案 —', allowClear: true, width: '100%' });
  $('.contract-gitlab-select').select2({ theme: 'bootstrap-5', placeholder: '— 不連結 GitLab —', allowClear: true, width: '100%' });
});

(function () {
  let contractCounter = {{ count($contractRows) }};
  const projectTypes = {!! $_jsTypes !!};
  const devTools     = {!! $_jsTools !!};
  const gitlabOpts   = {!! $_jsGitlab !!};

  function esc(s) {
    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function typeOpts(sel) {
    return '<option value="">請選擇</option>' +
      projectTypes.map(t => `<option value="${t}"${t===sel?' selected':''}>${t}</option>`).join('');
  }
  function devOpts(sel) {
    return '<option value="">請選擇</option>' +
      devTools.map(d => `<option value="${esc(d)}"${d===sel?' selected':''}>${esc(d)}</option>`).join('');
  }
  function gitlabOpts2(selId) {
    return '<option value="">— 不連結 GitLab —</option>' +
      gitlabOpts.map(g => `<option value="${g.id}"${g.id==selId?' selected':''}>${esc(g.text)}</option>`).join('');
  }

  function addCard() {
    const idx = contractCounter++;
    const card = document.createElement('div');
    card.className = 'card contract-card mb-2';
    card.innerHTML =
      '<div class="card-body p-3">' +
        '<div class="d-flex gap-2 mb-2 align-items-end">' +
          `<input type="hidden" name="contracts[${idx}][id]" value="">` +
          '<div class="flex-grow-1">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">合約名稱 <span class="text-danger">*</span></label>' +
            `<input type="text" name="contracts[${idx}][name]" class="form-control form-control-sm" placeholder="如：2026宜蘭適性學習分析系統" required>` +
          '</div>' +
          '<button type="button" class="btn btn-sm btn-outline-danger remove-contract-btn" title="移除此合約">×</button>' +
        '</div>' +
        '<div class="row g-2 mb-2">' +
          '<div class="col-md-3">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">開始日期 <span class="text-danger">*</span></label>' +
            `<input type="date" name="contracts[${idx}][start_date]" class="form-control form-control-sm" required>` +
          '</div>' +
          '<div class="col-md-3">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">結束日期 <span class="text-danger">*</span></label>' +
            `<input type="date" name="contracts[${idx}][end_date]" class="form-control form-control-sm" required>` +
          '</div>' +
          '<div class="col-md-3">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">專案類型 <span class="text-danger">*</span></label>' +
            `<select name="contracts[${idx}][project_type]" class="form-select form-select-sm" required>${typeOpts('')}</select>` +
          '</div>' +
          '<div class="col-md-3">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">開發工具 <span class="text-danger">*</span></label>' +
            `<select name="contracts[${idx}][dev_tool]" class="form-select form-select-sm" required>${devOpts('')}</select>` +
          '</div>' +
        '</div>' +
        '<div class="mb-2">' +
          '<label class="form-label form-label-sm mb-0" style="font-size:11px;">GitLab 專案</label>' +
          `<select name="contracts[${idx}][gitlab_project_id]" class="form-select form-select-sm contract-gitlab-select">${gitlabOpts2('')}</select>` +
        '</div>' +
        '<div class="row g-2 mb-2">' +
          '<div class="col-md-4">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">合約金額（元）</label>' +
            `<input type="number" name="contracts[${idx}][contract_amount]" class="form-control form-control-sm" min="0" step="1" placeholder="未設定">` +
          '</div>' +
          '<div class="col-md-4">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">評估人天</label>' +
            '<div class="input-group input-group-sm">' +
              `<input type="number" name="contracts[${idx}][estimated_man_days]" class="form-control form-control-sm" min="0" max="9999" step="0.5" placeholder="未設定">` +
              '<span class="input-group-text">天</span>' +
            '</div>' +
          '</div>' +
          '<div class="col-md-4">' +
            '<label class="form-label form-label-sm mb-0" style="font-size:11px;">請款日期</label>' +
            `<input type="date" name="contracts[${idx}][invoice_date]" class="form-control form-control-sm">` +
          '</div>' +
        '</div>' +
        '<div class="mb-2">' +
          '<label class="form-label form-label-sm mb-0" style="font-size:11px;">備注／交付項目</label>' +
          `<textarea name="contracts[${idx}][notes]" class="form-control form-control-sm" rows="2" placeholder="備注／交付項目"></textarea>` +
        '</div>' +
        '<div class="mb-1">' +
          '<label class="form-label form-label-sm mb-0" style="font-size:11px;">定時寄送維護報告</label>' +
          `<select name="contracts[${idx}][send_maintenance_report]" class="form-select form-select-sm" onchange="toggleContractMaint(this)">` +
            '<option value="0" selected>否</option>' +
            '<option value="1">是</option>' +
          '</select>' +
        '</div>' +
        '<div class="contract-maint-extra mt-2 d-none">' +
          '<div class="row g-2">' +
            '<div class="col-md-6">' +
              '<label class="form-label form-label-sm mb-0" style="font-size:11px;">寄送週期</label>' +
              `<select name="contracts[${idx}][maintenance_report_cycle]" class="form-select form-select-sm">` +
                '<option value="">請選擇</option>' +
                '<option value="monthly">每月</option>' +
                '<option value="quarterly">每季</option>' +
                '<option value="semiannually">每半年</option>' +
              '</select>' +
              '<div class="form-text" style="font-size:10px;">報告於每周期月底前 1 天自動寄出</div>' +
            '</div>' +
            '<div class="col-md-6">' +
              '<label class="form-label form-label-sm mb-0" style="font-size:11px;">通知信箱</label>' +
              `<input type="text" name="contracts[${idx}][maintenance_report_recipient]" class="form-control form-control-sm" placeholder="多組信箱用逗號隔開">` +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
    document.getElementById('contractsList').prepend(card);
    $(card).find('.contract-gitlab-select').select2({ theme: 'bootstrap-5', placeholder: '— 不連結 GitLab —', allowClear: true, width: '100%' });
  }

  document.getElementById('addContractBtn').addEventListener('click', addCard);
  document.getElementById('contractsList').addEventListener('click', function (e) {
    const btn = e.target.closest('.remove-contract-btn');
    if (btn) btn.closest('.contract-card').remove();
  });
})();

window.toggleContractMaint = function (sel) {
  const extra = sel.closest('.card-body').querySelector('.contract-maint-extra');
  extra.classList.toggle('d-none', sel.value !== '1');
};
</script>
@endpush