@extends('layouts.master')
@section('breadcrumb')
    @include('components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("dashboard"),
            'url'   => route("home"),
        ]
    ], 'active' =>  __(@$title)])
@endsection
@section('content')
    <style>
        .bg-primary {
            background: linear-gradient(90deg, #fff, #fff) !important;
        }
        #statusChart, #amountChart, #statusDemandeUvChart, #amountDemandeUvChart {
            display: block;
            margin: 0 auto;
        }

    </style>
    <div class="body-wrapper">
        @include("layouts.alert")
        <div class="row mb-30-none">
            <div class="col-xl-12 mb-30">
                @foreach($pays as $pay)

                    <div class="dash-payment-item-wrapper" {{ auth()->user()->pays_id == null || auth()->user()->pays_id == $pay->id  }}>
                        <div class="dash-payment-item active">

                            <div class="dash-payment-title-area">
                                <span class="dash-payment-badge">!</span>
                                <h5 class="title"> {{$pay->libelle}}</h5>
                            </div>

                            <div class="dash-payment-body">
                                <div class="row row-cols-1 row-cols-md-3 row-cols-xl-4">
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-primary">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("administrateurs")</p>
                                                        <h4 class="my-1 text-primary">{{ $administrateurs->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-deepblue text-white ms-auto">
                                                        <i class='fas fa-user'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-primary">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("pointrelais")</p>
                                                        <h4 class="my-1 text-primary">{{ $pointrelais->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-orange text-white ms-auto">
                                                        <i class='fas fa-user-alt'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-success">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("distributeurs")</p>
                                                        <h4 class="my-1 text-success">{{ $distributeurs->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='fas fa-user-alt-slash' ></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-primary">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("cabinistes")</p>
                                                        <h4 class="my-1 text-primary">{{ $cabinistes->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-ibiza text-white ms-auto">
                                                        <i class='fas fa-user'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>

                            <div class="dash-payment-body">
                                <div class="row row-cols-1 row-cols-md-3 row-cols-xl-4">

                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-primary">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("entreprises")</p>
                                                        <h4 class="my-1 text-primary">{{ $entreprises->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto">
                                                        <i class='fas fa-user'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-primary">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("grandesurfaces")</p>
                                                        <h4 class="my-1 text-primary">{{ $grandesurfaces->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto">
                                                        <i class='fas fa-user'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-success">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("agentterrains")</p>
                                                        <h4 class="my-1 text-success">{{ $agentterrains->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-quepal text-white ms-auto"><i class='fas fa-user' ></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card radius-10 border-start border-0 border-3 border-success">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div>
                                                        <p class="mb-0 text-secondary">@lang("clients")</p>
                                                        <h4 class="my-1 text-success">{{ $clients->where('pays_id', $pay->id)->count() }}</h4>
                                                    </div>
                                                    <div class="widgets-icons-2 rounded-circle bg-gradient-blooker text-white ms-auto"><i class='fas fa-user' ></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                            <div class="dash-payment-body">
                                <div class="row mt-5">
                                    <div class="col-12">  <!-- Utiliser col-12 pour prendre toute la largeur -->
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang('reparttion_client')</h5>
                                                <canvas id="transactionsChart" style="width: 100%; height: 200px; margin: 0 auto;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <div class="dash-payment-body">
                            <div class="row mt-5">
                                <div class="col-12">  <!-- Utiliser col-12 pour prendre toute la largeur -->
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">@lang('reparttion_distributeurs')</h5>
                                            <canvas id="transactionsdistributeurChart" style="width: 100%; height: 200px; margin: 0 auto;"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="dash-payment-body">
                            <div class="row mt-5">
                                <div class="col-12">  <!-- Utiliser col-12 pour prendre toute la largeur -->
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">@lang('reparttion_agents')</h5>
                                            <canvas id="transactionsagentChart" style="width: 100%; height: 200px; margin: 0 auto;"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <div class="dash-payment-body">
                                <div class="row mt-5">
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang("repartition_des_monnaies_statuts")</h5>
                                                <canvas id="statusChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang("repartition_des_monnaies_devise")</h5>
                                                <canvas id="amountChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dash-payment-body">
                                <div class="row mt-5">
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang("repartition_des_demandesuv_statuts")</h5>
                                                <canvas id="statusDemandeUvChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang("repartition_des_demandesuv_devise")</h5>
                                                <canvas id="amountDemandeUvChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dash-payment-body">
                                <div class="row mt-5">
                                    <div class="col-12">  <!-- Utiliser col-12 pour prendre toute la largeur -->
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">@lang('reparttion_demandesuv_typeutilisateur')</h5>
                                                <canvas id="TypeUserDemandeUvChart" style="width: 100%; height: 200px; margin: 0 auto;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                @endforeach

            </div>

        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Données pour le pie chart des statuts
            var statusDistribution = @json($statusDistribution);
            var ctxStatus = document.getElementById('statusChart').getContext('2d');
            var statusChart = new Chart(ctxStatus, {
                type: 'pie',
                data: {
                    labels: Object.keys(statusDistribution),
                    datasets: [{
                        data: Object.values(statusDistribution),
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                }
            });

            // Données pour le pie chart des montants par devise
            var amountDistribution = @json($amountDistribution);
            var ctxAmount = document.getElementById('amountChart').getContext('2d');
            var amountChart = new Chart(ctxAmount, {
                type: 'pie',
                data: {
                    labels: Object.keys(amountDistribution),
                    datasets: [{
                        data: Object.values(amountDistribution),
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                }
            });
        });
        document.addEventListener("DOMContentLoaded", function() {
            // Données pour le pie chart des statuts
            var statusDemandeUv = @json($statusDemandeUv);
            var ctxStatusDemandeUv = document.getElementById('statusDemandeUvChart').getContext('2d');
            var statusDemandeUvChart = new Chart(ctxStatusDemandeUv, {
                type: 'pie',
                data: {
                    labels: Object.keys(statusDemandeUv),
                    datasets: [{
                        data: Object.values(statusDemandeUv),
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                }
            });

            // Données pour le pie chart des montants par devise
            var amountDemandeUv = @json($amountDemandeUv);
            var ctxAmountDemandeUv = document.getElementById('amountDemandeUvChart').getContext('2d');
            var amountDemandeUvChart = new Chart(ctxAmountDemandeUv, {
                type: 'pie',
                data: {
                    labels: Object.keys(amountDemandeUv),
                    datasets: [{
                        data: Object.values(amountDemandeUv),
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                }
            });
        });
        document.addEventListener("DOMContentLoaded", function() {
            // Données pour le bar chart des statuts
            var TypeUserDemandeUv = @json($TypeUserDemandeUv);
            var ctxTypeUserDemandeUv = document.getElementById('TypeUserDemandeUvChart').getContext('2d');
            var TypeUserDemandeUvChart = new Chart(ctxTypeUserDemandeUv, {
                type: 'bar',
                data: {
                    labels: Object.keys(TypeUserDemandeUv),
                    datasets: [{
                        label: 'Type utilisateur',
                        data: Object.values(TypeUserDemandeUv),
                        backgroundColor: '#36A2EB',
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                }
            });

        });
               document.addEventListener('DOMContentLoaded', function() {
                           // Données à partir du contrôleur
                           const dataPoints = @json($dataPoints);

                           // Préparer les labels et les données pour le graphique
                           const labels = dataPoints.map(item => item.label);
                           const deposits = dataPoints.map(item => item.deposits);
                           const withdrawals = dataPoints.map(item => item.withdrawals);

                           // Configuration du graphique
                           const ctx = document.getElementById('transactionsChart').getContext('2d');
                           new Chart(ctx, {
                               type: 'bar',
                               data: {
                                   labels: labels,
                                   datasets: [
                                       {
                                           label: 'Dépôts',
                                           data: deposits,
                                           backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                           borderColor: 'rgba(75, 192, 192, 1)',
                                           borderWidth: 1
                                       },
                                       {
                                           label: 'Retraits',
                                           data: withdrawals,
                                           backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                           borderColor: 'rgba(255, 99, 132, 1)',
                                           borderWidth: 1
                                       }
                                   ]
                               },
                               options: {
                                   responsive: false,
                                   plugins: {
                                       legend: {
                                           position: 'top',
                                       },
                                       tooltip: {
                                           callbacks: {
                                               label: function(context) {
                                                   let label = context.dataset.label || '';
                                                   if (label) {
                                                       label += ': ';
                                                   }
                                                   if (context.parsed.y !== null) {
                                                       label += new Intl.NumberFormat().format(context.parsed.y);
                                                   }
                                                   return label;
                                               }
                                           }
                                       }
                                   },
                                   scales: {
                                       x: {
                                           beginAtZero: true,
                                       },
                                       y: {
                                           beginAtZero: true,
                                       }
                                   }
                               }
                           });
                       });
                       document.addEventListener('DOMContentLoaded', function() {
                           // Données à partir du contrôleur
                           const dataPointsDistributeurs = @json($dataPointsDistributeurs);

                           // Préparer les labels et les données pour le graphique
                           const labels = dataPointsDistributeurs.map(item => item.label);
                           const deposits = dataPointsDistributeurs.map(item => item.deposits);
                           const withdrawals = dataPointsDistributeurs.map(item => item.withdrawals);

                           // Configuration du graphique
                           const ctx = document.getElementById('transactionsdistributeurChart').getContext('2d');
                           new Chart(ctx, {
                               type: 'bar',
                               data: {
                                   labels: labels,
                                   datasets: [
                                       {
                                           label: 'Dépôts',
                                           data: deposits,
                                           backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                           borderColor: 'rgba(75, 192, 192, 1)',
                                           borderWidth: 1
                                       },
                                       {
                                           label: 'Retraits',
                                           data: withdrawals,
                                           backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                           borderColor: 'rgba(255, 99, 132, 1)',
                                           borderWidth: 1
                                       }
                                   ]
                               },
                               options: {
                                   responsive: false,
                                   plugins: {
                                       legend: {
                                           position: 'top',
                                       },
                                       tooltip: {
                                           callbacks: {
                                               label: function(context) {
                                                   let label = context.dataset.label || '';
                                                   if (label) {
                                                       label += ': ';
                                                   }
                                                   if (context.parsed.y !== null) {
                                                       label += new Intl.NumberFormat().format(context.parsed.y);
                                                   }
                                                   return label;
                                               }
                                           }
                                       }
                                   },
                                   scales: {
                                       x: {
                                           beginAtZero: true,
                                       },
                                       y: {
                                           beginAtZero: true,
                                       }
                                   }
                               }
                           });
                       });
                       document.addEventListener('DOMContentLoaded', function() {
                           // Données à partir du contrôleur
                           const dataPointsAgents = @json($dataPointsAgents);

                           // Préparer les labels et les données pour le graphique
                           const labels = dataPointsAgents.map(item => item.label);
                           const deposits = dataPointsAgents.map(item => item.deposits);
                           const withdrawals = dataPointsAgents.map(item => item.withdrawals);

                           // Configuration du graphique
                           const ctx = document.getElementById('transactionsagentChart').getContext('2d');
                           new Chart(ctx, {
                               type: 'bar',
                               data: {
                                   labels: labels,
                                   datasets: [
                                       {
                                           label: 'Dépôts',
                                           data: deposits,
                                           backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                           borderColor: 'rgba(75, 192, 192, 1)',
                                           borderWidth: 1
                                       },
                                       {
                                           label: 'Retraits',
                                           data: withdrawals,
                                           backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                           borderColor: 'rgba(255, 99, 132, 1)',
                                           borderWidth: 1
                                       }
                                   ]
                               },
                               options: {
                                   responsive: false,
                                   plugins: {
                                       legend: {
                                           position: 'top',
                                       },
                                       tooltip: {
                                           callbacks: {
                                               label: function(context) {
                                                   let label = context.dataset.label || '';
                                                   if (label) {
                                                       label += ': ';
                                                   }
                                                   if (context.parsed.y !== null) {
                                                       label += new Intl.NumberFormat().format(context.parsed.y);
                                                   }
                                                   return label;
                                               }
                                           }
                                       }
                                   },
                                   scales: {
                                       x: {
                                           beginAtZero: true,
                                       },
                                       y: {
                                           beginAtZero: true,
                                       }
                                   }
                               }
                           });
                       });
    </script>
@endsection