@extends('layout.base', ['title' => 'StockApps - Tableau De Bord'])
@section('content')
        <div id="page-wrapper" >
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                     <h2>Admin Tableau De Bord </h2>
                     <hr />  
                        <h3> Rapport Annuel des Activités </h3>
                    </div>
                </div>              
                 <!-- /. ROW  -->
                  
                <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6"> 
                <a target="blank" href="">          
            <div class="panel panel-back noti-box">
                <span class="icon-box bg-color-green set-icon">
                    <img src="{{ url('icons/icons8_Lease_52px.png') }}" height="30px" width="30px">
                </span>
                <div class="text-box" >
                    <p class="main-text" style="font-size:10px">{{ $NbreVente }} Vente</p>
                    <p class="text-muted">{{ $MontantVente }} FBU</p>
                </div>
             </div>
             </a>
             </div>
                    <div class="col-md-3 col-sm-6 col-xs-6">            
            <div class="panel panel-back noti-box">
                <span class="icon-box bg-color-green set-icon">
                    <img src="{{ url('icons/icons8_Buy_48px.png') }}" height="30px" width="30px">
                </span>
                <div class="text-box" >
                    <p class="main-text" style="font-size:10px">{{ $NbreAchat }} Achat</p>
                    <p class="text-muted">{{ $MontantAchat }} FBU</p>
                </div>
             </div>
             </div>
            <div class="col-md-3 col-sm-6 col-xs-6">            
            <div class="panel panel-back noti-box">
                <span class="icon-box bg-color-blue set-icon">
                    <img src="{{ url('icons/icons8_Bill_48px.png') }}" height="30px" width="30px">
                </span>
                <div class="text-box" >
                    <p class="main-text" style="font-size:10px">{{ $NbreFacture }} Facture</p>
                    <p class="text-muted">{{ $MontantFacture }} FBU</p>
                </div>
             </div>
             </div>

             <div class="col-md-3 col-sm-6 col-xs-6">            
            <div class="panel panel-back noti-box">
                <span class="icon-box bg-color-red set-icon">
                    <img src="{{ url('icons/icons8_Delete_52px.png') }}" height="30px" width="30px">
                </span>
                <div class="text-box" >
                    <p class="main-text" style="font-size:10px">{{ $NbreExclusion }} Exclusion</p>
                    <p class="text-muted">{{ $MontantExclusion }} FBU</p>
                </div>
             </div>
             </div>
             
            </div>
                 <!-- /. ROW  -->
                <hr />                
                 <!-- /. ROW  -->
                <div class="row"> 
                    
                <div class="col-md-12 col-sm-12 col-xs-12">                     
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Les Produits Le Plus Vendus
                        </div>
                        <div class="panel-body">
                            <div id="morris-bar-chart"></div>
                        </div>
                    </div>            
                </div> 
           </div>        
    </div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
@endsection 
@section('content2')
<script type="text/javascript">
    


/*=============================================================
    Authour URI: www.binarycart.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */


(function ($) {
    "use strict";
    var mainApp = {

        main_fun: function () {
            /*====================================
            METIS MENU 
            ======================================*/
            $('#main-menu').metisMenu();

            /*====================================
              LOAD APPROPRIATE MENU BAR
           ======================================*/
            $(window).bind("load resize", function () {
                if ($(this).width() < 768) {
                    $('div.sidebar-collapse').addClass('collapse')
                } else {
                    $('div.sidebar-collapse').removeClass('collapse')
                }
            });

            /*====================================
            MORRIS BAR CHART
         ======================================*/
         $.get('{{ route('graphic') }}',
          // {id_categorie:id_categorie},
          function(dt){
             const donnee=dt.split("#");
            // $('#Produit').html(data);
         
            Morris.Bar({
                element: 'morris-bar-chart',
                data: [{
                    y: donnee[0],
                    a: donnee[1],
                     b:donnee[2]
                }, {
                    y: donnee[3],
                    a: donnee[4],
                    b: donnee[5]
                }, {
                    y: donnee[6],
                    a: donnee[7],
                     b:donnee[8]
                }, {
                    y: donnee[9],
                    a: donnee[10],
                     b: donnee[11]
                },  {
                    y: donnee[12],
                    a: donnee[13],
                     b:donnee[14]
                }],
                xkey: 'y',
                ykeys: ['a','b'],
                labels: ['Quantite Vendue','Montant'],
                hideHover: 'auto',
                resize: true
            });
             });
          
           
     
        },

        initialization: function () {
            mainApp.main_fun();

        }

    }
    // Initializing ///

    $(document).ready(function () {
        mainApp.main_fun();
    });

}(jQuery));

$(document).ready(function () {
        
    });
</script>
@endsection