@extends('layouts.main-admin')

@section('title', 'Treinamentos')

@section('content')

    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Dashboard</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard">Início</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </nav>
        </div>

        <div class="card">
            <div class="card-body">
                <h5 class="card-title">PÁGINA DE INDICATIVOS</h5>
            </div>
        </div>

        <div class="card">
            <div class="card-body">

                <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                    <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#list-stores" type="button" role="tab" aria-controls="" aria-selected="true">Inicial</button>
                    </li>
                    <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#grafics" type="button" role="tab" aria-controls="profile" aria-selected="false">Gráficos</button>
                    </li>
                    <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
                    </li>
                </ul>

                <div class="tab-content pt-2" id="borderedTabContent">

                    <div class="tab-pane fade show active" id="list-stores" role="tabpanel" aria-labelledby="home-tab">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mt-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Quantidade de acessos por Loja</h5>
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                <th scope="col">Loja</th>
                                                <th scope="col">Acessos</th>
                                                </tr>
                                            </thead>
                                            @foreach($arrayBranchCount as $arrayBranchCount => $hits)
                                                <tbody>
                                                    <tr>
                                                    <td>{{ $arrayBranchCount }}</td>
                                                    <td>{{ $hits }}</td>
                                                    </tr>
                                                </tbody>
                                                                                            @endforeach
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card mt-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Acessos por módulo</h5>
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                <th scope="col">Módulo</th>
                                                <th scope="col">Acessos</th>
                                                </tr>
                                            </thead>
                                            @foreach($arrayDivisionCount as $arrayDivisionCount => $nameModule)
                                                <tbody>
                                                    <tr>
                                                        @if($arrayDivisionCount === 1)
                                                            <td>TI</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 2)
                                                            <td>Contabilidade</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 3)
                                                            <td>RH</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 4)
                                                            <td>Caixa</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 5)
                                                            <td>Crediário</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 6)
                                                            <td>Marketing</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 7)
                                                            <td>Vendas</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 8)
                                                            <td>Logística</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 9)
                                                            <td>Inventário</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 10)
                                                            <td>Dicas Core</td>
                                                        @endif
                                                        @if($arrayDivisionCount === 11)
                                                            <td>PDV CoreBusiness</td>
                                                        @endif
                                                        <td>{{$nameModule}}</td>
                                                    </tr>
                                                </tbody>
                                                                                            @endforeach
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                            <div class="tab-pane fade" id="grafics" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row">
                                    <div class="col-lg-6">
                                          <div class="card-body">
                                            <h5 class="card-title">Lojas do Ranking</h5>

                                            <!-- Pie Chart -->
                                            <div id="pieChart" style="min-height: 400px;" class="echart"></div>

                                            <script>


                                              let dice = {"":null};

                                                let stores = Object.keys(dice)
                                                let hits = Object.values(dice)

                                                let date = [];

                                                for (i = 0; i < stores.length; i++) {

                                                    let diceGrafic = {
                                                        name: stores[i],
                                                        value: hits[i]
                                                    };

                                                    date.push(diceGrafic)
                                                } 
                                              document.addEventListener("DOMContentLoaded", () => {
                                                echarts.init(document.querySelector("#pieChart")).setOption({
                                                  title: {
                                                    text: 'Acessos por lojas CDA',
                                                    subtext: '',
                                                    left: 'center'
                                                  },
                                                  tooltip: {
                                                    trigger: 'item'
                                                  },
                                                  legend: {
                                                    orient: 'vertical',
                                                    left: 'left'
                                                  },
                                                  series: [{
                                                    name: 'Acessos por loja',
                                                    type: 'pie',
                                                    radius: '50%',
                                                    data: date,
                                                    emphasis: {
                                                      itemStyle: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                      }
                                                    }
                                                  }]
                                                });
                                              });
                                            </script>
                                            <!-- End Pie Chart -->

                                          </div>
                                      </div>

                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h5 class="card-title">Categorias mais acessadas</h5>
                                            <!-- Bar Chart -->
                                            <div id="barChart" style="min-height: 400px;" class="echart"></div>
                                            <script>

                                            let diceWithModules = {"":null};

                                            let modules = Object.keys(diceWithModules)
                                            let access = Object.values(diceWithModules)

                                            for (var module in modules) {

                                                if(modules[module] == 1) {
                                                    modules[module] = 'TI'
                                                }
                                                if(modules[module] == 2) {
                                                    modules[module] = 'Contabilidade'
                                                }
                                                if(modules[module] == 3) {
                                                    modules[module] = 'RH'
                                                }
                                                if(modules[module] == 4) {
                                                    modules[module] = 'Caixa'
                                                }
                                                if(modules[module] == 5) {
                                                    modules[module] = 'Crediário'
                                                }
                                                if(modules[module] == 6) {
                                                    modules[module] = 'Marketing'
                                                }
                                                if(modules[module] == 7) {
                                                    modules[module] = 'Vendas'
                                                }
                                                if(modules[module] == 8) {
                                                    modules[module] = 'Logística'
                                                }
                                                if(modules[module] == 9) {
                                                    modules[module] = 'Inventário'
                                                }
                                                if(modules[module] == 10) {
                                                    modules[module] = 'Dicas Core'
                                                }
                                                if(modules[module] == 11) {
                                                    modules[module] = 'PDV CoreBusiness'
                                                }
                                            }



                                            document.addEventListener("DOMContentLoaded", () => {
                                                echarts.init(document.querySelector("#barChart")).setOption({
                                                xAxis: {
                                                    type: 'category',
                                                    data: modules
                                                },
                                                yAxis: {
                                                    type: 'value'
                                                },
                                                series: [{
                                                    data: access,
                                                    type: 'bar'
                                                }]
                                                });
                                            });
                                            </script>
                                            <!-- End Bar Chart -->
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="tab-pane fade" id="bordered-contact" role="tabpanel" aria-labelledby="contact-tab">
                            </div>

                    </div>

                </div>
            </div>
        </div>
    </main>
@endsection