@extends('master.master_back')
@section('title')
    RDPC - Dashboard
@endsection

@php
    $currency = "F CFA";
@endphp

@section('styles')
<style>
    /* Fond coloré prévu pour les cartes à texte blanc + séparateurs clairs */
    .dash-panel{ border:none; }
    .dash-panel--members{ background:linear-gradient(135deg,#3f83c7,#20507f); }
    /* panneau des montants : plus de vert, on garde le fond du thème (comme les graphiques) */
    .dash-panel .card-body{ color:#fff; }
    .dash-panel .progress{ background:rgba(255,255,255,.25); }
    .dash-panel .progress-bar{ background:#fff; }
    .dash-panel .row.row-group>div{ border-color:rgba(255,255,255,.18); }
    .dash-panel h5{ font-weight:800; }
</style>
@endsection

@section('content')
<div class="page-content">

    {{-- ===== Effectifs des membres ===== --}}
    <div class="card radius-10 dash-panel dash-panel--members">
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 row-group g-0">
            @isset($userCounts)
            @foreach ($userCounts as $key => $user)
            @php
                $user_percent = $usersAll > 0 ? ($user['value'] * 100) / $usersAll : 0;
            @endphp
            <div class="col">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <h5 class="mb-0">{{ number_format($user['value'], 0, ',', ' ') }}</h5>
                        <div class="ms-auto">
                            <i class='bx bx-group fs-3 text-white'></i>
                        </div>
                    </div>
                    <div class="progress my-3" style="height:4px;">
                        <div class="progress-bar" role="progressbar" style="width: {{ $user_percent }}%" aria-valuenow="{{ $user['value'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex align-items-center text-white">
                        <h6 class="mb-0">{{ $user['label'] }}</h6>
                    </div>
                </div>
            </div>
            @endforeach
            @endisset
        </div>
    </div>

    {{-- ===== Montants ===== --}}
    <div class="card radius-10 dash-panel dash-panel--amounts">
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 row-group g-0">
            @php
                $amounts = [
                    ['label' => 'Montant Total',                          'value' => $amountAll,          'ico' => 'bx-wallet'],
                    ['label' => "Montant de l'année en cours (".date('Y').")", 'value' => $amountCurrentYear,  'ico' => 'bx-calendar'],
                    ['label' => "Montant du mois en cours (".date('m').")",     'value' => $amountCurrentMonth, 'ico' => 'bx-calendar-event'],
                    ['label' => "Montant de la journée en cours",         'value' => $amountCurrentDay,   'ico' => 'bx-calendar-check'],
                ];
            @endphp
            @foreach ($amounts as $a)
            <div class="col">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <h5 class="mb-0">{{ convert_number($a['value']) }} {{ $currency }}</h5>
                        <div class="ms-auto">
                            <i class='bx {{ $a['ico'] }} fs-3 text-white'></i>
                        </div>
                    </div>
                    <div class="progress my-3" style="height:4px;">
                        <div class="progress-bar" role="progressbar" style="width: 100%"></div>
                    </div>
                    <div class="d-flex align-items-center text-white">
                        <h6 class="mb-0">{{ $a['label'] }}</h6>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== Graphiques ===== --}}
    <div class="row">
        <div class="col-12 col-lg-8 col-xl-8 d-flex">
            <div class="card radius-10 w-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <h5 class="mb-4">MONTANT POUR CHAQUE MOIS</h5>
                    </div>
                    <div class="chart-container-1">
                        <canvas id="chart_contribution_by_month"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 col-xl-4 d-flex">
            <div class="card radius-10 overflow-hidden w-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <h5 class="mb-4">Montant En fonction des Type de Cotisations</h5>
                    </div>
                    <div class="chart-js-container2">
                        <div class="piechart-legend">
                            <h3 class="mb-1">{{ formatNumber($amountAll) }}</h3>
                            <h6 class="mb-0">{{ $currency }}</h6>
                        </div>
                        <canvas id="chart_contribution_by_type"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
    (function () {
        if (typeof Chart === 'undefined') return;

        // Textes des graphiques en blanc (fond foncé)
        Chart.defaults.color = '#ffffff';
        Chart.defaults.borderColor = 'rgba(255,255,255,0.14)';

        // --- Graphique 1 : montant par mois ---
        var c1 = document.getElementById('chart_contribution_by_month');
        if (c1) {
            var g = c1.getContext('2d').createLinearGradient(0, 0, 0, 350);
            g.addColorStop(0, 'rgba(47,111,176,0.95)');
            g.addColorStop(1, 'rgba(47,111,176,0.30)');
            new Chart(c1, {
                type: 'bar',
                data: {
                    labels: @json($chartMonthLabels),
                    datasets: [{
                        label: 'Montant ({{ $currency }})',
                        data: @json($chartMonthTotals),
                        backgroundColor: g,
                        borderRadius: 6,
                        maxBarThickness: 42
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, ticks: { callback: function (v) { return Number(v).toLocaleString('fr-FR'); } } },
                        x: { grid: { display: false } }
                    }
                }
            });
        }

        // --- Graphique 2 : montant par type ---
        var c2 = document.getElementById('chart_contribution_by_type');
        if (c2) {
            new Chart(c2, {
                type: 'doughnut',
                data: {
                    labels: @json($chartTypeLabels),
                    datasets: [{
                        data: @json($chartTypeTotals),
                        backgroundColor: ['#2f6fb0', '#128a3f', '#e6a800', '#d0021b', '#8a949d', '#7a5cd0'],
                        borderWidth: 2,
                        borderColor: '#fff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: { callbacks: { label: function (ctx) {
                            return ctx.label + ' : ' + Number(ctx.parsed).toLocaleString('fr-FR') + ' {{ $currency }}';
                        } } }
                    }
                }
            });
        }
    })();
</script>
@endsection