<?php

use DB\DataBaseManager;
$manager = new DataBaseManager();

// Artistes
$artistDB = $manager->getArtistDB();
$pageSize = 8;
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$offset = ($page - 1) * $pageSize;
$liste_artistes = $artistDB->findAll($offset, $pageSize);
$nb_artistes = $artistDB->countAll();
$nbPagesArtistes = ceil($nb_artistes / $pageSize);

// Sons
$pageSize = 10;
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$offset = ($page - 1) * $pageSize;
$sonDB = $manager->getSonDB();
$liste_sons = $sonDB->findAll($offset, $pageSize);
$nb_sons = count($liste_sons);

// Genres
$genreDB = $manager->getGenreDB();
$liste_genres = $genreDB->findAll();
$nb_genres = count($liste_genres);

// Utilisateurs
$utilisateurDB = $manager->getUtilisateurDB();
$liste_utilisateurs = $utilisateurDB->findAll();
$nb_utilisateurs = count($liste_utilisateurs);


// Playlists
$playlistDB = $manager->getPlaylistDB();
$liste_playlists = $playlistDB->findAll();
$nb_playlists = count($liste_playlists);

// Albums
$albumDB = $manager->getAlbumDB();
$liste_albums = $albumDB->findAll();
$nb_albums = count($liste_albums);

?>

<aside>
    <div class="left">
        
        <a href="index.php?action=accueil" class="btn-retour">
            <svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.22816 1.73682L2.00009 7.96489M2.00009 7.96489L8.22816 14.193M2.00009 7.96489H24.4211" stroke="currentColor" stroke-width="2.49123" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Retour application
        </a>
        <nav>
            <ul>
                <li>
                    <a href="" id="goToMenuPrincipal">
                        <svg width="27" height="17" viewBox="0 0 27 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.83325 1.2085H25.1666M1.83325 8.50016H25.1666M1.83325 15.7918H25.1666" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Menu principal
                    </a>
                </li>
                <li>
                    <a href="" id="goToArtistes">
                        <svg width="30" height="23" viewBox="0 0 30 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.9866 21.7082H26.1667C27.7775 21.7082 29.1809 20.3606 28.6692 18.8332C27.8893 16.5055 25.9706 15.0979 22.5977 14.6103M18.146 9.84388C18.5703 9.97801 19.0564 10.0415 19.6042 10.0415C22.0347 10.0415 23.25 8.7915 23.25 5.6665C23.25 2.5415 22.0347 1.2915 19.6042 1.2915C19.0564 1.2915 18.5703 1.355 18.146 1.48913M10.8542 14.4165C16.6277 14.4165 19.4474 16.1838 20.1527 19.7183C20.3689 20.8015 19.4379 21.7082 18.3333 21.7082H3.375C2.27043 21.7082 1.33943 20.8015 1.5556 19.7183C2.26098 16.1838 5.08064 14.4165 10.8542 14.4165ZM10.8542 10.0415C13.2847 10.0415 14.5 8.7915 14.5 5.6665C14.5 2.5415 13.2847 1.2915 10.8542 1.2915C8.42361 1.2915 7.20833 2.5415 7.20833 5.6665C7.20833 8.7915 8.42361 10.0415 10.8542 10.0415Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Artistes
                    </a>
                </li>
                <li>
                    <a href="" id="goToSons">
                        <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.75 14.5C5.75 11.2613 7.50962 8.43351 10.125 6.92059M23.25 14.2123C23.25 17.451 21.4904 20.2788 18.875 21.7917M27.625 14.5C27.625 21.7487 21.7487 27.625 14.5 27.625C7.25126 27.625 1.375 21.7487 1.375 14.5C1.375 7.25126 7.25126 1.375 14.5 1.375C21.7487 1.375 27.625 7.25126 27.625 14.5ZM17.4167 14.5C17.4167 16.1108 16.1108 17.4167 14.5 17.4167C12.8892 17.4167 11.5833 16.1108 11.5833 14.5C11.5833 12.8892 12.8892 11.5833 14.5 11.5833C16.1108 11.5833 17.4167 12.8892 17.4167 14.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Sons
                    </a>
                </li>
                <li>
                    <a href="" id="goToGenres">
                        <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.29175 7.04183H15.8751M1.29175 1.2085H15.8751M1.29175 12.8752H10.0417M15.8751 12.8752V18.7085L21.7084 15.7918L15.8751 12.8752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Genres
                    </a>
                </li>
                <li>
                    <a href="" id="goToUtilisateurs">
                        <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Utilisateurs
                    </a>
                </li>
                <li>
                    <a href="" id="goToPlaylists">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 3C1 1.89543 1.89543 1 3 1H4C5.10457 1 6 1.89543 6 3V4C6 5.10457 5.10457 6 4 6H3C1.89543 6 1 5.10457 1 4V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 3C10 1.89543 10.8954 1 12 1H13C14.1046 1 15 1.89543 15 3V4C15 5.10457 14.1046 6 13 6H12C10.8954 6 10 5.10457 10 4V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1 12C1 10.8954 1.89543 10 3 10H4C5.10457 10 6 10.8954 6 12V13C6 14.1046 5.10457 15 4 15H3C1.89543 15 1 14.1046 1 13V12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 12C10 10.8954 10.8954 10 12 10H13C14.1046 10 15 10.8954 15 12V13C15 14.1046 14.1046 15 13 15H12C10.8954 15 10 14.1046 10 13V12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Playlists
                    </a>
                </li>
                <li>
                    <a href="" id="goToAlbums">
                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.8125 21.8333C8.8125 24.1345 7.06361 26 4.90625 26C2.74889 26 1 24.1345 1 21.8333C1 19.5321 2.74889 17.6667 4.90625 17.6667C7.06361 17.6667 8.8125 19.5321 8.8125 21.8333ZM8.8125 21.8333V3.57439C8.8125 3.05949 9.20349 2.62875 9.71598 2.57906L24.9035 1.10633C25.4912 1.04934 26 1.51124 26 2.10166V20.1667M26 20.1667C26 22.4679 24.2511 24.3333 22.0938 24.3333C19.9364 24.3333 18.1875 22.4679 18.1875 20.1667C18.1875 17.8655 19.9364 16 22.0938 16C24.2511 16 26 17.8655 26 20.1667Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Albums
                    </a>
                </li>
            </ul>
            <div class="active-square" id="activeSquare"></div>
        </nav>

        <div class="actions">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 6V14M14 10H6M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="#E2FF08" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
