@extends('layouts.app')
@section('title','Tabelas do Sistema')
@section('content')

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
    <h2 style="margin:0">Tabelas do Sistema</h2>
    <a href="{{ route('dashboard') }}" class="btn btn-secondary">← Dashboard</a>
</div>

<p style="color:var(--muted);margin-bottom:1.5rem">
    Selecione uma tabela para visualizar, consultar ou editar seus registros.
    Tabelas marcadas com <span style="color:#aaa">🔒</span> são somente leitura.
</p>

<div class="tabelas-grid">
    @foreach($tabelas as $key => $t)
    <a href="{{ route('tabelas.show', $key) }}"
       class="tabela-card {{ $t['somente_leitura'] ? 'tabela-readonly' : '' }}">
        <div class="tabela-icone">{{ $t['icone'] }}</div>
        <div class="tabela-info">
            <div class="tabela-label">
                {{ $t['label'] }}
                @if($t['somente_leitura'])
                    <span class="badge-ro">🔒 Leitura</span>
                @endif
            </div>
            <div class="tabela-desc">{{ $t['descricao'] }}</div>
            <div class="tabela-total">
                <strong>{{ is_numeric($t['total']) ? number_format($t['total']) : $t['total'] }}</strong>
                registro(s)
            </div>
        </div>
        <div class="tabela-arrow">›</div>
    </a>
    @endforeach
</div>

<style>
.tabelas-grid{display:flex;flex-direction:column;gap:.5rem;max-width:750px}
.tabela-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--gray-brd);border-radius:var(--radius);padding:.9rem 1.2rem;text-decoration:none;color:var(--text);transition:box-shadow .15s,border-color .15s}
.tabela-card:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(27,79,140,.12)}
.tabela-readonly{opacity:.8}
.tabela-readonly:hover{border-color:#aaa}
.tabela-icone{font-size:1.6rem;width:2.2rem;text-align:center;flex-shrink:0}
.tabela-info{flex:1}
.tabela-label{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.badge-ro{font-size:.72rem;color:#888;font-weight:normal}
.tabela-desc{font-size:.8rem;color:var(--muted);margin:.15rem 0}
.tabela-total{font-size:.8rem;color:var(--blue)}
.tabela-arrow{font-size:1.4rem;color:var(--gray-brd)}
.tabela-card:hover .tabela-arrow{color:var(--blue)}
</style>
@endsection
