@extends('layouts.app')
@section('title', '編輯帳號')

@push('styles')
<style>
.settings-page    { max-width: 1240px; margin: 0 auto; padding: 32px 24px 60px; }
.settings-layout  { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-sidebar { position: sticky; top: 72px; }

/* ── Sidebar user card ── */
.sidebar-user-card {
  background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  border-radius: 16px;
  padding: 20px 18px 18px;
  color: #fff;
  margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(37,99,235,.35);
}
.sidebar-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 800;
  margin-bottom: 11px;
}
.sidebar-user-name  { font-size: .95rem; font-weight: 700; margin-bottom: 2px; }
.sidebar-user-email { font-size: .7rem; opacity: .7; margin-bottom: 4px; word-break: break-all; }
.sidebar-user-dept  { display: inline-block; font-size: .68rem; background: rgba(255,255,255,.18); border-radius: 20px; padding: 2px 9px; }

/* ── Nav ── */
.settings-nav { list-style: none; padding: 4px; margin: 0; background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.settings-nav li + li { border-top: 1px solid #f3f4f6; }
.settings-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 10px;
  color: #4b5563; font-size: .835rem; font-weight: 500;
  text-decoration: none; transition: background .12s, color .12s;
}
.settings-nav a:hover  { background: #f8fafc; color: #0f172a; }
.settings-nav a.active { background: #dbeafe; color: #1e40af; font-weight: 700; }
.settings-nav a .nav-icon { width: 18px; text-align: center; font-size: .88rem; flex-shrink: 0; }

/* ── Panel switching ── */
.section-panel { display: none; }
.section-panel.active { display: block; }

/* ── Settings card ── */
.sc {
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.04);
  margin-bottom: 18px; overflow: hidden;
}
.sc-head {
  padding: 18px 24px 16px; border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 13px;
}
.sc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.sc-head-text h3 { font-size: .95rem; font-weight: 700; color: #111827; margin: 0 0 2px; }
.sc-head-text p  { font-size: .75rem; color: #9ca3af; margin: 0; }
.sc-body { padding: 22px 24px; }

/* ── Field rows ── */
.frow {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 10px 18px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid #f9fafb;
}
.frow:last-child { border-bottom: none; padding-bottom: 0; }
.frow:first-child { padding-top: 0; }
.fl { font-size: .78rem; font-weight: 600; color: #6b7280; padding-top: 8px; text-align: right; }
.fv .form-control, .fv .form-select { font-size: .875rem; }
.fv .form-text { font-size: .75rem; }

/* ── Role badge ── */
.role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700;
}

/* ── Switch rows ── */
.switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f9fafb; }
.switch-row:last-child { border-bottom: none; }
.switch-row .form-check-input { margin-top: 2px; flex-shrink: 0; }

/* ── Save bar ── */
.save-bar { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; margin-bottom: 6px; }

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .settings-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 10px; }
  .settings-nav li + li { border-top: none; border-left: 1px solid #f3f4f6; }
  .settings-nav a { white-space: nowrap; border-radius: 8px; }
  .frow { grid-template-columns: 90px 1fr; }
}
</style>
@endpush

@section('content')
@php
  $roleMeta = [
    'admin'      => ['label' => '最高管理者', 'bg' => '#fee2e2', 'color' => '#b91c1c'],
    'supervisor' => ['label' => '主管',       'bg' => '#fef3c7', 'color' => '#92400e'],
    'user'       => ['label' => '一般使用者', 'bg' => '#f0fdf4', 'color' => '#15803d'],
  ];
  $rm = $roleMeta[$user->role] ?? ['label' => $user->role, 'bg' => '#f1f5f9', 'color' => '#475569'];
@endphp

<div class="settings-page">

  <div class="mb-3">
    <a href="{{ route('users.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回帳號清單
    </a>
  </div>

  @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-4 rounded-3 border-0 py-2 shadow-sm">
      <ul class="mb-0 ps-3">
        @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <div class="settings-layout">

    {{-- ══ Sidebar ══ --}}
    <aside class="settings-sidebar">
      <div class="sidebar-user-card">
        <div class="sidebar-avatar">{{ mb_substr($user->name, 0, 1) }}</div>
        <div class="sidebar-user-name">{{ $user->name }}</div>
        <div class="sidebar-user-email">{{ $user->email }}</div>
        <span class="sidebar-user-dept">{{ $user->department ?? '未設定部門' }}</span>
      </div>

      <ul class="settings-nav">
        <li><a href="#" class="active" data-panel="basic">
          <span class="nav-icon"><i class="bi bi-person"></i></span>基本資訊
        </a></li>
        <li><a href="#" data-panel="role">
          <span class="nav-icon"><i class="bi bi-shield-person"></i></span>角色與部門
        </a></li>
        @if(auth()->user()->isAdmin())
        <li><a href="#" data-panel="attendance">
          <span class="nav-icon"><i class="bi bi-clock"></i></span>出勤設定
        </a></li>
        @endif
        <li><a href="#" data-panel="password">
          <span class="nav-icon"><i class="bi bi-key"></i></span>修改密碼
        </a></li>
      </ul>
    </aside>

    {{-- ══ Content ══ --}}
    <main>

      {{-- ── 基本資訊 ── --}}
      <div id="panel-basic" class="section-panel active">
        <form method="POST" action="{{ route('users.update', $user) }}" autocomplete="off">
          @csrf @method('PUT')
          <input type="hidden" name="_panel" value="basic">
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#dbeafe;color:#1e40af;"><i class="bi bi-person"></i></div>
              <div class="sc-head-text"><h3>基本資訊</h3><p>帳號登入資訊與顯示名稱</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="email_display" class="fl">Email</label>
                <div class="fv">
                  <input type="email" id="email_display" class="form-control" value="{{ $user->email }}" disabled
                    style="background:#f8fafc;color:#6b7280;">
                  <div class="form-text">登入帳號，不可修改</div>
                </div>
              </div>
              <div class="frow">
                <label for="name" class="fl">姓名</label>
                <div class="fv">
                  <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
                    value="{{ old('name', $user->name) }}" required>
                  @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
              <div class="frow">
                <label for="position" class="fl">職稱</label>
                <div class="fv">
                  <input type="text" id="position" name="position"
                    class="form-control @error('position') is-invalid @enderror"
                    value="{{ old('position', $user->position) }}" required>
                  @error('position')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
              <div class="frow">
                <label for="employee_no" class="fl">員工編號</label>
                <div class="fv">
                  <input type="text" id="employee_no" name="employee_no"
                    class="form-control @error('employee_no') is-invalid @enderror"
                    value="{{ old('employee_no', $user->employee_no) }}"
                    placeholder="例：EMP001" maxlength="20" style="max-width:200px;">
                  @error('employee_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <a href="{{ route('users.index') }}" class="btn btn-outline-secondary px-4">取消</a>
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── 角色與部門 ── --}}
      <div id="panel-role" class="section-panel">
        <form method="POST" action="{{ route('users.update', $user) }}" autocomplete="off">
          @csrf @method('PUT')
          <input type="hidden" name="_panel" value="role">
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-shield-person"></i></div>
              <div class="sc-head-text"><h3>角色與部門</h3><p>系統權限等級與組織分類</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <span class="fl">目前角色</span>
                <div class="fv">
                  <span class="role-badge" style="background:{{ $rm['bg'] }};color:{{ $rm['color'] }};">
                    {{ $rm['label'] }}
                  </span>
                </div>
              </div>
              @if(auth()->user()->isAdmin())
              <div class="frow">
                <label for="role" class="fl">變更角色</label>
                <div class="fv">
                  <select id="role" name="role"
                    class="form-select @error('role') is-invalid @enderror" required style="max-width:220px;">
                    <option value="user"       @selected(old('role', $user->role) === 'user')>一般使用者</option>
                    <option value="supervisor" @selected(old('role', $user->role) === 'supervisor')>主管</option>
                    <option value="admin"      @selected(old('role', $user->role) === 'admin')>最高管理者</option>
                  </select>
                  @error('role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
              @else
                <input type="hidden" name="role" value="{{ $user->role }}">
              @endif
              <div class="frow">
                <label for="department" class="fl">部門</label>
                <div class="fv">
                  <select id="department" name="department"
                    class="form-select @error('department') is-invalid @enderror" required style="max-width:220px;">
                    @foreach($departments as $dept)
                      <option value="{{ $dept }}" @selected(old('department', $user->department) === $dept)>{{ $dept }}</option>
                    @endforeach
                  </select>
                  @error('department')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── 出勤設定（管理者限定）── --}}
      @if(auth()->user()->isAdmin())
      <div id="panel-attendance" class="section-panel">
        <form method="POST" action="{{ route('users.update', $user) }}" autocomplete="off">
          @csrf @method('PUT')
          <input type="hidden" name="_panel" value="attendance">
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-clock"></i></div>
              <div class="sc-head-text"><h3>出勤設定</h3><p>班制、到職日與出勤規則（管理員限定）</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="work_schedule_group" class="fl">工作班制</label>
                <div class="fv">
                  <select id="work_schedule_group" name="work_schedule_group" class="form-select" style="max-width:280px;">
                    @foreach($groups as $g)
                    <option value="{{ $g['id'] }}"
                      @selected(old('work_schedule_group', $user->work_schedule_group ?? 'A') === $g['id'])>
                      {{ $g['id'] }} 組（{{ $g['start'] }} 上班，{{ $g['end'] }} 下班）
                    </option>
                    @endforeach
                  </select>
                  <div class="form-text">週五提早半小時下班（若出勤設定中已啟用）</div>
                </div>
              </div>
              <div class="frow">
                <label for="joined_at" class="fl">到職日</label>
                <div class="fv">
                  <input type="text" id="joined_at" name="joined_at" class="form-control" style="max-width:180px;"
                    value="{{ old('joined_at', $user->joined_at?->toDateString()) }}"
                    placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" inputmode="numeric">
                  <div class="form-text">漏打卡提醒與出勤統計的起算日</div>
                </div>
              </div>
              <div class="frow">
                <span class="fl">其他設定</span>
                <div class="fv">
                  <div class="switch-row">
                    <div class="form-check form-switch mb-0">
                      <input class="form-check-input" type="checkbox" role="switch"
                        name="attendance_exempt" value="1" id="attendanceExemptSwitch"
                        aria-checked="{{ old('attendance_exempt', $user->attendance_exempt ?? false) ? 'true' : 'false' }}"
                        {{ old('attendance_exempt', $user->attendance_exempt ?? false) ? 'checked' : '' }}>
                      <label class="form-check-label fw-semibold" for="attendanceExemptSwitch">免打卡</label>
                    </div>
                    <div class="text-muted small">主管等免打卡人員，不列入出缺席統計與工時計算</div>
                  </div>
                  <div class="switch-row">
                    <div class="form-check form-switch mb-0">
                      <input class="form-check-input" type="checkbox" role="switch"
                        name="is_contractor" value="1" id="isContractorSwitch"
                        aria-checked="{{ old('is_contractor', $user->is_contractor ?? false) ? 'true' : 'false' }}"
                        {{ old('is_contractor', $user->is_contractor ?? false) ? 'checked' : '' }}>
                      <label class="form-check-label fw-semibold" for="isContractorSwitch">委外廠商</label>
                    </div>
                    <div class="text-muted small">勾選後，出勤統計預設排除此人員</div>
                  </div>
                  <div class="switch-row">
                    <div class="form-check form-switch mb-0">
                      <input class="form-check-input" type="checkbox" role="switch"
                        name="timesheet_required" value="1" id="timesheetRequiredSwitch"
                        aria-checked="{{ old('timesheet_required', $user->timesheet_required ?? false) ? 'true' : 'false' }}"
                        {{ old('timesheet_required', $user->timesheet_required ?? false) ? 'checked' : '' }}>
                      <label class="form-check-label fw-semibold" for="timesheetRequiredSwitch">需填工時</label>
                    </div>
                    <div class="text-muted small">開啟後，工時總表必定列出此人員欄位</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>
      @endif

      {{-- ── 修改密碼 ── --}}
      <div id="panel-password" class="section-panel">
        <form method="POST" action="{{ route('users.update', $user) }}" autocomplete="off">
          @csrf @method('PUT')
          <input type="hidden" name="_panel" value="password">
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#f0fdf4;color:#15803d;"><i class="bi bi-key"></i></div>
              <div class="sc-head-text"><h3>修改密碼</h3><p>留空則保留目前密碼不變</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="password" class="fl">新密碼</label>
                <div class="fv">
                  <div class="input-group" style="max-width:380px;">
                    <input type="password" id="password" name="password"
                      class="form-control @error('password') is-invalid @enderror"
                      autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1">
                      <i class="bi bi-eye"></i>
                    </button>
                    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="form-text text-danger">至少 12 碼，需含大寫、小寫、數字、特殊字元</div>
                </div>
              </div>
              <div class="frow">
                <label for="password_confirmation" class="fl">確認密碼</label>
                <div class="fv">
                  <div class="input-group" style="max-width:380px;">
                    <input type="password" id="password_confirmation" name="password_confirmation"
                      class="form-control" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1">
                      <i class="bi bi-eye"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

    </main>
  </div>