</aside>

<div class="right">

    <div class="container-tabs">
        <div class="recherche">
                    <div class="text-field">
                        <img src="/Assets/icons/search.svg" alt="user"/>
                        <input type="text" placeholder="Ma recherche" value="">
                    </div>
            </div>
        <main>
            <section id="pagePrincipale" class="page">
                <header>
                    <h2>Menu principal</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <div class="menu">
                    <button id="btnMenuArtistes" class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 30 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.9866 21.7082H26.1667C27.7775 21.7082 29.1809 20.3606 28.6692 18.8332C27.8893 16.5055 25.9706 15.0979 22.5977 14.6103M18.146 9.84388C18.5703 9.97801 19.0564 10.0415 19.6042 10.0415C22.0347 10.0415 23.25 8.7915 23.25 5.6665C23.25 2.5415 22.0347 1.2915 19.6042 1.2915C19.0564 1.2915 18.5703 1.355 18.146 1.48913M10.8542 14.4165C16.6277 14.4165 19.4474 16.1838 20.1527 19.7183C20.3689 20.8015 19.4379 21.7082 18.3333 21.7082H3.375C2.27043 21.7082 1.33943 20.8015 1.5556 19.7183C2.26098 16.1838 5.08064 14.4165 10.8542 14.4165ZM10.8542 10.0415C13.2847 10.0415 14.5 8.7915 14.5 5.6665C14.5 2.5415 13.2847 1.2915 10.8542 1.2915C8.42361 1.2915 7.20833 2.5415 7.20833 5.6665C7.20833 8.7915 8.42361 10.0415 10.8542 10.0415Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Artistes</h3>
                            <p>Les artistes de l'application</p>
                        </div>
                    </button>
                    <button id="btnMenuSons" class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.75 14.5C5.75 11.2613 7.50962 8.43351 10.125 6.92059M23.25 14.2123C23.25 17.451 21.4904 20.2788 18.875 21.7917M27.625 14.5C27.625 21.7487 21.7487 27.625 14.5 27.625C7.25126 27.625 1.375 21.7487 1.375 14.5C1.375 7.25126 7.25126 1.375 14.5 1.375C21.7487 1.375 27.625 7.25126 27.625 14.5ZM17.4167 14.5C17.4167 16.1108 16.1108 17.4167 14.5 17.4167C12.8892 17.4167 11.5833 16.1108 11.5833 14.5C11.5833 12.8892 12.8892 11.5833 14.5 11.5833C16.1108 11.5833 17.4167 12.8892 17.4167 14.5Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Sons</h3>
                            <p>Les sons de l'application</p>
                        </div>
                    </button>
                    <button id="btnMenuGenres" class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.29175 7.04183H15.8751M1.29175 1.2085H15.8751M1.29175 12.8752H10.0417M15.8751 12.8752V18.7085L21.7084 15.7918L15.8751 12.8752Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Genres</h3>
                            <p>Les genres de l'application</p>
                        </div>
                    </button>
                    <button id="btnMenuUtilisateurs" class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="#FEFCE1" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="#FEFCE1" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Utilisateurs</h3>
                            <p>Les utilisateurs de l'application</p>
                        </div>
                    </button>
                    <button id="btnMenuPlaylists" class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 3C1 1.89543 1.89543 1 3 1H4C5.10457 1 6 1.89543 6 3V4C6 5.10457 5.10457 6 4 6H3C1.89543 6 1 5.10457 1 4V3Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 3C10 1.89543 10.8954 1 12 1H13C14.1046 1 15 1.89543 15 3V4C15 5.10457 14.1046 6 13 6H12C10.8954 6 10 5.10457 10 4V3Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1 12C1 10.8954 1.89543 10 3 10H4C5.10457 10 6 10.8954 6 12V13C6 14.1046 5.10457 15 4 15H3C1.89543 15 1 14.1046 1 13V12Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 12C10 10.8954 10.8954 10 12 10H13C14.1046 10 15 10.8954 15 12V13C15 14.1046 14.1046 15 13 15H12C10.8954 15 10 14.1046 10 13V12Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Playlists</h3>
                            <p>Les playlists de l'application</p>
                        </div>
                    </button>
                    <button id="btnMenuAlbums" class="admin-content">
                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Albums</h3>
                            <p>Les albums de l'application</p>
                        </div>
                    </button>
                </div>
            </section>

            <section id="pageArtistes" class="page">
                <header>
                    <h2>Artistes</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tableArtistes">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Nom</td>
                            <td>Image</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php for ($i = 0; $i < $pageSize; $i++) : ?>
                            <?php if (isset($liste_artistes[$i])) : ?>
                                <tr>
                                    <td><?php echo $liste_artistes[$i]->getId(); ?></td>
                                    <td><?php echo $liste_artistes[$i]->getName(); ?></td>
                                    <td><img src="" alt="<?php echo $liste_artistes[$i]->getName(); ?>"></td>
                                    <td>
                                        <button class="btn-consulterArtiste" id="btn-consulterArtiste"
                                        data-idArtiste="<?php echo $liste_artistes[$i]->getId(); ?>"
                                        data-nomArtiste="<?php echo $liste_artistes[$i]->getName(); ?>"
                                        data-imageArtiste=""
                                        >Consulter</button>
                                        <button class="btn-supprimerArtiste" id="btn-supprimerArtiste" data-idArtiste="<?php echo $liste_artistes[$i]->getId(); ?>">Supprimer</button>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </tbody>
                </table>
                <div class="pagination">
                    <button id="btnPagePrecArtistes" class="btnPage"><span><</span></button>
                    <p id="pageArtistes" class="txt-nb-pages">test</p>
                    <button id="btnPageSuivArtistes" class="btnPage"><span>></span></button>
                </div>
                <button class="btn-ajouter" id="btn-ajouterArtiste" >Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterArtiste" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=ajouter_artiste" enctype="multipart/form-data" method="post">
                            <input type="text" name="nom_nv_artiste" placeholder="Nom de l'artiste" required>
                            <input type="file" name="image_nv_artiste" accept="image/*">
                            <button type="submit" id="ajouterArtiste">Ajouter</button>
                        </form>
                    </div>
                </div>

                <div id="modal-supprimerArtiste" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=supprimer_artiste" method="post">
                            <input type="hidden" name="id_artiste" id="id_artiste_supprimer">
                            <p>Êtes-vous sûr de vouloir supprimer cet artiste ?</p>
                            <button id="supprimerArtiste" type="submit">Supprimer</button>
                        </form>
                    </div>
                </div>

                <div id="modal-consulterArtiste" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=modifier_artiste" method="POST">
                            <input type="hidden" name="id_artiste" id="id_modif_artiste">
                            <input type="text" name="nom_artiste" id="nom_modif_artiste" placeholder="Nom de l'artiste" required>
                            <input type="file" name="image_artiste" id="image_modif_artiste" accept="image/*">
                            <button type="submit" id="modifierArtiste">Modifier</button>
                        </form>
                    </div>
                </div>

            </section>
            <section id="pageSons" class="page">
                <header>
                    <h2>Sons</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tableSons">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Titre</td>
                            <td>Duree</td>
                            <td>MP3</td>
                            <td>Album</td>
                            <td>NbStream</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                <button class="btn-ajouterSons">Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterSon" class="modal">

                </div>

                <div id="modal-supprimerSon" class="modal">

                </div>

                <div id="modal-modifierSon" class="modal">
                    
                </div>
            </section>
            <section id="pageGenres" class="page">
                <header>
                    <h2>Genres</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tableGenres">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Titre</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($liste_genres as $genre) : ?>
                            <tr>
                                <td><?= $genre->getId() ?></td>
                                <td><?= $genre->getTitre() ?></td>
                                <td>
                                    <button class="btn-consulterGenre" id="btn-consulterGenre"
                                    data-idGenre="<?= $genre->getId() ?>" 
                                    data-titreGenre="<?= $genre->getTitre() ?>">Consulter</button>
                                    <button class="btn-supprimerGenre" id="btn-supprimerGenre" data-idGenre="<?= $genre->getId() ?>">Supprimer</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <button class="btn-ajouter" id="btn-ajouterGenre">Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterGenre" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=ajouter_genre" method="post">
                            <input type="text" name="nom_nv_genre" placeholder="Nom du genre" required>
                            <button type="submit" id="ajouterGenre">Ajouter</button>
                        </form>
                    </div>
                </div>

                <div id="modal-supprimerGenre" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=supprimer_genre" method="post">
                            <input type="hidden" name="id_genre" id="id_genre_supprimer">
                            <p>Êtes-vous sûr de vouloir supprimer ce genre ?</p>
                            <button id="supprimerGenre" type="submit">Supprimer</button>
                        </form>
                    </div>
                </div>

                <div id="modal-consulterGenre" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=modifier_genre" method="post">
                            <input type="hidden" name="id_genre" id="id_modif_genre">
                            <input type="text" name="titre_genre" id="titre_modif_genre" placeholder="Nom du genre" required>
                            <button type="submit" id="modifierGenre">Modifier</button>
                        </form>
                    </div>
                </div>
            </section>
            <section id="pageUtilisateurs" class="page">
                <header>
                    <h2>Utilisateurs</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tableUtilisateurs">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Nom</td>
                            <td>Prenom</td>
                            <td>Pseudo</td>
                            <td>Email</td>
                            <td>Mot de passe</td>
                            <td>Statut</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($liste_utilisateurs as $utilisateur) : ?>
                            <tr>
                                <td><?= $utilisateur->getId() ?></td>
                                <td><?= $utilisateur->getNom() ?></td>
                                <td><?= $utilisateur->getPrenom() ?></td>
                                <td><?= $utilisateur->getPseudo() ?></td>
                                <td><?= $utilisateur->getEmail() ?></td>
                                <td><?= $utilisateur->getMdp() ?></td>
                                <td><?= $utilisateur->getStatut() ?></td>
                                <td>
                                    <button class="btn-consulterUtilisateur" id="btn-consulterUtilisateur"
                                    data-idUtilisateur="<?= $utilisateur->getId() ?>"
                                    data-nomUtilisateur="<?= $utilisateur->getNom() ?>"
                                    data-prenomUtilisateur="<?= $utilisateur->getPrenom() ?>"
                                    data-pseudoUtilisateur="<?= $utilisateur->getPseudo() ?>"
                                    data-emailUtilisateur="<?= $utilisateur->getEmail() ?>"
                                    data-mdpUtilisateur="<?= $utilisateur->getMdp() ?>"
                                    data-statutUtilisateur="<?= $utilisateur->getStatut() ?>"
                                    >Consulter</button>
                                    <button class="btn-supprimerUtilisateur" id="btn-supprimerUtilisateur" data-idUtilisateur="<?= $utilisateur->getId() ?>">Supprimer</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <button class="btn-ajouter" id="btn-ajouterUtilisateur">Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterUtilisateur" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form id="form-ajouterUtilisateur" action="index.php?action=ajouter_utilisateur" method="post">
                            <input type="text" name="nom_utilisateur" placeholder="Nom de l'utilisateur" required>
                            <input type="text" name="prenom_utilisateur" placeholder="Prenom de l'utilisateur" required>
                            <input type="text" name="pseudo_utilisateur" placeholder="Pseudo de l'utilisateur" required>
                            <input type="email" name="email_utilisateur" placeholder="Email de l'utilisateur" required>
                            <input type="text" name="mdp_utilisateur" placeholder="Mot de passe de l'utilisateur" required>
                            <select name="statut_utilisateur" id="statut_utilisateur">
                                <option value="Admin">Admin</option>
                                <option value="User">User</option>
                            </select>
                            <button type="submit" id="ajouterUtilisateur">Ajouter</button>
                        </form>
                    </div>
                </div>

                <div id="modal-supprimerUtilisateur" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=supprimer_utilisateur" method="post">
                            <input type="hidden" name="id_utilisateur" id="id_utilisateur_supprimer">
                            <p>Êtes-vous sûr de vouloir supprimer cet utilisateur ?</p>
                            <button id="supprimerUtilisateur" type="submit">Supprimer</button>
                        </form>
                    </div>
                </div>

                <div id="modal-consulterUtilisateur" class="modal">
                    <div class="modal-content">
                        <span class="close-button">x</span>
                        <form action="index.php?action=modifier_utilisateur" method="post">
                            <input type="hidden" name="id_utilisateur" id="id_modif_utilisateur">
                            <input type="text" name="nom_utilisateur" id="nom_modif_utilisateur" placeholder="Nom de l'utilisateur" required>
                            <input type="text" name="prenom_utilisateur" id="prenom_modif_utilisateur" placeholder="Prenom de l'utilisateur" required>
                            <input type="text" name="pseudo_utilisateur" id="pseudo_modif_utilisateur" placeholder="Pseudo de l'utilisateur" required>
                            <input type="email" name="email_utilisateur" id="email_modif_utilisateur" placeholder="Email de l'utilisateur" required>
                            <input type="password" name="mdp_utilisateur" id="mdp_modif_utilisateur" placeholder="Mot de passe de l'utilisateur" required>
                            <select name="statut_utilisateur" id="statut_modif_utilisateur">
                                <option value="Admin">Admin</option>
                                <option value="User">User</option>
                            </select>
                            <button type="submit" id="modifierUtilisateur">Modifier</button>
                        </form>
                    </div>
                </div>
            </section>
            <section id="pagePlaylists" class="page">
                <header>
                    <h2>Playlists</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tablePlaylists">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Nom</td>
                            <td>Utilisateur</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($liste_playlists as $playlist) : ?>
                            <tr>
                                <td><?= $playlist->getId() ?></td>
                                <td><?= $playlist->getNom() ?></td>
                                <td>
                                    <button class="consultation">
                                        Consulter
                                    </button>
                                </td>
                                <td>
                                    <button class="btn-consulterPlaylist" id="btn-consulterPlaylist"
                                    data-idPlaylist="<?= $playlist->getId() ?>"
                                    data-nomPlaylist="<?= $playlist->getNom() ?>"
                                    data-idUtilisateur="<?= $playlist->getIdUtilisateur() ?>"
                                    >Consulter</button>
                                    <button class="btn-supprimerPlaylist" id="btn-supprimerPlaylist" data-idPlaylist="<?= $playlist->getId() ?>">Supprimer</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <button class="btn-ajouter" id="btn-ajouterPlaylist">Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterPlaylist" class="modal">

                </div>

                <div id="modal-supprimerPlaylist" class="modal">

                </div>

                <div id="modal-modifierPlaylist" class="modal">
                    
                </div>
            </section>
                

            <section id="pageAlbums" class="page">
                <header>
                    <h2>Albums</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <table id="tableAlbums">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Titre</td>
                            <td>Description</td>
                            <td>Date</td>
                            <td>Cover</td>
                            <td>Artiste</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($liste_albums as $album) : ?>
                            <tr>
                                <td><?= $album->getId() ?></td>
                                <td><?= $album->getTitre() ?></td>
                                <td>
                                    <button class="consultation">
                                        Consulter
                                    </button>
                                </td>
                                <td><?= $album->getDate() ?></td>
                                <td> </td>
                                <td>
                                    <button class="consultation">
                                        Consulter
                                    </button>
                                </td>
                                <td>
                                    <button class="btn-consulterAlbum">consulter</button>
                                    <button class="btn-supprimerAlbum">Supprimer</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <button class="btn-ajouterAlbum">Ajouter</button>

                <!-- Modales -->
                <div id="modal-ajouterAlbum" class="modal">

                </div>

                <div id="modal-supprimerAlbum" class="modal">

                </div>

                <div id="modal-modifierAlbum" class="modal">
                    
                </div>
            </section>
        </main>
    </div>
