@extends('layouts.app')
@section('title', '人員資料維護')

@push('styles')
<style>
.sc-table td { vertical-align: middle; }
.sc-table .form-control { max-width: 200px; }
.sc-status { font-size:.75rem; min-width:60px; display:inline-block; }
.sc-av { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#e0e7ff; color:#3730a3; font-size:.75rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.sc-none { display:none; }
</style>
@endpush

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

  <div class="d-flex align-items-center mb-3 gap-3 flex-wrap">
    <h4 class="mb-0 fw-bold"><i class="bi bi-person-vcard me-2"></i>人員資料維護</h4>
    <span class="badge bg-danger">{{ auth()->user()->role === 'admin' ? '管理員' : '座位表管理' }}</span>
    <div class="ms-auto d-flex gap-2">
      <a href="{{ route('settings.seat-maps.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-grid-3x3-gap me-1"></i>座位表設定</a>
      <a href="{{ route('contacts.index') }}" class="btn btn-sm btn-outline-secondary" target="_blank"><i class="bi bi-eye me-1"></i>通訊錄</a>
    </div>
  </div>

  <p class="text-muted small">
    手機與生日直接在欄位裡修改，離開欄位或按 Enter 會自動儲存。同仁自己也能在個人資訊修改，這裡是方便負責人統一維護。
  </p>

  <div class="d-flex gap-2 align-items-center mb-2">
    <input type="search" id="scSearch" class="form-control form-control-sm" placeholder="搜尋姓名、部門、座位…" style="max-width:300px;" autocomplete="off">
    <span class="small text-muted" id="scCount"></span>
    <span class="small text-muted ms-auto">未填手機 <strong id="scMissingPhone">{{ $users->whereNull('phone')->count() }}</strong> 人・未填生日 <strong id="scMissingBirthday">{{ $users->whereNull('birthday')->count() }}</strong> 人</span>
  </div>

  <div class="card">
    <div class="table-responsive">
      <table class="table table-sm table-hover mb-0 sc-table">
        <thead class="table-light">
          <tr>
            <th style="width:36px;"></th>
            <th>姓名</th>
            <th>部門／職稱</th>
            <th>座位</th>
            <th style="width:230px;">手機</th>
            <th style="width:190px;">生日</th>
            <th style="width:90px;"></th>
          </tr>
        </thead>
        <tbody>
          @foreach ($users as $u)
            <tr class="sc-row" data-search="{{ mb_strtolower($u->name . ' ' . ($u->department ?? '') . ' ' . ($u->position ?? '') . ' ' . ($u->seat ?? '') . ' ' . ($u->phone ?? '')) }}">
              <td>
                @if ($u->avatarUrl())<img src="{{ $u->avatarUrl() }}" class="sc-av" alt="">@else<span class="sc-av">{{ mb_substr($u->name, 0, 1) }}</span>@endif
              </td>
              <td class="fw-semibold">{{ $u->name }}</td>
              <td class="small text-muted">{{ $u->department ?? '—' }}{{ $u->position ? '・' . $u->position : '' }}</td>
              <td class="small">{{ $u->seat ?? '—' }}</td>
              <td>
                <input type="tel" class="form-control form-control-sm sc-field" data-field="phone" value="{{ $u->phone }}" data-user="{{ $u->id }}" data-orig="{{ $u->phone }}"
                       maxlength="30" placeholder="例：0912-345-678" autocomplete="off">
              </td>
              <td>
                <input type="text" class="form-control form-control-sm sc-field" data-field="birthday" value="{{ $u->birthday?->format('n/j') }}" data-user="{{ $u->id }}" data-orig="{{ $u->birthday?->format('n/j') }}"
                       maxlength="5" placeholder="月/日，例：3/15" autocomplete="off" style="max-width:130px;">
              </td>
              <td><span class="sc-status text-muted"></span></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  const CSRF = document.querySelector('meta[name="csrf-token"]').content;
  const URL_TPL = @json(route('settings.seat-maps.contacts.update', ['user' => '__ID__']));

  function refreshMissing() {
    ['phone', 'birthday'].forEach(f => {
      const inputs = [...document.querySelectorAll('.sc-field[data-field="' + f + '"]')];
      const el = document.getElementById(f === 'phone' ? 'scMissingPhone' : 'scMissingBirthday');
      if (el) el.textContent = inputs.filter(i => !i.dataset.orig).length;
    });
  }

  async function save(input) {
    const field = input.dataset.field;
    const val = input.value.trim();
    if (val === (input.dataset.orig || '')) return;
    const status = input.closest('tr').querySelector('.sc-status');
    status.className = 'sc-status text-muted'; status.textContent = '儲存中…';
    input.classList.remove('is-invalid');
    try {
      const r = await fetch(URL_TPL.replace('__ID__', input.dataset.user), {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ [field]: val })
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        input.classList.add('is-invalid');
        status.className = 'sc-status text-danger'; status.textContent = (j.errors && j.errors[field]) ? j.errors[field][0] : (j.message || '儲存失敗');
        return;
      }
      input.dataset.orig = j[field] || ''; input.value = j[field] || '';
      status.className = 'sc-status text-success'; status.textContent = '已儲存';
      setTimeout(() => { if (status.textContent === '已儲存') status.textContent = ''; }, 2000);
      refreshMissing();
    } catch (e) {
      status.className = 'sc-status text-danger'; status.textContent = '儲存失敗';
    }
  }

  document.querySelectorAll('.sc-field').forEach(input => {
    input.addEventListener('blur', () => save(input));
    input.addEventListener('change', () => { if (input.type === 'date') save(input); });
    input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); input.blur(); } });
  });

  const search = document.getElementById('scSearch'), count = document.getElementById('scCount'), rows = document.querySelectorAll('.sc-row');
  function apply() {
    const q = search.value.trim().toLowerCase(); let n = 0;
    rows.forEach(r => { const ok = !q || r.dataset.search.includes(q); r.classList.toggle('sc-none', !ok); if (ok) n++; });
    count.textContent = '共 ' + n + ' 人';
  }
  search.addEventListener('input', apply); apply();
})();
</script>
@endpush