@extends('layouts.app')

@section('title', '新增主機')

@push('styles')
<link href="/vendor/select2/css/select2.min.css" rel="stylesheet">
<link href="/vendor/select2/css/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<style>
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
</style>
@endpush

@section('content')
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-12 col-lg-9 col-xxl-7">

      <div class="card shadow-lg border-0 rounded-4 overflow-hidden">

        {{-- 標頭 --}}
        <div class="card-header border-0 py-4 px-5 d-flex align-items-center justify-content-between"
             style="background:linear-gradient(135deg,#f0fdf4,#dcfce7);">
          <h4 class="fw-bold mb-0 d-flex align-items-center gap-3">
            <span class="d-flex align-items-center justify-content-center rounded-3 flex-shrink-0"
                  style="width:42px;height:42px;background:#16a34a;">
              <i class="bi bi-plus-lg text-white"></i>
            </span>
            新增主機
          </h4>
          <a href="{{ route('hosts.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>返回主機清單
          </a>
        </div>

        <div class="card-body px-5 py-4">
          <form action="{{ route('hosts.store') }}" method="post" autocomplete="off">
            @csrf

            {{-- ─── 識別資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-tag-fill text-success"></i>識別資訊</div>
              <div class="row g-3">

                {{-- 關聯專案 + 主機類型 同一行 --}}
                <div class="col-md-7">
                  <label for="project_id" class="form-label small fw-semibold text-secondary">關聯專案</label>
                  <select name="project_id" id="project_id"
                    class="form-select @error('project_id') is-invalid @enderror" required>
                    <option value="">— 請選擇 —</option>
                    @foreach ($projects as $p)
                      <option value="{{ $p->id }}" {{ old('project_id') == $p->id ? 'selected' : '' }}>
                        {{ $p->client?->name ?? '未分類' }} ／ {{ $p->name }}
                      </option>
                    @endforeach
                  </select>
                  @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-5">
                  <label for="host_type" class="form-label small fw-semibold text-secondary">
                    主機類型 <span class="text-muted fw-normal">（選填）</span>
                  </label>
                  <select name="host_type" id="host_type" class="form-select">
                    <option value="">— 不指定 —</option>
                    @foreach(\App\Models\Host::TYPES as $key => $t)
                      <option value="{{ $key }}" {{ old('host_type') === $key ? 'selected' : '' }}>
                        {{ $t['label'] }}
                      </option>
                    @endforeach
                  </select>
                </div>

                {{-- 主機名稱 --}}
                <div class="col-12">
                  <label for="name" class="form-label small fw-semibold text-secondary">主機名稱</label>
                  <input type="text" name="name" id="name"
                    class="form-control @error('name') is-invalid @enderror"
                    value="{{ old('name') }}" required placeholder="例：Web 主機、DB 主機">
                  @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

              </div>
            </div>

            {{-- ─── 網路資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-hdd-network-fill text-primary"></i>網路資訊</div>
              <div class="row g-3">

                {{-- IP 位址 + Port + API 網址 同一行 --}}
                <div class="col-md-3">
                  <label for="ip_address" class="form-label small fw-semibold text-secondary">IP 位址</label>
                  <input type="text" name="ip_address" id="ip_address"
                    class="form-control font-monospace @error('ip_address') is-invalid @enderror"
                    value="{{ old('ip_address') }}" placeholder="192.168.1.1">
                  @error('ip_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-2">
                  <label for="port" class="form-label small fw-semibold text-secondary">Port</label>
                  <input type="number" name="port" id="port"
                    class="form-control @error('port') is-invalid @enderror"
                    value="{{ old('port') }}" min="1" max="65535" placeholder="22">
                  @error('port')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-7">
                  <label for="api_url" class="form-label small fw-semibold text-secondary">
                    API 網址 <span class="text-muted fw-normal">（選填）</span>
                  </label>
                  <div class="input-group">
                    <span class="input-group-text text-muted"><i class="bi bi-link-45deg"></i></span>
                    <input type="url" name="api_url" id="api_url"
                      class="form-control @error('api_url') is-invalid @enderror"
                      value="{{ old('api_url') }}" placeholder="https://example.com">
                    @error('api_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                </div>

              </div>
            </div>

            {{-- ─── 認證資訊 ─────────────────────────────── --}}
            <div class="mb-4">
              <div class="section-label"><i class="bi bi-key-fill text-warning"></i>認證資訊</div>
              <div class="row g-3">

                <div class="col-md-6">
                  <label for="username" class="form-label small fw-semibold text-secondary">帳號</label>
                  <input type="text" name="username" id="username"
                    class="form-control @error('username') is-invalid @enderror"
                    value="{{ old('username') }}" placeholder="root / admin">
                  @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                  <label for="password" class="form-label small fw-semibold text-secondary">密碼</label>
                  <div class="input-group">
                    <input type="password" name="password" id="password"
                      class="form-control @error('password') is-invalid @enderror"
                      value="{{ old('password') }}">
                    <button class="btn btn-outline-secondary" type="button" id="togglePassword" tabindex="-1">
                      <i class="bi bi-eye" id="eyeIcon"></i>
                    </button>
                  </div>
                  @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

              </div>
            </div>

            {{-- 按鈕 --}}
            <div class="d-flex justify-content-end gap-2 pt-2">
              <a href="{{ route('hosts.index') }}" class="btn btn-outline-secondary px-4">
                <i class="bi bi-x-lg me-1"></i>取消
              </a>
              <button type="submit" class="btn btn-success px-5">
                <i class="bi bi-save me-1"></i>儲存主機
              </button>
            </div>

          </form>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const pwd = document.getElementById('password');
  const btn = document.getElementById('togglePassword');
  const ico = document.getElementById('eyeIcon');
  btn.addEventListener('click', function () {
    pwd.type = pwd.type === 'password' ? 'text' : 'password';
    ico.classList.toggle('bi-eye');
    ico.classList.toggle('bi-eye-slash');
  });
});
</script>
@endsection

@push('scripts')
<script src="/vendor/select2/js/select2.min.js"></script>
<script>
$(function () {
  $('#project_id').select2({
    theme: 'bootstrap-5',
    placeholder: '— 請選擇或輸入關鍵字 —',
    allowClear: true,
    width: '100%',
  });
});
</script>
@endpush