@extends('layouts.app-seller')
@section('content')
    <?php Fun::lang()?>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h4 class="text-c-purple">{{$customers}}</h4>
                                <h5 class="text-muted m-b-0">{{__('administrator.all_customer')}}</h5>
                            </div>
                            <div class="col-4 text-right">
                                <i class="fa fa-users f-28"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-c-purple">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <a href="{{route('customer.index')}}">
                                    <p class=" m-10"> {{__('administrator.more_detail')}} <i
                                                class="fa fa-long-arrow-right"></i></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h4 class="text-c-purple">{{$count_total}}</h4>
                                <h5 class="text-muted m-b-0">{{__('administrator.request_list')}}</h5>
                            </div>
                            <div class="col-4 text-right">
                                <i class="fa fa-th-list f-28"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-c-purple">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <a href="{{route('sale-request.index')}}">
                                    <p class=" m-10"> {{__('administrator.more_detail')}} <i
                                                class="fa fa-long-arrow-right"></i></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h4 class="text-c-purple">{{$count_payment}}</h4>
                                <h5 class="text-muted m-b-0">{{__('administrator.payment')}}</h5>
                            </div>
                            <div class="col-4 text-right">
                                <i class="fa fa-usd f-28"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h4 class="text-c-purple">{{$count_sale_report}}</h4>
                                <h5 class="text-muted m-b-0">  {{__('administrator.report_sales')}}</h5>
                            </div>
                            <div class="col-4 text-right">
                                <i class="fa fa-user-plus f-28"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-c-purple">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <a href="{{route('report-sale-request')}}">
                                    <p class=" m-10"> {{__('administrator.more_detail')}}<i
                                                class="fa fa-long-arrow-right"></i></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-7 col-sm-7 col-xs-12 display-none" >
                <div class="white-bg">
                   <div class="card-body">
                       <div id="chartContainer"  style="height: 370px; width: 100%;"></div>
                   </div>
                </div>
            </div>
            <div class="col-md-5  col-sm-5 col-xs-12">
                <div class="white-bg top-seller">
                    <div class="card-body">
                        <h4>{{__('administrator.top_selling')}}</h4>
                        <div class="wrapper-table">
                            <table id="users" width="100%" class="table table-striped table-hover ">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('administrator.barcode')}}</th>
                                    <th>{{__('administrator.products')}}</th>
                                    <th>{{__('administrator.qty')}}</th>
                                    <th>{{__('administrator.sale_price')}}</th>
                                    <th>{{__('administrator.total')}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($detail as $key => $topsale)
                                    @php
                                    $product = getProductById($topsale->product_id);
                                    $sale = findSale($topsale->sale_id);
                                    if($sale){
                                    $currency = findCurrency($sale->currency_id);
                                    $currency = $currency?$currency->symbol:'';
                                    }

                                    @endphp
                                    <tr>
                                      @if($product)
                                        <td>{{ $key+1 }}</td>
                                        <td>{{$topsale->barcode}}</td>
                                        <td>{{$product->product_name}}</td>
                                        <td> {{$topsale->total_qty}}</td>
                                        <td>{{@$currency}} {{$topsale->sale_price}}</td>
                                        <td>{{@$currency}} {{$topsale->sale_price*$topsale->total_qty}}</td>
                                        @endif

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>
        window.onload = function () {

            let chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title:{
                    text: ""
                },
                axisY: {
                    title: "Amount",
                    suffix: "$",
                },
                data: [{
                    yValueFormatString: "#,### Units",
                    xValueFormatString: "YYYY",
                    type: "spline",
                    dataPoints: [
                        {x: new Date(2002, 0), y: 25060},
                        {x: new Date(2003, 0), y: 27980},
                        {x: new Date(2004, 0), y: 58600},
                        {x: new Date(2005, 0), y: 69440},
                        {x: new Date(2006, 0), y: 60260},
                        {x: new Date(2007, 0), y: 23000},
                        {x: new Date(2008, 0), y: 38720},
                        {x: new Date(2009, 0), y: 21000},
                        {x: new Date(2010, 0), y: 72890},
                        {x: new Date(2011, 0), y: 48309},
                        {x: new Date(2012, 0), y: 20090},
                        {x: new Date(2013, 0), y: 28400},
                        {x: new Date(2014, 0), y: 239600},
                        {x: new Date(2015, 0), y: 161300},
                        {x: new Date(2016, 0), y: 282100},
                        {x: new Date(2017, 0), y: 200000}
                    ]
                }]
            });
            chart.render();

        }
    </script>
@endsection
