<!DOCTYPE html>   
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modifier / Supprimer Formule</title>
    <style>
        /* Styles CSS ici */
        ul {
            align-items: center;
            list-style-type: none;
            padding: 0;
            text-align: center; 
        }
        li {
            text-align: center; 
            color: white; 
            font-size: 20px; 
            margin-bottom: 10px;
            align-items: center;
        }
        h1{ color: white; text-align: center;}

        .btn {
            text-align: center; 
            align-items: center;
            background-color: white; 
            color: black;
            padding: 8px 16px;
            text-align: center;
            display: inline-block;
            font-size: 15px;
            margin-left: 10px;
            cursor: pointer; /* Ajout d'un curseur pointer pour indiquer que le bouton est cliquable */
        }

        .modifier, .annuler, .enregistrer {
            background-color: white;
            color: black;
            padding: 8px 16px;
            text-align: center;
            display: inline-block;
            font-size: 15px;
            margin-left: 10px;
            cursor: pointer; /* Ajout d'un curseur pointer pour indiquer que le bouton est cliquable */
        }

        .editable {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Modifier / Supprimer Formule</h1>
    <ul>
        <?php foreach ($formules as $formule): ?>
            <li>
                <span class="libelle"><?= $formule['libelle'] ?></span>
                <span class="tarif"><?= $formule['tarif'] ?> €</span><br>
                <button class="modifier">Modifier</button>
                <button class="annuler" style="display:none;">Annuler</button>
                <form action="index.php?uc=gestion&action=modifierformule" method="post" class="editable">
                    <input type="hidden" name="idFormule" value="<?= $formule['idFormule'] ?>">
                    <input type="text" name="nouveauLibelle" style= "color: black;"  value="<?= $formule['libelle'] ?>">
                    <input type="number" name="nouveauTarif" style= "color: black;" value="<?= $formule['tarif'] ?>">
                    <button type="submit" class="enregistrer">Enregistrer</button>
                </form>
                <a href="index.php?uc=gestion&action=formulesupprimer&idFormule=<?= $formule['idFormule'] ?>" class="btn">Supprimer</a>
            </li>
        <?php endforeach; ?>
    </ul>

    <script>
        document.querySelectorAll('.modifier').forEach((btn) => {
            btn.addEventListener('click', () => {
                const parent = btn.parentElement;
                const libelle = parent.querySelector('.libelle');
                const tarif = parent.querySelector('.tarif');
                const editable = parent.querySelector('.editable');
                const annulerBtn = parent.querySelector('.annuler');

                libelle.style.display = 'none';
                tarif.style.display = 'none';
                editable.style.display = 'inline-block';
                btn.style.display = 'none';
                annulerBtn.style.display = 'inline-block';
            });
        });

        document.querySelectorAll('.annuler').forEach((btn) => {
            btn.addEventListener('click', () => {
                const parent = btn.parentElement;
                const libelle = parent.querySelector('.libelle');
                const tarif = parent.querySelector('.tarif');
                const editable = parent.querySelector('.editable');
                const modifierBtn = parent.querySelector('.modifier');

                libelle.style.display = 'inline-block';
                tarif.style.display = 'inline-block';
                editable.style.display = 'none';
                modifierBtn.style.display = 'inline-block';
                btn.style.display = 'none';
            });
        });
    </script>

</body>
</html>



            

