@extends($layout)
@section('content')

<div class="row">
    <div class="col s12">
        <div class="container">
            <div class="section">
                <!--card stats start-->
                <div id="card-stats" class="pt-0">
                    <div class="row">
                        <div class="col s12 m6 l6 xl2">
                            <div class="card animate fadeLeft">
                                <div class="card-content white-text" style="background-color: #8ab6e6;">
                                <p class="card-stats-title">
                                    <i class="material-icons">local_mall</i> Top produit du mois
                                </p>
                                    @if($mostSoldProduct)
                                        <h4 class="card-stats-number white-text">
                                            {{ $mostSoldProduct->produitDetail->nom }}<br>
                                            <span style="font-size: 1rem;">Quantité: {{ $mostSoldProduct->quantite_vendue }}</span>
                                        </h4>
                                    @else
                                        <h4 class="card-stats-number white-text">Aucun produit vendu ce mois-ci</h4>
                                    @endif
                                    <!-- <p class="card-stats-compare">
                                        <span class="cyan-text text-lighten-5">Top produit du mois</span>
                                    </p> -->
                                </div>
                            </div>
                        </div>

                        <div class="col s12 m6 l6 xl2">
                            @if($topClientData)
                            <div class="card animate fadeLeft">
                                <div class="card-content white-text" style="background-color: #aae6b8;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">person</i> Client du mois
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        {{ $topClientData['client_name'] }}<br>
                                        <span style="font-size: 1rem;">Total payé: {{ number_format($topClientData['total_paye'], 2) }} Dh</span>
                                    </h4>
                                </div>
                            </div>
                            @else
                            <div class="card animate fadeLeft">
                                <div class="card-content white-text" style="background-color: #aae6b8;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">person</i> Client avec le plus grand paiement
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        Aucun paiement effectué ce mois
                                    </h4>
                                </div>
                            </div>
                            @endif
                        </div>
                        <!-- <div class="col s12 m6 l6 xl2">
                            <div class="card animate fadeLeft">
                                <div class="card-content" style="background-color: #f2dc91; color: white;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">shopping_cart</i> Nombre total de commandes
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        {{ $totalOrders }}<br>
                                    </h4>
                                    <p class="card-stats-compare">
                                    {{ $createdOrders }}<br>
                                    <span style="font-size: 1rem;">Nombre de commandes créées ce mois</span>
                                    </p>
                                </div>
                            </div>
                        </div> -->
                        <div class="col s12 m6 l6 xl2">
                            <div class="card animate fadeLeft">
                                <div class="card-content" style="background-color: #de7676; color: white;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">shopping_cart</i> Commandes du mois
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        {{ $createdOrders }}<br>
                                        <span style="font-size: 1rem;">Commandes terminées</span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6 l6 xl2">
                            <div class="card animate fadeLeft">
                                <div class="card-content" style="background-color: #f2dc91; color: white;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">attach_money</i> Gain mensuel
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        {{ $monthlyGain }}<br>
                                        <span style="font-size: 1rem;">Total des gains du mois</span>
                                    </h4>
                                </div>
                            </div>
                        </div>

                        <div class="col s12 m6 l6 xl2">
                            <div class="card animate fadeLeft">
                                <div class="card-content" style="background-color: #8ab6e6; color: white;">
                                    <p class="card-stats-title">
                                        <i class="material-icons">person_add</i> Nombre de clients
                                    </p>
                                    <h4 class="card-stats-number white-text">
                                        {{ $newClientsThisMonth }}<br>
                                        <span style="font-size: 1rem;">Nouveaux clients ce mois</span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6 l6 xl2">
                        <div class="card animate fadeLeft">
                            <div class="card-content" style="background-color: #f2dc91; color: white;">
                                <p class="card-stats-title">
                                    <i class="material-icons">location_on</i> Top 3 des régions
                                </p>
                                <ul>
                                    @foreach($topRegions as $region)
                                    <li><strong>{{ $region->ville }}:</strong> {{ $region->total_sales }} Dh</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <!--card stats end-->
            <!--yearly & weekly revenue chart start-->
            <div id="sales-chart">
                <div class="row">
                    <div class="col s12 m8 l6">
                        <h4 class="header mt-0">
                        Gains et Dépenses Mensuels </h4>

                        <canvas id="Rmensuel"></canvas>

                    </div>
                    <div class="col s12 m4 l6">
                        <div class="card-content">
                            <h4 class="header m-0">
                                Commandes vs Clients : Évolution mensuelle
                            </h4>
                            <canvas id="EvolutionChiffre"></canvas>
                        </div>

                    </div>
                </div>
                <!-- <div class="row">
                    <div class="col s12 m8 l6">

                        <div id="bordered-table" class="card card card-default scrollspy">
                            <div class="card-content">
                                <h4 class="card-title"> Derniers dossiers</h4>

                                <div class="row">

                                    <div class="col s12">
                                        <table class="bordered">
                                            <thead>
                                                <tr>
                                                    <th data-field="id">N</th>
                                                    <th data-field="name">Client</th>
                                                    <th data-field="price">Véhicule</th>
                                                    <th data-field="price">Rapport</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td> 356</td>
                                                    <td style="text-align: center;">Client de test</td>
                                                    <td style="text-align: center;">Mercedes - Mercedes( 0000 أ- 1111- )	</td>
                                                    <td style="text-align: center;"><span
                                                            class="material-icons">local_printshop</span></td>
                                                </tr>

                                                <tr>
                                                    <td> 355</td>
                                                    <td style="text-align: center;">Client de test</td>
                                                    <td style="text-align: center;">Mercedes - Mercedes( 0000 أ- 1111- )	</td>
                                                    <td style="text-align: center;"><span
                                                            class="material-icons">local_printshop</span></td>
                                                </tr>

                                                <tr>
                                                    <td> 354</td>
                                                    <td style="text-align: center;">Client de test</td>
                                                    <td style="text-align: center;">Mercedes - Mercedes( 0000 أ- 1111- )	</td>
                                                    <td style="text-align: center;"><span
                                                            class="material-icons">local_printshop</span></td>
                                                </tr>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div> -->
                    <div class="col s12 m8 l6" style="margin-top: 30px;margin-bottom: 30px;">
                        <h4 class="header m-0">
                        Gain par catégorie de produits
                        </h4>
                        <canvas id="TauxCategories"></canvas>
                    </div>
                    <div class="col s12 m8 l6" style="margin-top: 30px;margin-bottom: 30px;">
                        <h4 class="header m-0">
                        Etat des stocks des produits
                        </h4>
                        <canvas id="TauxStock"></canvas>
                    </div>
                </div>

            </div>

            <!-- Member online, Currunt Server load & Today's Revenue Chart start -->
            <!-- ecommerce product start-->

            <!--end container-->
        </div>
    </div>
    <div class="content-overlay"></div>
