@extends('layouts.app')
@section('title', '通訊錄')

@push('styles')
<style>
.ct-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.ct-toolbar .form-control { max-width: 320px; }
.ct-dept-chip { border:1px solid #d1d5db; background:#fff; color:#374151; border-radius:999px; padding:.2rem .75rem; font-size:.8rem; cursor:pointer; }
.ct-dept-chip.active { background:#1e40af; border-color:#1e40af; color:#fff; }
.ct-group-title { font-weight:700; font-size:.95rem; margin:1.25rem 0 .5rem; color:#1f2937; display:flex; align-items:center; gap:.5rem; }
.ct-group-title .badge { font-weight:500; }
.ct-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.75rem; }
.ct-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.85rem 1rem; display:flex; gap:.85rem; align-items:flex-start; transition:box-shadow .15s; }
.ct-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.ct-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#e0e7ff; color:#3730a3; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.ct-name { font-weight:600; font-size:1rem; color:#111827; text-decoration:none; }
.ct-name:hover { text-decoration:underline; }
.ct-sub { font-size:.78rem; color:#6b7280; margin-bottom:.35rem; }
.ct-line { font-size:.82rem; color:#374151; display:flex; align-items:center; gap:.4rem; line-height:1.6; min-width:0; }
.ct-line i { color:#9ca3af; width:14px; text-align:center; flex-shrink:0; }
.ct-line a { color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-line a:hover { color:#1e40af; text-decoration:underline; }
.ct-empty { color:#9ca3af; }
.ct-bday { background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:.6rem 1rem; font-size:.85rem; color:#9a3412; margin-bottom:1rem; }
.ct-bday .ct-bday-item { display:inline-block; margin-right:.9rem; }
.ct-bday .ct-bday-item strong { color:#7c2d12; }
.ct-none { display:none; }
#ctNoResult { display:none; }
@media (max-width:576px) { .ct-toolbar .form-control { max-width:100%; width:100%; } }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4">

  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <h4 class="fw-bold mb-0"><i class="bi bi-journal-text me-2"></i>通訊錄</h4>
    <div class="d-flex align-items-center gap-3 flex-wrap">
      <div class="text-muted small">
        資料來自每個人的<a href="{{ route('profile.edit') }}" class="ms-1">個人資訊</a>，手機／生日／座位請到個人資訊自行填寫
      </div>
      <div class="btn-group btn-group-sm" role="group">
        <a href="{{ route('contacts.index') }}" class="btn btn-primary"><i class="bi bi-person-lines-fill me-1"></i>人員列表</a>
        <a href="{{ route('contacts.seat-map') }}" class="btn btn-outline-primary"><i class="bi bi-grid-3x3-gap me-1"></i>座位表</a>
      </div>
    </div>
  </div>

  @if ($birthdayThisMonth->isNotEmpty())
    <div class="ct-bday">
      <i class="bi bi-cake2 me-1"></i><strong>{{ now()->month }} 月壽星</strong>：
      @foreach ($birthdayThisMonth as $u)
        <span class="ct-bday-item"><strong>{{ $u->birthday->format('n/j') }}</strong> {{ $u->name }}</span>
      @endforeach
    </div>
  @endif

  <div class="ct-toolbar">
    <input type="search" id="ctSearch" class="form-control" placeholder="搜尋姓名、Email、手機、職稱、座位…" autocomplete="off">
    <span class="ct-dept-chip active" data-dept="">全部</span>
    @foreach ($departments as $d)
      <span class="ct-dept-chip" data-dept="{{ $d }}">{{ $d }}</span>
    @endforeach
    <span class="text-muted small ms-auto" id="ctCount"></span>
  </div>

  @foreach ($groups as $dept => $members)
    <div class="ct-group" data-dept="{{ $dept }}">
      <div class="ct-group-title">
        <i class="bi bi-people-fill text-primary"></i>{{ $dept }}
        <span class="badge bg-light text-secondary border">{{ $members->count() }}</span>
      </div>
      <div class="ct-grid">
        @foreach ($members as $u)
          @php
            $haystack = mb_strtolower(implode(' ', array_filter([
              $u->name, $u->email, $u->phone, $u->position, $u->seat, $dept,
              $u->birthday?->format('m/d'), $u->birthday?->format('n/j'),
            ])));
          @endphp
          @php
            // portal 沒有個人主頁（profile.show），有這條路由才給連結
            $pu = Route::has('profile.show') ? route('profile.show', $u) : 'javascript:void(0)';
          @endphp
          <div class="ct-card" data-search="{{ $haystack }}">
            @if ($u->avatarUrl())
              <a href="{{ $pu }}"><img src="{{ $u->avatarUrl() }}" class="ct-avatar" alt=""></a>
            @else
              <a href="{{ $pu }}" class="ct-avatar">{{ mb_substr($u->name, 0, 1) }}</a>
            @endif
            <div style="min-width:0;flex:1;">
              <a href="{{ $pu }}" class="ct-name">{{ $u->name }}</a>
              <div class="ct-sub">{{ $u->position ?: '—' }}</div>
              <div class="ct-line"><i class="bi bi-envelope"></i><a href="mailto:{{ $u->email }}" title="{{ $u->email }}">{{ $u->email }}</a></div>
              <div class="ct-line"><i class="bi bi-phone"></i>
                @if ($u->phone)<a href="tel:{{ $u->phone }}">{{ $u->phone }}</a>@else<span class="ct-empty">未填寫</span>@endif
              </div>
              <div class="ct-line"><i class="bi bi-cake2"></i>
                @if ($u->birthday)<span>{{ $u->birthday->format('n/j') }}</span>@else<span class="ct-empty">未填寫</span>@endif
              </div>
              <div class="ct-line"><i class="bi bi-geo-alt"></i>
                @if ($u->seat)<span>{{ $u->seat }}</span>@else<span class="ct-empty">未填寫</span>@endif
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  @endforeach

  <div id="ctNoResult" class="text-center text-muted py-5">
    <i class="bi bi-search fs-3 d-block mb-2"></i>找不到符合的同仁
  </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
  const input  = document.getElementById('ctSearch');
  const chips  = document.querySelectorAll('.ct-dept-chip');
  const groups = document.querySelectorAll('.ct-group');
  const count  = document.getElementById('ctCount');
  const noRes  = document.getElementById('ctNoResult');
  let dept = '';

  function apply() {
    const q = input.value.trim().toLowerCase();
    let shown = 0;
    groups.forEach(g => {
      const deptOk = !dept || g.dataset.dept === dept;
      let visibleInGroup = 0;
      g.querySelectorAll('.ct-card').forEach(c => {
        const ok = deptOk && (!q || c.dataset.search.includes(q));
        c.classList.toggle('ct-none', !ok);
        if (ok) visibleInGroup++;
      });
      g.classList.toggle('ct-none', visibleInGroup === 0);
      shown += visibleInGroup;
    });
    count.textContent = '共 ' + shown + ' 人';
    noRes.style.display = shown === 0 ? '' : 'none';
  }

  input.addEventListener('input', apply);
  chips.forEach(ch => ch.addEventListener('click', () => {
    chips.forEach(c => c.classList.remove('active'));
    ch.classList.add('active');
    dept = ch.dataset.dept;
    apply();
  }));
  apply();
})();
</script>
@endpush