@extends('layouts.app')
@section('title', '新增客戶')

@section('content')
<div class="container py-4" style="max-width:720px;">
  <div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('clients.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left"></i>
    </a>
    <h4 class="fw-bold mb-0">新增客戶</h4>
  </div>

  <form action="{{ route('clients.store') }}" method="POST">
    @csrf

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-body">
        <div class="fw-semibold mb-3 d-flex align-items-center gap-2">
          <i class="bi bi-person-vcard-fill text-primary"></i> 基本資料
        </div>

        <div class="mb-3">
          <label for="name" 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"
                 value="{{ old('name') }}" required>
          @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>

        <div class="row g-3 mb-3">
          <div class="col-sm-6">
            <label for="contact_person" class="form-label small fw-semibold">聯絡人</label>
            <input type="text" name="contact_person" id="contact_person"
                   class="form-control @error('contact_person') is-invalid @enderror"
                   value="{{ old('contact_person') }}">
            @error('contact_person')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>
          <div class="col-sm-6">
            <label for="phone" class="form-label small fw-semibold">電話</label>
            <input type="text" name="phone" id="phone"
                   class="form-control @error('phone') is-invalid @enderror"
                   value="{{ old('phone') }}">
            @error('phone')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>
        </div>

        <div class="mb-0">
          <label for="email" class="form-label small fw-semibold">信箱</label>
          <input type="email" name="email" id="email"
                 class="form-control @error('email') is-invalid @enderror"
                 value="{{ old('email') }}">
          @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
      </div>
    </div>

    @include('clients._location')

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-success px-4">
        <i class="bi bi-plus-lg me-1"></i>新增
      </button>
      <a href="{{ route('clients.index') }}" class="btn btn-outline-secondary">取消</a>
    </div>
  </form>
</div>
@endsection