<?php
require '../config/mysql_connection.php';

session_start();

//Moderation Bewerbung senden
if(isset($_POST['applymoderation'])) {
    $realname = $_POST['realname'];
    $mcname = $_POST['mcname'];
    $email = $_POST['email'];
    $discord = $_POST['discord'];
    $text = $_POST['apply-text'];
    $position = "Moderation";
    $status = "open";

    $insertString = "INSERT INTO applys (realname, mcname, email, discord, applytext, position, applystatus) VALUES ('$realname', '$mcname', '$email', '$discord', '$text', '$position', '$status');";
    $check = mysqli_query($connect, $insertString);

    header("Location: http://projekte.kallifabio-intern.de/chaoscraft/apply/moderation.php");

    exit;
}

?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChaosCraft | Moderation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
    <link rel="icon" href="../assets/img/icon_chaoscraft.png" type="image/png">
    <link rel="stylesheet" href="../assets/css/apply_moderation.css">
</head>
<body class="bg-gray-800">

    <!-- Navbar -->
    <nav class="bg-gray-900 p-4">
        <div class="mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Center Logo -->
                <div class="flex justify-center">
                    <img src="../assets/img/logo_chaoscraft.png" alt="Logo" class="h-16 w-auto" id="logo-img">
                </div>

                <!-- Left Menu -->
                <div class="flex items-center space-x-4">
                    <!-- Hamburger Menu Button (Mobile) -->
                    <button id="menu-button" class="md:hidden inline-flex items-center p-2 text-gray-400 hover:text-white focus:outline-none">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>

                    <!-- Links -->
                    <div class="hidden md:flex space-x-4">
                        <a href="../index.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">HOME</a>
                        <a href="../partner.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">PARTNER</a>
                        <a href="../team.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">TEAM</a>
                        <a href="../news.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">NEWS</a>
                        <a href="../downloads.php" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">DOWNLOADS</a>

                        <!-- Dropdown Menu -->
                        <div class="relative group">
                            <button class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">BEWERBUNG</button>
                            <div class="absolute left-0 hidden bg-gray-800 group-hover:block">
                                <a href="developer.php" class="block px-4 py-2 text-gray-300">Developer</a>
                                <a href="moderation.php" class="block px-4 py-2 text-gray-300">Moderation</a>
                                <a href="builder.php" class="block px-4 py-2 text-gray-300">Builder</a>
                                <a href="design.php" class="block px-4 py-2 text-gray-300">Design</a>
                                <a href="contentcreator.php" class="block px-4 py-2 text-gray-300">Content Creator</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="player-count" class="text-gray-300 playercount-textcolor">Spieler: Lädt...</div>
                    <?php
                    if (isset($_SESSION['username'])) {
                        $username = $_SESSION['username'];
                        $accountrole = $_SESSION['role'];

                        echo "<a href='../auth/logout.php' class='text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium'>LOGOUT</a>";

                        if ($accountrole == 'Team') {
                            echo "<a href='../acp/acp.php' class='text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium'>ACP</a>";
                        }
                    } else {
                        echo "<a href='../auth/login.php' class='text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium'>LOGIN</a>";
                    }
                    ?>
                </div>
            </div>
        </div>

        <!-- Mobile Menu (Initially Hidden) -->
        <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
            <a href="../index.php" class="block px-4 py-2 text-gray-300 hover:text-white">HOME</a>
            <a href="../partner.php" class="block px-4 py-2 text-gray-300 hover:text-white">PARTNER</a>
            <a href="../team.php" class="block px-4 py-2 text-gray-300 hover:text-white">TEAM</a>
            <a href="../news.php" class="block px-4 py-2 text-gray-300 hover:text-white">NEWS</a>
            <a href="../downloads.php" class="block px-4 py-2 text-gray-300 hover:text-white">DOWNLOADS</a>

            <!-- Dropdown for Bewerbung -->
            <div>
                <button id="bewerbung-button" class="w-full text-left px-4 py-2 text-gray-300 hover:text-white focus:outline-none">
                    BEWERBUNG
                    <svg id="arrow-icon" class="h-5 w-5 transform transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div id="bewerbung-dropdown" class="hidden bg-gray-800 px-4 py-2">
                    <a href="developer.php" class="block px-4 py-2 text-gray-300">Developer</a>
                    <a href="moderation.php" class="block px-4 py-2 text-gray-300">Moderation</a>
                    <a href="builder.php" class="block px-4 py-2 text-gray-300">Builder</a>
                    <a href="design.php" class="block px-4 py-2 text-gray-300">Design</a>
                    <a href="contentcreator.php" class="block px-4 py-2 text-gray-300">Content Creator</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Introduction Section -->
    <div class="text-center mb-9 mt-9">
            <h1 class="text-4xl font-bold text-white">Werde Teil unseres Teams</h1>
        </div>
    <!-- Main Content -->
    <div class="apply-container mx-auto px-6 lg:px-12 py-12">

        <!-- Anforderungen Section -->
        <div class="rounded-lg mb-8">
            <h3 class="text-2xl font-semibold mb-4">Anforderungen:</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-400">
                <li>Mindestens 18 Jahre alt</li>
                <li>Verantwortungsbewusst und Zuverlässig</li>
                <li>Gute kommunikative Fähigkeiten und Teamfähigkeit</li>
                <li>Discord/TeamSpeak muss vorhanden sein</li>
            </ul>
        </div>
        <div class="divider w-full my-10 border-t border-gray-500"></div>
        <!-- Fähigkeiten Section -->
        <div class="rounded-lg mb-8">
            <h3 class="text-2xl font-semibold mb-4">Fähigkeiten:</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-400">
                <li>Moderieren des Chats und auch Discord</li>
                <li>Mithilfe bei der Organisation/Plannung von Events</li>
                <li>Auf Anfragen schnell und professionell reagieren</li>
                <li>Wissen über die Minecraft Java Versionen</li>
                <li>Kenntnisse über die Plugins von dem Server und Serverregeln</li>
                <li>Fragen beantworten und Verstöße erkennen</li>
            </ul>
        </div>
        <div class="divider w-full my-10 border-t border-gray-500"></div>
        <!-- Zusätzlich Section -->
        <div class="rounded-lg mb-8">
            <h3 class="text-2xl font-semibold mb-4">Zusätzliche Kenntnisse:</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-400">
                <li>Erfahrung bei der Moderation von anderen Servern, Discords, Foren oder Online-Communitys auf Twitch</li>
                <li>Konfliktbeseitigung</li>
                <li>Umgang mit Ticket und Reportsystemen</li>
            </ul>
        </div>
        <div class="divider w-full my-10 border-t border-gray-500"></div>
        <!-- Bewerbung Section -->
        <div class="rounded-lg mb-8">
            <h3 class="text-2xl font-semibold mb-4">Wie kannst du dich bewerben?</h3>
            <p class="text-gray-400 mb-4">
                1. Klicke auf den Bewerben Button und fülle das Bewerbungsformular aus.
            </p>
            <p class="text-gray-400 mb-4">
                2. Du wirst von uns eine Einladung zu einem Bewerbungsgespräch erhalten, welches über Discord stattfinden wird. Terminabstimmung und weiteres erfolgt über Discord.
            </p>
            <p class="text-gray-400 mb-4">
                3. Danach kommst du in eine 2-wöchige Probezeit, in der du verschiedene Aufgaben zu erledigen hast. Unsere Teammitglieder stehen dir in dieser Zeit auch zur Verfügung.
            </p>
            <p class="text-gray-400 mb-4">
                4. Und schon bist du im Team.
            </p>
        </div>
        <div class="divider w-full my-10 border-t border-gray-500"></div>
        <!-- Form Modal Section -->
        <div class="rounded-md justify-center" id="form-modal">
            <button class="btn logo-bg-color" id="openModal">Bewerben</button>
        </div>
    </div>
    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-12">
        <div class="footer-container mx-auto px-6 lg:px-12">
            <!-- Flex Container für die Inhalte -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Partner Sektion -->
                <div>
                    <h3 class="text-lg font-semibold text-white mb-4">RECHTLICHES</h3>
                    <ul>
                        <li><a href="../impressum.php" class="hover:text-white">Impressum</a></li>
                        <li><a href="../dsgvo.php" class="hover:text-white">Datenschutzerklärung</a></li>
                    </ul>
                </div>
                <!-- Social Media Sektion -->
                <div class="ml-12">
                    <h3 class="text-lg font-semibold text-white mb-4">SOCIAL MEDIA</h3>
                    <div class="flex space-x-4">
                        <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="transform transition-transform duration-300 ease-in-out hover:text-[#7289da] hover:scale-125 hover:rotate-6" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
                        <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
                        </svg></a>
                        <a href="#" class="text-gray-400 hover:text-blue-500">
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="transform transition-transform duration-300 ease-in-out hover:text-[#1DA1F2] hover:scale-125 hover:rotate-6" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
                            <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                        </svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-pink-500">
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="transform transition-transform duration-300 ease-in-out hover:text-[#FF0000] hover:scale-125 hover:rotate-6" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
                            <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
                        </svg>
                        </a>
                        <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="transform transition-transform duration-300 ease-in-out hover:text-[#C13584] hover:scale-125 hover:rotate-6" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
                            <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
                        </svg></a>
                    </div>
                </div>
            </div>

            <!-- Footer Bottom -->
            <div class="text-center mt-12 text-gray-500 border-t border-gray-700 pt-6">
                &copy; 2025 - <?php echo date('Y'); ?> by NextGen-Studio. Alle Rechte vorbehalten.
            </div>
        </div>
    </footer>
    <!-- Modal -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-lg shadow-lg max-w-lg w-full">
            <!-- Modal Header -->
            <div class="flex justify-between items-center border-b border-gray-700 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">Bewerbungsformular</h3>
            </div>
            <!-- Modal Body -->
            <div class="p-6">
                <form method="post">
                    <input type="text" name="realname" placeholder="Gebe deinen Name an (Vorname)" required class="bg-gray-50 text-gray-900 text-sm rounded-lg block w-full p-2.5">
                    <br>
                    <input type="text" name="mcname" placeholder="Gebe deinen Minecraft Name an" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <br>
                    <input type="email" name="email" placeholder="Gebe deine E-Mail an" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <br>
                    <input type="text" name="discord" placeholder="Gebe deinen Discord Name an" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <br>
                    <textarea name="apply-text" cols="40" rows="10" placeholder="Erzähle etwas über dich" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"></textarea>
                    <br>
                    <button type="submit" class="btn bg-green-700 hover:bg-green-800 font-medium rounded-lg" name="applymoderation">Bewerbung absenden</button>
                </form>
            </div>
            <!-- Modal Footer -->
            <div class="flex justify-end border-t border-gray-700 px-6 py-4">
                <button id="closeModalFooter" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                    Schließen
                </button>
            </div>
        </div>
    </div>
    
    <script src="../assets/js/navbar.js"></script>
    <script src="../assets/js/serverstatus.js"></script>
    <script>
        // Spieleranzahl beim Laden abrufen
        fetchPlayerCount();
    </script>
    <script src="../assets/js/modal.js"></script>
</body>
</html>