</div>
const activeSquare = document.querySelector("#activeSquare");
const goToMenuPrincipal = document.querySelector("#goToMenuPrincipal");
const goToArtistes = document.querySelector("#goToArtistes");
const goToSons = document.querySelector("#goToSons");
const goToGenres = document.querySelector("#goToGenres");
const goToUtilisateurs = document.querySelector("#goToUtilisateurs");
const goToPlaylists = document.querySelector("#goToPlaylists");
const goToAlbums = document.querySelector("#goToAlbums");

const sectionMenuPrincipal = document.querySelector("#pagePrincipale");
const sectionMenuArtistes = document.querySelector("#pageArtistes");
const sectionMenuSons = document.querySelector("#pageSons");
const sectionMenuGenres = document.querySelector("#pageGenres");
const sectionMenuUtilisateurs = document.querySelector("#pageUtilisateurs");
const sectionMenuPlaylists = document.querySelector("#pagePlaylists");
const sectionMenuAlbums = document.querySelector("#pageAlbums");

const btnMenuArtistes = document.querySelector("#btnMenuArtistes");
const btnMenuSons = document.querySelector("#btnMenuSons");
const btnMenuGenres = document.querySelector("#btnMenuGenres");
const btnMenuUtilisateurs = document.querySelector("#btnMenuUtilisateurs");
const btnMenuPlaylists = document.querySelector("#btnMenuPlaylists");
const btnMenuAlbums = document.querySelector("#btnMenuAlbums");

