@extends('layouts.digitar')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('parameters.list') !!}
@endsection

@section('content')
    <div class="the-box row rounded">
        <div class="col-md-5">
            <div class="card-header text-dark">
                <h4 class="mb-4 mt-4">Estatísticas de Chamados</h4>
            </div>
            <div id="estatisticasChamado" class="p-3">
                <ul class="list-group list-group-flush" id="listaEstatisticas">
                    <li class="list-group-item">Carregando estatísticas...</li>
                </ul>
            </div>
        </div>
        <div class="col-md-7">
            <div id="leafletMap" style="height: 400px; width: 100%; border-radius:8px;"></div>
        </div>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const chamados = @json($chamados);

                if (chamados.length === 0) {
                    alert("Nenhum chamado com coordenadas foi encontrado.");
                    return;
                }

                const map = L.map('leafletMap').setView([chamados[0].latitude, chamados[0].longitude], 13);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; OpenStreetMap contributors'
                }).addTo(map);

                const bairrosCount = {};
                const regioesCount = {};
                const categoriasCountPorBairro = {};
                let fetchCount = 0;

                chamados.forEach(chamado => {
                    if (!isNaN(chamado.latitude) && !isNaN(chamado.longitude)) {
                        const categoria = chamado.category && chamado.category.name ?
                            chamado.category.name :
                            "Sem categoria associada";

                        const marker = L.marker([chamado.latitude, chamado.longitude]).addTo(map)
                            .bindPopup(
                                `Chamado #${chamado.id} - Categoria: ${categoria}`
                            );

                        fetch(
                                `https://nominatim.openstreetmap.org/reverse?format=json&lat=${chamado.latitude}&lon=${chamado.longitude}&addressdetails=1`
                            )
                            .then(response => response.json())
                            .then(data => {
                                const address = data.address;
                                const bairro = address.suburb || address.neighbourhood || "Desconhecido";
                                const regiao = address.city || address.town || address.state ||
                                    "Desconhecido";

                                // Contagem por bairro
                                bairrosCount[bairro] = (bairrosCount[bairro] || 0) + 1;
                                regioesCount[regiao] = (regioesCount[regiao] || 0) + 1;

                                // Contagem de categorias por bairro
                                if (!categoriasCountPorBairro[bairro]) {
                                    categoriasCountPorBairro[bairro] = {};
                                }

                                categoriasCountPorBairro[bairro][categoria] =
                                    (categoriasCountPorBairro[bairro][categoria] || 0) + 1;

                                fetchCount++;

                                if (fetchCount === chamados.length) {
                                    exibirEstatisticas(bairrosCount, regioesCount,
                                        categoriasCountPorBairro);
                                }
                            })
                            .catch(error => {
                                console.error("Erro ao buscar endereço:", error);
                                fetchCount++;

                                if (fetchCount === chamados.length) {
                                    exibirEstatisticas(bairrosCount, regioesCount,
                                        categoriasCountPorBairro);
                                }
                            });
                    }
                });

                function exibirEstatisticas(bairros, regioes, categoriasPorBairro) {
                    const lista = document.getElementById('listaEstatisticas');
                    lista.innerHTML = '';

                    const ordenar = obj => Object.entries(obj).sort((a, b) => b[1] - a[1]);
                    const topBairros = ordenar(bairros).slice(0, 5);
                    const topRegioes = ordenar(regioes).slice(0, 5);


                    lista.innerHTML += `<li class="list-group-item active">Top 5 Bairros com mais chamados:</li>`;
                    topBairros.forEach(([bairro, total]) => {
                        ;

                        const categorias = categoriasPorBairro[bairro];
                        if (categorias) {
                            const categoriasOrdenadas = ordenar(categorias);
                            categoriasOrdenadas.forEach(([nomeCategoria, qtd]) => {
                                lista.innerHTML +=
                                    `<li class='list-group-item'>Categoria:${nomeCategoria} <div class="badge badge-primary py-5" style="padding:6px;font-size:14px;display: flex;"> ${bairro} - <div class="srOn">${total}</div> </li>`;
                            });
                        }

                        lista.innerHTML += `</ul></li>`;
                    });

                    lista.innerHTML += `<li class="list-group-item active mt-3">Top 5 Regiões com mais chamados:</li>`;
                    topRegioes.forEach(([regiao, total]) => {
                        lista.innerHTML +=
                            `<li class="list-group-item" style="list-style:none;text-decoration:none;"><strong>${regiao}:</strong> ${total} chamado(s)</li>`;
                    });
                }
            });
        </script>
    </div>
    <style>
        .list-group-item {
            margin: 6px;
            text-decoration: none;
            list-style: none;
            backgroundo-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .srOn {
            width: 15px;
            height: 15px;
            background-color: #e2e3e1;
            color: black;
            border-radius: 14px;
            margin-left: 5px;

        }
    </style>
@endsection