@extends('layouts.squelette')
<!-- ************************************** -->
@section('titre')
{{ __("Tableau de bord interventions") }}
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __("Tableau de bord interventions") }}
@endsection
<!-- ************************************** -->

@section('contenu')
<div class="d-flex p-2 justify-content-between align-items-center mb-5" style="background-color: #fff; border: #ffd589 2px solid">
    <div class="d-flex justify-content-around align-items-center pl-5">
        <div>
            <h5 class="text-uppercase font-weight-bold">Bienvenue</h5>
        </div>
    </div>
    <div class="d-flex justify-content-end pr-5">
        <div class="d-flex justify-content-end">
            @if(Auth::user()->use_logo)
            ​​​​​​​<img src="{{asset('/storage/logo_client/'.Auth::user()->id.'/'.Auth::user()->use_logo)}}" alt="Logo" height="50" class="rounded-circle shadow-4-strong">
            @endif
        </div>
    </div>
</div>
<div class="row">
    {{-- <div class="col-md-6">
        <!-- ******************************MAP DES INTERVENTIONS ****************************************************-->
        <div class="card card-widget">
            <div class="card-header card-dashboard">
            <h3 class="card-title">{{ __('Interventions des 7 prochains jours') }}</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
    <div id="map" class="mapH500 mt-3"></div>
</div>
<!-- /.card-body -->
</div>

</div> --}}

<div class="col-md-12">
    <div class="row">

        <div class="col-md-4">

            {{-- <div class="overview-item overview-item--c2">
                    <div class="overview__inner">
                        <div class="overview-box clearfix">
                            <div class="icon">
                                <i class="zmdi zmdi-shopping-cart"></i>
                            </div>
                            <div class="text">
                                <h2>388,688</h2>
                                <span>items solid</span>
                            </div>
                        </div>
                        <div class="overview-chart">
                            <canvas id="widgetChart2"></canvas>
                        </div>
                    </div>
                </div> --}}

            <div class="card">

                <!-- /.card-header -->
                <div class="card-body p-0">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 10px">#</th>
                                <th>Statuts</th>
                                <th>Nombre</th>
                                <th style="width: 40px"></th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($result_groupes as $groupe)
                            @if ($groupe[3]==1)
                            <tr>
                                <td>{!! $groupe[0] !!}</td>
                                <td>{!! $groupe[2] !!}</td>
                                <td>{!! number_format($groupe[1], 0, ',', ' ') !!}</td>
                                <td>
                                    <span class="float-right badge bg-info" data-toggle="tooltip" data-placement="top">
                                        <a href="interventionsClient?staGro_id={!! $groupe[0] !!}" class="button btn-info">Voir</a>
                                    </span>
                                </td>
                            </tr>
                            @endif
                            @endforeach

                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->


        </div>


        <div class="col-md-4">

            <!-- PIE CHART -->
            <div class="card card-widget">
                <div class="card-dashboard">
                    <h2 class="my-0">{{ __('Top 6 activités depuis le début de l\'année') }}</h2>
                </div>
                <div class="card-body">
                    <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
            </div>

        </div>
        <div class="col-md-4">
            <!-- ******************************TOP 7 ****************************************************-->
            <div class="card card-widget ">
                <div class="card-dashboard">
                    <h2 class="my-0">{{ __('Nombre d\'interventions depuis le début de l\'année') }}</h2>
                </div>
                <div class="card-footer p-0">
                    <ul class="list-group">
                        @foreach (@$top10 as $client)
                        <li class="nav-item">
                            <a class="nav-link">{{ @$client->sit_name }}<span class="float-right"> {{ number_format( @$client->total +0 , 0, ',', ' ') }}  </span></a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

    </div>



        <div class="row">
            <div class="col-md-6">
                    <!-- ******************************GRAPHIQUE DES CA ****************************************************-->
                    <div class="card card-widget">
                        <div class="card-dashboard">
                            <div class="d-flex justify-content-between">
                                <h2 class="my-0">{{ __('Factures sur 12 mois glissants') }}</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex">

                            </div>

                            <div class="position-relative mb-4">
                                <canvas id="sales-chart" height="150"></canvas>
                            </div>

                            <div class="d-flex flex-row justify-content-end">

                            </div>
                        </div>
                    </div>
            </div>
            <div class="col-md-6">
                <!-- ******************************GRAPHIQUE DES NB INTERVENTIONS ****************************************************-->
                <div class="card card-widget">
                    <div class="card-dashboard">
                        <div class="d-flex justify-content-between">
                            <h2 class="my-0">{{ __('Nombre d\'interventions sur 12 mois glissants') }}</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex">

                        </div>
                        <!-- /.d-flex -->

                        <div class="position-relative mb-4">
                            <canvas id="nbsales-chart" height="150"></canvas>
                        </div>

                        <div class="d-flex flex-row justify-content-end">

                        </div>
                    </div>
                </div>
            </div>
        </div>


@endsection

@section('js_footer')
 <script src="{{ asset('plugins/chart.js/Chart.min.js')}}"></script>
 <script>
  var stats_activite =  {!! json_encode($stats_activite) !!};
  var labelsGraph = {!! json_encode($labelsGraph) !!};
  var montants = {!!json_encode($montants) !!};
  var nombre = {!!json_encode($nombre) !!};
</script>

<script src="{{ asset('js/dashboard_clients.js').'?'.env('VERSION_JS')}}"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ Session::get('value_googleapi_map_key','')}}&amp;"></script>

@endsection

@section('modale')

@endsection