const sections = [
    document.querySelector("#pagePrincipale"),
    document.querySelector("#pageArtistes"),
    document.querySelector("#pageSons"),
    document.querySelector("#pageGenres"),
    document.querySelector("#pageUtilisateurs"),
    document.querySelector("#pagePlaylists"),
    document.querySelector("#pageAlbums")
];

const menuItems = [goToMenuPrincipal, goToArtistes, goToSons, goToGenres, goToUtilisateurs, goToPlaylists, goToAlbums];


function changeCurrentMenu(e, index) {
    e?.preventDefault();

    const curIndex = sections.findIndex(section => section.classList.contains('active-section'));

    const menuItemHeight = 3.5;
    const menuItemMargin = 0.85;
    const startPosition = 1;
    const position = startPosition + index * (menuItemHeight + menuItemMargin);

    gsap.to(activeSquare, { top: `${position}rem`, duration: 0.6, ease: "power4.out" });

    menuItems.forEach((menuItem, i) => {
        gsap.to(menuItem, { color: i === index ? "#0E100F" : "#FEFCE1", duration: 0.6, ease: "power4.out" });
    });

    sections.forEach((section, i) => {
        gsap.to(section, { opacity: i === index ? 1 : 0, y: i === index ? 0 : (i < index ? "100vw" : "-100vw"), duration: 0.6, zIndex: i === index ? 1 : -1, ease: "power4.out" });
        section.classList.toggle('active-section', i === index);
    });

    localStorage.setItem('currentSectionIndex', index.toString());
}

