@extends('layouts.app')
@section('title', '資料庫 DB 說明')

@push('styles')
<style>
.module-badge {
  display: inline-block;
  background: #e7f3ff;
  color: #0a58ca;
  border: 1px solid #b6d4fe;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}
#dbTable th { font-size: 12px; white-space: nowrap; }
#dbTable td { font-size: 13px; vertical-align: middle; }
.col-detail-table th { font-size: 12px; background: #f8f9fa; }
.col-detail-table td { font-size: 13px; vertical-align: middle; }
.badge-pri { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-size: 11px; }
.badge-uni { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; font-size: 11px; }
.badge-mul { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; font-size: 11px; }
</style>
@endpush

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

  <div class="d-flex align-items-center mb-2 gap-3 flex-wrap">
    <a href="{{ route('settings.system.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回系統設定
    </a>
    <h4 class="mb-0 fw-bold ms-1"><i class="bi bi-database me-2"></i>資料庫 DB 說明</h4>
    <span class="badge bg-danger">系統管理員</span>
    <span class="text-muted small">共 {{ count($schema) }} 張資料表</span>
  </div>
  <p class="text-muted small mb-4">每張資料表的用途、使用模組與欄位說明，僅系統管理員可見。</p>

  {{-- 主列表 --}}
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive"><table id="dbTable" class="table table-hover table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th style="width:48px;" class="text-center">項次</th>
            <th style="width:220px;">資料表</th>
            <th style="width:280px;">使用的模組</th>
            <th>說明</th>
            <th style="width:70px;" class="text-center">欄位數</th>
            <th style="width:72px;" class="text-center">詳細</th>
          </tr>
        </thead>
        <tbody>
          @php $i = 1; @endphp
          @foreach($schema as $tableName => $columns)
          @php
            $doc     = $docs[$tableName] ?? [];
            $desc    = $doc['_desc']    ?? '';
            $modIds  = $doc['_modules'] ?? [];
            $colDocs = $doc['cols']     ?? [];
          @endphp
          <tr>
            <td class="text-center text-muted">{{ $i++ }}</td>
            <td class="font-monospace fw-semibold">{{ $tableName }}</td>
            <td>
              @forelse($modIds as $mid)
                @php $mod = $modules->firstWhere('id', (int)$mid); @endphp
                @if($mod)<span class="module-badge">{{ $mod->name }}</span>@endif
              @empty
                <span class="text-muted small">—</span>
              @endforelse
            </td>
            <td>{{ $desc ?: '—' }}</td>
            <td class="text-center text-muted">{{ count($columns) }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-outline-primary detail-btn"
                data-table="{{ $tableName }}"
                data-desc="{{ $desc }}"
                data-cols="{{ json_encode($columns, JSON_UNESCAPED_UNICODE) }}"
                data-coldocs="{{ json_encode($colDocs, JSON_UNESCAPED_UNICODE) }}">
                詳細
              </button>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table></div>
    </div>
  </div>

</div>

{{-- 詳細 Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <div>
          <h6 class="modal-title mb-0 font-monospace" id="modalTableName"></h6>
          <div class="text-muted small mt-1" id="modalTableDesc"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div class="table-responsive"><table class="table table-sm table-bordered col-detail-table mb-0">
          <thead>
            <tr>
              <th style="width:48px;" class="text-center">項次</th>
              <th style="width:200px;">欄位名稱</th>
              <th style="width:160px;">型別</th>
              <th style="width:52px;" class="text-center">Null</th>
              <th style="width:52px;" class="text-center">Key</th>
              <th>用途說明</th>
            </tr>
          </thead>
          <tbody id="modalColBody"></tbody>
        </table></div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.detail-btn').forEach(btn => {
  btn.addEventListener('click', function () {
    const table   = this.dataset.table;
    const desc    = this.dataset.desc;
    const cols    = JSON.parse(this.dataset.cols);
    const colDocs = JSON.parse(this.dataset.coldocs);

    document.getElementById('modalTableName').textContent = table;
    document.getElementById('modalTableDesc').textContent = desc || '（尚無說明）';

    const tbody = document.getElementById('modalColBody');
    tbody.innerHTML = '';

    cols.forEach((col, idx) => {
      const keyHtml = col.Key === 'PRI'
        ? '<span class="badge badge-pri rounded-pill">PRI</span>'
        : col.Key === 'UNI'
          ? '<span class="badge badge-uni rounded-pill">UNI</span>'
          : col.Key === 'MUL'
            ? '<span class="badge badge-mul rounded-pill">FK</span>'
            : '';

      const nullHtml = col.Null === 'YES'
        ? '<span class="text-muted">YES</span>'
        : '<span class="text-danger fw-semibold">NO</span>';

      const colDesc = colDocs[col.Field] || '<span class="text-muted">—</span>';

      tbody.insertAdjacentHTML('beforeend', `
        <tr>
          <td class="text-center text-muted">${idx + 1}</td>
          <td class="font-monospace">${col.Field}</td>
          <td class="font-monospace text-muted small">${col.Type}</td>
          <td class="text-center small">${nullHtml}</td>
          <td class="text-center">${keyHtml}</td>
          <td>${colDesc}</td>
        </tr>
      `);
    });

    new bootstrap.Modal(document.getElementById('detailModal')).show();
  });
});
</script>
@endpush
@endsection