@extends('layouts.app')
@section('title', '批次指派客戶')

@section('content')
<div class="container-fluid px-4 py-4">
  <div class="d-flex align-items-center mb-4 gap-3">
    <h4 class="mb-0 fw-bold">批次指派客戶</h4>
    <span class="text-muted small">選擇來源客戶，批次將專案改到正確客戶</span>
  </div>

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

  {{-- 篩選來源客戶 --}}
  <form method="GET" class="d-flex align-items-center gap-2 mb-4">
    <label class="form-label mb-0 fw-semibold" for="client_id">顯示此客戶的所有專案：</label>
    <select name="client_id" class="form-select" style="max-width:280px" onchange="this.form.submit()" id="client_id">
      <option value="0" {{ $filterId == 0 ? 'selected' : '' }}>⚠ 未分類</option>
      @foreach($clients as $c)
        <option value="{{ $c->id }}" {{ $filterId == $c->id ? 'selected' : '' }}>
          {{ $c->name }}
        </option>
      @endforeach
    </select>
    <span class="badge bg-secondary">{{ $projects->count() }} 個專案</span>
  </form>

  <form method="POST" action="{{ route('projects.reassign-client') }}">
    @csrf
    <input type="hidden" name="source_client_id" value="{{ $filterId }}">

    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-bold">
          <i class="bi bi-building me-1"></i>{{ $currentClient->name ?? '⚠ 未分類' }} 底下的專案
        </span>
        <button type="submit" class="btn btn-primary btn-sm">
          <i class="bi bi-check-lg me-1"></i>儲存所有變更
        </button>
      </div>

      @if($projects->isEmpty())
        <div class="card-body text-center text-muted py-5">
          <i class="bi bi-inbox fs-3 d-block mb-2"></i>這個客戶底下沒有專案
        </div>
      @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:40%">專案名稱</th>
              <th style="width:30%">類型</th>
              <th style="width:30%">改指派到</th>
            </tr>
          </thead>
          <tbody>
            @foreach($projects as $p)
            <tr>
              <td>
                <a href="{{ route('projects.edit', $p) }}" class="text-decoration-none fw-semibold" target="_blank">
                  {{ $p->name }}
                </a>
              </td>
              <td><span class="badge bg-secondary">{{ $p->project_type }}</span></td>
              <td>
                <select name="assignments[{{ $p->id }}]" class="form-select form-select-sm client-select">
                  <option value="">— 不變更 —</option>
                  <option value="null" {{ $p->client_id === null ? 'selected' : '' }}>⚠ 未分類</option>
                  @foreach($clients as $c)
                    <option value="{{ $c->id }}" {{ $p->client_id == $c->id ? 'selected' : '' }}>
                      {{ $c->name }}
                    </option>
                  @endforeach
                </select>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-check-lg me-1"></i>儲存所有變更
        </button>
        <small class="text-muted">選「— 不變更 —」的列不會被修改</small>
      </div>
      @endif
    </div>
  </form>
</div>
@endsection