@extends('layouts.app')
@section('title', $module->name . ' — 功能權限')

@push('styles')
<style>
.pm-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.pm-breadcrumb { font-size: .82rem; color: #94a3b8; margin-bottom: 24px; }
.pm-breadcrumb a { color: #6366f1; text-decoration: none; }
.pm-breadcrumb a:hover { text-decoration: underline; }

.pm-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
}
.pm-card-head {
  padding: 24px 28px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pm-module-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.015em;
}
.pm-module-sub { font-size: .8rem; color: #94a3b8; margin-top: 3px; }

.pm-stats {
  display: flex;
  gap: 8px;
}
.pm-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 16px;
  text-align: center;
}
.pm-stat-n  { font-size: 1.3rem; font-weight: 800; color: #0f172a; line-height: 1; }
.pm-stat-lbl{ font-size: .7rem; color: #94a3b8; margin-top: 3px; }

.pm-user-list { padding: 8px 0; }

.pm-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.pm-user-row:last-child { border-bottom: none; }
.pm-user-row:hover { background: #f8fafc; }

.pm-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700;
  flex-shrink: 0;
}
.pm-avatar.admin  { background: #fee2e2; color: #b91c1c; }
.pm-avatar.super  { background: #fef3c7; color: #b45309; }

.pm-user-name { font-size: .9rem; font-weight: 600; color: #1e293b; }
.pm-user-meta { font-size: .76rem; color: #94a3b8; margin-top: 2px; }

.pm-role-badge {
  font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  display: inline-block;
}
.pm-role-admin { background: #fee2e2; color: #b91c1c; }
.pm-role-super { background: #fef3c7; color: #b45309; }
.pm-role-user  { background: #f1f5f9; color: #475569; }

/* Toggle switch */
.pm-toggle {
  position: relative;
  display: inline-block;
  width: 46px; height: 26px;
  flex-shrink: 0;
  margin-left: auto;
}
.pm-toggle input { opacity: 0; width: 0; height: 0; }
.pm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 26px;
  transition: background .2s;
}
.pm-slider:before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 4px; top: 4px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.pm-toggle input:checked + .pm-slider { background: #6366f1; }
.pm-toggle input:checked + .pm-slider:before { transform: translateX(20px); }
.pm-toggle input:disabled + .pm-slider { opacity: .5; cursor: default; }

.pm-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
  margin-left: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pm-empty { padding: 60px 28px; text-align: center; color: #94a3b8; }
</style>
@endpush

@section('content')
<div class="pm-page">

  <div class="pm-breadcrumb">
    <a href="{{ route('permissions.center') }}"><i class="bi bi-toggles me-1"></i>功能管理中心</a>
    <span class="mx-2">/</span>
    <span>{{ $module->name }}</span>
  </div>

  <div class="pm-card">
    <div class="pm-card-head">
      <div>
        <div class="pm-module-title"><i class="bi bi-sliders me-2" style="color:#6366f1;"></i>{{ $module->name }}</div>
        <div class="pm-module-sub">{{ $module->controller }} &middot; {{ $module->route_name }}</div>
      </div>
      <div class="pm-stats">
        <div class="pm-stat">
          <div class="pm-stat-n" id="stat-enabled">
            {{ $users->filter(fn($u) => $u->modulePermissions->first()?->can_use)->count() }}
          </div>
          <div class="pm-stat-lbl">已開通</div>
        </div>
        <div class="pm-stat">
          <div class="pm-stat-n">{{ $users->count() }}</div>
          <div class="pm-stat-lbl">總使用者</div>
        </div>
      </div>
    </div>

    @if ($users->isEmpty())
    <div class="pm-empty">
      <i class="bi bi-people" style="font-size:2rem;display:block;margin-bottom:10px;"></i>
      目前沒有活躍使用者
    </div>
    @else
    <div class="pm-user-list">
      @foreach ($users as $user)
      @php
        $perm   = $user->modulePermissions->first();
        $canUse = (bool) ($perm?->can_use);
        $isAdminUser = $user->role === 'admin';
      @endphp
      <div class="pm-user-row" id="row-{{ $user->id }}">
        <div class="pm-avatar {{ $user->role === 'admin' ? 'admin' : ($user->role === 'supervisor' ? 'super' : '') }}">
          {{ mb_substr($user->name, 0, 1) }}
        </div>
        <div class="fc-item-body">
          <div class="pm-user-name">{{ $user->name }}</div>
          <div class="pm-user-meta">
            {{ $user->email }}
            <span class="pm-role-badge pm-role-{{ $user->role === 'admin' ? 'admin' : ($user->role === 'supervisor' ? 'super' : 'user') }} ms-1">
              {{ $user->role === 'admin' ? '管理者' : ($user->role === 'supervisor' ? '主管' : '使用者') }}
            </span>
          </div>
        </div>
        @if ($isAdminUser)
          <span style="font-size:.75rem;color:#b91c1c;margin-left:auto;">（管理者全開）</span>
        @else
          <div class="pm-spinner" id="spin-{{ $user->id }}"></div>
          <label class="pm-toggle" title="{{ $canUse ? '已開通，點擊停用' : '未開通，點擊啟用' }}">
            <input type="checkbox"
              {{ $canUse ? 'checked' : '' }}
              data-user="{{ $user->id }}"
              data-url="{{ route('permissions.module.toggle', [$module->id, $user->id]) }}"
              onchange="toggleAccess(this)">
            <span class="pm-slider"></span>
          </label>
        @endif
      </div>
      @endforeach
    </div>
    @endif
  </div>

</div>
@endsection

@push('scripts')
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

function toggleAccess(checkbox) {
  const userId  = checkbox.dataset.user;
  const url     = checkbox.dataset.url;
  const canUse  = checkbox.checked ? 1 : 0;
  const spinner = document.getElementById('spin-' + userId);

  checkbox.disabled = true;
  spinner.style.display = 'block';

  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': csrfToken,
      'Accept': 'application/json',
    },
    body: JSON.stringify({ can_use: canUse }),
  })
  .then(r => r.json())
  .then(data => {
    if (data.status !== 'ok') throw new Error('server error');
    updateStatCount();
  })
  .catch(() => {
    // revert on error
    checkbox.checked = !checkbox.checked;
  })
  .finally(() => {
    checkbox.disabled = false;
    spinner.style.display = 'none';
  });
}

function updateStatCount() {
  const checked = document.querySelectorAll('.pm-toggle input:checked').length;
  const statEl  = document.getElementById('stat-enabled');
  if (statEl) statEl.textContent = checked;
}
</script>
@endpush