function loadActiveSection() {
    const sectionIndex = localStorage.getItem('currentSectionIndex');
    changeCurrentMenu(null, sectionIndex ? parseInt(sectionIndex) : 0);
}

window.addEventListener('DOMContentLoaded', loadActiveSection);

menuItems.forEach((menuItem, index) => {
    menuItem.addEventListener('click', (e) => changeCurrentMenu(e, index));
});

goToMenuPrincipal.addEventListener('click', (e) => changeCurrentMenu(e,0));
goToArtistes.addEventListener('click', (e) => changeCurrentMenu(e,1));
goToSons.addEventListener('click', (e) => changeCurrentMenu(e,2));
goToGenres.addEventListener('click', (e) => changeCurrentMenu(e,3));
goToUtilisateurs.addEventListener('click', (e) => changeCurrentMenu(e,4));
goToPlaylists.addEventListener('click', (e) => changeCurrentMenu(e,5));
goToAlbums.addEventListener('click', (e) => changeCurrentMenu(e,6));

function clearActiveSections() {
    if (sectionMenuPrincipal.classList != null)
        sectionMenuPrincipal.classList.remove("active-section");
    if (sectionMenuSons.classList != null)
        sectionMenuSons.classList.remove("active-section");
    if (sectionMenuGenres.classList != null)
        sectionMenuGenres.classList.remove("active-section");
    if (sectionMenuUtilisateurs.classList != null)
        sectionMenuUtilisateurs.classList.remove("active-section");
    if (sectionMenuPlaylists.classList != null)
        sectionMenuPlaylists.classList.remove("active-section");
    if (sectionMenuAlbums.classList != null)
        sectionMenuAlbums.classList.remove("active-section");
}

