@extends('layouts.app')

@section('title', '匯入主機清單')

@push('styles')
  <style>
    .main-content-xl {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width:1400px) {
      .main-content-xl {
        max-width: 100%;
      }
    }

    .example-pre {
      border-radius: 1rem;
      font-size: 1rem;
      background: var(--bs-light, #f8f9fa);
      color: var(--bs-dark, #24292f);
      border: 1px solid var(--bs-border-color, #e0e0e0);
    }

    @media (prefers-color-scheme: dark) {
      .example-pre {
        background: #23272c;
        color: #d5d8db;
        border-color: #444;
      }
    }
  </style>
@endpush

@section('content')
  <div class="container py-5">
    <div class="main-content-xl">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-10 col-xxl-8">
          <div class="card shadow-lg border-0 rounded-4 p-0 mb-4" style="overflow:hidden;">
            <div class="card-header bg-white py-4 px-5 border-bottom-0" style="border-radius:2rem 2rem 0 0;">
              <h1 class="fw-bold mb-0 fs-2 d-flex align-items-center" style="letter-spacing:0.05em;">
                <i class="bi bi-upload me-3 text-info" style="font-size:2rem;"></i>匯入主機清單
              </h1>
            </div>
            <div class="card-body p-5">
              @if ($errors->any())
                <div class="alert alert-danger mb-4">
                  <ul class="mb-0">
                    @foreach ($errors->all() as $err)
                      <li>{{ $err }}</li>
                    @endforeach
                  </ul>
                </div>
              @endif

              @if (session('success'))
                <div class="alert alert-success mb-4">
                  <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                </div>
              @endif

              <form action="{{ route('hosts.import') }}" method="POST" enctype="multipart/form-data" class="mb-4">
                @csrf
                <div class="mb-3">
                  <label for="file" class="form-label fw-semibold">
                    <i class="bi bi-file-earmark-spreadsheet me-1 text-primary"></i>選擇 CSV 檔案
                  </label>
                  <input type="file" name="file" id="file"
                    class="form-control @error('file') is-invalid @enderror" accept=".csv">
                  @error('file')
                    <div class="invalid-feedback">{{ $message }}</div>
                  @enderror
                </div>
                <button type="submit"
                  class="btn btn-success px-4 py-2 fs-5 rounded-3 shadow-sm d-flex align-items-center">
                  <i class="bi bi-upload me-2"></i>上傳並匯入
                </button>
              </form>
              <hr class="my-5">
              <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h4 mb-0"><i class="bi bi-info-circle me-2 text-secondary"></i>CSV 範例格式</h2>
                <a href="{{ route('hosts.import.sample') }}" class="btn btn-outline-primary btn-sm">
                  <i class="bi bi-download me-1"></i>下載範例檔
                </a>
              </div>
              <p class="mb-2">第一列請包含以下欄位（順序可調，但欄位名稱一定要相同）：</p>
              <ul class="mb-3">
                <li><code>name</code>：主機名稱（必填）</li>
                <li><code>api_url</code>：API 位址（必填）</li>
                <li><code>project_id</code>：所屬專案 ID（必填）</li>
                <li><code>username</code>：主機帳號（選填）</li>
                <li><code>password</code>：主機密碼（選填）</li>
                <li><code>port</code>：連線 Port（選填）</li>
              </ul>
              <div>
                <div class="fw-semibold mb-2 text-secondary">
                  <i class="bi bi-filetype-csv me-2"></i>範例檔案 hosts_import_example.csv
                </div>
                <pre class="example-pre p-3 mb-0">
name,api_url,project_id,username,password,port
Web Server,https://example.com/api,1,admin,secret123,443
DB Server,https://db.example.com/api,2,,,
              </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection