@extends('app')

@section('content')
	<div class="row welcome-row">
    	<div class="col-md-6 col-xs-12 welcome-mis-datos">
            <div class="row">
                <div class="col-md-4 col-xs-12 text-center">
                    <img src="/img/icon-dummy-avatar.png" alt="">
                </div>
                <div class="col-md-8 col-xs-12">
                    <h2 class="welcome-section-title">
                        BINVENIDO {{Auth::user()->full_name}}
                    </h2>
                    
                   <ul>
                        <li>
                            <h5>
                                <span>Nº de Empleado</span>
                                <span>{!!Auth::user()->employee_number!!}</span>
                            </h5>
                        </li>
                        <li>
                            <h5>
                                <span>CUSP</span>
                            </h5>
                                <span>{!!Auth::user()->cusp!!}</span>
                            
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <h2 class="welcome-section-title">proximos compromisos</h2>
            <div class="panel panel-compromisos">
                <div class="panel-heading">
                    Proximos compromisos
                </div>

                <div class="list-group" style="height: 200px; overflow: auto;">
                    @forelse($events as $event)
                        <a href="/mapa-citas" class="list-group-item">
                            <span>
                                Fecha del evento : {{$event->datetime->format('d-m-y')}}    
                            </span>
                            
                            @if(auth()->user()->role == 'admin' and $user = $event->user)
                                <span>
                                    Gerencia : {{$user->management->name}}
                                </span>
                            @endif
                            @if(in_array(auth()->user()->role, ['admin', 'manager']) and ($user=$event->user) and $user->id !== auth()->id())
                                <span>
                                    Ejecutivo : {{$user->employee_number}}
                                </span>
                            @endif
                            <span>
                                Lugar del evento:  {{$event->location}}
                            </span>
                        </a>
                   @empty 
                        <h4 class="text-center">Sin compromisos proximos</h4>
                    @endforelse
                
                </div>
            </div>
        </div>
	</div>

    <div class="row welcome-row">
		<div class="col-md-6 col-xs-12">
            <div class="row">
                <h2 class="welcome-section-title">Citas VS Concretadas</h2>
                <canvas id="BarChart"></canvas>             
            </div>
        </div>
		<div class="col-md-6 col-xs-12">
            <div class="row">
                <h2 class="welcome-section-title">Clientes con Cita y sin Cita</h2>
                <canvas id="PieChart" ></canvas>
            </div>
            <!-- <div class="row text-center">
                <div class="col col-xs-6" id="clients_with_assign">Clientes con asignación 6</div>
                <div class="col col-xs-6">Clientes sin asginación 7</div>
            </div>  -->     
        </div>
    </div>

@endsection

@section('modals')
	@include('calendar.partials.show_event')
@endsection

@section('script')
	

    
    {!! Html::script('js/Chart.js')!!}    
    
    <script>



        $(function(){
            //Indica el numero de citas creadas
            barChart();
            //Indica el numero de clientes sin ejectivo vs con ejecutivo
            pieChart();
        });

    function barChart(){
        var months = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
        var d = new Date();
        var current_month = d.getMonth();
        
        // regresamos los 4 meses anteriores al actual

        if(current_month == 0){
            first_month = 8; 
            second_month = 9;
            third_month = 10;
            fourth_month = 11;
        }

        else if(current_month == 1){
            first_month = 9; 
            second_month = 10;
            third_month = 11;
            fourth_month = 0;

        }else if(current_month == 2){
            first_month = 10; 
            second_month = 11;
            third_month = 0;
            fourth_month = 1;

        }else if(current_month == 3){
            first_month = 11; 
            second_month = 0;
            third_month = 1;
            fourth_month = 2;                
        }
        else{
            first_month = (current_month - 4) % 12;  
            second_month = (current_month - 3) % 12;  
            third_month =  (current_month - 2) % 12;  
            fourth_month =  (current_month - 1) % 12;  
        }

        months_array = [first_month,second_month,third_month,fourth_month,current_month];

        $.ajax({
            method : "GET",
            url: laroute.action('Api\WelcomeController@getEventsByMonth'),
            data : {months_array : months_array }
        }).done(function(datos){
            console.log(datos);
            var ctx = document.getElementById("BarChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: [months[first_month],months[second_month],months[third_month],months[fourth_month],months[current_month]],
                    datasets: [{
                        label: 'Citas creadas por mes',
                        data: datos
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        });
    }

    function pieChart(){
        $.ajax({
            url: laroute.action('Api\WelcomeController@getClients')
        }).done(function(datos){
            var ctx = $('#PieChart');
            var myPieChart = new Chart(ctx,{
                type: 'pie',
                data: {
                    labels: ['Clientes con asignación','Clientes sin asignación'],
                    datasets: [{
                        label: '# of Votes',
                        data: datos,
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB"
                        ]
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });


        });

        

    }

    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    {!!Html::script('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js')!!}
@endsection

@section('style')
@parent
    {!!Html::style('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css')!!}
@endsection