@extends('entidade.admin.layouts.layout')

@section('content')
<main class="content">
    <div class="container-fluid p-0">
        <div class="row mb-2 mb-xl-3">
            <div class="col-auto d-none d-sm-block">
                <h3>Dashboard</h3>
            </div>
        </div>

        {{-- Boas-vindas --}}
        <div class="row g-3 mb-4 align-items-stretch">
            <div class="col-12 col-md-6 col-lg-4 col-xl-4 d-flex">
                <div class="card flex-fill illustration">
                    <div class="card-body p-3">
                        <h5 class="mb-1">Bem-vindo de volta, {{ Auth::user()->name }}!</h5>
                        <p class="text-muted mb-0">{{ env('APP_NAME') }}</p>
                    </div>
                </div>
            </div>

            @php
                $status = [
                    ['label' => 'Protocolos em Aberto', 'valor' => $abertos, 'cor' => 'warning'],
                    ['label' => 'Protocolos em Tramitação', 'valor' => $emTramitacao, 'cor' => 'primary'],
                    ['label' => 'Protocolos Concluídos', 'valor' => $concluidos, 'cor' => 'success'],
                    ['label' => 'Protocolos Cancelados', 'valor' => $cancelados, 'cor' => 'danger'],
                ];
            @endphp

            @foreach($status as $item)
                <div class="col-12 col-md-6 col-lg-4 col-xl-2 d-flex">
                    <div class="card flex-fill border-start border-2 border-{{ $item['cor'] }}">
                        <div class="card-body">
                            <h3 class="mb-2">{{ $item['valor'] }}</h3>
                            <p class="mb-0 text-muted">{{ $item['label'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row">
            {{-- Gráfico --}}
            <div class="col-12 col-xl-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-header border-bottom fw-bold text-primary">
                        <i class="fa fa-chart-bar me-2 text-muted"></i> Gráfico de Protocolos por Situação
                    </div>
                    <div class="card-body">
                        <canvas id="graficoSituacoes" height="100"></canvas>
                    </div>
                </div>
            </div>

            {{-- Últimos Protocolos --}}
            <div class="col-12 col-xl-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Últimos Protocolos</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Conteúdo</th>
                                    <th>Aberto em</th>
                                    <th>Origem</th>
                                    <th>Tipo</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($protocolos->take(4) as $protocolo)
                                    <tr>
                                        <td>
                                            <div>{{ $protocolo->conteudo }}</div>
                                            <div class="text-muted">{{ $protocolo->referencia }}</div>
                                        </td>
                                        <td>{{ $protocolo->created_at->format('d/m/Y H:i:s') }}</td>
                                        <td>
                                            <div>Setor: {{ $protocolo->setor->descricao }}</div>
                                            <div>Responsável: {{ $protocolo->user->name }}</div>
                                        </td>
                                        <td>{{ $protocolo->protocoloTipo->descricao }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center mt-3">
                            <a href="#" class="btn btn-sm btn-outline-primary w-100">Ver todos</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Últimos documentos e uso do disco --}}
        <div class="row">
            {{-- Documentos --}}
            <div class="col-12 col-xl-6">
                <div class="card flex-fill">
                    <div class="card-header border-bottom fw-bold text-primary">
                        <i class="fa fa-file me-2 text-muted"></i> Últimos documentos gerados
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Modelo</th>
                                        <th>Assunto</th>
                                        <th>Status</th>
                                        <th>Criado em</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($documentos->take(3) as $documento)
                                        <tr>
                                            <td>
                                                <div>{{ $documento->modelo->descricao }}</div>
                                                <div class="text-muted">{{ $documento->numero }}</div>
                                            </td>
                                            <td>{{ $documento->assunto }}</td>
                                            <td>{{ $documento->status->status }}</td>
                                            <td>{{ $documento->created_at->format('d/m/Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Armazenamento --}}
            <div class="col-12 col-xl-6">
                <div class="card flex-fill">
                    <div class="card-header border-bottom fw-bold text-primary">
                        <i class="fa fa-hdd me-2 text-muted"></i> Porcentagem do Disco utilizado
                    </div>
                    <div class="card-body">
                        <h6 class="text-uppercase">Armazenamento</h6>
                        <div class="progress progress-sm mb-2">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $percentualUso }}%"
                                aria-valuenow="{{ $percentualUso }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>

                        <p class="text-muted font-12 mb-0">
                            Limite utilizado:
                            <span class="text-danger">{{ number_format($totalTamanhoKB / 1024 / 1024, 2) }} GB</span>
                            ({{ number_format($totalTamanhoKB / 1024, 2) }} MB)<br>
                            @php
                                $limiteDisponivelGB = 30 - (30 * $percentualUso / 100);
                                $limiteDisponivelMB = $limiteDisponivelGB * 1024;
                            @endphp
                            Limite disponível:
                            <span class="{{ $limiteDisponivelGB < 0 ? 'text-danger' : 'text-success' }}">
                                {{ number_format($limiteDisponivelGB, 2) }} GB
                                ({{ number_format($limiteDisponivelMB, 2) }} MB)
                            </span>
                            ({{ number_format($percentualUso, 2) }}%)
                        </p>

                        <p class="text-muted font-12 mb-0">
                            Limite Total: <span class="text-success">30 GB</span>
                            ({{ number_format(30 * 1024, 2) }} MB)
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('graficoSituacoes').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($contagemSituacoes->pluck('situacao')) !!},
                datasets: [{
                    label: 'Quantidade de Protocolos',
                    data: {!! json_encode($contagemSituacoes->pluck('total')) !!},
                    backgroundColor: [
                        'rgba(255, 193, 7, 0.5)',
                        'rgba(13, 110, 253, 0.5)',
                        'rgba(25, 135, 84, 0.5)',
                        'rgba(220, 53, 69, 0.5)'
                    ],
                    borderColor: [
                        '#ffc107',
                        '#0d6efd',
                        '#198754',
                        '#dc3545'
                    ],
                    borderWidth: 1,
                    borderRadius: 5
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: context => `${context.raw} protocolo(s)`
                        }
                    },
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Quantidade'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Situação'
                        }
                    }
                }
            }
        });
    });
</script>
@endsection