@extends('layouts.main')

@section('content')
    <div class="col-lg-12 layout-spacing">
        <link href="plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
 
        <script src="plugins/chartjs/Chart.min.js"></script>
        <script src="plugins/chartjs/utils.js"></script>

            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-xl-12 col-md-12 col-sm-12 col-12 custom_add_button">
                            <h4>ڕاپۆرتی گشتی گەنجینە</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="widget-content widget-content-area">
                            <div class="row">
                                <div class="col-8 m-2">
                                  <div class="static_sell_all">
                                    ژمارەی کالاکان: {{$products->count}} جۆر
                                    <br>
                                    ژمارەی دابینکەرەکان: {{count($supplier)}} 
                                    <br>
                                    ژمارەی کڕیارەکان: {{count($customers)}} 
                                    <br> 

                                     <br> 
                                    مایەی هەموو کاڵاکانی ناو گەنجینە: {{number_format($products->total_purchase)}}
                                    <br>
                                    فرۆشتنی هەموو کاڵاکان بە نرخی کۆ: {{number_format($products->total_whole)}}
                                    <br>
                                    فرۆشتنی هەموو کاڵاکان بە نرخی ئاسایی : {{number_format($products->total_price)}}
                                   <br>
                                
                                  </div>
                                </div>
                            </div>
                          
                        </div>
                        
                    </div> 
                </div> 

                
            </div> 
    </div>

    <div class="col-lg-12 layout-spacing">
        
        <div class="statbox widget box box-shadow">
            <div class="widget-header">
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-sm-12 col-12 custom_add_button">
                        <h4>چارتی ڕێژەی مایەی ناو کۆگا</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="widget-content widget-content-area">
                        <div class="row">
                            <div class="col-12 m-2">
                                <div id="content_4" class="tabcontent" > 
                                    <canvas id="canvas4"></canvas>
                                </div>
                            </div>
                        </div>
                      
                    </div>
                    
                </div> 
            </div> 

            
        </div> 
</div>

<script> 
    
     

    var config = {
    type: 'line', 
    data: {
        labels: [
            @foreach($history as $h)
                '{{date("m/d",strtotime($h->date))}}',
            @endforeach 
            
        ],
        datasets: [{
            label: 'ملیۆن',
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            data: [
                
            
            @foreach($history as $h)
                {{ mb_substr($h->total, 0, 3) }},
                @endforeach
            ],
            fill: false,
        } ]
    },
    options: {  
        responsive: true,
        title: {
            display: false,
            text: 'Chart.js Line Chart'
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'مانگ'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'ملیۆن'
                }
            }]
        }
    }
};



    
    
    var ctx4 = document.getElementById('canvas4').getContext('2d');
    window.myLine = new Chart(ctx4, config);




</script>
@endsection