@extends('modules.head')
@section('contenido')

<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="{{url('/deliveryMan')}}" class="card-home">
            <div class="info-box">
                <span class="info-box-icon bg-aqua">
                    <i class="fa fa-envelope-o itarget"></i>
                </span>

                <div class="info-box-content">
                    <span class="info-box-text">{{ Lang::get('messages.screen_home_tag1')}}</span>
                    <span class="info-box-number">{{$deliveryMan}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </a>
        <!-- /.info-box -->
    </div>
    <!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="{{url('/orders')}}" class="card-home">
            <div class="info-box">
                <span class="info-box-icon bg-red">
                    <i class="ion ion-ios-paperplane-outline itarget"></i>
                </span>

                <div class="info-box-content">
                    <span class="info-box-text">{{ Lang::get('messages.screen_home_tag2')}}</span>
                    <span class="info-box-number" id="cant_transfer">{{$transfer}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </a>
        <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <!-- fix for small devices only -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="{{url('/orders')}}" class="card-home">
            <div class="info-box">
                <span class="info-box-icon bg-green">
                    <i class="ion ion-ios-cart-outline itarget"></i>
                </span>

                <div class="info-box-content">
                    <span class="info-box-text">{{ Lang::get('messages.screen_home_tag3')}}</span>
                    <span class="info-box-number" id="cant_orders">{{$orders}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </a>
        <!-- /.info-box -->
    </div>
    <!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="{{url('/clients')}}" class="card-home">
            <div class="info-box">
                <span class="info-box-icon bg-yellow">
                    <i class="ion ion-ios-people-outline itarget"></i>
                </span>

                <div class="info-box-content">
                    <span class="info-box-text">{{ Lang::get('messages.screen_home_tag4')}}</span>
                    <span class="info-box-number">{{$clients}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </a>
        <!-- /.info-box -->
    </div>
    <!-- /.col -->
</div>


<div class="row"
    style="margin-bottom: 15px; background-color: #fff; padding-bottom: 8px;padding-top: 8px; margin-right: 0px;margin-left: 0px;">
    <div class="col-xs-2" style="display: flex; align-items:center; margin-top: 10px;">
        <label style="margin-right:2%;">{{ Lang::get('messages.screen_home_tag5')}}:</label>
        <select class="form-control" name="estado" id="select-filter-graphics-year">
            @if(count($average)>0)
            @foreach($average as $value)
            @if($currentYear==$value->year)
            <option value="{{$value->year}}" selected="selected"> {{$value->year}}</option>
            @else
            <option value="{{$value->year}}">
                {{$value->year}}
            </option>
            @endif
            @endforeach
            @else
            <option value="{{$currentYear}}">
                {{$currentYear}}
            </option>
            @endif

        </select>
    </div>
    <div class="col-xs-2" style="display: flex; align-items:center; margin-top: 10px;">
        <label style="margin-right:2%;">{{ Lang::get('messages.screen_home_tag6')}}:</label>
        <select class="form-control" name="estado" id="select-filter-graphics-month">
            <option id="idselected" value="ninguna" selected="selected">{{ Lang::get('messages.screen_home_tag7')}}
            </option>
            <option value="1">{{ Lang::get('messages.Enero') }}</option>
            <option value="2">{{ Lang::get('messages.Febrero') }}</option>
            <option value="3">{{ Lang::get('messages.Marzo') }}</option>
            <option value="4">{{ Lang::get('messages.Abril') }}</option>
            <option value="5">{{ Lang::get('messages.Mayo') }}</option>
            <option value="6">{{ Lang::get('messages.Junio') }}</option>
            <option value="7">{{ Lang::get('messages.Julio') }}</option>
            <option value="8">{{ Lang::get('messages.Agosto') }}</option>
            <option value="9">{{ Lang::get('messages.Septiembre') }}</option>
            <option value="10">{{ Lang::get('messages.Octubre') }}</option>
            <option value="11">{{ Lang::get('messages.Noviembre') }}</option>
            <option value="12">{{ Lang::get('messages.Diciembre') }}</option>

        </select>
    </div>

    @if(Auth::user()->rol->id==1 || Auth::user()->rol->id==6)
    <div class="col-xs-5" style="display: flex; align-items:center; margin-top: 10px;">
        <label style="margin-right:2%;">{{ Lang::get('messages.screen_products_tag55')}}</label>
        <select class="form-control" name="estado" id="select-filter-graphics-sucursals">

            <option value="todos" selected="selected">{{ Lang::get('messages.screen_home_tag7')}}</option>
            @foreach($sucursals as $sucu)
            @if(Auth::user()->userInfo->sucursal->id==$sucu->id)
            <option value="{{$sucu->id}}">
                {{$sucu->name}}
            </option>
            @else
            <option value="{{$sucu->id}}">
                {{$sucu->name}}
            </option>
            @endif
            @endforeach
            @if($ecommerceVerif == true)
            <option value="ec">E-commerce</option>
            @endif
        </select>
    </div>
    @endif
    <div class="col-xs-2" style="margin-top: 10px;">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" id="btn-filter-graphics">
                <i class="fa fa-search" style="margin-right:4px;"></i>{{ Lang::get('messages.screen_home_tag8')}}
            </button>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-md-6">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Usuarios conectados ultimos 7 dias</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <div class="box-body" id="content-chart">
                <canvas id="lineChart" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">Usuarios nuevos ultimos 3 meses</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
          </div>
          <div class="box-body">
            <div class="chart">
              <canvas id="lineChartMonth" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"></canvas>
            </div>
          </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-xs-6">
        <div class="box box-sucess">
            <div class="box-header with-border">
                <h3 class="box-title">
                    <font>
                        <font>{{ Lang::get('messages.screen_home_tag9')}}</font>
                    </font>
                </h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body" id="content-tiempos">
                {{--
                <canvas id="myChart" style="height: 204px; width: 409px;" width="409" height="204"></canvas> --}}
                <canvas id="tiempos" width="803" height="401" class="chartjs-render-monitor"
                    style="display: block; width: 803px; height: 401px;"></canvas>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
    <div class="col-xs-6">
        <div class="box box-sucess">
            <div class="box-header with-border">
                <h3 class="box-title">
                    <font>
                        <font>{{ Lang::get('messages.screen_home_tag10')}}</font>
                    </font>
                </h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body" id="content-estado">

                <canvas id="estados" width="803" height="401" class="chartjs-render-monitor"
                    style="display: block; width: 803px; height: 401px;"></canvas>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box box-sucess">
            <div class="box-header with-border">
                <h3 class="box-title">
                    <font>
                        <font>{{ Lang::get('messages.screen_home_tag11')}}</font>
                    </font>
                </h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body" id="content-ventas">
                {{--
                <canvas id="myChart" style="height: 204px; width: 409px;" width="409" height="204"></canvas> --}}
                <canvas id="ventas" width="803" height="301" class="chartjs-render-monitor"
                    style="display: block; width: 803px; height: 401px;"></canvas>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>


<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/chart/Chart.min.js')}}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/home.js') }}"></script>
<script>
    $(function () {
        $.ajax({
            url: "/chartConnect",
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": "application/json",
            },
            success: function (r) {
                if(r.r){
                    var labels = [];
                    var data = [];
                    for (let i = 0; i < r.d.length; i++) {
                        const item = r.d[i];
                        labels.push(item.date);
                        data.push(item.visitors);
                    }

                    var ctx3 = document.getElementById("lineChart").getContext("2d");
                    var chart3 = new Chart(ctx3, {
                        type: "line",
                        data: {
                            labels,
                            datasets: [
                                {
                                    label: "Visitas",
                                    data,
                                    datasets: [
                                        {
                                            label: "Digital Goods",
                                            fillColor: "rgba(60,141,188,0.9)",
                                            strokeColor: "rgba(60,141,188,0.8)",
                                            pointColor: "#3b8bba",
                                            pointStrokeColor: "rgba(60,141,188,1)",
                                            pointHighlightFill: "#fff",
                                            pointHighlightStroke: "rgba(60,141,188,1)",
                                        },
                                    ],
                                },
                            ],
                        },
                    });
                }
            },
        });

        $.ajax({
            url: "/chartRegister",
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": "application/json",
            },
            success: function (r) {
                if(r.r){
                    var labelsMonth = [];
                    var dataMonth = [];
                    for (let j = 0; j < r.d.length; j++) {
                        const value = r.d[j];
                        labelsMonth.push(getMonth(value.date));
                        dataMonth.push(value.register);
                    }

                    var ctx3 = document.getElementById("lineChartMonth").getContext("2d");
                    var chart3 = new Chart(ctx3, {
                        type: "line",
                        data: {
                            labels: labelsMonth,
                            datasets: [
                                {
                                    label: "Usuarios Nuevos",
                                    data: dataMonth,
                                    datasets: [
                                        {
                                            label: "Digital Goods",
                                            fillColor: "rgba(60,141,188,0.9)",
                                            strokeColor: "rgba(60,141,188,0.8)",
                                            pointColor: "#3b8bba",
                                            pointStrokeColor: "rgba(60,141,188,1)",
                                            pointHighlightFill: "#fff",
                                            pointHighlightStroke: "rgba(60,141,188,1)",
                                        },
                                    ],
                                },
                            ],
                        },
                    });
                }
            },
        });
    });
    function getMonth(monthNumber){
        if(monthNumber && monthNumber != ""){
            if(monthNumber == "01"){
                return Lang.get("messagesClient.Enero");
            }
            if(monthNumber == "02"){
                return Lang.get("messagesClient.Febrero");
            }
            if(monthNumber == "03"){
                return Lang.get("messagesClient.Marzo");
            }
            if(monthNumber == "04"){
                return Lang.get("messagesClient.Abril");
            }
            if(monthNumber == "05"){
                return Lang.get("messagesClient.Mayo");
            }
            if(monthNumber == "06"){
                return Lang.get("messagesClient.Junio");
            }
            if(monthNumber == "07"){
                return Lang.get("messagesClient.Julio");
            }
            if(monthNumber == "08"){
                return Lang.get("messagesClient.Agosto");
            }
            if(monthNumber == "09"){
                return Lang.get("messagesClient.Septiembre");
            }
            if(monthNumber == "10"){
                return Lang.get("messagesClient.Octubre");
            }
            if(monthNumber == "11"){
                return Lang.get("messagesClient.Noviembre");
            }
            if(monthNumber == "12"){
                return Lang.get("messagesClient.Diciembre");
            }
        }
        return "";
    }
</script>
@endsection