@extends('layouts.admin')
@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <div class="row">
        <div class="col-lg-3">
            <form action="{{ route('admin.commerciale.show', $commerciale->id) }}" method="GET">
                @csrf
                <label for="">Rechercher une date pour visualiser les données</label>
                <input type="month" class="form-control" name="mois" value="{{ old('mois') }}"/>
            
                <input type="submit" class="btn btn-primary"  value="Rechercher"/>
            </form>
        </div> <!-- end col-->
    </div> <!-- end col-->
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.commerciales.index') }}">Commerciale</a></li>
                        <li class="breadcrumb-item active">Profile</li>
                    </ol>
                </div>
                <h4 class="page-title">Profile Commerciale</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($commerciale->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">{{ $commerciale->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">{{ $commerciale->adresse }}</h5>
                                                <p class="mb-0 font-13 text-white-50">Adresse</p>
                                            </li>
                                            <li class="list-inline-item">
                                                <h5 class="mb-1">{{ $commerciale->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">Information Commerciale</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">{{ $commerciale->name ?? '' }} </span></p>

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

                        <p class="text-muted"><strong>Email :</strong> <span class="ms-2">{{ $commerciale->email ?? '' }}  </span></p>

                        <p class="text-muted"><strong>Adresse :</strong> <span class="ms-2">{{ $commerciale->adresse ?? '' }} </span></p>

                        <p class="text-muted"><strong>Zones :</strong>
                            <span class="ms-2"> {{ $commerciale->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 : <span class="badge bg-danger"> {{ number_format($total, 0, '', ' ') }} FCFA </span>   </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"> Commande Validé</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-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_encours->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="scroll-horizontal-datatables" class="table w-100 nowrap table-index">
                            <thead class="table-light">
                                <tr>
                                    <th>Réf.</th>
                                    <th>Date</th>
                                    <th>Date Validation</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>
                                            {{ Carbon\Carbon::parse($c->date_validation_banque)->format('d/m/Y') ?? ''}}
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.clients.show', $c->client_id ?? 0) }}" class="badge bg-secondary">
                                                {{ $c->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>
                            <tfoot>
                                {{ $commandes->links('pagination::bootstrap-4') }}
                            </tfoot>
                    </div>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>

    
</div> <!-- container -->
                    


<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