function showPageArtistes() {
    sectionMenuArtistes.style.display ="flex";
    
    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuSons.style.display = "none";
        sectionMenuGenres.style.display = "none";
        sectionMenuUtilisateurs.style.display = "none";
        sectionMenuPlaylists.style.display = "none";
        sectionMenuAlbums.style.display = "none";
    }, 500);

}

function showPageSons() {
    sectionMenuSons.style.display ="flex";

    gsap.fromTo(sectionMenuSons, {opacity: 0, scale: 0.9}, {opacity:1, scale:1, duration:0.6, delay:0.4,ease:"power4.out"});
    gsap.to(sectionMenuArtistes, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuGenres, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuUtilisateurs, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuPlaylists, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuAlbums, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});

    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuArtistes.style.display = "none";
        sectionMenuGenres.style.display = "none";
        sectionMenuUtilisateurs.style.display = "none";
        sectionMenuPlaylists.style.display = "none";
        sectionMenuAlbums.style.display = "none";
    }, 500);
}

function showPageGenres() {
    sectionMenuGenres.style.display ="flex";

    gsap.fromTo(sectionMenuGenres, {opacity: 0, scale: 0.9}, {opacity:1, scale:1, duration:0.6, delay:0.4,ease:"power4.out"});
    gsap.to(sectionMenuArtistes, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuSons, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuUtilisateurs, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuPlaylists, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuAlbums, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});

    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuArtistes.style.display = "none";
        sectionMenuSons.style.display = "none";
        sectionMenuUtilisateurs.style.display = "none";
        sectionMenuPlaylists.style.display = "none";
        sectionMenuAlbums.style.display = "none";
    }, 500);
}

