@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: ' . __('PCA - Monitoramento de Ocorrências'))

@section('content')
    <div class="card shadow-lg">
        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => __('Dashboard - Monitoramento de Ocorrências'),
            'routeBack' => null,
            'tabs' => [
                [
                    'route' => 'admin.ocorrencias-pca.acompanhamento',
                    'label' => __('Acompanhamento Individual'),
                    'class' => 'fa-users',
                    'permission' => 'GERENCIADOR_DE_OCORRENCIAS_PCA',
                ],
            ],
        ])

        <div class="card-body">
            @include('errors.messageFlash')

            @php
                $statusConfig = [
                    'ABERTO' => ['bg' => 'warning', 'icon' => 'fa-folder-open', 'text' => 'text-gray', 'label' => 'Aberto'],
                    'CONCLUÍDO' => ['bg' => 'success', 'icon' => 'fa-check-circle', 'text' => 'text-gray', 'label' => 'Concluído'],
                    'OUVIDORIA' => ['bg' => 'info', 'icon' => 'fa-headset', 'text' => 'text-gray', 'label' => 'Ouvidoria'],
                    'SEM ÓRGÃO' => ['bg' => 'secondary', 'icon' => 'fa-building', 'text' => 'text-gray', 'label' => 'Sem órgão'],
                    'SENDO AVALIADO' => ['bg' => 'primary', 'icon' => 'fa-hourglass-half', 'text' => 'text-gray', 'label' => 'Sendo avaliado'],
                    'REPROVADO' => ['bg' => 'danger', 'icon' => 'fa-times-circle', 'text' => 'text-gray', 'label' => 'Reprovado'],
                    'MANUTENÇÃO EM ANDAMENTO' => ['bg' => 'dark', 'icon' => 'fa-tools', 'text' => 'text-gray', 'label' => 'Manutenção em andamento'],
                ];
            @endphp

            <div class="row g-2 mb-5">
                {{-- Cards de Estatísticas Gerais --}}
                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-info">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-folder-open"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Total de Ocorrências') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ $totalAberto ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-primary">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-calendar-day"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Aberto hoje') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ $quantidadeAbertoHoje ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-success">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-calendar-week"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Este mês') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ $abertoMesAtual ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-warning">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Ano atual') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ $abertoAnoAtual ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-secondary">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Ano passado') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ $abertoAnoPassado ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card h-100 border-0 shadow-sm bg-{{ $variacaoAnual >= 0 ? 'success' : 'danger' }}">
                        <div class="card-body text-center p-2 text-gray">
                            <div class="mb-2 fs-2">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h6 class="card-title mb-1 small text-gray">{{ __('Variação anual') }}</h6>
                            <p class="fs-5 fw-bold mb-0 text-gray">{{ number_format($variacaoAnual, 2) }}%</p>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                {{-- Cards de Status --}}
                @foreach ($statusConfig as $status => $config)
                    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="card h-100 border-0 shadow-sm bg-{{ $config['bg'] }}">
                            <div class="card-body text-center p-2 {{ $config['text'] }}">
                                <div class="mb-2 fs-2">
                                    <i class="fas {{ $config['icon'] }}"></i>
                                </div>
                                <h6 class="card-title mb-1 small {{ $config['text'] }}">{{ __($config['label']) }}</h6>
                                <p class="fs-5 fw-bold mb-0 {{ $config['text'] }}">{{ $ocorrenciasPorStatus[$status] ?? 0 }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="card mb-5 border-0 shadow">
                <div class="card-header bg-light py-3">
                    <h5 class="mb-0 fw-bold text-primary">
                        <i class="fas fa-chart-area me-2"></i>{{ __('Ocorrências nos últimos 7 dias') }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="chart-container" style="height: 350px;">
                                <canvas id="grafico7Dias"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-header bg-light py-2">
                                    <h6 class="mb-0 fw-bold">
                                        <i class="fas fa-trophy me-2 text-warning"></i>{{ __('Ranking Últimos 7 dias') }}
                                    </h6>
                                </div>
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-flush">
                                        @forelse ($rankingUsuarios as $index => $item)
                                            <li
                                                class="list-group-item d-flex justify-content-between align-items-center py-3">
                                                <div>
                                                    <span class="badge bg-primary me-2">{{ $index + 1 }}</span>
                                                    {{ $item->name ?? __('Usuário Desconhecido') }}
                                                </div>
                                                <span
                                                    class="badge bg-primary rounded-pill fs-6">{{ $item->total_chamados }}</span>
                                            </li>
                                        @empty
                                            <li class="list-group-item py-3 text-muted">{{ __('Nenhuma ocorrência registrada.') }}</li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-5 border-0 shadow">
                <div class="card-header bg-light py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 fw-bold text-primary">
                            <i class="fas fa-calendar-alt me-2"></i>{{ __('Ocorrências Mensais') }}
                        </h5>
                        <form method="GET" action="{{ route('admin.ocorrencias-pca.index') }}"
                            class="row g-2 align-items-center">
                            <div class="col-auto">
                                <label for="month" class="col-form-label">{{ __('Mês') }}:</label>
                            </div>
                            <div class="col-auto">
                                <select name="month" id="month" class="form-select form-select-sm">
                                    @foreach (range(1, 12) as $mes)
                                        <option value="{{ $mes }}"
                                            {{ $mes == $mesSelecionado ? 'selected' : '' }}>
                                            {{ \Carbon\Carbon::createFromFormat('!m', $mes)->locale('pt_BR')->translatedFormat('F') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                <label for="year" class="col-form-label">{{ __('Ano') }}:</label>
                            </div>
                            <div class="col-auto">
                                <select name="year" id="year" class="form-select form-select-sm">
                                    @foreach (range(now()->year - 5, now()->year) as $ano)
                                        <option value="{{ $ano }}"
                                            {{ $ano == $anoSelecionado ? 'selected' : '' }}>
                                            {{ $ano }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                @include('components.buttons._filtrarButton', [
                                    'label' => __('Filtrar')
                                ])
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <h6 class="text-center mb-4">
                        {{ __('Ocorrências por dia em') }}
                        {{ \Carbon\Carbon::createFromFormat('!m', $mesSelecionado)->locale('pt_BR')->translatedFormat('F') }}/{{ $anoSelecionado }}
                    </h6>
                    <div class="chart-container" style="height: 500px;">
                        <canvas id="graficoMensal"></canvas>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow">
                <div class="card-header bg-light py-3">
                    <h5 class="mb-0 fw-bold text-primary">
                        <i class="fas fa-chart-bar me-2"></i>{{ __('Ocorrências Anuais') }}
                    </h5>
                </div>
                <div class="card-body">
                    <h6 class="text-center mb-4">
                        {{ __('Ocorrências por mês nos últimos anos') }}
                    </h6>
                    <div class="chart-container" style="height: 500px;">
                        <canvas id="graficoAnual"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const dadosGrafico7Dias = @json($dadosGrafico7Dias ?? []);
        const dadosGraficoMensal = @json($dadosGraficoMensal ?? []);
        const dadosGraficoAnual = @json($dadosGraficoAnual ?? []);
        const mesesLabels = @json($mesesLabels ?? []);
    </script>
@endsection