@extends('layouts.app')
@section('title', ($req ? '安裝申請草稿 #' . $req->id : '新增安裝申請') . ' - ' . $project->name)

@php
  $me         = auth()->user();
  $oldPm      = (int) old('pm_id', $pms->first()->id ?? 0);
  // 編輯草稿時以草稿內容預填；驗證失敗返回時以 old() 為準
  $pk         = collect($req?->packages ?? []);
  $std        = $pk->where('key', '!=', 'other');
  $savedExt   = $req?->php_extensions ?? [];
  $oldPkg     = old('pkg', $std->pluck('key')->all());
  $oldVer     = old('ver', $std->pluck('version', 'key')->all());
  $oldExt     = old('php_ext', array_values(array_intersect($savedExt, $phpExtensions)));
  $oldExtOther = old('php_ext_other', implode(', ', array_diff($savedExt, $phpExtensions)));
  $oldOther   = array_values(array_filter(old('other', $pk->where('key', 'other')->values()->all()), fn ($o) => trim($o['name'] ?? '') !== '')) ?: [['name' => '', 'version' => '']];
  $oldCollab  = array_map('intval', old('collaborators', $req ? $req->collaborators->pluck('id')->all() : []));
  $isCollab   = $req && !$isOwner;
  $unconfirmed = $req ? $req->collaborators->whereNull('pivot.confirmed_at')->pluck('name')->all() : [];
  $verHints   = [
    'apache' => ['2.4'],
    'php'    => ['8.4', '8.3', '8.2', '8.1', '7.4'],
    'mysql'  => ['8.4', '8.0', '5.7'],
    'node'   => ['22 LTS', '20 LTS', '18 LTS'],
    'java'   => ['21', '17', '11', '8'],
    'python' => ['3.12', '3.11', '3.10'],
  ];
@endphp

