@php
    header('cache-Control: no-store, no-cache, must-revalidate');
    header('cache-Control: post-check=0, pre-check=0', false);
    header('Pragma: no-cache');
    header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
@endphp

<!DOCTYPE html>
<html id="html" lang="{{ app()->getLocale() }}">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/css/connexion.css">
    <link rel="stylesheet" href="/css/style.css">
    <title>UpSchool</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"
        integrity="sha256-frGUwmSN4CLLjyk5m59ECdXsDMUxTW5O6hdceNHVCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/addons/cleave-phone.sn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"
        integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="icon" href="/img/upschool-favicon.png">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        h1 {
            font-family: 'New Century Schoolbook', 'TeX Gyre Schola', 'serif';
        }

        @media print {
            /* Appliquer une marge sur toutes les pages */
            @page {
                margin-top: 20; /* ajustez top/right/left/bottom selon besoin */
            }
        }

        * {
            -webkit-print-color-adjust: exact !important;
            /* Chrome, Safari, Edge */
            color-adjust: exact !important;
            /*Firefox*/
        }
    </style>
</head>

<body class="has-background-white my-0 is-family-monospace">
    <div class="container is-flex is-flex-direction-column is-align-items-center">
        <h1 class="title is-4 my-5">Rapport des paiements : {{ $month }}</h1>
        <h3 class="title is-6">{{ $classe->libelle }}</h3>
        <div class="is-flex is-justify-content-space-between">
            <div class="mr-6">
                <h3 class="title is-6">Payants</h3>
                @foreach ($eleves as $eleve)
                    @if ($eleve->payements->where('promo', $promo)->where('mois', $month)->first()->paye)
                        <p class="mb-2">{{ $eleve->prenom }} {{ $eleve->nom }}</p>
                    @endif
                @endforeach
            </div>
            <div class="ml-6">
                <h3 class="title is-6">Non Payants</h3>
                @foreach ($eleves as $eleve)
                    @if (!$eleve->payements->where('promo', $promo)->where('mois', $month)->first()->paye)
                        <p class="mb-2">{{ $eleve->prenom }} {{ $eleve->nom }}</p>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="mt-6">
            <p>{{ date_format(now(), 'd/m/Y') }}</p>
        </div>
    </div>
</body>

</html>
