@extends('layouts.app')
@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <div class="d-flex justify-content-between align-items-center">
            <h1 class="mb-4">
                <strong class="h3 fw-bold">{{ $empresa['nome'] }}</strong> 
                <a href="{{ route('alterarEmpresa') }}" class="text-primary h5 ms-3">
                    <i class="align-middle" data-feather="refresh-cw"></i> Alternar Empresa
                </a>
            </h1>
            @if (auth()->user()->admin == true)
            <a href="#" id="admin-options-btn" class="btn bg-dark bg-opcity-10 text-white mb-4">
                <i class="ri-admin-line align-middle"></i> Opções de Administrador
            </a>
            @endif
        </div>

        <div class="row">
            <div class="col-12">
                <div class="w-100">
                    <div class="row">

                        <div class="col-sm-12 col-md-6"> 
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Volumes de Bens</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="ri-hand-coin-line fs-12 align-middle"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h1 class="mt-1 mb-3 fw-bold contagem-bens">Carregando...</h1>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Valor de Aquisição total dos bens</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="ri-money-dollar-circle-line fs-12 align-middle"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h1 class="mt-1 mb-3 fw-bold valor-total">Carregando...</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card flex-fill w-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Valores de Aquisições Mensais</h5>
                    <select id="select-exercicio" class="form-control w-auto">
                        <option value="" disabled>Nenhum ano encontrado</option>
                    </select>
                </div>
                <div class="card-body py-3">
                    <h1 class="grafico">
                        Carregando...
                    </h1>
                    <div class="chart chart-sm" style="cursor: crosshair;">
                        <canvas id="chartjs-dashboard-line"></canvas>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");
        let gradient = ctx.createLinearGradient(0, 0, 0, 225);
        gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
        gradient.addColorStop(1, "rgba(215, 227, 244, 0)");

        let bens = [];
        let selectExercicio = document.getElementById("select-exercicio");
        let chart;

        function preencherValoresGerais(data) {
            document.querySelector('.contagem-bens').textContent = data.totalItens;
            document.querySelector('.valor-total').textContent = `R$ ${data.totalGeral.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
        }

        function obterAnosDisponiveis() {
            let anos = new Set();
            if (Array.isArray(bens)) {
                bens.forEach(item => {
                    if (item.dataAquisicao) {
                        let ano = new Date(item.dataAquisicao).getFullYear();
                        anos.add(ano);
                    }
                });
            }
            return Array.from(anos).sort((a, b) => b - a);
        }

        function preencherSelectAnos() {
            let anos = obterAnosDisponiveis();
            selectExercicio.innerHTML = "";
            anos.forEach(ano => {
                let option = document.createElement("option");
                option.value = ano;
                option.textContent = ano;
                selectExercicio.appendChild(option);
            });

            if (anos.length > 0) {
                atualizarGrafico(anos[0]);
                selectExercicio.value = anos[0];
            }
        }

        function atualizarGrafico(exercicioSelecionado) {
            let aquisicoesPorMes = Array(12).fill(0);
            
            document.querySelector('.grafico').classList.add('d-none');

            if (Array.isArray(bens)) {
                bens.forEach(function (item) {
                    if (item.dataAquisicao && item.valorAquisicao) {
                        let dataAquisicao = new Date(item.dataAquisicao);
                        let ano = dataAquisicao.getFullYear();
                        let mes = dataAquisicao.getMonth();
                        let valor = parseFloat(item.valorAquisicao) || 0;

                        if (ano === parseInt(exercicioSelecionado)) {
                            aquisicoesPorMes[mes] += valor;
                        }
                    }
                });
            }

            let labels = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];

            if (chart) {
                chart.destroy();
            }

            chart = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Aquisições (R$)",
                        fill: true,
                        backgroundColor: gradient,
                        borderWidth: 1,
                        borderColor: "#85b7ff",
                        data: aquisicoesPorMes
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: { display: false },
                    tooltips: {
                        intersect: false,
                        callbacks: {
                            label: function (tooltipItem) {
                                return `R$ ${tooltipItem.value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
                            }
                        }
                    },
                    hover: { intersect: true },
                    plugins: { filler: { propagate: false } },
                    scales: {
                        xAxes: [{
                            reverse: false,
                            gridLines: { color: "rgba(0,0,0,0.0)" }
                        }],
                        yAxes: [{
                            ticks: {
                                stepSize: 1000,
                                callback: function (value) {
                                    return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
                                }
                            },
                            display: true,
                            borderDash: [3, 3],
                            gridLines: { color: "rgba(0,0,0,0.0)" }
                        }]
                    }
                }
            });
        }

        fetch("{{ route('inicioJson') }}")
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    bens = data.bens.data;
                    preencherValoresGerais(data);
                    preencherSelectAnos();
                } else {
                    alert("Erro ao carregar dados.");
                }
            })
            .catch(error => {
                console.error(error);
                alert("Erro ao buscar os dados.");
            });

        selectExercicio.addEventListener("change", function () {
            atualizarGrafico(this.value);
        });
    });

    document.getElementById('admin-options-btn').addEventListener('click', function (e) {
        e.preventDefault();

        Swal.fire({
            title: 'Opções de Administrador:',
            showCancelButton: true,
            showConfirmButton: false,
            cancelButtonText: 'Fechar',
            html: `
                <button id="btn-usuarios" class="swal2-confirm swal2-styled w-75" style="margin: 5px 10px;"> <i class="ri-user-line align-middle"></i> Gerenciar Usuários</button>
                <button id="btn-notificacoes" class="swal2-confirm swal2-styled w-75" style="margin: 5px 10px;"><i class="ri-notification-3-line align-middle""></i> Gerenciar Notificações</button>
            `
        });

        // Eventos para os botões personalizados
        document.addEventListener('click', function(event) {
            if (event.target.id === 'btn-usuarios') {
                Swal.close();
                console.log('Usuários clicado');
            }

            if (event.target.id === 'btn-notificacoes') {
                Swal.close();
                console.log('Notificações clicado');
            }
        }, { once: true });
    });
</script>

@endsection