@extends('layouts.admin')
@section('header')

@endsection
@section('preload')

@endsection
@section('content')

    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Tableau de Bord</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">Accueil</a></li>
              <li class="breadcrumb-item active">Tableau de Bord</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-primary card-outline">
                        <span class="info-box-icon bg-primary"><i class="fas fa-user-friends"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Clients</span>
                            <span class="info-box-number">{{count($clients)}} Total</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-success card-outline">
                        <span class="info-box-icon bg-success"><i class="fas fa-user-friends"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Clients </span>
                            <span class="info-box-number">{{count($clients_actif)}} Actifs</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-danger card-outline">
                        <span class="info-box-icon bg-danger"><i class="fas fa-user-friends"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Clients</span>
                            <span class="info-box-number">{{count($clients_inactif)}} Inctifs</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                <!-- /.col -->

                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-primary card-outline">
                        <span class="info-box-icon bg-primary"><i class="fas fa-users"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Fournisseurs</span>
                            <span class="info-box-number">{{count($fournisseurs)}} Total</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-success card-outline">
                        <span class="info-box-icon bg-success"><i class="fas fa-users"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Fournisseurs </span>
                            <span class="info-box-number">{{count($fournisseurs_actif)}} Actifs</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-danger card-outline">
                        <span class="info-box-icon bg-danger"><i class="fas fa-users"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">Fournisseurs </span>
                            <span class="info-box-number">{{count($fournisseurs_inactif)}} Inctifs</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-primary card-outline">
                            <span class="info-box-icon bg-primary"><i class="fas fa-file-invoice"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total Factures  </span>
                                <span class="info-box-number">{{count($factures)}} Reçues</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    @foreach ($etats as $ek => $etat)
                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-primary card-outline">
                            <span class="info-box-icon bg-primary"><i class="fas fa-file-invoice"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">{{ $etat->cd_params }}</span>
                                <span class="info-box-number">{{ count($etat->factures_etats_paiement()->OrderBy('date_reception', 'desc')->get()) }}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    @endforeach

                    @foreach ($statuts as $ek => $statut)
                    <div class="col-md-2 col-sm-6 col-12">
                        <div class="info-box shadow-lg card-primary card-outline">
                        <span class="info-box-icon bg-primary"><i class="fas fa-file-invoice"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">{{ $statut->cd_params }}</span>
                            <span class="info-box-number">{{ count($statut->factures_statut()->OrderBy('date_reception', 'desc')->get()) }}</span>
                        </div>
                        <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    @endforeach
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
    <!-- /.content -->

@endsection

@section('footer')

    <!-- OPTIONAL SCRIPTS -->
    <script src="{{ asset('Paoul/plugins/chart.js/Chart.min.js') }}"></script>
    <!-- AdminLTE for demo purposes -->
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script>
        /* global Chart:false */

        $(function () {
        'use strict'

        var ticksStyle = {
            fontColor: '#495057',
            fontStyle: 'bold'
        }

        var mode = 'index'
        var intersect = true

        var $salesChart = $('#sales-chart')
        // eslint-disable-next-line no-unused-vars
        var salesChart = new Chart($salesChart, {
            type: 'bar',
            data: {
            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Aut', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                backgroundColor: '#007bff',
                borderColor: '#007bff',
                data: [1000, 2000, 3000, 2500, 2700, 2500, 3000, 3000, 2500, 2700, 2500, 3000]
                },
                {
                backgroundColor: '#fb0528',
                borderColor: '#fb0528',
                data: [700, 1700, 2700, 2000, 1800, 1500, 2000, 2700, 2000, 1800, 1500, 2000]
                }
            ]
            },
            options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                // display: false,
                gridLines: {
                    display: true,
                    lineWidth: '4px',
                    color: 'rgba(0, 0, 0, .2)',
                    zeroLineColor: 'transparent'
                },
                ticks: $.extend({
                    beginAtZero: true,

                    // Include a dollar sign in the ticks
                    callback: function (value) {
                    if (value >= 1000000) {
                        value /= 1000000
                        value += ' M'
                    }else if (value >= 1000) {
                        value /= 1000
                        value += ' m'
                    }

                    return '' + value
                    }
                }, ticksStyle)
                }],
                xAxes: [{
                display: true,
                gridLines: {
                    display: false
                },
                ticks: ticksStyle
                }]
            }
            }
        })

        var $visitorsChart = $('#visitors-chart')
        // eslint-disable-next-line no-unused-vars
        var visitorsChart = new Chart($visitorsChart, {
            data: {
            labels: [ @foreach($jours as $jour) '{{$jour}}', @endforeach ],
            datasets: [{
                type: 'line',
                data: [100, 120, 170, 167, 180, 177, 160],
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                pointBorderColor: '#007bff',
                pointBackgroundColor: '#007bff',
                fill: false,
                pointHoverBackgroundColor: '#007bff',
                pointHoverBorderColor    : '#007bff'
            },
            {
                type: 'line',
                data: [60, 80, 70, 67, 80, 77, 100, 90, 67,70, 97, 50, 37, 67, 60],
                backgroundColor: 'tansparent',
                borderColor: '#fb0528',
                pointBorderColor: '#fb0528',
                pointBackgroundColor: '#fb0528',
                fill: false,
                 pointHoverBackgroundColor: '#fb0528',
                 pointHoverBorderColor    : '#fb0528'
            },
            {
                type: 'line',
                data: [20, 90, 70, 97, 50, 37, 60],
                backgroundColor: 'tansparent',
                borderColor: '#fada05',
                pointBorderColor: 'e0c405',
                pointBackgroundColor: '#fada05',
                fill: false,
                 pointHoverBackgroundColor: '#fada05',
                 pointHoverBorderColor    : '#fada05'
            }]
            },
            options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                // display: false,
                gridLines: {
                    display: true,
                    lineWidth: '4px',
                    color: 'rgba(0, 0, 0, .2)',
                    zeroLineColor: 'transparent'
                },
                ticks: $.extend({
                    beginAtZero: true,
                    suggestedMax: 200
                }, ticksStyle)
                }],
                xAxes: [{
                display: true,
                gridLines: {
                    display: false
                },
                ticks: ticksStyle
                }]
            }
            }
        })
        })

        // lgtm [js/unused-local-variable]

    </script>
@endsection