{% extends "base.html.twig" %}

{% block title %}{{ parent() }} Accueil{% endblock %}

{% block content %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 text-center">
                <h1 class="mt-4 mb-5">Réservation : Choix de la date du séjour</h1>

                <style>
                    /* Vos styles CSS ici */
                    table {
                        width: 80%;
                        border-collapse: collapse;
                        margin-top: 20px;
                    }

                    th, td {
                        border: 1px solid #ddd;
                        padding: 15px;
                        text-align: center;
                    }

                    th {
                        background-color: #f2f2f2;
                    }

                    .inactive-day {
                        color: gray;
                    }

                    .active-day {
                        color: black;
                    }

                    .today {
                        color: red;
                    }

                    .header {
                        font-size: 20px;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    .controls {
                        margin-top: 10px;
                    }
                </style>
            </head>
            <body>

            {% set premierJourDuMois = now|date_modify('first day of this month') %}
            {% set jourActuel = now|date('j') %}
            {% set timestampPremierJour = premierJourDuMois|date('U') %}

            {# Générer le timestamp pour le mois précédent et le mois suivant #}
            {% set timestampMoisPrecedent = premierJourDuMois|date_modify('-1 month')|date('U') %}
            {% set timestampMoisSuivant = premierJourDuMois|date_modify('+1 month')|date('U') %}

            {# Générer le tableau des jours du mois #}
            {% set joursDuMois = [] %}
            {% set joursDansLeMois = premierJourDuMois|date('t') %}
            {% set jourDeLaSemaine = premierJourDuMois|date('N') %}

            {# Ajuster les noms des jours pour commencer par lundi #}
            {% set joursDeLaSemaine = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'] %}
            {% set premierJour = jourDeLaSemaine %}

            {% set semaine = [] %}
            {% for i in range(1, joursDansLeMois + premierJour) %}
                {% set caseJour %}
                    {% if i >= premierJour and i - premierJour + 1 <= joursDansLeMois %}
                        {% set jour = i - premierJour + 1 %}
                        {% set timestampJour = timestampPremierJour + (jour - 1) * 86400 %}
                        {% if jour == jourActuel %}
                            <a href="index.php?page=reservation_2&date=2024-01-{{ jour }}">{{ jour }}</a>
                        {% else %}
                            <a href="index.php?page=reservation_2&date=2024-01-{{ jour }}">{{ jour }}</a>
                        {% endif %}
                    {% else %}
                        <span class="inactive-day"></span>
                    {% endif %}
                {% endset %}
                {% set semaine = semaine|merge([caseJour]) %}

                {# Commencer une nouvelle ligne de tableau pour chaque lundi #}
                {% if i % 7 == 0 %}
                    {% set joursDuMois = joursDuMois|merge([semaine]) %}
                    {% set semaine = [] %}
                {% endif %}

                {# Ajouter une nouvelle ligne pour le dernier jour du mois #}
                {% if loop.last %}
                    {% set joursRestants = 7 - loop.length % 7 %}
                    {% for j in range(1, joursRestants + 1) %}
                        <span class="inactive-day"></span>
                    {% endfor %}
                    {% set joursDuMois = joursDuMois|merge([semaine]) %}
                {% endif %}
            {% endfor %}

            <div class="header">{{ premierJourDuMois|date('F Y') }}</div>

            <table>
                <thead>
                <tr>
                    {% for jour in joursDeLaSemaine %}
                        <th>{{ jour }}</th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for semaine in joursDuMois %}
                    <tr>
                        {% for caseJour in semaine %}
                            <td>{{ caseJour|raw }}</td>
                        {% endfor %}
                    </tr>

                {% endfor %}
                </tbody>
            </table>

            <div class="controls">
                <a href="?timestamp={{ timestampMoisPrecedent }}" class="btn btn-primary">Mois Précédent</a>
                <a href="?timestamp={{ timestampMoisSuivant }}" class="btn btn-primary">Mois Suivant</a>
            </div>
            <div>

            </div>
            </body>
        </div>
    </div>
{% endblock %}
