@extends('layouts.app')
@section('title', $project->name . ' — 設定')

@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')
@include('projects._nav')

<style>
.rm5-settings{background:#f5f5f5;padding:14px 20px 40px;font-family:"Noto Sans TC",Arial,sans-serif;font-size:13px;}
.rm5-settings h3{font-size:16px;font-weight:bold;color:#333;margin:0 0 14px;padding-bottom:6px;border-bottom:2px solid #5d6880;}
.rm5-box{background:#fff;border:1px solid #d0d0d0;border-radius:2px;margin-bottom:20px;}
.rm5-box-head{background:#e4e4e4;border-bottom:1px solid #ccc;padding:6px 12px;font-size:12px;font-weight:bold;color:#444;display:flex;justify-content:space-between;align-items:center;}
.rm5-box-body{padding:14px 16px;}
.rm5-form-row{display:flex;align-items:flex-start;margin-bottom:10px;gap:0;}
.rm5-form-row label{width:160px;flex-shrink:0;padding-top:4px;font-size:12px;color:#555;text-align:right;padding-right:12px;}
.rm5-form-row .rm5-field{flex:1;min-width:0;}
.rm5-form-row input[type=text],
.rm5-form-row input[type=date],
.rm5-form-row input[type=number],
.rm5-form-row select,
.rm5-form-row textarea{border:1px solid #ccc;border-radius:2px;padding:3px 7px;font-size:13px;width:100%;box-sizing:border-box;font-family:inherit;}
.rm5-form-row select{height:28px;}
.rm5-form-row textarea{resize:vertical;min-height:70px;}
.rm5-form-row input:focus,.rm5-form-row select:focus,.rm5-form-row textarea:focus{outline:1px solid #4a90d9;border-color:#4a90d9;}
.rm5-form-hint{font-size:11px;color:#888;margin-top:3px;}
.rm5-form-error{font-size:11px;color:#c0392b;margin-top:3px;}
.rm5-submit-row{display:flex;align-items:center;gap:10px;margin-top:18px;padding-left:172px;}
.rm5-btn-submit{background:#3e75c3;border:1px solid #2d5fa0;color:#fff;padding:4px 16px;border-radius:2px;font-size:13px;cursor:pointer;}
.rm5-btn-submit:hover{background:#2d5fa0;}
.rm5-btn-cancel{background:#e8e8e8;border:1px solid #aaa;color:#333;padding:4px 14px;border-radius:2px;font-size:13px;text-decoration:none;}
.rm5-btn-cancel:hover{background:#d0d0d0;color:#222;}

/* 分類 pill toggle */
.cat-toggle{display:inline-flex;width:fit-content;border:1px solid #bbb;border-radius:20px;overflow:hidden;background:#f0f0f0;}
.cat-option{display:contents;}
.cat-option input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.cat-option span{display:block;min-width:64px;padding:4px 20px;font-size:12px;text-align:center;cursor:pointer;color:#555;transition:background .12s,color .12s;user-select:none;white-space:nowrap;}
.cat-option:not(:last-child) span{border-right:1px solid #bbb;}
.cat-option input[type=radio]:checked + span{background:#3e75c3;color:#fff;font-weight:600;}
.cat-option span:hover{background:#dde8f5;color:#2c5f9a;}
.cat-option input[type=radio]:checked + span:hover{background:#2d5fa0;color:#fff;}

/* 結束 toggle row */
.ended-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 0;}
.ended-label input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:#c0392b;}
.ended-label .ended-text{font-size:12px;color:#555;}
.ended-label input[type=checkbox]:checked ~ .ended-text{color:#c0392b;font-weight:600;}
</style>

<div class="rm5-settings">
  <h3>設定 — {{ $project->name }}</h3>

  @if($errors->any())
    <div style="background:#fde8e8;border:1px solid #e8b0b0;padding:8px 12px;border-radius:2px;margin-bottom:14px;font-size:13px;color:#c0392b;">
      <ul style="margin:0;padding-left:18px;">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
      </ul>
    </div>
  @endif

  <form action="{{ route('projects.update', $project) }}" method="POST">
    @csrf
    @method('PUT')

    {{-- 基本資訊 --}}
    <div class="rm5-box">
      <div class="rm5-box-head">基本資訊</div>
      <div class="rm5-box-body">

        <div class="rm5-form-row">
          <label for="s-name">* 系統名稱</label>
          <div class="rm5-field">
            <input type="text" id="s-name" name="name" value="{{ old('name', $project->name) }}" required>
            <div class="rm5-form-hint">去除年份的通用名稱，用於跨年分群</div>
            @error('name')<div class="rm5-form-error">{{ $message }}</div>@enderror
          </div>
        </div>

        <div class="rm5-form-row">
          <label for="s-client">* 所屬客戶</label>
          <div class="rm5-field">
            <select id="s-client" name="client_id" style="width:100%" required>
              <option value="">請選擇客戶</option>
              @foreach($clients as $c)
                <option value="{{ $c->id }}" {{ old('client_id', $project->client_id) == $c->id ? 'selected':'' }}>{{ $c->name }}</option>
              @endforeach
            </select>
            @error('client_id')<div class="rm5-form-error">{{ $message }}</div>@enderror
          </div>
        </div>

        <div class="rm5-form-row">
          <label for="s-parent">父專案</label>
          <div class="rm5-field">
            <select id="s-parent" name="parent_id" style="width:100%">
              <option value="">— 無 —</option>
              @foreach($possibleParents as $p)
                <option value="{{ $p->id }}" {{ old('parent_id', $project->parent_id) == $p->id ? 'selected':'' }}>
                  {{ $p->client?->name ?? '未分類' }} / {{ $p->name }}
                </option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="rm5-form-row">
          <span style="width:160px;flex-shrink:0;padding-top:5px;font-size:12px;color:#555;text-align:right;padding-right:12px;">* 分類</span>
          <div class="rm5-field" style="padding-top:3px;">
            <div class="cat-toggle">
              @foreach(['專案','產品'] as $cat)
                <label class="cat-option">
                  <input type="radio" name="project_category" value="{{ $cat }}"
                    {{ old('project_category', $project->project_category ?? '專案') === $cat ? 'checked' : '' }}>
                  <span>{{ $cat }}</span>
                </label>
              @endforeach
            </div>
          </div>
        </div>

        <div class="rm5-form-row">
          <span style="width:160px;flex-shrink:0;padding-top:5px;font-size:12px;color:#555;text-align:right;padding-right:12px;">結束狀態</span>
          <div class="rm5-field" style="padding-top:3px;">
            <label class="ended-label">
              <input type="checkbox" name="is_ended" value="1"
                {{ old('is_ended', $project->is_ended) ? 'checked' : '' }}>
              <span class="ended-text">手動標記為結束</span>
            </label>
            <div class="rm5-form-hint">勾選後視為已結束；若未勾選但結束日已過，系統自動視為結束</div>
          </div>
        </div>

      </div>
    </div>

    {{-- 合約 --}}
    @php
      if (old('contracts') !== null) {
        $contractRows = old('contracts');
      } else {
        $contractRows = $project->contracts->sortByDesc(fn($c) => $c->start_date?->format('Y-m-d') ?? '')->map(fn($c) => [
          'id'                           => $c->id,
          'name'                         => $c->name,
          'start_date'                   => $c->start_date?->format('Y-m-d') ?? '',
          'end_date'                     => $c->end_date?->format('Y-m-d') ?? '',
          'project_type'                 => $c->project_type ?? '',
          'dev_tool'                     => $c->dev_tool ?? '',
          'gitlab_project_id'            => $c->gitlab_project_id ?? '',
          'contract_amount'              => $c->contract_amount ?? '',
          'estimated_man_days'           => $c->estimated_man_days ?? '',
          'invoice_date'                 => $c->invoice_date?->format('Y-m-d') ?? '',
          'notes'                        => $c->notes ?? '',
          'send_maintenance_report'      => $c->send_maintenance_report ? '1' : '0',
          'maintenance_report_cycle'     => $c->maintenance_report_cycle ?? '',
          'maintenance_report_recipient' => $c->maintenance_report_recipient ?? '',
        ])->values()->all();
      }
    @endphp
    <div class="rm5-box">
      <div class="rm5-box-head">
        合約
        <button type="button" id="addContractBtn"
          style="font-size:12px;padding:2px 10px;background:#3e75c3;border:1px solid #2d5fa0;color:#fff;border-radius:2px;cursor:pointer;">
          + 新增合約
        </button>
      </div>
      <div class="rm5-box-body">
        <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>
    </div>

    <div class="rm5-submit-row">
      <button type="submit" class="rm5-btn-submit">儲存</button>
      <a href="{{ route('projects.show', $project) }}" class="rm5-btn-cancel">取消</a>
    </div>
  </form>
</div>

@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(){
  $('#s-client').select2({ theme:'bootstrap-5', placeholder:'⚠ 未分類', allowClear:true, width:'100%' });
  $('#s-parent').select2({ theme:'bootstrap-5', placeholder:'— 無父專案 —', allowClear:true, width:'100%' });
  $('.contract-gitlab-select').select2({ theme:'bootstrap-5', placeholder:'— 不連結 GitLab —', allowClear:true, width:'100%' });
});

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

(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();
  });
})();
</script>
@endpush
@endsection