@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('content')
@include('partials.containers-header')
<div x-data="data()">
    <div class="row" style="margin-bottom: .5em;" id="perf">
        <div class="col-sm-4">
            <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>
        <div class="col-sm-5"></div>
        <div class="col-sm-3">
            <select name="perspective_id" id="perspective_id" class="form-control" style="box-shadow: 0 1px 4px 0;">
                <option value="">@lang('All Perspectives')</option>
                @foreach ($arrActiPers as $key => $value)
                    <option value="{{$key}}" {{$sele == $key ? 'selected' : ''}}>{{__($value)}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row wow fadeInDown animated" style="margin-bottom: 1em;" x-show="kpis" data-wow-duration="300ms" data-wow-delay="200ms">
    @foreach ($kpis as $kpi)
        <div class="col-md-3" style="height: 200px;">
            @include('partials.box')
        </div>
        @endforeach
    </div>    
    <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>
    <div class="row wow fadeInDown animated" style="margin-bottom: 1em;" x-show="kris" data-wow-duration="300ms" data-wow-delay="200ms">
    @foreach ($kris as $kpi)
        <div class="col-md-3" style="height: 200px;">
            @include('partials.box')
        </div>
        @endforeach
    </div>    
</div>
@include('partials.containers-footer')
@endsection

@section('javascript')
<script>
    $(function () {
        $("#perspective_id").on("change", function (e) {
            url = "/dashboard/board/" + e.target.value;
            window.location = url;
        });
    })
</script>
<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 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: '#risk',
                intro: "{{__('Risk Indicators')}}",
                // position: 'up'
            },
        ]
    });

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