@extends('admin.master')

@section('content')
    <div class="row">
        <div class="col-md-6 mb-3">
            <a href="{{ route('register') }}" class="linkSmallbox">
                <div class="small-box text-bg-primary">
                    <div class="inner">
                        <p>Usuário Cadastrados no sistema </p>
                        <h3>{{ $users->count() }}</h3>
                    </div>
                    <div class="icon">
                        <i class="bi bi-people-fill m-3" style="font-size:60px;"></i>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-6 mb-3">
            <a href="{{ route('laws.index') }}" class="linkSmallbox">
                <div class="small-box text-bg-primary">
                    <div class="inner">
                        <p>Leis cadastradas no sistema</p>
                        <h3>{{ $atos->count() }}</h3>
                    </div>
                    <div class="icon">
                        <i class="bi bi-journal-text m-3" style="font-size:60px;"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="card mt-4 shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">📊 Relatório de Leis Cadastradas por Usuários</h5>
        </div>
        <div class="card-body p-0">
            <table class="table-hover table-bordered mb-0 table">
                <thead class="table-light">
                    <tr>
                        <th scope="col">#ID</th>
                        <th scope="col">Nome</th>
                        <th scope="col">Email</th>
                        <th scope="col">Função</th>
                        <th scope="col">Qtd. de Leis</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($usersWithLawCount as $user)
                        <tr>
                            <td>{{ $user->id }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->getRoleNames()->implode(', ') }}</td>
                            <td><span class="badge bg-success">{{ $user->laws_count }}</span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-muted text-center">Nenhum usuário com leis cadastradas.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="card mb-4 mt-3">
        <div class="card-body">
            <h5 class="card-title">Gráfico de leis por Mês</h5>
            <canvas id="usuariosChart" height="100"></canvas>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('usuariosChart').getContext('2d');
        const labels = {!! json_encode($labels) !!};
        const dadosLeis = {!! json_encode($data) !!};

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                        type: 'line',
                        label: 'Crescimento de Leis',
                        data: dadosLeis,
                        borderColor: 'rgb(255, 99, 132)',
                        fill: false
                    },
                    {
                        type: 'bar',
                        label: 'Leis Cadastradas',
                        data: dadosLeis,
                        backgroundColor: 'rgba(75, 192, 192, 0.6)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Quantidade de Leis Cadastradas por Mês'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection