<!DOCTYPE html>
<html lang="fr">
{% set jours_fr = {'Mon':'Lun','Tue':'Mar','Wed':'Mer','Thu':'Jeu','Fri':'Ven','Sat':'Sam','Sun':'Dim'} %}
<head>
    <meta charset="UTF-8">
    <title>Planning Salarié - {{ agent.fullName }}</title>
    <style>
        @page {
            size: A4;
            margin: 25mm 22mm;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            font-size: 9pt;
            line-height: 1.3;
            padding: 0 5mm;
        }
        .header {
            display: table;
            width: 100%;
            margin-bottom: 10px;
        }
        .header-logo {
            display: table-cell;
            width: 15%;
            vertical-align: middle;
        }
        .header-title {
            display: table-cell;
            width: 55%;
            text-align: center;
            vertical-align: middle;
        }
        .header-info {
            display: table-cell;
            width: 30%;
            text-align: right;
            vertical-align: middle;
            font-size: 8pt;
        }
        .header-title h1 {
            font-size: 14pt;
            margin-bottom: 5px;
        }
        .header-title h2 {
            font-size: 18pt;
            color: #0066cc;
        }
        .month-info {
            display: table;
            width: 100%;
            margin-bottom: 10px;
        }
        .month-info-left {
            display: table-cell;
            font-weight: bold;
            font-size: 11pt;
        }
        .month-info-right {
            display: table-cell;
            text-align: right;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        th, td {
            border: 1px solid #333;
            padding: 3px 5px;
            text-align: center;
            font-size: 8pt;
        }
        th {
            background-color: #f0f0f0;
            font-weight: bold;
        }
        .day-col { width: 45px; }
        .time-col { width: 90px; }
        .pause-col { width: 40px; }
        .hours-col { width: 35px; }
        .qualification-col { width: 150px; }
        .week-total {
            background-color: #d9edf7;
            font-style: italic;
        }
        .month-total {
            background-color: #337ab7;
            color: white;
            font-weight: bold;
        }
        .sunday {
            background-color: #ffe6e6;
        }
        .holiday {
            background-color: #ffcdd2;
            color: #b71c1c;
            font-weight: bold;
        }
        .vacation {
            background-color: #dff0d8;
        }
        .leave {
            background-color: #d9edf7;
        }
        .absence {
            background-color: #f2dede;
        }
        .hours-summary {
            margin-top: 15px;
        }
        .hours-summary table th {
            background-color: #f0f0f0;
        }
        .address-table {
            margin-top: 10px;
        }
        .address-table th {
            background-color: #333;
            color: white;
        }
        .signature-area {
            margin-top: 20px;
        }
        .signature-box {
            border: 1px solid #333;
            height: 60px;
            margin-top: 5px;
        }
        .note {
            font-style: italic;
            color: #666;
            margin-top: 10px;
        }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .fw-bold { font-weight: bold; }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <div class="header-logo">
            {% if logoDataUri %}
                <img src="{{ logoDataUri }}" alt="Logo" style="max-height:60px; max-width:100%;">
            {% else %}
                <strong>{{ agency ? agency.name : 'Alphavigie' }}</strong>
            {% endif %}
        </div>
        <div class="header-title">
            <h1>{{ agency ? agency.name : 'Alphavigie' }}</h1>
            <h2>Planning salarié</h2>
        </div>
        <div class="header-info">
            <strong>{{ agent.matricule }}</strong> {{ agent.fullName }}<br>
            {{ agent.qualification|qualification_label }}
        </div>
    </div>

    <!-- Month Info -->
    <div class="month-info">
        <div class="month-info-left">{{ monthName|upper }} {{ year }}</div>
        <div class="month-info-right">{% if agent.contractHours %}Contrat : <strong>{{ agent.contractHours }} h</strong>{% endif %}</div>
    </div>

    <!-- Planning Table -->
    <table>
        <thead>
            <tr>
                <th class="day-col">Jour</th>
                <th class="time-col">Plages horaires</th>
                <th class="hours-col">H</th>
                <th>Sites</th>
                <th class="qualification-col">Qualification</th>
            </tr>
        </thead>
        <tbody>
            {% set weekTotal = 0 %}
            {% set monthTotal = 0 %}
            {% set currentWeek = null %}

            {% for day in daysInMonth %}
                {% set entry = entries[day.format('Y-m-d')]|default(null) %}
                {% set dayOfWeek = day.format('N') %}
                {% set isNewWeek = currentWeek != day.format('W') %}

                {# Afficher le total de la semaine précédente #}
                {% if isNewWeek and currentWeek is not null %}
                    <tr class="week-total">
                        <td colspan="2" class="text-right">Total heures travaillées semaine</td>
                        <td class="fw-bold">{{ weekTotal|number_format(2, ',', ' ') }}</td>
                        <td colspan="2"></td>
                    </tr>
                    {% set weekTotal = 0 %}
                {% endif %}
                {% set currentWeek = day.format('W') %}

                <tr class="{{ dayOfWeek == '7' ? 'sunday' : '' }}{{ (entry and entry.isHoliday) or day.format('Y-m-d') in publicHolidays|keys ? ' holiday' : '' }}">
                    <td>
                        <strong>{{ jours_fr[day.format('D')]|default(day.format('D')|slice(0,3)) }} {{ day.format('d') }}</strong>
                    </td>

                    {% if entry %}
                        {% if entry.entryType == 'vacation' %}
                            <td class="vacation">{{ entry.timeRange }}</td>
                            <td class="fw-bold">{{ entry.calculatedHours|number_format(2, ',', ' ') }}</td>
                            <td class="text-left">{{ entry.site ? entry.site.name : '' }}</td>
                            <td>{{ (entry.qualification ?: entry.agent.qualification)|qualification_label }}</td>
                            {% set weekTotal = weekTotal + entry.calculatedHours %}
                            {% set monthTotal = monthTotal + entry.calculatedHours %}
                        {% elseif entry.entryType == 'paid_leave' %}
                            <td class="leave">Pas de Vacation</td>
                            <td>{{ entry.calculatedHours|number_format(2, ',', ' ') }}</td>
                            <td colspan="2" class="leave">Congé payé</td>
                        {% elseif entry.entryType == 'authorized_absence' %}
                            <td class="absence">Pas de Vacation</td>
                            <td></td>
                            <td colspan="2" class="absence">Absence autorisée</td>
                        {% else %}
                            <td>Pas de Vacation</td>
                            <td></td>
                            <td colspan="2">{{ entry.notes }}</td>
                        {% endif %}
                    {% else %}
                        <td>Pas de Vacation</td>
                        <td></td>
                        <td colspan="2"></td>
                    {% endif %}
                </tr>
            {% endfor %}

            {# Dernière semaine #}
            <tr class="week-total">
                <td colspan="2" class="text-right">Total heures travaillées semaine</td>
                <td class="fw-bold">{{ weekTotal|number_format(2, ',', ' ') }}</td>
                <td colspan="2"></td>
            </tr>

            {# Total du mois #}
            <tr class="month-total">
                <td colspan="2" class="text-right">Total des heures travaillées</td>
                <td>{{ monthTotal|number_format(2, ',', ' ') }}</td>
                <td colspan="2"></td>
            </tr>
        </tbody>
    </table>

    <!-- Note -->
    <p class="note">Ce Planning est susceptible d'être modifié en cours de mois</p>

    <!-- Hours Summary -->
    <div class="hours-summary">
        <table>
            <thead>
                <tr>
                    <th colspan="6">Heures planifiées</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Normales</strong></td>
                    <td>Jour: {{ stats.normales_jour|number_format(2, ',', ' ') }}</td>
                    <td>Nuit: {{ stats.normales_nuit|number_format(2, ',', ' ') }}</td>
                    <td><strong>Fériées</strong></td>
                    <td>Jour: {{ stats.feriees_jour|number_format(2, ',', ' ') }}</td>
                    <td>Nuit: {{ stats.feriees_nuit|number_format(2, ',', ' ') }}</td>
                </tr>
                <tr>
                    <td><strong>Dimanche</strong></td>
                    <td>Jour: {{ stats.dimanche_jour|number_format(2, ',', ' ') }}</td>
                    <td>Nuit: {{ stats.dimanche_nuit|number_format(2, ',', ' ') }}</td>
                    <td colspan="3"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Agent Address -->
    <table class="address-table">
        <thead>
            <tr>
                <th>Nom et Adresse</th>
                <th style="width: 100px;">Téléphone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-left">{{ agent.fullName }} - {{ agent.address }}, {{ agent.postalCode }} {{ agent.city }}</td>
                <td>{{ agent.phone }}</td>
            </tr>
        </tbody>
    </table>

    <!-- Signature -->
    <div class="signature-area">
        <p><strong>Autorisation administrative :</strong></p>
        <div class="signature-box"></div>
    </div>
</body>
</html>
