@extends('admin.base-admin')

@section('page_title', 'Dashboard Detalhado')

@section('nav')

@include('admin.partials.nav-ti')

@endsection

@section('page-header')
    <h1>
        <i class="bi bi-bar-chart-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Dashboard
    </h1>
@endsection

@section('styles')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js" integrity="sha512-O2fWHvFel3xjQSi9FyzKXWLTvnom+lOYR/AUEThL/fbP4hv1Lo5LCFCGuTXBRyKC4K4DJldg5kxptkgXAzUpvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha512-U6K1YLIFUWcvuw5ucmMtT9HH4t0uz3M366qrF5y4vnyH6dgDzndlcGvH/Lz5k8NFh80SN95aJ5rqGZEdaQZ7ZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $.getJSON("https://api.ipify.org?format=json", function(data) {

        // Setting text of element P with id gfg
        $.get('{{route("testeip")}}', {ip: data.ip}, (result) => {
            console.log(result);
        });
    })
</script>
@section('content')

    <div class="container-fluid">

        <div class="grey-bg container-fluid">

            <div class="row justify-content-center mt-5 mb-2">


                <div class="col-xl-3 fadeTop1">
                    <div class="card overflow-hidden">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                        <div class="media align-items-stretch">
                            <div class="align-self-center">
                                <h1 style="color:#ff6a7bd4"><i class="bi bi-rocket-takeoff-fill mr-3 "></i></h1>
                            </div>
                            <div class="media-body">
                            <h4>Chamados</h4>
                            <span>Total aberto</span>
                            </div>
                            <div class="align-self-center">
                            <h3><strong>{{$total['Total']}}</strong></h3>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-xl-3 fadeTop2">
                    <div class="card overflow-hidden">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                        <div class="media align-items-stretch">
                            <div class="align-self-center">
                                <h1 style="color:#6afaffcb"><i class="bi bi-globe mr-3 "></i></h1>
                            </div>
                            <div class="media-body">
                            <h4>Portal</h4>
                            <span>Chamados - Web</span>
                            </div>
                            <div class="align-self-center">
                            <h3>{{$total['Total_portal']}}</h3>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-xl-3 fadeTop3">
                    <div class="card overflow-hidden">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                        <div class="media align-items-stretch">
                            <div class="align-self-center">
                                <img src="{{URL::asset('images/GLPI.png')}}" class=" float-right mr-1" width="50" height="50" style="border-radius: 50%;" alt="...">
                            </div>
                            <div class="media-body">
                            <h4>GLPI</h4>
                            <span>Interno</span>
                            </div>
                            <div class="align-self-center">
                            <h3>{{$total['Total_glpi']}}</h3>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>



                <div class="col-6 mt-5" style="height: 45vh;">
                    <div class="row justify-content-end">
                        <button class="total_red" id="filial_total">Total</button>
                       <button  class="total_red " id="filial_anual">Esse ano</button>
                       <button class="total_red selected_red" id="filial_mensal" >Esse mês</button>
                       <button class="total_red" id="filial_diario" >Ultima semana</button>
                   </div>
                    <div class="chart-container " style="position: relative; height:20vh; width:38vw">
                        <canvas  id="myChart" ></canvas>
                    </div>
                </div>
                <div class="col-6 mt-5">
                    <div class="row justify-content-end">
                         <button class="total" id="anual">Total</button>
                        <button  class="total selected" id="mensal">Um ano</button>
                        <button class="total" id="diario" >Esse mês</button>
                    </div>


                    <div class="chart-container " style="position: relative; height:20vh; width:38vw">
                        <canvas  id="myCharto"></canvas>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mb-5" >
                <div class="col-12 my-5 mb-2  text-center">
                    <h4 class="text-uppercase">Chamados por categoria</h4>
                    <p>Mês atual</p>
                </div>
                <div class="col-md-6 " >
                        <div class="chart-container " style="position: relative;  height:60vh; width:60vw">
                            <canvas  id="myCharte"></canvas>
                        </div>
                </div>


            </div>
            <section id="minimal-statistics">


            <div class="row justify-content-center mb-3">
                <div class="col-12 mt-3 mb-2  text-center fade-bottom ">
                    <h4 class="text-uppercase">Chamados Solucionados </h4>
                </div>

                <div class="col-sm-3 fade-bottom">
                        <div class="card">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="media d-flex">
                                        <div class="media-body text-left">
                                        <h3 class="danger">{{$total['Total_tec']}}</h3>
                                        <span>Solucionados</span>
                                        </div>
                                        <div class="align-self-center">
                                            <h1 style="color:#ffaa33de"><i class="bi-pencil-fill "></i></h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>


                <div class="col-sm-3 fade-bottom">
                    <div class="card">
                        <div class="card-content">
                            <div class="card-body">
                            <div class="media d-flex">
                                <div class="align-self-center">
                                    <h1 style="color:#18a000cb"><i class="bi bi-graph-up-arrow "></i></h1>
                                </div>
                                <div class="media-body text-right">
                                <h3>0%</h3>
                                <span>Solucionados</span>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            </section>

        </div>
    </div>
    <footer class=" text-center" style="margin-top: 15em;">
        <p style="color: rgb(126, 126, 126)">        © 2022 Desenvolvido por : Casas da Água
        </p>
    </footer>
    </div>
       <p>{{request()->cookie('feedback')}}</p>