</div>

@push('scripts')
<script>
// Panel 切換
(function () {
  const links  = document.querySelectorAll('.settings-nav a[data-panel]');
  const panels = document.querySelectorAll('.section-panel');

  function showPanel(id) {
    panels.forEach(p => p.classList.remove('active'));
    links.forEach(a => a.classList.remove('active'));
    const panel = document.getElementById('panel-' + id);
    if (panel) panel.classList.add('active');
    const link = document.querySelector(`.settings-nav a[data-panel="${id}"]`);
    if (link) link.classList.add('active');
    history.replaceState(null, '', '#' + id);
  }

  links.forEach(a => {
    a.addEventListener('click', e => { e.preventDefault(); showPanel(a.dataset.panel); });
  });

  // 還原到有錯誤的 panel
  @if($errors->any())
    @php
      $errorPanel = 'basic';
      if ($errors->has('role') || $errors->has('department')) $errorPanel = 'role';
      elseif ($errors->has('password')) $errorPanel = 'password';
    @endphp
    showPanel('{{ $errorPanel }}');
  @else
    const hash = location.hash.replace('#', '');
    if (hash && document.getElementById('panel-' + hash)) showPanel(hash);
  @endif
})();

function togglePwd(btn) {
  const input = btn.closest('.input-group').querySelector('input');
  const icon  = btn.querySelector('i');
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.replace('bi-eye', 'bi-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.replace('bi-eye-slash', 'bi-eye');
  }
}
</script>
@endpush
@endsection