@push('styles')
<style>
.ir-pkg-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.ir-pkg-row.checked { border-color:#93c5fd; background:#eff6ff; }
.ir-pkg-row .form-check { min-width:150px; margin:0; }
.ir-pkg-row .ir-ver { max-width:180px; }
.ir-ext-box { border:1px dashed #93c5fd; border-radius:10px; padding:12px 14px; background:#f8fbff; }
.ir-collab-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:2px 12px; max-height:220px; overflow:auto; }
.ir-ext-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:4px 12px; }
@media (prefers-color-scheme: dark) {
  .ir-pkg-row { background:#1e2330; border-color:#2e3340; }
  .ir-pkg-row.checked { background:#1e2a45; border-color:#3b5998; }
  .ir-ext-box { background:#1b2233; border-color:#3b5998; }
}
@media (max-width: 576px) {
  .ir-pkg-row { flex-wrap:wrap; }
  .ir-pkg-row .ir-ver { max-width:none; flex:1 1 100%; }
}
</style>
@endpush

@section('content')
@include('projects._nav')
<div class="container-fluid py-3 px-4" style="max-width:980px;">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0 fw-bold"><i class="bi bi-box-seam me-2"></i>
      @if($req)
        安裝申請草稿 #{{ $req->id }} <span class="badge bg-secondary align-middle">共同填寫中</span>
      @else
        新增安裝申請
      @endif
    </h5>
    <a href="{{ route('projects.install-requests.index', $project) }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回列表
    </a>
  </div>

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

  <form method="POST" action="{{ $req ? route('install-requests.update', $req) : route('projects.install-requests.store', $project) }}" id="irForm">
    @csrf
    @if($req)
      @method('PUT')
      <input type="hidden" name="lock" value="{{ $req->updated_at?->timestamp }}">
      @if(old('force'))<input type="hidden" name="force" value="1">@endif
    @endif

    {{-- 共同填寫：發起人可邀請本專案其他成員一起填，最後由發起人送出 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold d-flex flex-wrap align-items-center gap-2">
        <span><i class="bi bi-people me-1"></i>共同填寫</span>
        <span class="small text-muted fw-normal">發起人：{{ $applicant->name }}</span>
        @if($req?->lastEditor)
          <span class="small text-muted fw-normal ms-auto">最後編輯：{{ $req->lastEditor->name }}・{{ $req->updated_at->format('m/d H:i') }}</span>
        @endif
      </div>
      <div class="card-body">
        @if($req && $req->collaborators->isNotEmpty())
          <div class="d-flex flex-wrap gap-2 mb-2">
            @foreach($req->collaborators as $c)
              <span class="badge {{ $c->pivot->confirmed_at ? 'bg-success' : 'bg-light text-dark border' }}">
                <i class="bi {{ $c->pivot->confirmed_at ? 'bi-check-circle' : 'bi-hourglass-split' }} me-1"></i>{{ $c->name }}
                <span class="fw-normal">{{ $c->pivot->confirmed_at ? '已完成' : ($c->pivot->last_edited_at ? '填寫中' : '尚未填寫') }}</span>
              </span>
            @endforeach
          </div>
        @endif
        @if($isOwner)
          <div class="small text-muted mb-2">勾選要一起填寫的專案成員，按「儲存草稿」後會寄信邀請；大家填好後由您送出。不需要協作可直接送出。</div>
          @if($candidates->isEmpty())
            <div class="small text-muted">本專案沒有其他成員可邀請。</div>
          @else
            <input type="search" class="form-control form-control-sm mb-2" id="irCollabSearch" placeholder="搜尋成員姓名" style="max-width:260px">
            <div class="ir-collab-list">
              @foreach($candidates as $c)
                <label class="form-check ir-collab-item" data-name="{{ $c->name }}">
                  <input class="form-check-input" type="checkbox" name="collaborators[]" value="{{ $c->id }}" @checked(in_array($c->id, $oldCollab, true))>
                  <span class="form-check-label small">{{ $c->name }} @if($c->role_label)<span class="text-muted">（{{ $c->role_label }}）</span>@endif</span>
                </label>
              @endforeach
            </div>
          @endif
        @else
          <div class="small text-muted">{{ $applicant->name }} 邀請您一起填寫此申請。填好後請按「儲存並標記我已完成」，最後由發起人送出。</div>
        @endif
      </div>
    </div>

    {{-- 審核流程：主管申請 → 系統組主管；PM 申請 → 單位主管；工程師申請 → 單位主管 → PM → PM 主管（重複的人只審一次） --}}
    <div class="alert alert-light border small">
      <div class="d-flex flex-wrap align-items-center gap-2">
        <span><i class="bi bi-diagram-3 me-1"></i>審核流程：</span>
        @if($pms->count() > 1)
          <select name="pm_id" id="irPm" @disabled($isCollab) class="form-select form-select-sm w-auto @error('pm_id') is-invalid @enderror">
            @foreach($pms as $pm)
              <option value="{{ $pm->id }}" @selected($oldPm === $pm->id)>PM：{{ $pm->name }}</option>
            @endforeach
          </select>
        @elseif($pms->count() === 1)
          <input type="hidden" name="pm_id" value="{{ $pms->first()->id }}">
        @endif
      </div>
      @foreach($chains as $pmId => $chain)
        <div class="ir-chain mt-2" data-pm="{{ $pmId }}" @if(count($chains) > 1 && $pmId !== $oldPm) hidden @endif>
          <span class="badge bg-secondary">{{ $isOwner ? '您（申請人）' : $applicant->name . '（申請人）' }}</span>
          @foreach($chain as $st)
            <i class="bi bi-arrow-right mx-1 text-muted"></i>
            <span class="badge bg-warning text-dark">{{ $st['label'] }}：{{ $st['name'] }}</span>
          @endforeach
          <i class="bi bi-arrow-right mx-1 text-muted"></i>
          <span class="badge bg-info text-dark">系統組安裝</span>
          <i class="bi bi-arrow-right mx-1 text-muted"></i>
          <span class="badge bg-success">寄信通知申請人</span>
        </div>
      @endforeach
      @if(\App\Models\InstallRequest::isSupervisorUser($applicant))
        <div class="text-muted mt-1">申請人是主管，由系統組主管核准後即送系統組安裝。</div>
      @elseif($isPm)
        <div class="text-muted mt-1">申請人是本專案 PM，由單位主管核准後即送系統組。</div>
      @elseif($pms->isEmpty())
        <div class="text-muted mt-1">本專案尚未設定「PM人員」角色成員，僅需單位主管核准。</div>
      @endif
    </div>

    {{-- 主機資訊 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold"><i class="bi bi-hdd-network me-1"></i>主機資訊</div>
      <div class="card-body row g-3">
        <div class="col-md-5">
          <label class="form-label">目標主機（主機名稱／IP）<span class="text-danger">*</span></label>
          <input type="text" name="target_host" class="form-control @error('target_host') is-invalid @enderror"
                 value="{{ old('target_host', $req?->target_host) }}" required maxlength="255" placeholder="例：web01.example.com / 10.0.0.12">
        </div>
        <div class="col-md-4">
          <label class="form-label">作業系統</label>
          <input type="text" name="os" class="form-control" list="irOsList" value="{{ old('os', $req?->os) }}" maxlength="100" placeholder="例：Ubuntu 24.04">
          <datalist id="irOsList">
            <option value="Ubuntu 24.04"><option value="Ubuntu 22.04"><option value="Debian 12">
            <option value="Rocky Linux 9"><option value="RHEL 9"><option value="Windows Server 2022">
          </datalist>
        </div>
        <div class="col-md-3">
          <label class="form-label">希望完成日</label>
          <input type="date" name="expected_date" class="form-control" value="{{ old('expected_date', $req?->expected_date?->format('Y-m-d')) }}">
        </div>
      </div>
    </div>

    {{-- 基本安裝 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold">
        <i class="bi bi-boxes me-1"></i>基本安裝
        <span class="small text-muted fw-normal ms-1">勾選需要的項目並填寫版本</span>
      </div>
      <div class="card-body d-flex flex-column gap-2">
        @foreach($basePackages as $key => $name)
          @php $checked = in_array($key, $oldPkg, true); @endphp
          <div class="ir-pkg-row {{ $checked ? 'checked' : '' }}">
            <div class="form-check">
              <input class="form-check-input ir-pkg" type="checkbox" name="pkg[]" value="{{ $key }}" id="pkg_{{ $key }}" {{ $checked ? 'checked' : '' }}>
              <label class="form-check-label fw-semibold" for="pkg_{{ $key }}">{{ $name }}</label>
            </div>
            <input type="text" name="ver[{{ $key }}]" value="{{ $oldVer[$key] ?? '' }}" maxlength="50"
                   class="form-control form-control-sm ir-ver @error('ver.'.$key) is-invalid @enderror"
                   list="ver_{{ $key }}" placeholder="版本（必填）" {{ $checked ? '' : 'disabled' }}>
            @isset($verHints[$key])
              <datalist id="ver_{{ $key }}">@foreach($verHints[$key] as $v)<option value="{{ $v }}">@endforeach</datalist>
            @endisset
          </div>

          @if($key === 'php')
          <div class="ir-ext-box" id="phpExtBox" style="{{ $checked ? '' : 'display:none' }}">
            <div class="small fw-semibold mb-2"><i class="bi bi-puzzle me-1"></i>PHP 擴充功能</div>
            <div class="ir-ext-grid mb-2">
              @foreach($phpExtensions as $ext)
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="php_ext[]" value="{{ $ext }}" id="ext_{{ $ext }}" {{ in_array($ext, $oldExt, true) ? 'checked' : '' }}>
                  <label class="form-check-label small" for="ext_{{ $ext }}">{{ $ext }}</label>
                </div>
              @endforeach
            </div>
            <input type="text" name="php_ext_other" class="form-control form-control-sm" maxlength="255"
                   value="{{ $oldExtOther }}" placeholder="其他擴充功能，以逗號分隔（例：mongodb, swoole）">
          </div>
          @endif
        @endforeach
      </div>
    </div>

    {{-- 額外安裝 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold">
        <i class="bi bi-plus-square me-1"></i>額外安裝
        <span class="small text-muted fw-normal ms-1">版本可留空（由系統組安裝穩定版）</span>
      </div>
      <div class="card-body">
        <div class="row g-2 mb-3">
          @foreach($extraPackages as $key => $name)
            @php $checked = in_array($key, $oldPkg, true); @endphp
            <div class="col-md-6">
              <div class="ir-pkg-row {{ $checked ? 'checked' : '' }}">
                <div class="form-check">
                  <input class="form-check-input ir-pkg" type="checkbox" name="pkg[]" value="{{ $key }}" id="pkg_{{ $key }}" {{ $checked ? 'checked' : '' }}>
                  <label class="form-check-label" for="pkg_{{ $key }}">{{ $name }}</label>
                </div>
                <input type="text" name="ver[{{ $key }}]" value="{{ $oldVer[$key] ?? '' }}" maxlength="50"
                       class="form-control form-control-sm ir-ver" list="ver_{{ $key }}" placeholder="版本" {{ $checked ? '' : 'disabled' }}>
                @isset($verHints[$key])
                  <datalist id="ver_{{ $key }}">@foreach($verHints[$key] as $v)<option value="{{ $v }}">@endforeach</datalist>
                @endisset
              </div>
            </div>
          @endforeach
        </div>

        <div class="small fw-semibold mb-2">其他軟體</div>
        <div id="irOtherRows" class="d-flex flex-column gap-2">
          @foreach($oldOther as $i => $o)
          <div class="d-flex gap-2 ir-other-row">
            <input type="text" name="other[{{ $i }}][name]" value="{{ $o['name'] ?? '' }}" class="form-control form-control-sm" maxlength="100" placeholder="軟體名稱（例：Elasticsearch）">
            <input type="text" name="other[{{ $i }}][version]" value="{{ $o['version'] ?? '' }}" class="form-control form-control-sm" style="max-width:180px" maxlength="50" placeholder="版本">
            <button type="button" class="btn btn-sm btn-outline-danger ir-other-del" title="移除"><i class="bi bi-x-lg"></i></button>
          </div>
          @endforeach
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="irOtherAdd"><i class="bi bi-plus-lg me-1"></i>新增一列</button>
      </div>
    </div>

    {{-- 安裝方法 / 原因 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold"><i class="bi bi-journal-text me-1"></i>安裝方法與說明</div>
      <div class="card-body row g-3">
        <div class="col-12">
          <label class="form-label">其他安裝項目／安裝方法</label>
          <textarea name="install_notes" rows="5" class="form-control" maxlength="5000"
                    placeholder="例：需設定 Apache VirtualHost 指向 /var/www/app/public、開啟 mod_rewrite；或貼上安裝步驟、套件來源、設定需求等">{{ old('install_notes', $req?->install_notes) }}</textarea>
        </div>
        <div class="col-12">
          <label class="form-label">申請原因</label>
          <textarea name="reason" rows="2" class="form-control" maxlength="2000" placeholder="例：專案上線前建置測試環境">{{ old('reason', $req?->reason) }}</textarea>
        </div>
      </div>
    </div>

    <div class="d-flex flex-wrap justify-content-end gap-2 mb-5">
      @if($req && $isOwner)
        <button type="submit" form="irDeleteForm" class="btn btn-outline-danger me-auto" formnovalidate
                onclick="return confirm('確定刪除此草稿？協作者填寫的內容也會一併刪除。')"><i class="bi bi-trash me-1"></i>刪除草稿</button>
      @endif
      <a href="{{ route('projects.install-requests.index', $project) }}" class="btn btn-outline-secondary">{{ $req ? '返回' : '取消' }}</a>
      @if($isCollab)
        <button type="submit" name="submit_action" value="draft" class="btn btn-outline-primary" formnovalidate><i class="bi bi-save me-1"></i>儲存</button>
        <button type="submit" name="submit_action" value="confirm" class="btn btn-success" formnovalidate><i class="bi bi-check2-circle me-1"></i>儲存並標記我已完成</button>
      @else
        <button type="submit" name="submit_action" value="draft" class="btn btn-outline-primary" formnovalidate><i class="bi bi-save me-1"></i>儲存草稿</button>
        <button type="submit" name="submit_action" value="submit" class="btn btn-primary"
                @if($unconfirmed) data-unconfirmed="{{ implode('、', $unconfirmed) }}" @endif>
          <i class="bi bi-send me-1"></i>送出申請</button>
      @endif
    </div>
  </form>
  @if($req && $isOwner)
    <form method="POST" action="{{ route('install-requests.destroy', $req) }}" id="irDeleteForm">@csrf @method('DELETE')</form>
  @endif
</div>
@endsection

@push('scripts')
<script>
document.querySelector('[data-unconfirmed]')?.addEventListener('click', e => {
  if (!confirm('以下協作者尚未標記完成：' + e.currentTarget.dataset.unconfirmed + '\n確定要送出申請？')) e.preventDefault();
});
document.getElementById('irCollabSearch')?.addEventListener('input', e => {
  const q = e.target.value.trim().toLowerCase();
  document.querySelectorAll('.ir-collab-item').forEach(el => { el.hidden = q && !el.dataset.name.toLowerCase().includes(q); });
});
document.getElementById('irPm')?.addEventListener('change', e => {
  document.querySelectorAll('.ir-chain').forEach(el => { el.hidden = el.dataset.pm !== e.target.value; });
});
(function () {
  function sync(cb) {
    var row = cb.closest('.ir-pkg-row');
    var ver = row.querySelector('.ir-ver');
    row.classList.toggle('checked', cb.checked);
    ver.disabled = !cb.checked;
    var isBase = ['apache', 'php', 'mysql'].indexOf(cb.value) !== -1;
    ver.required = cb.checked && isBase;
    if (cb.checked) ver.focus();
    if (cb.value === 'php') document.getElementById('phpExtBox').style.display = cb.checked ? '' : 'none';
  }
  document.querySelectorAll('.ir-pkg').forEach(function (cb) {
    cb.addEventListener('change', function () { sync(cb); });
    if (cb.checked) {
      var ver = cb.closest('.ir-pkg-row').querySelector('.ir-ver');
      ver.required = ['apache', 'php', 'mysql'].indexOf(cb.value) !== -1;
    }
  });

  var rows = document.getElementById('irOtherRows');
  var idx = rows.querySelectorAll('.ir-other-row').length;
  document.getElementById('irOtherAdd').addEventListener('click', function () {
    var div = document.createElement('div');
    div.className = 'd-flex gap-2 ir-other-row';
    div.innerHTML =
      '<input type="text" name="other[' + idx + '][name]" class="form-control form-control-sm" maxlength="100" placeholder="軟體名稱">' +
      '<input type="text" name="other[' + idx + '][version]" class="form-control form-control-sm" style="max-width:180px" maxlength="50" placeholder="版本">' +
      '<button type="button" class="btn btn-sm btn-outline-danger ir-other-del" title="移除"><i class="bi bi-x-lg"></i></button>';
    rows.appendChild(div);
    idx++;
    div.querySelector('input').focus();
  });
  rows.addEventListener('click', function (e) {
    var btn = e.target.closest('.ir-other-del');
    if (!btn) return;
    var row = btn.closest('.ir-other-row');
    if (rows.querySelectorAll('.ir-other-row').length > 1) row.remove();
    else row.querySelectorAll('input').forEach(function (i) { i.value = ''; });
  });
})();
</script>
@endpush