@if(Auth::user()->email  == 'shop@sen-services.com')
  @extends('layouts.admin')
     @section('content')
        BONJOUR !!PO 23 POY FG
     @endsection 
   @endextends
  
 @else 
   @extends('layouts.admin')
   @section('content')
                        
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                
                </div>
                <h4 class="page-title">Tableau de Bord</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 

    
    <div class="row">
        <div class="col-sm-12">
            <!-- Profile -->
            <div class="card bg-primary">
                <div class="card-body profile-user-box">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <div class="avatar-lg">
                                        @if(Auth::user()->photo)
                                            <img src="{{ url('photo-user/' . $commerciale->photo) }}" alt class="rounded-circle img-thumbnail" />
                                        @else 
                                            <img src="/assets/images/users/avatar-2.jpg" alt class="rounded-circle img-thumbnail" />
                                        @endif 
                                    </div>
                                </div>
                                <div class="col">
                                    <div>
                                        <h4 class="mt-1 mb-1 text-white">{{ Auth::user()->name }} </h4>
                                        <p class="font-13 text-white-50"> Commerciale </p>

                                        <ul class="mb-0 list-inline text-light">
                                            <li class="list-inline-item me-3">
                                                <h5 class="mb-1">{{ Auth::user()->adresse }} </h5>
                                                <p class="mb-0 font-13 text-white-50">Adresse</p>
                                            </li>
                                            <li class="list-inline-item">
                                                <h5 class="mb-1">{{ Auth::user()->telephone }}</h5>
                                                <p class="mb-0 font-13 text-white-50">Téléphone</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col-->

                        <div class="col-sm-4">
                            <div class="text-center mt-sm-0 mt-3 text-sm-end">
                                <button type="button" class="btn btn-light">
                                    <i class="mdi mdi-account-edit me-1"></i> Modifier Commerciale
                                </button>
                            </div>
                        </div> <!-- end col-->
                    </div> <!-- end row -->

                </div> <!-- end card-body/ profile-user-box-->
            </div><!--end profile/ card -->
        </div> <!-- end col-->
    </div>
    <!-- end row -->


    <div class="row">
        <div class="col-xl-4">
            <!-- Personal-Information -->
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-0 mb-3">Mes Informations</h4>
                    <p class="text-muted font-13">
                    </p>

                    <hr>

                    <div class="text-start">
                        <p class="text-muted"><strong>Nom Complet:</strong> <span class="ms-2">{{ Auth::user()->name ?? '' }} </span></p>

                        <p class="text-muted"><strong>Téléphone :</strong><span class="ms-2">{{ Auth::user()->telephone ?? ''}} </span></p>

                        <p class="text-muted"><strong>Email :</strong> <span class="ms-2">{{ Auth::user()->email ?? '' }}  </span></p>

                        <p class="text-muted"><strong>Adresse :</strong> <span class="ms-2">{{ Auth::user()->adresse ?? '' }} </span></p>

                        <p class="text-muted"><strong>Zones :</strong>
                            <span class="ms-2"> {{ Auth::user()->zone_operation ?? ''}} </span>
                        </p>

                    </div>
                </div>
            </div>
            <!-- Personal-Information -->
            

        </div> <!-- end col-->

        <div class="col-xl-8">

            <!-- Chart-->
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-3">Montant des Commandes validés</h4>
                    <div dir="ltr">
                        <div style="" class="chartjs-chart">
                            <canvas id="ChartComm" style=""></canvas>
                        </div>
                    </div>        
                </div>

                <h3 class="text-center"> Total :   </h3>
            </div>
            <!-- End Chart-->

        </div>
        <!-- end col -->

    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-sm-3">
            <div class="card tilebox-one  bg-primary">
                <div class="card-body">
                    <i class="dripicons-basket float-end text-white"></i>
                    <h6 class="text-white text-uppercase mt-0">Commandes</h6>
                    <h5 class="m-b-20 text-white">{{ $nbre_commande->total }}</h5>
                </div> <!-- end card-body-->
            </div> <!--end card-->
        </div><!-- end col -->

        <div class="col-sm-3">
            <div class="card tilebox-one bg-success">
                <div class="card-body">
                    <i class="dripicons-box float-end text-white"></i>
                    <h6 class="text-white text-uppercase mt-0">Montant Commande Validé</h6>
                    <h5 class="m-b-20 text-white">  {{ $nbre_commande_encours->total  }} </h5>
                </div> <!-- end card-body-->
            </div> <!--end card-->
        </div><!-- end col -->

        <div class="col-sm-3">
            <div class="card tilebox-one bg-warning">
                <div class="card-body">
                    <i class="dripicons-jewel float-end text-white"></i>
                    <h6 class="text-white text-uppercase mt-0">Commande En Cours</h6>
                    <h5 class="m-b-20 text-white">{{ $nbre_commande_valide->total  }} </h5>
                </div> <!-- end card-body-->
            </div> <!--end card-->
        </div><!-- end col -->

        <div class="col-sm-3">
            <div class="card tilebox-one bg-danger">
                <div class="card-body">
                    <i class="dripicons-jewel float-end text-white"></i>
                    <h6 class="text-white text-uppercase mt-0">Commande Rejeté</h6>
                    <h5 class="m-b-20 text-white">{{ $nbre_commande_rejete->total  }} </h5>
                </div> <!-- end card-body-->
            </div> <!--end card-->
        </div><!-- end col -->
    </div>
    <!-- end row -->
        <!-- end page title --> 
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="table-responsive">
                        <table  id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Réf.</th>
                                    <th>Date</th>
                                    <th>Client</th>
                                    <th>Commande</th>
                                    <th>Montant</th>
                                    <th>Avis</th>
                                    <th>Statut</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($commandes as $c)
                                    <tr>
                                        
                                        <td>
                                            <a href="{{ route('admin.commande_client.show', $c->rowid) }}" class="badge bg-primary">
                                                {{ $c->ref ?? ''}}
                                            </a>
                                        </td>
                                        <td>
                                            {{ Carbon\Carbon::parse($c->date_commande)->format('d/m/Y') ?? ''}}
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.clients.show', $c->societe->rowid ?? 0) }}" class="badge bg-secondary">
                                                {{ $c->societe->nom ?? '' }}
                                            </a>
                                        </td>
                                        <td>
                                            @if($c->commandedet)
                                                @foreach($c->commandedet as $p)
                                                    {{ $p->label . ' => '. $p->qty ?? ''}}
                                                @endforeach
                                            @endif
                                        </td>

                                        <td>
                                            {{ number_format($c->total_ttc, 0, ' ', ' ') ?? '' }}
                                        </td>

                                        <td>
                                            @if($c->commandeextra)
                                                @if($c->commandeextra->avis_banque  == 1)
                                                    <span class="badge bg-warning"> En Cours <span class="ms-1 fas fa-stream"></span> </span> 
                                                @elseif($c->commandeextra->avis_banque  == 2)
                                                    <span class="badge bg-success"> Validé <span class="ms-1 fa fa-check"></span> </span> 
                                                @elseif($c->commandeextra->avis_banque  == 3)
                                                    <span class="badge bg-warning"> Rejeté </span> 
                                                @elseif($c->commandeextra->avis_banque  == 4)
                                                    <span class="badge bg-primary"> EMC </span> 
                                                @endif 
                                            @endif 
                                        </td>

                                        <td>
                                            <span class="badge bg-success">Active</span>
                                        </td>

                                        <td class="table-action">
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-eye"></i></a>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
                    
    <div class="card">
        <div style="margin-bottom: 10px;" class="row">
            <div class="col-lg-12">
                <form action="{{ route('admin.commerciale_rechercher_annee') }}" method="POST">
                @csrf    
                    <input type="number" min="2020" max="2099" step="1"  class="form-control" name="annee" value="" placeholder="Choisir l'année" />
                    <br /> 
                    <input type="hidden" class="form-control" name="commerciale_id" value="{{ $commerciale->id }}"/>
                    <br /> 
                    <div class="text-center"> 
                        <input type="submit" class="btn btn-primary" value="Rechercher" />  
                    </div>
                
                </form> 
            </div>
        </div>
    </div>
    <h3 class="page-title"></h3>
                        <!-- RAPPORT CONCERNAT LES COMMANDES FOURNISSEURS  --> 
    <div class="row"> 
    
        <div class="col-md-12"> 
            <div class="card card-primary">
                <div class="card-header">
                    <h2 class="card-title"> {{ $commerciale->name. ' ' .$commerciale->email }}</h2>
                    <h3 class="card-title"> Montant Commande par mois </h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="" width="200" height="50"></canvas>
                    </div>
                </div>
        <!-- /.card-body -->
            </div>
        </div>
    </div> 

    <br /> 


        <!-- bundle 
    <script src="/assets/js/vendor.min.js"></script>
    <script src="/assets/js/app.min.js"></script>
         third party js -->
    <script src="/assets/js/vendor/Chart.bundle.min.js"></script>
        <!-- third party js ends -->

            <!-- demo app -->
    <script src="/assets/js/pages/demo.profile.js"></script>

<script>
    const ctx2 = document.getElementById('ChartComm').getContext('2d');

    const ChartComm = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: @json($mois),
            datasets: [{
                label: 'Montant par mois',
                data: @json($montant),
                backgroundColor: '#696cff',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });
</script>

@endsection 
@endextends

@endif