@extends('layouts.app')

@section('content')
  <div class="container py-4" style="max-width:820px">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h2 class="mb-0 text-primary">
        <i class="bi bi-shield-lock me-2"></i>編輯 {{ $user->name }} 的模組權限
      </h2>
      <a href="{{ route('permissions.index') }}" class="btn btn-secondary btn-sm">
        <i class="bi bi-arrow-return-left"></i> 返回列表
      </a>
    </div>

    <div class="mb-3 d-flex gap-2 flex-wrap">
      <button type="button" class="btn btn-outline-success btn-sm" onclick="selectAll('can_use')">
        <i class="bi bi-check2-all"></i> 全選可用
      </button>
      <button type="button" class="btn btn-outline-danger btn-sm" onclick="selectAll('is_admin')">
        <i class="bi bi-check2-all"></i> 全選管理
      </button>
      <button type="button" class="btn btn-outline-info btn-sm" onclick="selectAll('is_doc_controller')">
        <i class="bi bi-check2-all"></i> 全選文管
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm" onclick="unselectAll()">
        <i class="bi bi-x-circle"></i> 全部取消
      </button>
    </div>

    <form action="{{ route('permissions.update', $user) }}" method="POST" id="permForm">
      @csrf
      @php $grouped = $modules->groupBy('group'); @endphp

      @foreach ($grouped as $groupName => $groupModules)
      <div class="card mb-3 shadow-sm">
        <div class="card-header bg-light py-2 fw-semibold">
          <i class="bi bi-folder me-1 text-primary"></i>{{ $groupName }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light" style="font-size:13px;">
              <tr>
                <th>模組名稱</th>
                <th class="text-center" style="width:80px;">可用</th>
                <th class="text-center" style="width:80px;">管理</th>
                <th class="text-center" style="width:80px;">文管</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($groupModules as $module)
              @php $mid = 'm'.$module->id; @endphp
              <tr>
                <td class="small">{{ $module->name }}</td>
                <td class="text-center">
                  <input type="checkbox" id="{{ $mid }}_use"
                    name="modules[{{ $module->controller }}][{{ $module->route_name }}][can_use]"
                    class="form-check-input can_use" value="1"
                    {{ ($permissions[$module->controller][$module->route_name]['can_use'] ?? 0) ? 'checked' : '' }}>
                  <label for="{{ $mid }}_use" class="visually-hidden">{{ $module->name }} 可用</label>
                </td>
                <td class="text-center">
                  <input type="checkbox" id="{{ $mid }}_admin"
                    name="modules[{{ $module->controller }}][{{ $module->route_name }}][is_admin]"
                    class="form-check-input is_admin" value="1"
                    {{ ($permissions[$module->controller][$module->route_name]['is_admin'] ?? 0) ? 'checked' : '' }}>
                  <label for="{{ $mid }}_admin" class="visually-hidden">{{ $module->name }} 管理</label>
                </td>
                <td class="text-center">
                  <input type="checkbox" id="{{ $mid }}_doc"
                    name="modules[{{ $module->controller }}][{{ $module->route_name }}][is_doc_controller]"
                    class="form-check-input is_doc_controller" value="1"
                    {{ ($permissions[$module->controller][$module->route_name]['is_doc_controller'] ?? 0) ? 'checked' : '' }}>
                  <label for="{{ $mid }}_doc" class="visually-hidden">{{ $module->name }} 文管</label>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      @endforeach

      <button type="submit" class="btn btn-primary">
        <i class="bi bi-save"></i> 儲存權限
      </button>
    </form>
  </div>

  <script>
    function selectAll(type) {
      document.querySelectorAll('input.' + type).forEach(cb => cb.checked = true);
    }
    function unselectAll() {
      document.querySelectorAll('input.can_use, input.is_admin, input.is_doc_controller').forEach(cb => cb.checked = false);
    }
  </script>
@endsection