@extends('layout.backend.main')

@section('content')

@if (Auth::user()->can('report_see_total'))
    <!-- BEGIN DASHBOARD STATS 1-->
    <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <a class="dashboard-stat dashboard-stat-v2 blue" href="/reports/charts" style="margin-bottom:4px">
            <div class="visual" style="height:40px">
                <i class="fa fa-bar-chart-o"></i>
            </div>
            <div class="details">
                <div class="desc"> {{trans('x.Confirmed orders')}} / {{trans('x.Pieces')}}</div>
                <div class="number" style="padding-top:6px">
                    <span data-counter="counterup" data-value="{!!$confirmedOrders!!}">0</span> / 
                    <span data-counter="counterup" data-value="{!!$confirmedPieces!!}">0</span> 
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <a class="dashboard-stat dashboard-stat-v2 yellow" href="/reports/charts" style="margin-bottom:4px">
            <div class="visual" style="height:40px">
                <i class="fa fa-bar-chart-o"></i>
            </div>
            <div class="details">
                <div class="desc"> {{trans('x.Incomes')}} </div>
                <div class="number" style="padding-top:6px">
                    € <span data-counter="counterup" data-value="{!!$incomes!!}">0</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <a class="dashboard-stat dashboard-stat-v2 red" href="/reports/charts" style="margin-bottom:4px">
            <div class="visual" style="height:40px">
                <i class="fa fa-bar-chart-o"></i>
            </div>
            <div class="details">
                <div class="desc"> {!!trans('x.Most requested Item')!!} </div>
                <div class="number" style="padding-top:6px">
                    <span>{!!$mostReqItem['name']!!}</span> 
                    (<span data-counter="counterup" data-value="{!!$mostReqItem['qty']!!}">0</span>)
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <a class="dashboard-stat dashboard-stat-v2 purple" href="/reports/charts" style="margin-bottom:4px">
            <div class="visual" style="height:40px">
                <i class="fa fa-bar-chart-o"></i>
            </div>
            <div class="details">
                <div class="desc"> {!!trans('x.Most requested Size')!!} </div>
                <div class="number" style="padding-top:6px">
                    <span>{!!trans('x.sz')!!}. {!!$mostReqSize['name']!!}</span> 
                    (<span data-counter="counterup" data-value="{!!$mostReqSize['qty']!!}">0</span>)
                </div>
            </div>
        </a>
    </div>
    </div>
    <div class="clearfix"></div>
    <!-- END DASHBOARD STATS 1-->
@endif

@if (Auth::user()->can('orders_see'))
    <!-- BEGIN ORDERS TABLE -->
    <div class="row">
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="tools"> </div>
                <div class="caption font-dark">
                <i class="icon-settings font-dark"></i>
                <span class="caption-subject bold uppercase">{!!trans('x.Orders')!!}</span>
                </div>
            </div>
            <div class="portlet-body" id="orders-table-container"></div>
            
            {!! X::ajaxContent('orders-table-container','/api/ajax-pages/dashboard-orders') !!}

        </div>
    </div>
    </div>
    <!-- END ORDERS TABLE -->

    <!-- BEGIN SEARCH TABLE -->
    <div class="row">
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-dark">
                <i class="icon-settings font-dark"></i>
                <span class="caption-subject bold uppercase">{!!trans('x.Search for a model in all the orders')!!} (autocomplete)</span>
                <br><br><br>
                <input type="text" name="autocomplete" id="products-full-autocomplete" class="form-control ui-autocomplete-input" placeholder="{{ trans('x.Start searching..') }}" style="max-width:500px" />
                <br><br>
                </div>
                <div class="tools"> </div>
            </div>
            <div class="portlet-body">
                <table class="table table-striped table-bordered table-hover" id="search-orders">
                <thead>
                    <tr>
                        <th>{!!trans('x.Id')!!}</th>
                        <th>{!!trans('x.Pieces')!!}</th>
                        <th>{!!trans('x.Customer')!!}</th>
                        <th>{!!trans('x.Agent')!!}</th>
                        <th>{!!trans('x.Options')!!}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot>
                <tbody id="search-table-content">

                </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
    <!-- END SEARCH TABLE -->
@endif

@stop

@section('pages-scripts')

<script>
    $( window ).load(function() {
        $.getJSON('/customers/api-products', function(data) {
            $( "#products-full-autocomplete" ).autocomplete({
                source: data,
                select: function(event, ui) {
                    $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
                    if(ui.item){
                        
                        $.ajax({
                            type: 'GET',
                            data: {
                                'name' : ui.item.value,
                                format: 'json'
                            },
                            url: '/customers/api-products-data',
                            success: function(data) {
                                $('#search-table-content').html(data);
                            },
                            error: function() {
                                // console.log('ajax error');
                            }
                        });
                        
                    }
                }
            });
        });
    });
</script>

@stop