@extends('layouts.master')
@section('alpine')
    <script src="{{asset('js/alpine.js')}}"></script>
@endsection
@section('animations')
    <link rel="stylesheet" href="{{'/css/animate.min.css'}}">
    <link rel="stylesheet" href="{{'/css/owl.transitions.css'}}">
@endsection
@section('graficos')
    <script src="{{asset('code/highcharts.js')}}"></script>
    <script src="{{asset('code/modules/series-label.js')}}"></script>
    <script src="{{asset('code/highcharts-more.js')}}"></script>
    <script src="{{asset('code/highcharts-3d.js')}}"></script>
    <script src="{{asset('code/modules/drilldown.js')}}"></script>
    <script src="{{asset('code/modules/data.js')}}"></script>
    <script src="{{asset('code/modules/exporting.js')}}"></script>
    <script src="{{asset('code/modules/export-data.js')}}"></script>
@endsection
@section('content')
@include('partials.containers-header')
<div x-data="data()">
    <div class="row" style="margin-bottom: .5em;" id="perf">
        <span style="font-size: 20px; margin-left:1em">@lang('KPIs Board') ({{count($kpis)}})</span>
        <a href="#" class="btn btn-sm btn-success"
            x-on:click="toogleKpis()"
            style="margin-left: 1em;">
            <template x-if="kpis">
                <i class="fa fa-eye-slash"></i>
            </template>
            <template x-if="!kpis">
                <i class="fa fa-eye"></i>
            </template>
        </a>
    </div>
    @foreach ($kpis as $kpi)
    <div class="row wow fadeInDown animated" style="margin-bottom: 1em;" x-show="kpis" data-wow-duration="300ms" data-wow-delay="200ms">
        <div class="col-md-3" style="height: 200px;">
            @include('partials.box',['alto' => '172px'])
        </div>
        <div class="col-md-9" id="graf">
            <div id="{{$kpi->id}}" style="height: 200px; border-radius:3px; box-shadow: 0 1px 4px 0;"></div>
            @include('charts.indicator_line',[
                'id'       => $kpi->id,
                'location' => $kpi->id,
                'title'    => $kpi->kpi,
                'start'    => $kpi->init_date_graph,
                'labels'   => 'true',
                'd3'       => 'true',
                'route'    => env('APP_URL','http://localhost/').'api/v1/noi/'.$kpi->id,

            ])
        </div>
    </div>    
    @endforeach
    <div class="row" style="margin-bottom: .5em;" id="risk">
        <span style="font-size: 20px; margin-left:1em">@lang('KRIs Board') ({{count($kris)}})</span>
        <a href="#" class="btn btn-sm btn-success"
            x-on:click="toogleKris()"
            style="margin-left: 1em;">
            <template x-if="kris">
                <i class="fa fa-eye-slash"></i>
            </template>
            <template x-if="!kris">
                <i class="fa fa-eye"></i>
            </template>
        </a>
    </div>
    @foreach ($kris as $kpi)
    <div class="row wow fadeInDown animated" style="margin-bottom: 1em;" x-show="kris" data-wow-duration="300ms" data-wow-delay="200ms">
        <div class="col-md-3" style="height: 200px;">
            @include('partials.box',['alto' => '172px'])
        </div>
        <div class="col-md-9">
            <div id="{{$kpi->id}}" style="height: 200px; border-radius:3px; box-shadow: 0 1px 4px 0;" id="graf"></div>
            @include('charts.indicator_line',[
                'id'       => $kpi->id,
                'location' => $kpi->id,
                'title'    => $kpi->kpi,
                'start'    => $kpi->init_date_graph, //->toDateString(),
                'labels'   => 'true',
                'd3'       => 'true',
                'route'    => env('APP_URL','http://localhost/').'api/v1/noi/'.$kpi->id,
            ])
        </div>
    </div>    
    @endforeach
</div>
@include('partials.containers-footer')
@endsection

@section('javascript')
<script>
    function data() {
        return {
            kpis: true,
            kris: false,
            toogleKpis() {
                this.kpis = !this.kpis;
            },
            toogleKris() {
                this.kris = !this.kris;
            },
        }
    }
</script>
<script type="text/javascript">
function startIntro(){
    var intro = introJs();
    intro.setOptions({
        nextLabel: "{{__('Next')}}",
        prevLabel: "{{__('Prev')}}",
        skipLabel: "{{__('Skip')}}",
        doneLabel: "{{__('Done')}}",
        steps: [
            { 
                intro: "{{__('This is the Board with History of the Balanced Scoredcard')}}!!"
            },
            {
                element: '#perf',
                intro: "{{__('Performance Indicators')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#resu')[0],
                intro: "{{__('Last measurement Result of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#msta')[0],
                intro: "{{__('How many measurements has this Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#devi')[0],
                intro: "{{__('Actual deviation of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#name')[0],
                intro: "{{__('Indicator Name or Description')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#resp')[0],
                intro: "{{__('Indicator Responsable name')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#graf')[0],
                intro: "{{__('Historical Graph of the Indicator')}}",
                // position: 'up'
            },
            {
                element: '#risk',
                intro: "{{__('Risk Indicators')}}",
                // position: 'up'
            },
        ]
    });

    intro.start();
}
</script>
@endsection