@extends('layouts.app')

@section('style')

<style>
    .ibox-tools{
        float:right;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{{__('texte.dashboard.dashboard')}}</h5>
            </div>

            <div class="row" style="margin-top:30px">
                @if(auth()->user()->hasRole('Администратор') || auth()->user()->hasRole('Super Admin'))                
                <div class="col-lg-4">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <span class="label label-info float-right">{{__('texte.dashboard.months')}}</span>
                            </div>
                            <h5>{{__('texte.dashboard.statistics')}}</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{number_format(count($last_year_expeditions),0,',',' ')}}</h1>
                            <div class="stat-percent font-bold text-info">{{count($previous_year_expeditions)!=0 ? number_format(count($last_year_expeditions)*100/count($previous_year_expeditions),0) : 100}}% <i class="fa fa-level-{{count($last_year_expeditions)>=count($previous_year_expeditions) ? 'up' : 'down'}}"></i></div>
                            <small>{{__('texte.dashboard.total_expeditions')}}</small>
                        </div>
                    </div>
                </div>
                @endif
                <div class="col-lg-4">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <span class="label label-primary float-right">{{date('d.m.Y')}}</span>
                            </div>
                            <h5>{{__('texte.dashboard.date_time')}}</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{date('H:i:s')}}</h1>
                            <div class="stat-percent font-bold text-navy"><i class="fa fa-clock-o"></i></div>
                            <small>{{mb_ucfirst(Carbon\Carbon::now()->translatedFormat('l d ')).mb_ucfirst(Carbon\Carbon::now()->translatedFormat('F Y'))}}</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <span class="label label-danger float-right">{{__('texte.dashboard.data')}}</span>
                            </div>
                            <h5>{{__('texte.dashboard.last_login')}}</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{__('texte.dashboard.ip')}}: {{auth()->user()->last_login_ip}}</h1>
                            <div class="stat-percent font-bold text-danger"><i class="fa fa-sign-out"></i></div>
                            <small>{{date('d.m.Y H:i:s', strtotime(auth()->user()->last_login))}}</small>
                        </div>
                    </div>
                </div>                
            </div>
            @if(auth()->user()->hasRole('Администратор') || auth()->user()->hasRole('Super Admin'))
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>{{__('texte.dashboard.statistics')}}</h5>
                            <div class="ibox-tools">
                                <div class="btn-group">
                                    <span class="label label-primary float-right">{{__('texte.dashboard.current_month')}}</span>                                    
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                            <div class="col-lg-9">
                                <div id="flot-dashboard-chart" class='flot-chart'></div>
                            </div>
                            <div class="col-lg-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">{{number_format(count($month_expeditions),0,',',' ')}}</h2>
                                        <small>{{__('texte.dashboard.current_mont_expeditions')}}</small>
                                        <div class="stat-percent">{{count($previous_month_expeditions)!=0 ? number_format(count($month_expeditions)*100/count($previous_month_expeditions),0) : 100}}% <i class="fa fa-level-{{count($month_expeditions)>=count($previous_month_expeditions) ? 'up' : 'down'}} text-navy"></i></div>
                                        <div class="progress progress-mini">
                                            <div style="width: {{count($previous_month_expeditions)!=0 ? number_format(count($month_expeditions)*100/count($previous_month_expeditions),0) : 100}}%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">{{number_format(count($previous_month_expeditions),0,',',' ')}}</h2>
                                        <small>{{__('texte.dashboard.last_month_expeditions')}}</small>
                                        <div class="stat-percent">{{count($last_to_previous_month_expeditions)!=0 ? number_format(count($previous_month_expeditions)*100/count($last_to_previous_month_expeditions),0) : 100}}% <i class="fa fa-level-{{count($previous_month_expeditions)>=count($last_to_previous_month_expeditions) ? 'up' : 'down'}} text-navy"></i></div>
                                        <div class="progress progress-mini">
                                            <div style="width: {{count($last_to_previous_month_expeditions)!=0 ? number_format(count($previous_month_expeditions)*100/count($last_to_previous_month_expeditions),0) : 100}}%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                  </ul>
                            </div>
                        </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>{{__('texte.dashboard.last_expeditions')}}</h5>
                        </div>
                        <div class="ibox-content table-responsive">
                            <table class="table table-hover no-margins">
                                <thead>
                                <tr>
                                    <th>{{__('texte.dashboard.number')}}</th>
                                    <th>{{__('texte.dashboard.date')}}</th>
                                    <th>{{__('texte.dashboard.storage')}}</th>
                                    <th>{{__('texte.dashboard.creator')}}</th>
                                    <th>{{__('texte.dashboard.type')}}</th>
                                    <th>{{__('texte.dashboard.status')}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($last_expeditions as $expedition)
                                    <tr>
                                        <td>{{$expedition->id}}</td>
                                        <td>{{date('d.m.Y',strtotime($expedition->date))}}</td>
                                        <td>{{$expedition->storage->name}}</td>
                                        <td>{{$expedition->user->name}}</td>
                                        <td>{{$expedition->type}}</td>
                                        <td>{{__('texte.expeditions_statuses_arr')[$expedition->status]}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-content">
                        @include('includes.dashboard')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('js/flot/jquery.flot.tooltip.min.js') }}"></script> 
<script src="{{ asset('js/flot/jquery.flot.spline.js') }}"></script>
<script src="{{ asset('js/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('js/flot/jquery.flot.pie.js') }}"></script> 
<script src="{{ asset('js/flot/jquery.flot.symbol.js') }}"></script> 
<script src="{{ asset('js/flot/jquery.flot.time.js') }}"></script> 



<script>
    var chart_expeditions = {!! isset($chart_expeditions) ? json_encode($chart_expeditions) : [] !!};

    var data2 = [];
    var data3 = [];
    
        $(document).ready(function() {
            
            if(chart_expeditions!=0){
                for(var i in chart_expeditions){
                    data3[i] = [gd(chart_expeditions[i].year,chart_expeditions[i].month, chart_expeditions[i].day), chart_expeditions[i].count_expeditions];
                }
            }            
            
            console.log(data2);


            var dataset = [
                {
                    label: "Брой експедиции",
                    data: data3,
                    color: "#1ab394",
                    bars: {
                        show: true,
                        align: "center",
                        barWidth: 24 * 60 * 60 * 600,
                        lineWidth:0
                    }

                }
            ];


            var options = {
                xaxis: {
                    mode: "time",
                    tickSize: [3, "day"],
                    tickLength: 0,
                    axisLabel: "Date",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 10,
                    color: "#d5d5d5"
                },
                yaxes: [{
                    position: "left",
                    color: "#d5d5d5",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 3
                }, {
                    position: "right",
                    clolor: "#d5d5d5",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: ' Arial',
                    axisLabelPadding: 67
                }
                ],
                legend: {
                    noColumns: 1,
                    labelBoxBorderColor: "#000000",
                    position: "nw"
                },
                grid: {
                    hoverable: false,
                    borderWidth: 0
                }
            };

            function gd(year, month, day) {
                return new Date(year, month - 1, day).getTime();
            }

            var previousPoint = null, previousLabel = null;

            $.plot($("#flot-dashboard-chart"), dataset, options);

            
        });
    
    </script>
@endsection