<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Récapitulatif Salaire</title>

    <style>
        @page { size: A4 landscape; margin: 4mm; }

        html, body {
            margin: 0;
            padding: 2mm;
            font-family: Helvetica, sans-serif;
            font-size: 9px;
        }

        .title-bar {
            position: relative;
            margin: 0 0 6mm 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
            margin: 0;
        }

        .month-box {
            position: absolute;
            top: 0;
            left: 0;
            border: 2px solid #000;
            padding: 4px 12px;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .export-date {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 10px;
            color: #333;
            padding-top: 6px;
        }

        table.recap {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            border: 2px solid #0a0a0a;
        }

        th, td {
            border: 1px solid #0a0a0a;
            padding: 2px 2px;
            vertical-align: middle;
            overflow: hidden;
            white-space: nowrap;
        }

        .site-header td {
            font-weight: 700;
            font-size: 12px;
            text-align: center;
        }

        thead th {
            text-align: center;
            font-weight: 700;
            font-size: 9px;
            white-space: normal;
        }

        td.name {
            text-align: left;
            font-weight: bold;
        }
        td.base { text-align: center; }
        td.num  { text-align: center; }
        td.dates {
            text-align: left;
            white-space: normal;
            word-break: break-word;
            font-size: 9px;
        }
        td.obs  {
            text-align: left;
            white-space: normal;
            word-break: break-word;
            font-size: 8px;
        }

        tbody td { font-size: 9px; }
    </style>
</head>
<body>

{% set months = {
    1:'Janvier', 2:'Février', 3:'Mars', 4:'Avril', 5:'Mai', 6:'Juin',
    7:'Juillet', 8:'Août', 9:'Septembre', 10:'Octobre', 11:'Novembre', 12:'Décembre'
} %}

<div class="title-bar">
    <div class="month-box">{{ months[from|date('n')|number_format] }} {{ from|date('Y') }}</div>
    <h1>RECAPITULATIF SALAIRE DU {{ from|date('d/m/Y') }} au {{ to|date('d/m/Y') }}</h1>
    <div class="export-date">Exporté le {{ "now"|date('d/m/Y') }} à {{ "now"|date('H:i:s') }}</div>
</div>

<table class="recap">
    <thead>
        <tr>
            <th rowspan="2" style="width: 20mm; text-align: left;">Nom</th>
            <th rowspan="2" style="width: 10mm;">Base</th>
            <th rowspan="2" style="width: 10mm;">Jour de<br>présence<br>Cadre</th>
            <th rowspan="2" style="width: 8mm;">Frais<br>Kms</th>
            <th rowspan="2" style="width: 8mm;">Heures<br>de<br>nuit</th>
            <th rowspan="2" style="width: 8mm;">Panier<br>de<br>nuit</th>
            <th colspan="2" style="width: 14mm;">Heures<br>payés</th>
            <th rowspan="2" style="width: 8mm;">Heures<br>férié</th>
            <th rowspan="2" style="width: 8mm;">Heures<br>dim.</th>
            <th rowspan="2" style="width: 8mm;">Prime</th>
            <th colspan="2">Congés</th>
            <th colspan="2">Maladie</th>
            <th colspan="4">CHAUFFEUR</th>
            <th rowspan="2" style="width: 20mm;">Observations</th>
        </tr>
        <tr>
            <th style="width: 7mm;">25%</th>
            <th style="width: 7mm;">50%</th>
            <th style="width: 8mm;">Nbre</th>
            <th style="width: 22mm;">Date</th>
            <th style="width: 8mm;">Nbre</th>
            <th style="width: 22mm;">Date</th>
            <th style="width: 7mm;">PDJ</th>
            <th style="width: 9mm;">REPAS</th>
            <th style="width: 10mm;">NUITEE</th>
            <th style="width: 10mm;">samedi</th>
        </tr>
    </thead>
    <tbody>
    {% for siteId, group in siteGroups %}
        {% set siteColor = group.color ?? '#B3E5FC' %}
        <tr class="site-header">
            <td style="background: {{ siteColor }}; text-align: left;" colspan="20">
                {{ group.name }}
            </td>
        </tr>
        {% for row in group.employees %}
            <tr>
                <td class="name">{{ row.lastName }}<br>{{ row.firstName }}</td>
                <td class="base">{{ row.contractName ?? '' }}</td>
                <td class="num">{{ row.presenceDays > 0 ? row.presenceDays : '' }}</td>
                <td class="num">{{ row.mileageKm > 0 ? row.mileageKm : '' }}</td>
                <td class="num">{{ row.nightHours > 0 ? row.nightHours : '' }}</td>
                <td class="num">{{ row.nightBasketCount > 0 ? row.nightBasketCount : '' }}</td>
                <td class="num">{{ row.paid25Hours > 0 ? row.paid25Hours : '' }}</td>
                <td class="num">{{ row.paid50Hours > 0 ? row.paid50Hours : '' }}</td>
                <td class="num">{{ row.holidayHours > 0 ? row.holidayHours : '' }}</td>
                <td class="num">{{ row.sundayHours > 0 ? row.sundayHours : '' }}</td>
                <td class="num">{{ row.bonusAmount > 0 ? row.bonusAmount ~ ' €' : '' }}</td>
                <td class="num">{{ row.congesCount > 0 ? row.congesCount : '' }}</td>
                <td class="dates">{{ row.congesDates }}</td>
                <td class="num">{{ row.maladieCount > 0 ? row.maladieCount : '' }}</td>
                <td class="dates">{{ row.maladieDates }}</td>
                <td class="num">{{ row.isDriver and row.driverBreakfast > 0 ? row.driverBreakfast : '' }}</td>
                <td class="num">{{ row.isDriver and row.driverMeals > 0 ? row.driverMeals : '' }}</td>
                <td class="num">{{ row.isDriver and row.driverOvernight > 0 ? row.driverOvernight : '' }}</td>
                <td class="num">{{ row.isDriver and row.driverSaturdays > 0 ? row.driverSaturdays : '' }}</td>
                <td class="obs">{{ row.observation }}</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="20">Aucun employé.</td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
</table>

</body>
</html>
