@extends('layouts.master')
@section('content')
    @include('partials.containers-header')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
                    @lang('Welcome to <b>BSC</b> System') !!!</b>
                </div>

                <div class="card-body">
                    @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 of all this'):</li>
                        <li><b>@lang('Increase profitability')</b> @lang('reducing costs and/or increasing sales').</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: 11em">
                {{-- <span class="info-box-icon" style="font-weight: bold;">1</span> --}}
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">1. @lang('Define Objectives')</span>
                    @lang('Using the <b>Map option</b>, define at least one objective in each Perspective')
                    <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 bg-green" style="box-shadow: 0 1px 4px 0; height: 11em">
                {{-- <span class="info-box-icon" style="font-weight: bold;">2</span> --}}
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">2. @lang('Define KPIs/KRIs')</span>
                    @lang('Using the <b>BSC option</b>, define at least one Performance Indicator for each Objective')
                    <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 my-yellow" style="box-shadow: 0 1px 4px 0; height: 11em">
                {{-- <span class="info-box-icon" style="font-weight: bold;">3</span> --}}
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">3. @lang('Initiatives & Tasks')</span>
                    @lang('Define Initiatives, Tasks and Responsables for each Performance Indicador')
                    <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 bg-blue" style="box-shadow: 0 1px 4px 0; height: 11em">
                {{-- <span class="info-box-icon" style="font-weight: bold;">4</span> --}}
                <div class="info-box-content" style="text-justify">
                    <span class="info-box-text destacado_blue">4. @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-four="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.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);
    });
    function showOne() {
        $("#modalOne").modal('show');
    }
    function showTwo() {
        $("#modalTwo").modal('show');
    }
    function showThree() {
        $("#modalThree").modal('show');
    }
    function showFour() {
        $("#modalFour").modal('show');
    }
</script>
@endsection