@extends('layouts.app')

@section('content')
  <div class="container-fluid py-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h2 class="mb-0 text-success">
        <i class="bi bi-person-lines-fill"></i> 用戶模組權限總覽
      </h2>
      <div class="btn-group">
        <a href="{{ route('permissions.index') }}" class="btn btn-success btn-sm">
          <i class="bi bi-table me-1"></i>權限矩陣表
        </a>
        <a href="{{ route('permissions.center') }}" class="btn btn-outline-success btn-sm">
          <i class="bi bi-toggles me-1"></i>功能管理中心
        </a>
      </div>
    </div>

    @php $grouped = $modules->groupBy('group'); @endphp

    <div class="table-responsive">
      <table id="dt" class="table table-striped table-hover align-top">
        <thead class="table-success">
          <tr>
            <th style="width:180px;">用戶</th>
            <th>模組權限</th>
            <th style="width:160px;">功能</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($users as $user)
            <tr id="user-row-{{ $user->id }}">
              @php
                $roleSort = ['admin'=>0,'supervisor'=>1,'user'=>2][$user->role] ?? 9;
              @endphp
              <td data-sort="{{ $roleSort }}_{{ $user->name }}">
                <div class="d-flex align-items-center">
                  <i class="bi bi-person-circle fs-4 text-success me-2"></i>
                  <div>
                    <div class="fw-bold small">{{ $user->name }}</div>
                    <div class="text-muted" style="font-size:11px;">{{ $user->email }}</div>
                    <div class="mt-1">
                      @if($user->role === 'admin')
                        <span class="badge bg-danger" style="font-size:10px;">管理員</span>
                      @elseif($user->role === 'supervisor')
                        <span class="badge bg-warning text-dark" style="font-size:10px;">主管</span>
                      @else
                        <span class="badge bg-secondary" style="font-size:10px;">一般</span>
                      @endif
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <form class="user-permission-form"
                  data-user="{{ $user->id }}" onsubmit="savePermission(event, {{ $user->id }})">
                  @csrf
                  @foreach ($grouped as $groupName => $groupModules)
                    <div class="d-flex align-items-center gap-3 py-1 border-bottom">
                      <div class="text-muted fw-semibold flex-shrink-0" style="width:70px;font-size:11px;">
                        {{ $groupName }}
                      </div>
                      <div class="d-flex flex-wrap gap-3">
                        @foreach ($groupModules as $module)
                          @php
                            $perm = $user->modulePermissions->first(fn($mp) =>
                              $mp->controller === $module->controller && $mp->route_name === $module->route_name);
                            $checked  = $perm && $perm->can_use;
                            $isAdmin  = $perm && $perm->is_admin;
                            $isDocCtrl = $perm && $perm->is_doc_controller;
                          @endphp
                          <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox"
                              id="cu_{{ $user->id }}_{{ $module->id }}"
                              name="modules[{{ $module->controller }}][{{ $module->route_name }}][can_use]" value="1"
                              {{ $checked ? 'checked' : '' }}>
                            <label class="form-check-label" style="font-size:12px;"
                              for="cu_{{ $user->id }}_{{ $module->id }}">
                              {{ $module->name }}
                              @if ($isAdmin)<span class="badge bg-danger ms-1" style="font-size:9px;">管</span>@endif
                              @if ($isDocCtrl)<span class="badge bg-info ms-1" style="font-size:9px;">文</span>@endif
                            </label>
                          </div>
                        @endforeach
                      </div>
                    </div>
                  @endforeach
                </form>
              </td>
              <td>
                <div class="d-flex flex-column gap-1">
                  <button type="button" class="btn btn-success btn-sm"
                    onclick="document.querySelector('#user-row-{{ $user->id }} .user-permission-form').dispatchEvent(new Event('submit', {cancelable:true}))">
                    <i class="bi bi-save"></i> 儲存
                  </button>
                  <a href="{{ route('permissions.edit', $user) }}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-shield-lock"></i> 詳細設定
                  </a>
                  <div class="save-status mt-1 small d-none"></div>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <meta name="csrf-token" content="{{ csrf_token() }}">
  <script>
    function savePermission(e, userId) {
      e.preventDefault();
      const form = document.querySelector('#user-row-' + userId + ' .user-permission-form');
      fetch("{{ url('/permissions/ajax-update-can-use') }}/" + userId, {
          method: 'POST',
          headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
          body: new FormData(form),
        })
        .then(r => r.json())
        .then(json => {
          const el = document.querySelector('#user-row-' + userId + ' .save-status');
          el.classList.remove('d-none', 'text-danger');
          el.classList.add('text-success');
          el.innerHTML = '<i class="bi bi-check-circle"></i> 已儲存';
          setTimeout(() => el.classList.add('d-none'), 1800);
        })
        .catch(() => {
          const el = document.querySelector('#user-row-' + userId + ' .save-status');
          el.classList.remove('d-none', 'text-success');
          el.classList.add('text-danger');
          el.innerHTML = '<i class="bi bi-x-circle"></i> 失敗';
        });
    }
  </script>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const table = document.querySelector('#dt');
      if (table) {
        new DataTable(table, {
          language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
          order: [],
          pageLength: 25,
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, '全部']],
        });
      }
    });
  </script>
@endpush