@section('title') {{ config('app.name') }} | Dashboard @endsection
@extends('admin.layouts.master')
@push('css')
<style>
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.5rem;
}
.dashboard-stats-grid > .dashboard-stats-item {
  min-width: 0;
}
.dashboard-stats-grid .card {
  height: 100%;
}
.dashboard-stats-grid .nk-wgw-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-wrap: break-word;
}
.dashboard-stats-grid .nk-wgw-name {
  min-width: 0;
}
</style>
@endpush
@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">@lang('Aperçu')</h3>
                    </div><!-- .nk-block-head-content -->
                </div><!-- .nk-block-between -->
            </div><!-- .nk-block-head -->
            <div class="nk-block">
                <div class="row g-gs">
                    <div class="col-xxl-12">
                        <div class="row g-gs">
                            <div class="col-12">
                                <div class="row g-gs">
                                  <div class="nk-block">
                                    <div class="row gy-gs">
                                        <div class="col-lg-12 col-xl-12">
                                            <div class="nk-block">
                                                <div class="nk-block-head-xs">
                                                    <div class="nk-block-between-md g-2">
                                                        <div class="nk-block-head-content">
                                                            <h5 class="nk-block-title title">Statistiques</h5>
                                                        </div>
                                                    </div>
                                                </div><!-- .nk-block-head -->
                                                <div class="dashboard-stats-grid">
                                                    <div class="dashboard-stats-item">
                                                        <div class="card bg-success text-white">
                                                            <div class="nk-wgw">
                                                              <a class="nk-wgw-inner" href="{{ route('admin.users.index') }}">
                                                                    <div class="nk-wgw-name">
                                                                        <h3 class="nk-wgw-title title">Clients</h3>
                                                                    </div>
                                                                    <div class="nk-wgw-balance">
                                                                      <div class="amount text-white">{{ $users_count }}</div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="dashboard-stats-item">
                                                        <div class="card bg-primary text-white">
                                                            <div class="nk-wgw">
                                                                <a class="nk-wgw-inner" href="{{ route('admin.prestataires.index') }}">
                                                                    <div class="nk-wgw-name">
                                                                        <h5 class="nk-wgw-title title">Prestataires</h5>
                                                                    </div>
                                                                    <div class="nk-wgw-balance">
                                                                      <div class="amount text-white">{{ $prestataires_count }}</div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="dashboard-stats-item">
                                                        <div class="card bg-danger text-white">
                                                            <div class="nk-wgw">
                                                                <a class="nk-wgw-inner" href="{{ route('admin.orders.ambulances.index') }}">
                                                                    <div class="nk-wgw-name">
                                                                        <h5 class="nk-wgw-title title">Ambulances</h5>
                                                                    </div>
                                                                    <div class="nk-wgw-balance">
                                                                      <div class="amount text-white">{{ $ambulances_count }}</div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="dashboard-stats-item">
                                                        <div class="card bg-warning text-white">
                                                            <div class="nk-wgw">
                                                                <a class="nk-wgw-inner" href="{{ route('admin.orders.tows.index') }}">
                                                                    <div class="nk-wgw-name">
                                                                        <h5 class="nk-wgw-title title">Dépannages</h5>
                                                                    </div>
                                                                    <div class="nk-wgw-balance">
                                                                      <div class="amount text-white">{{ $tows_count }}</div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- .nk-block -->
                                        </div><!-- .col -->
                                    </div><!-- .row -->
                                  </div><!-- .nk-block -->
                                </div><!-- .row -->
                            </div><!-- .col -->
                        </div><!-- .row -->
                    </div><!-- .col -->
                    <div class="col-xxl-12">
                      <div class="nk-block-head-xs">
                          <div class="nk-block-between-md g-2">
                              <div class="nk-block-head-content">
                                  <h5 class="nk-block-title title">Graphique</h5>
                              </div>
                          </div>
                      </div><!-- .nk-block-head -->
                      <div class="card card-bordered">
                        <div class="card-inner">
                            <div class="card-title-group align-start pb-3 g-2">
                                <div class="card-title">
                                    <h6 class="title">Inscription de clients au cours des 30 derniers jours</h6>
                                </div>
                            </div>
                            <div class="analytic-au">
                                <div class="analytic-au-ck">
                                    <canvas class="analytics-au-chart" id="usersChart"></canvas>
                                </div>
                                <div class="chart-label-group">
                                    <div class="chart-label">{{ $users_registration['from'] }}</div>
                                    <div class="chart-label">{{ $users_registration['to'] }}</div>
                                </div>
                            </div>
                        </div>
                      </div><!-- .card -->
                      <div class="card card-bordered">
                        <div class="card-inner">
                            <div class="card-title-group align-start pb-3 g-2">
                                <div class="card-title">
                                    <h6 class="title">Inscription des fournisseurs au dernier mois</h6>
                                </div>
                                <div class="card-tools">
                                    <em class="card-hint icon ni ni-help" data-bs-toggle="tooltip" data-bs-placement="left" title="Users of this month"></em>
                                </div>
                            </div>
                            <div class="analytic-au">
                                <div class="analytic-au-ck">
                                    <canvas class="analytics-au-chart" id="prestatairesChart"></canvas>
                                </div>
                                <div class="chart-label-group">
                                    <div class="chart-label">{{ now()->subDays(30)->format('d M, Y') }}</div>
                                    <div class="chart-label">{{ now()->format('d M, Y') }}</div>
                                </div>
                            </div>
                        </div>
                      </div><!-- .card -->
                    </div><!-- .col -->
                </div><!-- .row -->
            </div><!-- .nk-block -->
        </div>
    </div>