function showPageUtilisateurs() {
    sectionMenuUtilisateurs.style.display ="flex";

    gsap.fromTo(sectionMenuUtilisateurs, {opacity: 0, scale: 0.9}, {opacity:1, scale:1, duration:0.6, delay:0.4,ease:"power4.out"});
    gsap.to(sectionMenuArtistes, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuSons, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuGenres, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuPlaylists, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuAlbums, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});

    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuArtistes.style.display = "none";
        sectionMenuSons.style.display = "none";
        sectionMenuGenres.style.display = "none";
        sectionMenuPlaylists.style.display = "none";
        sectionMenuAlbums.style.display = "none";
    }, 500);
}

function showPagePlaylists() {
    sectionMenuPlaylists.style.display ="flex";

    gsap.fromTo(sectionMenuPlaylists, {opacity: 0, scale: 0.9}, {opacity:1, scale:1, duration:0.6, delay:0.4,ease:"power4.out"});
    gsap.to(sectionMenuArtistes, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuSons, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuGenres, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuUtilisateurs, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuAlbums, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});

    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuArtistes.style.display = "none";
        sectionMenuSons.style.display = "none";
        sectionMenuGenres.style.display = "none";
        sectionMenuUtilisateurs.style.display = "none";
        sectionMenuAlbums.style.display = "none";
    }, 500);
}

function showPageAlbums() {
    sectionMenuAlbums.style.display ="flex";

    gsap.fromTo(sectionMenuAlbums, {opacity: 0, scale: 0.9}, {opacity:1, scale:1, duration:0.6, delay:0.4,ease:"power4.out"});
    gsap.to(sectionMenuArtistes, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuSons, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuGenres, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuUtilisateurs, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});
    gsap.to(sectionMenuPlaylists, {opacity:0, scale:0.9, duration:0.6, ease:"power4.out"});

    setTimeout(() => {
        sectionMenuPrincipal.style.display = "none";
        sectionMenuArtistes.style.display = "none";
        sectionMenuSons.style.display = "none";
        sectionMenuGenres.style.display = "none";
        sectionMenuUtilisateurs.style.display = "none";
        sectionMenuPlaylists.style.display = "none";
    }, 500);
}



btnMenuArtistes.addEventListener('click', showPageArtistes);
btnMenuSons.addEventListener('click', showPageSons);
btnMenuGenres.addEventListener('click', showPageGenres);
btnMenuUtilisateurs.addEventListener('click', showPageUtilisateurs);
btnMenuPlaylists.addEventListener('click', showPagePlaylists);
btnMenuAlbums.addEventListener('click', showPageAlbums);

// Partie pour les modales

let btnClose = document.querySelectorAll(".close-button");

btnClose.forEach(function(btn) {
    btn.onclick = function() {
        btn.closest(".modal").style.display = "none";
    };
});

window.onclick = function(event) {
    if (event.target.classList.contains("modal")) {
        event.target.style.display = "none";
    }
};

// Artistes

let modalAjouterArtiste = document.querySelector("#modal-ajouterArtiste");
let modalConsulterArtiste = document.querySelector("#modal-consulterArtiste");
let modalSupprimerArtiste = document.querySelector("#modal-supprimerArtiste");

document.querySelector("#btn-ajouterArtiste").onclick = function() {
    modalAjouterArtiste.style.display = "block";
}

document.querySelectorAll(".btn-supprimerArtiste").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_artiste_supprimer").value = btn.getAttribute("data-idArtiste");
        modalSupprimerArtiste.style.display = "block";
    };
});

document.querySelectorAll(".btn-consulterArtiste").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_modif_artiste").value = btn.getAttribute("data-idArtiste");
        document.querySelector("#nom_modif_artiste").value = btn.getAttribute("data-nomArtiste");
        modalConsulterArtiste.style.display = "block";
    };
});

// Genres

let modalAjouterGenre = document.querySelector("#modal-ajouterGenre");
let modalConsulterGenre = document.querySelector("#modal-consulterGenre");
let modalSupprimerGenre = document.querySelector("#modal-supprimerGenre");