@endsection
@section('script')
    <script>
        const data_filial = {!! json_encode($filial) !!};
        let arr_filial = [];


        data_filial.forEach(obj => {
            arr_filial.push(obj);
        });


        const data_ano = {!! json_encode($dash_y) !!};
        let arr_ano = [];
        let meses = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dec',]
        let label = [];

        data_ano.forEach(obj => {
            arr_ano.push(obj.count);
            label.push(obj.month+'/'+obj.year)
        });


        const ctx = document.getElementById('myChart');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Matriz', '01 - Joinville', '02 - Biguaçu', '03 - Palhoça', '04 - Itajaí', '06 - Balneario','08 - Centro','09 - Trindade','11 - Joinville','12 - Blumenau','21 - Estreito','24 - Rio do Sul',
                '26 - Itapema','27 - Jaraguá','28 - Blumenau','29 - Tijucas','30 - Brusque','32 - Vargem Grande','34 - Porto Belo','35 - Campeche','36 - Itajaí','37 - Navegantes'],
                datasets: [{
                    fill: false,
                    label: '# Chamados',
                    data: data_filial,
                    backgroundColor: [
                        'rgba(255, 23, 23, 0.2)',
                        'rgba(30, 162, 23, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(30, 162, 23, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive:true,
                indexAxis: 'x',
                scales: {
                    x: {
                        display: true
                    },
                    y: {
                        display: true
                    }
                }
            }
        });


        const ctxo = document.getElementById('myCharto');
        const myCharto = new Chart(ctxo, {
            type: 'line',
            data: {
                labels: label,
                datasets: [{
                    fill: true,
                    label: '# Chamados',
                    data: arr_ano,
                    backgroundColor:[
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgb(75, 192, 192)',

                    ],
                    tension: 0.1,
                    borderWidth: 1
                }]
            },
            options: {
                responsive:true,
                indexAxis: 'x',
                scales: {
                    x: {
                        display: true
                    },
                    y: {
                        display: true
                    }
                }
            }
        });



        var tipo_chamado = {!! $tipo_chamado !!};
        var labels = label; // Array para armazenar os rótulos dos meses
        var datasets = []; // Array para armazenar os datasets
        function randomColor() {
            var colors =  ['rgba(255, 99, 132, 1)',
                        'rgba(30, 162, 23, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)']
            var randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }
        // Iterar sobre as chaves (categorias) do tipo_chamado
        for (var categoria in tipo_chamado) {
            var dados = tipo_chamado[categoria]; // Dados da categoria atual

            var data = []; // Array para armazenar as contagens por mês

            var color = randomColor();
            // Iterar sobre as chaves (meses) dos dados da categoria atual
            for (var mes in dados) {
                var count = dados[mes]; // Contagem para o mês atual
                data.push(count); // Adicionar a contagem ao array de dados
            }

            // Criar um dataset para a categoria atual
            var dataset = {
                label: categoria,
                data: data,
                backgroundColor: color,
                borderColor: color,
                borderWidth: 1
            };

            datasets.push(dataset); // Adicionar o dataset ao array de datasets
        }

        // Configurar o gráfico
        var config = {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {}
        };

        // Criar o gráfico
        var myCharte = new Chart(document.getElementById('myCharte'), config);

        function reveal() {
            var reveals = document.querySelectorAll(".reveal");

            for (var i = 0; i < reveals.length; i++) {
                var windowHeight = window.innerHeight;
                var elementTop = reveals[i].getBoundingClientRect().top;
                var elementVisible = 20;

                if (elementTop < windowHeight - elementVisible) {
                reveals[i].classList.add("active");
                } else {
                reveals[i].classList.remove("active");
                }
            }
            }

        window.addEventListener("scroll", reveal);


        $(document).on('click','.total',function(){
            $.get("/admin/dash_total", {'type':$(this).attr('id')},
                (result) => {
                    arr_ano = [];
                    labels = [];
                    result.forEach(obj => {

                        if(obj.id == null){ labels.push('2019'); }
                        else if ($(this).attr('id') == 'mensal'){
                            labels.push(meses[obj.id -1]);
                        }
                        else{
                            labels.push(obj.id);
                        }
                        arr_ano.push(obj.total_chamados);
                    });


                    myCharto.data.datasets.forEach((dataset) => {
                        dataset.data = arr_ano;
                    });
                    myCharto.data.labels = labels;
                    myCharto.update();
                }
            );
            $('.selected').removeClass('selected')
            $(this).addClass('selected')

        })

        $(document).on('click','.total_red',function(){
            $.get("/admin/dash_filial", {'type':$(this).attr('id')},
                (result) => {
                    var arr_filial = [];
                    var teste = 0;
                    result.forEach(obj => {

                        if(obj.id != 0){ arr_filial.push(obj.total_chamados); teste += obj.total_chamados}
                    })
                    myChart.data.datasets.forEach((dataset) => {
                        dataset.data = arr_filial;
                    });
                    myChart.update();
                }
            );
            $('.selected_red').removeClass('selected_red')
            $(this).addClass('selected_red')

        })

        $(document).on('click','#mes',function(){
            arr_ano = [];
            labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dec',];

            data_ano.forEach(obj => {
                arr_ano.push(obj.total_chamados);
            });
            myCharto.data.datasets.forEach((dataset) => {
                dataset.data = arr_ano;
            });
            myCharto.data.labels = labels;
            myCharto.update();


        })
    </script>
@endsection