</div>
@endsection
@push('js')
<script>
!function (NioApp, $) {
  "use strict";
  // init chart
  NioApp.coms.docReady.push(function () {
    makeChart('usersChart', {
      labels: {!! $users_registration['labels'] !!},
      dataUnit: 'Client',
      lineTension: .1,
      datasets: [{
        label: "Inscription de clients au cours des 30 derniers jours",
        color: "#9cabff",
        background: "#9cabff",
        data: {!! $users_registration['data'] !!}
      }]
    });
    makeChart('prestatairesChart', {
      labels: {!! $prestataires_registration['labels'] !!},
      dataUnit: 'Prestataires',
      lineTension: .1,
      datasets: [{
        label: "Inscriptions prestataires au cours des 30 derniers jours",
        color: "#9cabff",
        background: "#9cabff",
        data: {!! $prestataires_registration['data'] !!}
      }]
    });
  });
  function makeChart(selector, data) {
    var chart_data = [];
    for (var i = 0; i < data.datasets.length; i++) {
      chart_data.push({
        label: data.datasets[i].label,
        tension: data.lineTension,
        backgroundColor: data.datasets[i].background,
        fill: true,
        borderWidth: 2,
        borderColor: data.datasets[i].color,
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'transparent',
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: data.datasets[i].color,
        pointBorderWidth: 2,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 4,
        data: data.datasets[i].data
      });
    }
    console.log({ selector, chart_data });

    return new Chart(document.getElementById(selector).getContext('2d'), {
      type: 'bar',
      data: {
        labels: data.labels,
        datasets: chart_data
      },
      options: {
        plugins: {
          legend: {
            display: data.legend ? data.legend : false,
            labels: {
              boxWidth: 12,
              padding: 20,
              color: '#6783b8'
            }
          },
          tooltip: {
            enabled: true,
            rtl: NioApp.State.isRTL,
            callbacks: {
              title: function title() {
                return false;
              },
              label: function label(context) {
                return "".concat(context.parsed.y, " ").concat(data.dataUnit);
              }
            },
            backgroundColor: '#eff6ff',
            titleFont: {
              size: 11
            },
            titleColor: '#6783b8',
            titleMarginBottom: 6,
            bodyColor: '#9eaecf',
            bodyFont: {
              size: 9
            },
            bodySpacing: 4,
            padding: 6,
            footerMarginTop: 0,
            displayColors: false
          }
        },
        maintainAspectRatio: false,
        scales: {
          y: {
            display: true,
            position: NioApp.State.isRTL ? "right" : "left",
            ticks: {
              beginAtZero: false,
              font: {
                size: 12
              },
              color: '#9eaecf',
              padding: 0,
              display: false,
              stepSize: 300
            },
            grid: {
              color: NioApp.hexRGB("#526484", .2),
              tickLength: 0,
              zeroLineColor: NioApp.hexRGB("#526484", .2),
              drawTicks: false
            }
          },
          x: {
            display: false,
            ticks: {
              font: {
                size: 12
              },
              color: '#9eaecf',
              source: 'auto',
              padding: 0,
              reverse: NioApp.State.isRTL
            },
            grid: {
              color: "transparent",
              tickLength: 0,
              zeroLineColor: 'transparent',
              offset: true,
              drawTicks: false
            }
          }
        }
      }
    });
  }
}(NioApp, jQuery);
</script>
@endpush