@extends('layouts.master')

@section('content')
    <style>
        body {
            font-family: 'Roboto', Arial, sans-serif;
            /* background-color: #0F172A;
            color: #FFFFFF; */
            margin: 0;
            padding: 0;
        }

        .dashboard {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
        }

        .title {
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            grid-gap: 20px;
        }

        .card {
            background-color: #1E293B;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            display: table;
        }

        .card h3 {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .card p {
            color: #D1D5DB;
            margin: 5px 0;
        }

        .chart-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-gap: 20px;
            margin-top: 30px;
        }

        .chart canvas {
            width: 100% !important;
            max-width: 250px !important;
            height: auto !important;
            margin: 0px auto;
        }
        footer {
            background-color: #E76F51;
            color: #FFFFFF;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
    <div class="row banner custom_dashboard">
        @if ($selectedCountry)
        <img src="{{ asset("/storage/banner/$selectedCountry->banner_image") }}" class="test"
            alt="{{ $selectedCountry->title }}" style="width: 70%; height:350px;">
        <div class="col-4 coursel">
            @include('ads.adslider')
        </div>
        @else
        <img src="{{ asset('/assets/image/bluebanner.png') }}" class="test" alt="bluebanner.png"
            style="width: 70%; height:350px;">
        <div class="col-4 coursel">
            @include('ads.adslider')
        </div>
        @endif
    </div>
    

    <div class="dashboard">
        <a href="{{ route('payor.selectedService') }}" class="btn btn-lg btn-danger rounded-pill px-3">
            <i class="fa-solid fa-arrow-left"></i>@lang('messages.back')
        </a>
        <div class="title">Statistiques Paiements Bourses Etudiants</div>

        <div class="card-container">
        <div class="card">
                <h3>Nombre d'étudiants</h3>
                <p>Total: {{ $totalStudents }}</p>
                <p>Hommes: {{ $maleStudents }}</p>
                <p>Femmes: {{ $femaleStudents }}</p>
            </div>
            <div class="card">
                <h3>Montant à payer</h3>
                <p>Total: F CFA{{ number_format($totalAmountToBePaid) }}</p>
                <p>Payé: F CFA{{ number_format($totalAmountPaid) }}</p>
                <p>En Attente: F CFA{{ number_format($amountLeft) }}</p>
            </div>

            <div class="card">
                <h3>Montant Payé</h3>
                <p>1e Paiement: ${{ number_format($payments->first_payment) }}</p>
                <p>2e Paiement: ${{ number_format($payments->second_payment) }}</p>
                <p>3e Paiement: ${{ number_format($payments->third_payment) }}</p>
            </div>
        </div>

        <div class="chart-container">
            <div class="card chart">
                <h3>Nombre d'étudiants</h3>
                <canvas id="studentsChart"></canvas>
            </div>

            <div class="card chart">
                <h3>Bourse (Montant à Payer)</h3>
                <canvas id="bourseChart"></canvas>
            </div>

            <div class="card chart">
                <h3>Montant Payé</h3>
                <canvas id="paymentChart"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const studentsCtx = document.getElementById('studentsChart').getContext('2d');
        const bourseCtx = document.getElementById('bourseChart').getContext('2d');
        const paymentCtx = document.getElementById('paymentChart').getContext('2d');

        // Pie Chart for Number of Students
        new Chart(studentsCtx, {
            type: 'pie',
            data: {
                labels: ['Hommes', 'Femmes'],
                datasets: [{
                    data: [{{ $maleStudents }}, {{ $femaleStudents }}],
                    backgroundColor: ['#4CAF50', '#FF5733']
                }]
            }
        });
        // Pie Chart for Bourse
        new Chart(bourseCtx, {
            type: 'pie',
            data: {
                labels: ['Montant Payé', 'Montant en Attente'],
                datasets: [{
                    data: [{{ $totalAmountPaid }}, {{ $amountLeft }}],
                    backgroundColor: ['#4CAF50', '#FF5733']
                }]
            }
        });

        // Pie Chart for Amount Paid
        new Chart(paymentCtx, {
            type: 'pie',
            data: {
                labels: ['1e Piemant', '2e Piemant', '3e Piemant'],
                datasets: [{
                    data: [
                        {{ $payments->first_payment }},
                        {{ $payments->second_payment }},
                        {{ $payments->third_payment }}
                    ],
                    backgroundColor: ['#4CAF50', '#FF5733', '#FFC107']
                }]
            }
        });
    </script>
@endsection