@extends('layouts.app')
@section('title', 'Docker 主機設定')

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

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="h4 mb-0"><i class="bi bi-hdd-network me-2"></i>Docker 主機設定</h1>
      <p class="text-muted small mb-0 mt-1">管理可連線的 Docker 主機（本機 Unix Socket 或遠端 TCP）</p>
    </div>
    <a href="{{ route('docker.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>回 Docker 管理
    </a>
  </div>

  @if(session('success'))
  <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif
  @if(session('error'))
  <div class="alert alert-danger alert-dismissible fade show py-2" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif

  <div class="row g-4">

    {{-- 主機清單 --}}
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0 fw-semibold">已設定主機（{{ $hosts->count() }}）</h6>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>名稱</th>
                <th>類型</th>
                <th>連線位址</th>
                <th>備註</th>
                <th>狀態</th>
                <th style="width:110px">操作</th>
              </tr>
            </thead>
            <tbody>
              @foreach($hosts as $h)
              <tr>
                <td class="fw-medium">{{ $h->name }}</td>
                <td>
                  @if($h->type === 'local')
                    <span class="badge bg-info-subtle text-info border border-info-subtle small">本機</span>
                  @else
                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle small">TCP</span>
                  @endif
                </td>
                <td class="text-muted small font-monospace">
                  @if($h->type === 'tcp')
                    {{ $h->tcp_host }}:{{ $h->tcp_port }}
                  @else
                    /var/run/docker.sock
                  @endif
                </td>
                <td class="text-muted small">{{ $h->note ?: '—' }}</td>
                <td>
                  @if($h->is_active)
                    <span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>
                  @else
                    <span class="badge bg-secondary-subtle text-muted border small">停用</span>
                  @endif
                </td>
                <td>
                  <button class="btn btn-sm btn-outline-secondary btn-edit-host"
                    data-id="{{ $h->id }}"
                    data-name="{{ $h->name }}"
                    data-type="{{ $h->type }}"
                    data-tcp-host="{{ $h->tcp_host }}"
                    data-tcp-port="{{ $h->tcp_port }}"
                    data-note="{{ $h->note }}"
                    data-active="{{ $h->is_active ? 1 : 0 }}">
                    <i class="bi bi-pencil"></i>
                  </button>
                  <form action="{{ route('docker.hosts.destroy', $h) }}" method="POST" class="d-inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger"
                      onclick="return confirm('確定刪除「{{ $h->name }}」？')">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              @endforeach
              @if($hosts->isEmpty())
              <tr><td colspan="6" class="text-center text-muted py-4">尚無設定</td></tr>
              @endif
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {{-- 新增表單 --}}
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增 Docker 主機</h6>
        </div>
        <div class="card-body">
          <form action="{{ route('docker.hosts.store') }}" method="POST">
            @csrf
            <div class="mb-3">
              <label for="add_name" class="form-label small fw-semibold">名稱</label>
              <input type="text" name="name" id="add_name" class="form-control form-control-sm"
                placeholder="例：生產主機 A" required>
            </div>
            <div class="mb-3">
              <label for="add_type" class="form-label small fw-semibold">連線類型</label>
              <select name="type" id="add_type" class="form-select form-select-sm"
                      onchange="toggleTcpFields(this.value, 'add')">
                <option value="local">本機（Unix Socket）</option>
                <option value="tcp">遠端（TCP）</option>
              </select>
            </div>
            <div id="add_tcp_fields" style="display:none">
              <div class="mb-3">
                <label for="add_tcp_host" class="form-label small fw-semibold">主機 IP / 域名</label>
                <input type="text" name="tcp_host" id="add_tcp_host" class="form-control form-control-sm"
                  placeholder="192.168.1.10">
              </div>
              <div class="mb-3">
                <label for="add_tcp_port" class="form-label small fw-semibold">Port</label>
                <input type="number" name="tcp_port" id="add_tcp_port" class="form-control form-control-sm"
                  value="2375" min="1" max="65535">
              </div>
            </div>
            <div class="mb-3">
              <label for="add_note" class="form-label small fw-semibold">備註 <span class="text-muted fw-normal">（選填）</span></label>
              <input type="text" name="note" id="add_note" class="form-control form-control-sm">
            </div>
            <button class="btn btn-primary btn-sm w-100">建立</button>
          </form>
        </div>
      </div>

      <div class="card shadow-sm mt-3">
        <div class="card-body py-3 px-4">
          <p class="small text-muted mb-2"><i class="bi bi-info-circle me-1"></i><strong>TCP 遠端連線說明</strong></p>
          <ul class="small text-muted mb-0 ps-3">
            <li>遠端主機需啟用 Docker TCP Socket（預設 port 2375 無 TLS）</li>
            <li>建議在防火牆限制 2375 port 來源 IP</li>
            <li>生產環境建議使用 TLS（port 2376）</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

{{-- 編輯 Modal --}}
<div class="modal fade" id="editHostModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title"><i class="bi bi-pencil me-1"></i>編輯 Docker 主機</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="editHostForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-body">
          <div class="mb-3">
            <label for="edit_name" class="form-label small fw-semibold">名稱</label>
            <input type="text" name="name" id="edit_name" class="form-control form-control-sm" required>
          </div>
          <div class="mb-3">
            <label for="edit_type" class="form-label small fw-semibold">連線類型</label>
            <select name="type" id="edit_type" class="form-select form-select-sm"
                    onchange="toggleTcpFields(this.value, 'edit')">
              <option value="local">本機（Unix Socket）</option>
              <option value="tcp">遠端（TCP）</option>
            </select>
          </div>
          <div id="edit_tcp_fields">
            <div class="mb-3">
              <label for="edit_tcp_host" class="form-label small fw-semibold">主機 IP / 域名</label>
              <input type="text" name="tcp_host" id="edit_tcp_host" class="form-control form-control-sm">
            </div>
            <div class="mb-3">
              <label for="edit_tcp_port" class="form-label small fw-semibold">Port</label>
              <input type="number" name="tcp_port" id="edit_tcp_port" class="form-control form-control-sm"
                min="1" max="65535">
            </div>
          </div>
          <div class="mb-3">
            <label for="edit_note" class="form-label small fw-semibold">備註</label>
            <input type="text" name="note" id="edit_note" class="form-control form-control-sm">
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="is_active" id="edit_is_active" value="1">
            <label class="form-check-label small" for="edit_is_active">啟用</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary btn-sm">儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
function toggleTcpFields(type, prefix) {
  document.getElementById(prefix + '_tcp_fields').style.display = type === 'tcp' ? '' : 'none';
}

document.querySelectorAll('.btn-edit-host').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editHostForm');
    f.action = '{{ route("docker.hosts.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('edit_name').value     = this.dataset.name;
    document.getElementById('edit_tcp_host').value = this.dataset.tcpHost || '';
    document.getElementById('edit_tcp_port').value = this.dataset.tcpPort || '2375';
    document.getElementById('edit_note').value     = this.dataset.note || '';
    document.getElementById('edit_is_active').checked = this.dataset.active === '1';
    const typeEl = document.getElementById('edit_type');
    typeEl.value = this.dataset.type;
    toggleTcpFields(this.dataset.type, 'edit');
    new bootstrap.Modal(document.getElementById('editHostModal')).show();
  });
});
</script>
@endpush