@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><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>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="info-box" style="box-shadow: 0 1px 4px 0;" data-secuencia="1">
                <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text destacado_blue">La Filosofía CMI</span>
                    <span class="progress-description"> 
                         Acompañamos al Cliente<br>
                         durante todas las etapas<br>
                         del proceso.
                    </span>
                </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
        </div>
        <div class="col-md-3">
            <div class="info-box bg-green" style="box-shadow: 0 1px 4px 0;" data-perspectivas="1">
                <span class="info-box-icon"><i class="fa fa-cogs"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text destacado_blue">Balance</span>
                    <span class="progress-description"> 
                        Deberán considerarse<br>
                        las cuatro Perspectivas <br>
                        básicas de la Organización. 
                    </span>
                </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
        </div>
        <div class="col-md-3">
            <div class="info-box my-yellow" style="box-shadow: 0 1px 4px 0;" data-smart="1">
                <span class="info-box-icon"><i class="fa fa-check-square"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text destacado_blue">Metas con Criterio</span>
                    <span class="progress-description"> 
                        Los Indicadores de Desempeño <br>
                        o de Riesgo, deberán ajustarse<br>
                        a los criterios SMART.
                    </span>
                </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
        </div>
        <div class="col-md-3">
            <div class="info-box bg-blue" style="box-shadow: 0 1px 4px 0;" data-fases="1">
                <span class="info-box-icon"><i class="fa fa-line-chart"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text destacado_blue">Las Fases de Consultoría</span>
                    <span class="progress-description"> 
                        Comenzamos conociendo la <br>
                        Empresa y terminamos <br>
                        promoviendo su independencia.
                    </span>
                </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
        </div>
    </div>

    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modalSecuencia">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content fondo" style="padding: .8em">
                <div class="row" style="min-height: 7em">
                    <div class="col-sm-12" style="text-align:center">
                        <img src="{{asset('images/cmi_secuencia.png')}}" alt="secuencia" data-perspectivas="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modalPerspectivas">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content fondo" style="padding: .8em">
                <div class="row" style="min-height: 7em">
                    <div class="col-sm-12" style="text-align:center">
                        <img src="{{asset('images/cmi_perspectivas.png')}}" alt="smart">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modalSmart">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content fondo" style="padding: .8em">
                <div class="row" style="min-height: 7em">
                    <div class="col-sm-12" style="text-align:center">
                        <img src="{{asset('images/cmi_smart.png')}}" alt="smart">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modalFases">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content fondo" style="padding: .8em">
                <div class="row" style="min-height: 25em">
                    <div class="col-sm-12" style="text-align:center; margin-top:6em; margin-bottom:6em">
                        <img src="{{asset('images/cmi_fases.png')}}" alt="smart" width="770px">
                    </div>
                </div>
            </div>
        </div>
    </div>

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




@section('javascript')
<script>
    var body = $('body');
    body.attr('class','sidebar-mini');
    $(function () {
        $("[data-secuencia]").on('click',showSecuencia);
        $("[data-perspectivas]").on('click',showPerspectivas);
        $("[data-smart]").on('click',showSmart);
        $("[data-fases]").on('click',showFases);
    });
    function showSecuencia() {
        $("#modalSecuencia").modal('show');
    }
    function showPerspectivas() {
        $("#modalPerspectivas").modal('show');
    }
    function showSmart() {
        $("#modalSmart").modal('show');
    }
    function showFases() {
        $("#modalFases").modal('show');
    }
</script>
@endsection