@extends('layouts.master')
@section('content')
    @include('partials.containers-header')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    @lang('Welcome')!!! @lang('The <b>BSC</b> System implemented by') <span class="destacado_blue">Lufeman Software, C.A.</span> @lang('is a tool that allows'):<br>
                    <ul>
                        <li><b>@lang('Comunicate')</b> @lang('Strategic Decisions throughout your Organization').</li>
                        <li><b>@lang('Execute')</b> @lang('sustainable and high impact changes at all levels'). @lang('90% of the Failures are in the execution of the outlined Strategic Plan').</li>
                        <li><b>@lang('Visualize and Control')</b> @lang('The Initiatives and Tasks executed will be revealed, allowing adjustments to be made when required').</li>
                        <li><b>@lang('Build Customer Loyalty')</b> @lang('increasing their satisfaction and as a consequence: ')<b>@lang('Increase profitability')</b></li>
                    </ul>
                    @lang('In order to have a good experience with the System, follow these steps'):<br>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="info-box" style="box-shadow: 0 1px 4px 0; height: 10.5em">
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">1. @lang('Vision & Purpose')</span>
                    @lang('Using the <b>Config/Company</b> option, define your Vision to 1, 3 and 5 years')
                    <br>
                    <button class="btn btn-dark btn-sm mt-2" data-one="1">@lang('Read More')</button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box" style="box-shadow: 0 1px 4px 0; height: 10.5em">
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">2. @lang('Define Objectives')</span>
                    @lang('Using the <b>Map</b> option, define at least one objective in each Perspective')
                    <br>
                    <button class="btn btn-dark btn-sm mt-2" data-two="1">@lang('Read More')</button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box bg-green" style="box-shadow: 0 1px 4px 0; height: 10.5em">
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">3. @lang('Define KPIs/KRIs')</span>
                    @lang('Using the <b>BSC</b> option, define at least one Performance Indicator for each Objective')
                    <br>
                    <button class="btn btn-dark btn-sm mt-2" data-three="1">@lang('Read More')</button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box my-yellow" style="box-shadow: 0 1px 4px 0; height: 10.5em">
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">4. @lang('Initiatives & Tasks')</span>
                    @lang('Inside each Indicatror, define Initiatives, Tasks and Responsables for each one')
                    <br>
                    <button class="btn btn-dark btn-sm mt-2" data-four="1">@lang('Read More')</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="info-box bg-blue" style="box-shadow: 0 1px 4px 0; height: 8em">
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">5. @lang('Feed Measurements')</span>
                    @lang('Feed the system with corresponding data for each measurements')
                    <br>
                    <button class="btn btn-dark btn-sm mt-2" data-five="1">@lang('Read More')</button>
                </div>
            </div>
        </div>
    </div>

    {{--@include('partials.help.help-one')--}}
    {{--@include('partials.help.help-two')--}}
    {{--@include('partials.help.help-three')--}}
    {{--@include('partials.help.help-four')--}}
    {{--@include('partials.help.help-five')--}}

    @include('partials.containers-footer')
@endsection




@section('javascript')
<script>
    var body = $('body');
    body.attr('class','sidebar-mini');
    $(function () {
        $("[data-one]").on('click',showOne);
        $("[data-two]").on('click',showTwo);
        $("[data-three]").on('click',showThree);
        $("[data-four]").on('click',showFour);
        $("[data-five]").on('click',showFive);
    });
    function showOne() {
        $("#modalOne").modal('show');
    }
    function showTwo() {
        $("#modalTwo").modal('show');
    }
    function showThree() {
        $("#modalThree").modal('show');
    }
    function showFour() {
        $("#modalFour").modal('show');
    }
    function showFive() {
        $("#modalFive").modal('show');
    }
</script>
@endsection