document.querySelector("#btn-ajouterGenre").onclick = function() {
    modalAjouterGenre.style.display = "block";
}

document.querySelectorAll(".btn-supprimerGenre").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_genre_supprimer").value = btn.getAttribute("data-idGenre");
        modalSupprimerGenre.style.display = "block";
    };
});

document.querySelectorAll(".btn-consulterGenre").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_modif_genre").value = btn.getAttribute("data-idGenre");
        document.querySelector("#titre_modif_genre").value = btn.getAttribute("data-titreGenre");
        modalConsulterGenre.style.display = "block";
    };
});

// Utilisateurs

let modalAjouterUtilisateur = document.querySelector("#modal-ajouterUtilisateur");
let modalConsulterUtilisateur = document.querySelector("#modal-consulterUtilisateur");
let modalSupprimerUtilisateur = document.querySelector("#modal-supprimerUtilisateur");

document.querySelector("#btn-ajouterUtilisateur").onclick = function() {
    modalAjouterUtilisateur.style.display = "block";
}

document.querySelectorAll(".btn-supprimerUtilisateur").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_utilisateur_supprimer").value = btn.getAttribute("data-idUtilisateur");
        modalSupprimerUtilisateur.style.display = "block";
    };
});

document.querySelectorAll(".btn-consulterUtilisateur").forEach(function(btn) {
    btn.onclick = function() {
        document.querySelector("#id_modif_utilisateur").value = btn.getAttribute("data-idUtilisateur");
        document.querySelector("#nom_modif_utilisateur").value = btn.getAttribute("data-nomUtilisateur");
        document.querySelector("#prenom_modif_utilisateur").value = btn.getAttribute("data-prenomUtilisateur");
        document.querySelector("#pseudo_modif_utilisateur").value = btn.getAttribute("data-pseudoUtilisateur");
        document.querySelector("#email_modif_utilisateur").value = btn.getAttribute("data-emailUtilisateur");
        document.querySelector("#mdp_modif_utilisateur").value = btn.getAttribute("data-mdpUtilisateur");
        document.querySelector("#statut_modif_utilisateur").value = btn.getAttribute("data-statutUtilisateur");
        modalConsulterUtilisateur.style.display = "block";
    };
});


var currentPage = 1;
var itemsPerPage = 8;

function loadPage(page) {
    $.ajax({
        url: 'admin.php', // Assurez-vous que c'est l'URL correcte pour votre script PHP
        type: 'GET',
        data: {
            page: page,
            itemsPerPage: itemsPerPage
        },
        success: function(data) {
            // Supprimez les anciennes lignes du tableau
            $('#tableArtistes tbody').empty();

            // Ajoutez les nouvelles lignes au tableau
            for (var i =  0; i < data.length; i++) {
                var row = '<tr>';
                row += '<td>' + data[i].id + '</td>';
                row += '<td>' + data[i].nom + '</td>';
                row += '<td><img src="' + data[i].image + '" alt="' + data[i].nom + '"></td>';
                // Ajoutez les colonnes supplémentaires si nécessaire
                row += '</tr>';
                $('#tableArtistes tbody').append(row);
            }

            // Animation GSAP pour les nouvelles lignes
            gsap.from('.new-rows', { opacity:  0, y:  20, stagger:  0.2 });
        }
    });
}

function showActiveSectionContent(index) {
    const sections = [sectionMenuPrincipal, sectionMenuArtistes, sectionMenuSons, sectionMenuGenres, sectionMenuUtilisateurs, sectionMenuPlaylists, sectionMenuAlbums];
    sections.forEach(section => section.style.display = 'none');
    sections[index].style.display = 'flex';

    // Si la section des artistes devient active, chargez la première page
    if (index === 1) {
        loadPage(currentPage);
    }
}

let btnPrecedentArtistes = document.querySelector("#btnPagePrecArtistes");
let btnSuivantArtistes = document.querySelector("#btnPageSuivArtistes");

btnPrecedentArtistes.addEventListener('click', function() {
    if (currentPage > 1) {
        currentPage--;
        loadPage(currentPage);
    }
});

btnSuivantArtistes.addEventListener('click', function() {
    currentPage++;
    loadPage(currentPage);
});

voici du php, html et js pour la partie admin d'une application. j'essaie de faire de la pagination (en laissant tout sur la même route) pour les artistes en les affichant dans un tableau 8 par 8 (les boutons servant à naviguer entre les différents tableaux) mais les boutons ne fonctionnent pas. ils devraient  remplacer le tableau du milieu pour le changer par le listing suivant ou précédent. pourquoi ?