@extends('layouts.app')

@section('title', isset($generator) ? '編輯手冊產生器' : '新增手冊產生器')

@push('styles')
<style>
.section-card .card-header {
  background: #f8f9fa;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #555;
  border-bottom: 1px solid #eee;
}
.section-card .card-header i { opacity: .7; }
.account-row td { vertical-align: middle; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4 px-4" style="max-width:1100px;">

  <div class="d-flex align-items-center mb-4 gap-3">
    <a href="{{ route('manual-generators.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left"></i>
    </a>
    <div>
      <h4 class="mb-0 fw-bold">{{ isset($generator) ? '編輯手冊產生器' : '新增手冊產生器' }}</h4>
      <div class="text-muted small mt-1">設定來源倉庫、目標網站與登入帳號</div>
    </div>
  </div>

  @if($errors->any())
    <div class="alert alert-danger py-2 mb-3">
      <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
  @endif

  <form method="POST"
        action="{{ isset($generator) ? route('manual-generators.update', $generator) : route('manual-generators.store') }}">
    @csrf
    @if(isset($generator)) @method('PUT') @endif

    <div class="row g-4">

      {{-- 左欄 --}}
      <div class="col-lg-7">

        {{-- 基本資訊 --}}
        <div class="card border-0 shadow-sm section-card mb-4">
          <div class="card-header py-2 px-3">
            <i class="bi bi-info-circle me-2"></i>基本資訊
          </div>
          <div class="card-body px-3 pt-3 pb-3">
            <div class="row g-3">
              <div class="col-8">
                <label class="form-label small fw-semibold">名稱 <span class="text-danger">*</span></label>
                <input type="text" name="name" id="name"
                       class="form-control @error('name') is-invalid @enderror"
                       placeholder="例：Steps Portal 手冊"
                       value="{{ old('name', $generator->name ?? '') }}" required>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-4">
                <label class="form-label small fw-semibold" for="project_id">綁定專案</label>
                <select name="project_id" id="project_id" class="form-select">
                  <option value="">— 不綁定 —</option>
                  @foreach($projects as $p)
                  <option value="{{ $p->id }}"
                    {{ old('project_id', $generator->project_id ?? '') == $p->id ? 'selected' : '' }}>
                    {{ $p->name }}
                  </option>
                  @endforeach
                </select>
              </div>
              <div class="col-12">
                <label class="form-label small fw-semibold" for="notes">備註</label>
                <textarea name="notes" id="notes" class="form-control" rows="2"
                          placeholder="簡短說明用途...">{{ old('notes', $generator->notes ?? '') }}</textarea>
              </div>
            </div>
          </div>
        </div>

        {{-- GitLab --}}
        <div class="card border-0 shadow-sm section-card mb-4">
          <div class="card-header py-2 px-3">
            <i class="bi bi-git me-2 text-warning"></i>GitLab 原始碼倉庫
          </div>
          <div class="card-body px-3 pt-3 pb-3">
            <div class="mb-3">
              <label class="form-label small fw-semibold" for="gitlabSelect">從倉庫選擇</label>
              <select id="gitlabSelect" class="form-select">
                <option value="">— 選擇倉庫 —</option>
                @php $linkedIds = $projects->pluck('gitlab_project_id')->filter()->flip(); @endphp
                @if($projects->where('gitlab_project_id', '!=', null)->count())
                <optgroup label="Portal 已連結專案">
                  @foreach($projects as $p)
                    @if($p->gitlab_project_id)
                    @php $url = $cloneUrls[$p->gitlab_project_id] ?? ''; @endphp
                    <option value="{{ $url }}" data-gid="{{ $p->gitlab_project_id }}"
                            {{ (old('source_ref', $generator->source_ref ?? '') === $url && $url) ? 'selected' : '' }}>
                      {{ $p->name }}
                    </option>
                    @endif
                  @endforeach
                </optgroup>
                @endif
                @if($allGitlabRepos->count())
                <optgroup label="git.steps.tw 所有倉庫">
                  @foreach($allGitlabRepos as $repo)
                    @if(!isset($linkedIds[$repo['project_id']]))
                    <option value="{{ $repo['http_url_to_repo'] }}" data-gid="{{ $repo['project_id'] }}"
                            {{ old('source_ref', $generator->source_ref ?? '') === $repo['http_url_to_repo'] ? 'selected' : '' }}>
                      {{ $repo['name_with_namespace'] }}
                    </option>
                    @endif
                  @endforeach
                </optgroup>
                @endif
              </select>
            </div>
            <div class="row g-3">
              <div class="col-9">
                <label class="form-label small fw-semibold" for="sourceRef">Clone URL</label>
                <input type="url" name="source_ref" id="sourceRef"
                       class="form-control font-monospace @error('source_ref') is-invalid @enderror"
                       placeholder="https://git.steps.tw/group/repo.git"
                       value="{{ old('source_ref', $generator->source_ref ?? '') }}">
                @error('source_ref')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-3">
                <label class="form-label small fw-semibold" for="branch">分支</label>
                <input type="text" name="branch" id="branch" class="form-control"
                       placeholder="main"
                       value="{{ old('branch', $generator->branch ?? 'main') }}">
              </div>
            </div>
            <input type="hidden" name="gitlab_project_id" id="gitlabProjectId"
                   value="{{ old('gitlab_project_id', $generator->gitlab_project_id ?? '') }}">
          </div>
        </div>

        {{-- 目標網站 --}}
        <div class="card border-0 shadow-sm section-card">
          <div class="card-header py-2 px-3">
            <i class="bi bi-globe me-2 text-success"></i>目標網站
          </div>
          <div class="card-body px-3 pt-3 pb-3">
            <label class="form-label small fw-semibold" for="site_url">網站 URL</label>
            <input type="url" name="site_url" id="site_url"
                   class="form-control @error('site_url') is-invalid @enderror"
                   placeholder="https://example.com"
                   value="{{ old('site_url', $generator->site_url ?? '') }}">
            <div class="form-text">登入帳號將使用此網址進行自動化操作</div>
            @error('site_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>

      </div>

      {{-- 右欄：帳號組 --}}
      <div class="col-lg-5">
        <div class="card border-0 shadow-sm section-card h-100" style="min-height:360px;">
          <div class="card-header py-2 px-3 d-flex align-items-center justify-content-between">
            <span><i class="bi bi-people me-2 text-primary"></i>登入帳號</span>
            <button type="button" class="btn btn-sm btn-primary py-0 px-3" id="addAccount">
              <i class="bi bi-plus-lg me-1"></i>新增
            </button>
          </div>
          <div class="card-body p-0">
            <div class="text-muted small px-3 pt-2 pb-1" style="background:#fafafa;border-bottom:1px solid #f0f0f0;">
              每組帳號對應一種手冊類型，產生時選擇要使用的帳號。
            </div>
            <div id="accountList" class="p-3 d-flex flex-column gap-3">
              @php $existingAccounts = old('accounts', isset($generator) ? $generator->accounts->toArray() : []); @endphp
              @foreach($existingAccounts as $i => $acc)
              <div class="account-item border rounded-2 p-3 bg-white position-relative">
                <input type="hidden" name="accounts[{{ $i }}][id]" value="{{ $acc['id'] ?? '' }}">
                <div class="d-flex align-items-center justify-content-between mb-2">
                  <select name="accounts[{{ $i }}][manual_type]" class="form-select form-select-sm w-auto">
                    <option value="user"   {{ ($acc['manual_type'] ?? 'user') === 'user'   ? 'selected' : '' }}>📄 使用手冊</option>
                    <option value="admin"  {{ ($acc['manual_type'] ?? '') === 'admin'  ? 'selected' : '' }}>🔧 管理者手冊</option>
                    <option value="custom" {{ ($acc['manual_type'] ?? '') === 'custom' ? 'selected' : '' }}>✏️ 自訂</option>
                  </select>
                  <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2 remove-account">
                    <i class="bi bi-trash"></i>
                  </button>
                </div>
                <div class="row g-2">
                  <div class="col-12">
                    <input type="text" name="accounts[{{ $i }}][label]"
                           class="form-control form-control-sm"
                           placeholder="標籤名稱，例：一般使用者"
                           value="{{ $acc['label'] ?? '' }}" required>
                  </div>
                  <div class="col-6">
                    <input type="text" name="accounts[{{ $i }}][username]"
                           class="form-control form-control-sm"
                           placeholder="帳號"
                           value="{{ $acc['username'] ?? '' }}">
                  </div>
                  <div class="col-6">
                    <input type="password" name="accounts[{{ $i }}][password]"
                           class="form-control form-control-sm"
                           placeholder="{{ isset($acc['id']) ? '留空不變更' : '密碼' }}">
                  </div>
                </div>
              </div>
              @endforeach
            </div>
            <div id="noAccountHint" class="text-muted text-center py-5 {{ count($existingAccounts) ? 'd-none' : '' }}">
              <i class="bi bi-person-plus" style="font-size:1.8rem;opacity:.3;"></i>
              <div class="small mt-2">尚無帳號<br>點「新增」加入</div>
            </div>
          </div>
        </div>
      </div>

    </div>{{-- /row --}}

    <div class="d-flex gap-2 mt-4">
      <button type="submit" class="btn btn-primary px-4">
        <i class="bi bi-check-lg me-1"></i>{{ isset($generator) ? '儲存變更' : '建立' }}
      </button>
      <a href="{{ route('manual-generators.index') }}" class="btn btn-outline-secondary px-4">取消</a>
    </div>

  </form>
</div>
@endsection

@push('scripts')
<script>
(function () {
  document.getElementById('gitlabSelect').addEventListener('change', function () {
    const opt = this.selectedOptions[0];
    document.getElementById('sourceRef').value = opt.value || '';
    document.getElementById('gitlabProjectId').value = opt.dataset.gid || '';
  });

  let rowIdx = {{ count($existingAccounts ?? []) }};

  document.getElementById('addAccount').addEventListener('click', function () {
    const i = rowIdx++;
    const div = document.createElement('div');
    div.className = 'account-item border rounded-2 p-3 bg-white position-relative';
    div.innerHTML = `
      <input type="hidden" name="accounts[${i}][id]" value="">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <select name="accounts[${i}][manual_type]" class="form-select form-select-sm w-auto">
          <option value="user">📄 使用手冊</option>
          <option value="admin">🔧 管理者手冊</option>
          <option value="custom">✏️ 自訂</option>
        </select>
        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2 remove-account">
          <i class="bi bi-trash"></i>
        </button>
      </div>
      <div class="row g-2">
        <div class="col-12">
          <input type="text" name="accounts[${i}][label]" class="form-control form-control-sm"
                 placeholder="標籤名稱，例：一般使用者" required>
        </div>
        <div class="col-6">
          <input type="text" name="accounts[${i}][username]" class="form-control form-control-sm"
                 placeholder="帳號">
        </div>
        <div class="col-6">
          <input type="password" name="accounts[${i}][password]" class="form-control form-control-sm"
                 placeholder="密碼">
        </div>
      </div>`;
    document.getElementById('accountList').appendChild(div);
    document.getElementById('noAccountHint').classList.add('d-none');
    div.querySelector('input[type=text]').focus();
  });

  document.getElementById('accountList').addEventListener('click', function (e) {
    const btn = e.target.closest('.remove-account');
    if (!btn) return;
    btn.closest('.account-item').remove();
    if (!document.querySelectorAll('.account-item').length) {
      document.getElementById('noAccountHint').classList.remove('d-none');
    }
  });
})();
</script>
@endpush