<?php
$reservations_salle = [];
$demandes_en_attente = [];
$utilisateurs_salle = [];
$erreur_bdd = false;

$js_resas = [];

try {
    $stmt = $pdo->query("SELECT r.*, u.nom, u.prenom FROM reservations_salle r LEFT JOIN utilisateurs u ON r.utilisateur_id = u.id ORDER BY r.date_debut DESC");
    if ($stmt) { 
        $reservations_salle = $stmt->fetchAll(PDO::FETCH_ASSOC); 
        
        foreach ($reservations_salle as $r) {
            if ($r['statut'] === 'Validée') {
                $js_resas[] = ['date_debut' => $r['date_debut'], 'date_fin' => $r['date_fin'], 'statut' => 'Validée'];
            } elseif ($r['statut'] === 'En attente') {
                if ($est_privilegie || (isset($_SESSION['user_id']) && $r['utilisateur_id'] == $_SESSION['user_id'])) {
                    $js_resas[] = ['date_debut' => $r['date_debut'], 'date_fin' => $r['date_fin'], 'statut' => 'En attente'];
                }
            }
        }
    }
    
    $stmt_wait = $pdo->query("SELECT r.*, u.nom, u.prenom FROM reservations_salle r LEFT JOIN utilisateurs u ON r.utilisateur_id = u.id WHERE r.statut = 'En attente' ORDER BY r.date_debut ASC");
    if ($stmt_wait) { $demandes_en_attente = $stmt_wait->fetchAll(PDO::FETCH_ASSOC); }

    $utilisateurs_salle = $pdo->query("SELECT id, nom, prenom FROM utilisateurs ORDER BY nom ASC, prenom ASC")->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $erreur_bdd = true;
}
?>

<div class="header-section">
    <div>
        <h1 style="margin: 0; color: #333; font-size: 1.5em;">Réservation de la salle communale</h1>
        <button type="button" onclick="document.getElementById('reglementSalleModal').style.display='flex'" style="background: none; border: none; color: #0066cc; text-decoration: underline; cursor: pointer; padding: 0; font-weight: bold; margin-top: 5px;">📄 Voir le règlement de la salle</button>
    </div>
    <?php if ($peut_valider_salle && !empty($demandes_en_attente)): ?>
        <button type="button" class="btn-gestion-attente" onclick="document.getElementById('modalAttenteSalle').style.display='flex'">
            📋 Gérer les options (<?= count($demandes_en_attente) ?>)
        </button>
    <?php endif; ?>
</div>

<?php if (!empty($message_salle)): ?>
    <div class="msg-avertissement" style="background-color: <?= $type_message_salle === 'succes' ? '#e1ede0' : '#f8d7da' ?>; color: <?= $type_message_salle === 'succes' ? '#28a745' : '#721c24' ?>; border: 1px solid <?= $type_message_salle === 'succes' ? '#c8e6c9' : '#f5c6cb' ?>;">
        <?= $message_salle ?>
    </div>
<?php endif; ?>

<?php if ($erreur_bdd): ?>
    <div class="msg-avertissement" style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">
        ⚠️ <strong>Erreur SQL :</strong> Un problème empêche la lecture de la base de données.
    </div>
<?php else: ?>

    <div class="msg-avertissement">
        ℹ️ Cliquer sur une case verte pour poser une option. Plusieurs options peuvent être posées sur une même date : le premier venu en mairie pour régler bloque définitivement la salle !
    </div>

    <div style="background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); max-width: 600px; margin: 0 auto;">
        <div class="cal-nav">
            <button type="button" onclick="changeMonth(-1)">&#9664; Précédent</button>
            <h2 id="cal-month-title" style="margin: 0; font-size: 1.3em;"></h2>
            <button type="button" onclick="changeMonth(1)">Suivant &#9654;</button>
        </div>

        <div class="calendrier-grid">
            <div class="cal-header">Lu</div><div class="cal-header">Ma</div><div class="cal-header">Me</div>
            <div class="cal-header">Je</div><div class="cal-header">Ve</div><div class="cal-header">Sa</div><div class="cal-header">Di</div>
        </div>
        
        <div id="cal-days" class="calendrier-grid"></div>
        
        <div style="display: flex; justify-content: center; gap: 15px; margin-top: 15px; font-size: 0.85em; font-weight: bold; flex-wrap: wrap;">
            <span style="color: #28a745;">🟩 Libre</span>
            <span style="color: #856404;">🟨 Mon option posée</span>
            <span style="color: #dc3545;">🟥 Bloqué et réglé en Mairie</span>
        </div>
    </div>

    <div id="reglementSalleModal" class="modal">
        <div class="modal-content" style="max-width: 700px;">
            <span class="close-btn" onclick="document.getElementById('reglementSalleModal').style.display='none'">×</span>
            <h2 style="color: #4a7c44;">Conditions et Règlement de Location</h2>
            
            <div class="reglement-box">
                <h4>Capacité & Horaires</h4>
                Capacité maximale de 50 personnes avec sanitaires et vestiaire.<br>
                La location s'entend du <strong>Vendredi après-midi 14h30 au Lundi matin 9h00</strong>.
                
                <h4>Tarifs</h4>
                - Tarif été (01/04 au 30/09) ménage inclus : <strong>250 euros</strong><br>
                - Tarif hiver (01/10 au 31/03) ménage inclus : <strong>350 euros</strong><br>
                - Location vaisselle : <strong>1 € par personne</strong>. L'énergie est incluse (chauffage supplémentaire interdit).
                
                <h4>Documents à fournir</h4>
                - Un chèque de caution de <strong>400 €</strong> à l'ordre du Trésor Public.<br>
                - Une attestation d'assurance de responsabilité civile couvrant les dates de location.
                
                <h4>Restitution et Nettoyage</h4>
                Le locataire laissera les lieux dans un minimum d'état de propreté. La vaisselle louée doit être rendue propre. Les abords (parkings) doivent être débarrassés de tous détritus. Les poubelles doivent être vidées et triées.
                
                <h4>Interdictions & Bruit</h4>
                Il est interdit de fumer, de consommer des produits prohibés, de clouer/coller sur les murs, et de jouer au football sur le terrain d'honneur. <strong>À partir de 22H00</strong>, le niveau sonore doit impérativement être baissé pour la tranquillité des riverains.
            </div>
        </div>
    </div>

    <div id="publicPreResaModal" class="modal">
        <div class="modal-content" style="max-width: 450px;">
            <span class="close-btn" onclick="document.getElementById('publicPreResaModal').style.display='none'">×</span>
            <h2 style="color: #4a7c44;">Poser une option</h2>
            <p style="font-size:0.9em; color:#666; margin-bottom:15px;">Sélectionnez vos dates et options. Un e-mail de récapitulatif vous sera envoyé.</p>
            <form method="POST">
                <input type="hidden" name="action" value="public_pre_resa">
                <div class="form-grid-2">
                    <div class="form-group">
                        <label>Date de début :</label>
                        <input type="date" name="pre_date_debut" id="pre_date_debut" required>
                    </div>
                    <div class="form-group">
                        <label>Date de fin :</label>
                        <input type="date" name="pre_date_fin" id="pre_date_fin" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Nombre de personnes (Max 50) :</label>
                    <input type="number" name="pre_nb_personnes" min="1" max="50" required>
                </div>
                
                <div class="form-group" style="background: #e1ede0; padding: 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" name="pre_vaisselle" id="pre_vaisselle" value="1" style="width: auto; margin: 0;">
                    <label for="pre_vaisselle" style="cursor: pointer; margin: 0; color: #155724; font-weight: bold;">Location vaisselle (1€ / pers.)</label>
                </div>

                <div class="form-group">
                    <label>Votre adresse postale complète :</label>
                    <input type="text" name="pre_adresse" required placeholder="N°, rue, CP, Ville...">
                </div>
                <div class="form-group">
                    <label>Téléphone :</label>
                    <input type="text" name="pre_telephone" required placeholder="N° de téléphone">
                </div>

                <input type="hidden" name="pre_nom" value="<?= htmlspecialchars($_SESSION['nom'] ?? '') ?>">
                <input type="hidden" name="pre_prenom" value="<?= htmlspecialchars($_SESSION['prenom'] ?? '') ?>">
                <input type="hidden" name="pre_mail" value="<?= htmlspecialchars($_SESSION['email'] ?? '') ?>">
                
                <button type="submit" name="add_pre_resa_salle" class="btn-submit" style="margin-top: 15px;">Valider mon option</button>
            </form>
        </div>
    </div>

    <?php if ($peut_valider_salle): ?>
        <div id="modalAttenteSalle" class="modal">
            <div class="modal-content" style="max-width: 750px;">
                <span class="close-btn" onclick="document.getElementById('modalAttenteSalle').style.display='none'">×</span>
                <h2>Options en attente de paiement</h2>
                <div style="overflow-x: auto; margin-top: 15px;">
                    <table style="width: 100%; border-collapse: collapse; font-size: 0.9em;">
                        <thead>
                            <tr style="background: #f8f9fa; border-bottom: 2px solid #ddd;">
                                <th style="padding: 10px; text-align: left;">Demandeur</th>
                                <th style="padding: 10px; text-align: left;">Dates demandées</th>
                                <th style="padding: 10px; text-align: left;">Pers. / Vaisselle</th>
                                <th style="padding: 10px; text-align: right;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($demandes_en_attente as $wait): ?>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 10px;">
                                        <strong><?= htmlspecialchars(!empty($wait['nom_externe']) ? $wait['nom_externe'] : $wait['nom']) ?></strong> 
                                        <?= htmlspecialchars(!empty($wait['prenom_externe']) ? $wait['prenom_externe'] : $wait['prenom']) ?>
                                    </td>
                                    <td style="padding: 10px;">Du <?= date('d/m/Y', strtotime($wait['date_debut'])) ?><br><small>au <?= date('d/m/Y', strtotime($wait['date_fin'])) ?></small></td>
                                    <td style="padding: 10px;"><?= $wait['nb_personnes'] ?> pers.<br><?= $wait['vaisselle'] ? '🍽️ Oui' : 'Non' ?></td>
                                    <td style="padding: 10px; text-align: right;">
                                        <form method="POST" style="display:inline;">
                                            <input type="hidden" name="id_resa_validation" value="<?= $wait['id'] ?>">
                                            <button type="submit" name="action_valider_pre_resa" style="padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;" onclick="return confirm('Valider définitivement ce dossier ? Un e-mail sera envoyé et les conflits annulés.');">Valider</button>
                                        </form>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if ($est_privilegie): ?>
        <h2 style="margin-top: 40px; border-bottom: 2px solid #eee; padding-bottom: 10px;">Suivi complet de la liste d'occupation</h2>
        <table style="width: 100%; border-collapse: collapse; background: #fff; font-size: 0.9em; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
            <thead>
                <tr style="background: #f8f9fa;">
                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid #ddd;">Dates</th>
                    <th style="padding: 12px; text-align: left; border-bottom: 2px solid #ddd;">Locataire</th>
                    <th style="padding: 12px; text-align: center; border-bottom: 2px solid #ddd;">Statut</th>
                    <th style="padding: 12px; text-align: right; border-bottom: 2px solid #ddd;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($reservations_salle as $resa): ?>
                    <?php if($resa['statut'] === 'Annulée') continue; ?>
                    <tr>
                        <td style="padding: 12px; border-bottom: 1px solid #eee;">
                            <strong><?= date('d/m/y', strtotime($resa['date_debut'])) ?></strong> <br>
                            <small>au <?= date('d/m/y', strtotime($resa['date_fin'])) ?></small>
                        </td>
                        <td style="padding: 12px; border-bottom: 1px solid #eee;">
                            <?php if ($resa['utilisateur_id']): ?>
                                👤 <?= htmlspecialchars($resa['prenom'] . ' ' . $resa['nom']) ?>
                            <?php else: ?>
                                🌐 <?= htmlspecialchars($resa['prenom_externe'] . ' ' . $resa['nom_externe']) ?>
                            <?php endif; ?>
                            <br><small><?= $resa['nb_personnes'] ?> pers. <?= $resa['vaisselle'] ? '(Vaisselle)' : '' ?></small>
                        </td>
                        <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: center;">
                            <?php if($resa['statut'] === 'Validée'): ?>
                                <span class="badge bg-vert">Validée</span>
                            <?php else: ?>
                                <span class="badge bg-orange">Option</span>
                            <?php endif; ?>
                        </td>
                        <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: right;">
                            <?php if($resa['statut'] === 'Validée'): ?>
                                <a href="services.php?print_contrat_salle=<?= $resa['id'] ?>" target="_blank" style="padding: 5px 10px; background: #9b59b6; color: white; border-radius: 4px; font-weight: bold; text-decoration: none; display:inline-block; margin-bottom:5px;">🖨️ Contrat</a>
                            <?php endif; ?>
                            <button onclick="openEditResaModal(<?= $resa['id'] ?>, '<?= $resa['date_debut'] ?>', '<?= $resa['date_fin'] ?>', <?= $resa['paiement_acquitte'] ?>, '<?= $resa['statut'] ?>', <?= $resa['nb_personnes'] ?>, <?= $resa['vaisselle'] ?>, '<?= htmlspecialchars(addslashes($resa['etat_lieux_aller'])) ?>', '<?= htmlspecialchars(addslashes($resa['etat_lieux_retour'])) ?>')" style="padding: 5px 10px; background: #607d8b; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 5px;">Modifier</button>
                            <form method="POST" onsubmit="return confirm('Annuler définitivement cette réservation ?');" style="display: inline;">
                                <input type="hidden" name="delete_resa_id" value="<?= $resa['id'] ?>">
                                <button type="submit" style="padding: 5px 10px; background: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Annuler</button>
                            </form>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div id="addResaModal" class="modal">
            <div class="modal-content">
                <span class="close-btn" onclick="document.getElementById('addResaModal').style.display='none'">×</span>
                <h2>Bloquer la salle (Direct Mairie)</h2>
                <form method="POST" enctype="multipart/form-data">
                    <div class="form-grid-2">
                        <div class="form-group"><label>Du :</label><input type="date" name="date_debut_salle" id="date_debut_salle" required onchange="autoCalcEtatLieux(false)"></div>
                        <div class="form-group"><label>Au :</label><input type="date" name="date_fin_salle" id="date_fin_salle" required onchange="autoCalcEtatLieux(false)"></div>
                    </div>
                    <div class="form-group" id="bloc_user_salle">
                        <label>Locataire (Habitant inscrit) :</label>
                        <select name="utilisateur_id_salle" id="utilisateur_id_salle">
                            <option value="">-- Sélectionner --</option>
                            <?php foreach ($utilisateurs_salle as $u): ?>
                                <option value="<?= $u['id'] ?>"><?= htmlspecialchars($u['nom'] . ' ' . $u['prenom']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <input type="checkbox" name="non_inscrit_salle" id="non_inscrit_salle" onchange="toggleFormSalle()" style="width: auto; margin: 0;">
                        <label for="non_inscrit_salle" style="font-weight: normal; cursor: pointer; margin: 0;">Personne extérieure / Non inscrite</label>
                    </div>
                    
                    <div id="form_manuel_salle" style="display:none; border-left: 3px solid #0066cc; padding-left: 15px; margin-bottom: 15px;">
                        <div class="form-grid-2">
                            <div class="form-group"><input type="text" name="nom_salle" id="nom_salle" placeholder="Nom"></div>
                            <div class="form-group"><input type="text" name="prenom_salle" id="prenom_salle" placeholder="Prénom"></div>
                        </div>
                        <div class="form-group"><input type="email" name="mail_salle" placeholder="Email (Optionnel)"></div>
                    </div>

                    <div class="form-group"><input type="text" name="adresse_salle" placeholder="Adresse complète" required></div>
                    <div class="form-group"><input type="text" name="telephone_salle" placeholder="Téléphone" required></div>
                    
                    <div class="form-grid-2">
                        <div class="form-group"><label>Personnes :</label><input type="number" name="nb_personnes_salle" value="50" max="50"></div>
                        <div class="form-group"><label>État Lieux (Aller) :</label><input type="datetime-local" name="etat_lieux_aller" id="etat_lieux_aller"></div>
                        <div class="form-group"><label>État Lieux (Retour) :</label><input type="datetime-local" name="etat_lieux_retour" id="etat_lieux_retour"></div>
                    </div>

                    <div class="form-group">
                        <label>Carte d'Identité (Photo / Fichier) :</label>
                        <input type="file" name="piece_identite" accept="image/png, image/jpeg, image/jpg, image/webp" capture="environment">
                    </div>
                    
                    <div style="display:flex; gap:15px; margin-bottom:15px;">
                        <div style="background: #e1ede0; padding: 10px; border-radius: 8px; flex:1;">
                            <input type="checkbox" name="vaisselle_salle" id="add_vaisselle" value="1" style="width: auto; margin: 0;">
                            <label for="add_vaisselle" style="cursor: pointer; margin: 0; color: #155724; font-weight: bold;">Vaisselle</label>
                        </div>
                        <div style="background: #e1ede0; padding: 10px; border-radius: 8px; flex:1;">
                            <input type="checkbox" name="paiement_acquitte" id="add_paiement_acquitte" value="1" style="width: auto; margin: 0;">
                            <label for="add_paiement_acquitte" style="cursor: pointer; margin: 0; color: #155724; font-weight: bold;">Acquitté</label>
                        </div>
                    </div>

                    <button type="submit" name="add_resa_salle" class="btn-submit" style="margin-top: 10px;">Valider la réservation</button>
                </form>
            </div>
        </div>

        <div id="editResaModal" class="modal">
            <div class="modal-content">
                <span class="close-btn" onclick="document.getElementById('editResaModal').style.display='none'">×</span>
                <h2>Modifier le dossier & le Contrat</h2>
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="edit_resa_id" id="edit_resa_id">
                    <div class="form-grid-2">
                        <div class="form-group"><label>Du :</label><input type="date" name="edit_date_debut_salle" id="edit_date_debut_salle" required onchange="autoCalcEtatLieux(true)"></div>
                        <div class="form-group"><label>Au :</label><input type="date" name="edit_date_fin_salle" id="edit_date_fin_salle" required onchange="autoCalcEtatLieux(true)"></div>
                    </div>
                    
                    <div class="form-grid-2">
                        <div class="form-group"><label>Personnes :</label><input type="number" name="edit_nb_personnes" id="edit_nb_personnes" max="50"></div>
                        <div class="form-group"><label>État Lieux (Aller) :</label><input type="datetime-local" name="edit_etat_lieux_aller" id="edit_etat_lieux_aller"></div>
                        <div class="form-group"><label>État Lieux (Retour) :</label><input type="datetime-local" name="edit_etat_lieux_retour" id="edit_etat_lieux_retour"></div>
                    </div>

                    <div class="form-group">
                        <label>Statut du dossier :</label>
                        <select name="edit_statut_salle" id="edit_statut_salle">
                            <option value="Validée">Validée / Ferme</option>
                            <option value="En attente">En attente de paiement</option>
                            <option value="Annulée">Annulée</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>Remplacer la CNI :</label>
                        <input type="file" name="edit_piece_identite" accept="image/png, image/jpeg, image/jpg, image/webp" capture="environment">
                    </div>
                    
                    <div style="display:flex; gap:15px; margin-bottom:15px;">
                        <div style="background: #e1ede0; padding: 10px; border-radius: 8px; flex:1;">
                            <input type="checkbox" name="edit_vaisselle" id="edit_vaisselle" value="1" style="width: auto; margin: 0;">
                            <label for="edit_vaisselle" style="cursor: pointer; margin: 0; color: #155724; font-weight: bold;">Vaisselle</label>
                        </div>
                        <div style="background: #e1ede0; padding: 10px; border-radius: 8px; flex:1;">
                            <input type="checkbox" name="edit_paiement_acquitte" id="edit_paiement_acquitte" value="1" style="width: auto; margin: 0;">
                            <label for="edit_paiement_acquitte" style="cursor: pointer; margin: 0; color: #155724; font-weight: bold;">Acquitté</label>
                        </div>
                    </div>
                    <button type="submit" class="btn-submit" style="margin-top: 10px;">Enregistrer les modifications</button>
                </form>
            </div>
        </div>

        <div id="cniZoomModal" class="img-zoom-modal" onclick="closeCniZoom()">
            <img id="zoomedCniImg" class="img-zoom-content">
        </div>

    <?php endif; ?>

    <script>
        const resas = <?= json_encode($js_resas) ?>;
        const isPrivilegie = <?= $est_privilegie ? 'true' : 'false' ?>;
        
        let currentDate = new Date();

        function renderCalendar() {
            const monthTitle = document.getElementById('cal-month-title');
            const daysContainer = document.getElementById('cal-days');
            if(!monthTitle || !daysContainer) return;

            daysContainer.innerHTML = '';
            
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth(); 
            
            const firstDay = new Date(year, month, 1).getDay(); 
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            
            const monthsNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
            monthTitle.innerText = monthsNames[month] + " " + year;

            let emptyDays = firstDay === 0 ? 6 : firstDay - 1;

            for (let i = 0; i < emptyDays; i++) {
                daysContainer.innerHTML += '<div class="cal-jour cal-vide"></div>';
            }

            for (let day = 1; day <= daysInMonth; day++) {
                let dateString = year + "-" + String(month + 1).padStart(2, '0') + "-" + String(day).padStart(2, '0');
                
                let currentDayStatus = 'free'; 
                for(let i=0; i<resas.length; i++) {
                    if (dateString >= resas[i].date_debut && dateString <= resas[i].date_fin) {
                        if (resas[i].statut === 'Validée') {
                            currentDayStatus = 'occupied';
                            break;
                        } else if (resas[i].statut === 'En attente') {
                            currentDayStatus = 'waiting';
                        }
                    }
                }

                let cellClass = 'cal-libre';
                if (currentDayStatus === 'occupied') cellClass = 'cal-occupe';
                else if (currentDayStatus === 'waiting') cellClass = 'cal-attente';

                let onClickEvent = '';
                if (currentDayStatus !== 'occupied') {
                    onClickEvent = `onclick="handleCellClick('${dateString}')"`;
                }

                daysContainer.innerHTML += `<div class="cal-jour ${cellClass}" ${onClickEvent}>${day}</div>`;
            }
        }

        function handleCellClick(dateString) {
            if (isPrivilegie) {
                openAddResaModal(dateString);
            } else {
                openPublicPreResaModal(dateString);
            }
        }

        function changeMonth(direction) {
            currentDate.setMonth(currentDate.getMonth() + direction);
            renderCalendar();
        }

        function toggleFormSalle() {
            var isChecked = document.getElementById('non_inscrit_salle').checked;
            document.getElementById('bloc_user_salle').style.display = isChecked ? 'none' : 'block';
            document.getElementById('form_manuel_salle').style.display = isChecked ? 'block' : 'none';
            
            document.getElementById('utilisateur_id_salle').required = !isChecked;
            document.getElementById('nom_salle').required = isChecked;
            document.getElementById('prenom_salle').required = isChecked;
        }
        
        // --- NOUVEAU : Auto-calcul du vendredi (avant) et lundi (après) ---
        function autoCalcEtatLieux(isEdit = false) {
            let prefix = isEdit ? 'edit_' : '';
            let debutInput = document.getElementById(prefix + 'date_debut_salle');
            let finInput = document.getElementById(prefix + 'date_fin_salle');
            let allerInput = document.getElementById(prefix + 'etat_lieux_aller');
            let retourInput = document.getElementById(prefix + 'etat_lieux_retour');

            if (debutInput && debutInput.value) {
                let d = new Date(debutInput.value);
                let day = d.getDay(); // 0 (Dim) à 6 (Sam)
                let diff = (day >= 5) ? (day - 5) : (day + 2); // Reculer jusqu'au Vendredi
                d.setDate(d.getDate() - diff);
                
                let y = d.getFullYear();
                let m = String(d.getMonth() + 1).padStart(2, '0');
                let dd = String(d.getDate()).padStart(2, '0');
                allerInput.value = `${y}-${m}-${dd}T14:30`;
            }

            if (finInput && finInput.value) {
                let f = new Date(finInput.value);
                let day = f.getDay();
                let diff = (day <= 1) ? (1 - day) : (8 - day); // Avancer jusqu'au Lundi
                f.setDate(f.getDate() + diff);
                
                let y = f.getFullYear();
                let m = String(f.getMonth() + 1).padStart(2, '0');
                let dd = String(f.getDate()).padStart(2, '0');
                retourInput.value = `${y}-${m}-${dd}T09:00`;
            }
        }

        function openAddResaModal(dateString) {
            document.getElementById('date_debut_salle').value = dateString;
            document.getElementById('date_fin_salle').value = dateString; 
            autoCalcEtatLieux(false); // Déclenche le calcul
            document.getElementById('addResaModal').style.display = 'flex';
        }

        function openPublicPreResaModal(dateString) {
            document.getElementById('pre_date_debut').value = dateString;
            document.getElementById('pre_date_fin').value = dateString;
            document.getElementById('pre_date_fin').min = dateString;
            document.getElementById('publicPreResaModal').style.display = 'flex';
        }

        let preDateDebut = document.getElementById('pre_date_debut');
        if (preDateDebut) {
            preDateDebut.addEventListener('change', function() {
                document.getElementById('pre_date_fin').min = this.value;
            });
        }

        function openEditResaModal(id, debut, fin, paiement, statut, pers, vaiss, aller, retour) {
            document.getElementById('edit_resa_id').value = id;
            document.getElementById('edit_date_debut_salle').value = debut;
            document.getElementById('edit_date_fin_salle').value = fin;
            document.getElementById('edit_paiement_acquitte').checked = (paiement == 1);
            document.getElementById('edit_statut_salle').value = statut;
            document.getElementById('edit_nb_personnes').value = pers;
            document.getElementById('edit_vaisselle').checked = (vaiss == 1);
            
            document.getElementById('edit_etat_lieux_aller').value = aller;
            document.getElementById('edit_etat_lieux_retour').value = retour;
            
            // Si l'ancienne donnée BDD ne correspond pas au format datetime-local, on force le recalcul
            if (!aller || !aller.includes('T')) { autoCalcEtatLieux(true); }
            
            document.getElementById('editResaModal').style.display = 'flex';
        }

        function zoomCni(src) {
            document.getElementById('zoomedCniImg').src = src;
            document.getElementById('cniZoomModal').style.display = 'flex';
        }

        function closeCniZoom() {
            document.getElementById('cniZoomModal').style.display = 'none';
        }
    </script>
<?php endif; ?>