</div>
@stop

@section('js')
<script>
//realisation mensuels chart
const labelsMonths = @json($labelsMonths);
const dataGainsPerMonth = @json($dataGainsPerMonth);
const dataExpensePerMonth = @json($dataExpensePerMonth);
const dataOrdersPerMonth = @json($dataOrdersPerMonth);
const dataNewClientsPerMonth = @json($dataNewClientsPerMonth);

const data = {
    labels: labelsMonths,
    datasets: [{
        label: 'Gains',
        backgroundColor: '#aae6b8',
        borderColor: 'rgb(39, 164, 68)',
        data: dataGainsPerMonth,
    }, {
        label: 'Dépenses',
        backgroundColor: '#de7676',
        borderColor: 'rgb(167, 21, 53)',
        data: dataExpensePerMonth,
    }]
};

const config = {
    type: 'bar',
    data: data,
    options: {}
};

const dataEvolutionChiffre = {
    labels: labelsMonths,
    datasets: [{
        label: 'Évolution du nombre de commandes par mois',
        //   backgroundColor: '#ff5252 ',
        borderColor: '#ff5252',
        data: dataOrdersPerMonth,
    }, {
        label: 'Évolution du nombre de clients par mois',
        //   backgroundColor: '#42a5f5 ',
        borderColor: '#00bcd4',
        data: dataNewClientsPerMonth,
    }]
};

const configEvolutionChiffre = {
    type: 'line',
    data: dataEvolutionChiffre,
    options: {

    }
};

const labelsStock = @json($labelsTauxStock);
const dataStock = @json($dataStock);

const labelCategories = @json($labelCategories);
const dataCategories = @json($dataCategories);

const dataTauxCategories = {
    labels: labelCategories,
    datasets: [{

        backgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.2)'],
        borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)'],
        data: dataCategories,
    }]
};

const dataTauxStock = {
    labels: labelsStock,
    datasets: [{

        backgroundColor: ['rgba(170, 230, 184, 0.5)', 'rgba(138, 182, 230, 0.2)', 'rgba(242, 220, 145, 0.5)', 'rgba(222, 118, 118, 0.2)'],
        borderColor: ['rgba(170, 230, 184,1)', 'rgba(138, 182, 230, 1)', 'rgba(242, 220, 145, 1)', 'rgba(222, 118, 118, 1)'],
        data: dataStock,
    }]
};

const configTauxCategories = {
    type: 'pie',
    data: dataTauxCategories,
    options: {

    }
};
const configTauxStock = {
    type: 'pie',
    data: dataTauxStock,
    options: {

    }
};
</script>
<script>
const Rmensuel = new Chart(
    document.getElementById('Rmensuel'),
    config
);

const EvolutionChiffre = new Chart(
    document.getElementById('EvolutionChiffre'),
    configEvolutionChiffre
);
const TauxStock= new Chart(
    document.getElementById('TauxStock'),
    configTauxStock
);
const TauxCategories = new Chart(
    document.getElementById('TauxCategories'),
    configTauxCategories
);
</script>
@stop