{% extends "base.html.twig" %}
{% block title %} Party erstellen! {% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset("css/create_party.css") }}">
{% endblock %}

{% block body %}
    <main style="background-image: url({{ asset("img/create_party_bg.jpg") }})">
        {% include "global_elements/nav.html.twig" %}
        <div class="container">
            <form method="post" class="setting-page-wrapper needs-validation" novalidate>
                <input hidden value="1" name="party">
                <div class="setting-page bg-dark text-light" style="display: block" id="setting-page-1">
                    <div class="setting-page-header bg-light text-dark">Info</div>
                    <div class="setting-page-body text-center">
                        <h2><b>Erstelle eine neue Party!</b></h2>
                        <p class="mt-3">odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat
                            maecenas volutpat
                            blandit aliquam etiam erat velit scelerisque in dictum non consectetur a erat nam at lectus
                            urna
                            duis convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt arcu
                            non
                            sodales neque sodales ut etiam sit amet nisl purus in mollis nunc sed id semper risus in
                            hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida
                            in
                            fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu
                            tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium</p>
                    </div>
                    <div class="setting-page-footer">
                        <button type="button" class="btn btn-success continue-btn" data-next="2">Weiter</button>
                    </div>
                </div>

                <div class="setting-page bg-dark text-light" id="setting-page-2">
                    <div class="setting-page-header bg-light text-dark">Gäste</div>
                    <div class="setting-page-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group mb-3">
                                    <label for="guest_amount">Gastanzahl</label>
                                    <input type="number" name="guest_amount"
                                           placeholder="Wenn unbegrenzt viele Gäste kommen dürfen, das Feld leer lassen."
                                           min="0" class="form-control mt-2" id="guest_amount">
                                    <div id="amount_help" class="form-text">Anzahl der <b>maximal</b> zugelassenen
                                        Gäste.
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="guest_list">Gästeliste</label>

                                    <textarea rows="6" name="guest_list" class="form-control mt-2" id="guest_list"
                                              placeholder="e.g. anton.hfe, jette.sn, n_i_na__"></textarea>
                                    <div class="form-text">Im Vorfeld eingeladene Gäste.</div>
                                </div>
                                <div class="form-group mt-3">
                                    <label for="verification_type">Art der Verifikation</label>
                                    <select id="verification_type" name="verification_type" class="form-select mt-2"
                                            aria-label="Default select example" required>
                                        <option value="instagram">Instagram</option>
                                    </select>
                                    <div class="form-text">
                                        Über welche ID können sich Gäste verifizieren und eintragen.
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="setting-page-footer">
                        <button type="button" class="btn btn-primary return-btn" data-previous="1">Zurück</button>
                        <button type="button" class="btn btn-success continue-btn" data-next="3">Weiter</button>
                    </div>
                </div>

                <div class="setting-page bg-dark text-light" id="setting-page-3">
                    <div class="setting-page-header bg-light text-dark">Location</div>
                    <div class="setting-page-body">
                        <div class="row">
                            <div class="col-2">
                                <div class="form-floating">
                                    <input name="zip_code" class="form-control" type="number" placeholder="Postleitzahl" id="zip_code"
                                           required>
                                    <label for="zip_code">Postleitzahl*</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating">
                                    <input name="city" class="form-control" type="text" placeholder="Ort" id="city" required>
                                    <label for="city">Ort/Stadt*</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating">
                                    <input name="street" class="form-control" type="text" placeholder="Straße" id="street" required>
                                    <label for="street">Straße*</label>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-floating">
                                    <input name="street_number" class="form-control" type="number" placeholder="0" id="number" required>
                                    <label for="number">Nummer*</label>

                                </div>
                            </div>

                        </div>

                        <div class="row mt-3">
                            <div class="col-6">
                                <label for="date">Datum*</label>
                                <input name="date" class="form-control mt-2" id="date" type="date" required>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="start_time">Anfang*</label>
                                    <input name="start_time" class="form-control mt-2" id="start_time" type="time" required>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="end_time">Ende</label>
                                    <input name="end_time" class="form-control mt-2" id="end_time" type="time">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="setting-page-footer">
                        <button type="button" class="btn btn-primary return-btn" data-previous="2">Zurück</button>
                        <button type="button" class="btn btn-success continue-btn" data-next="4">Weiter</button>
                    </div>
                </div>

                <div class="setting-page bg-dark text-light" id="setting-page-4">
                    <div class="setting-page-header bg-light text-dark">Kontaktdaten</div>
                    <div class="setting-page-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-floating">
                                    <input class="form-control" type="tel" placeholder="telephone_number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" name="telephone_number" id="telephone_number">
                                    <label for="telephone_number">Telefonnummer</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating">
                                    <input class="form-control" type="email" placeholder="Email" name="email_address" id="email_address">
                                    <label for="email_address">Email-Adresse</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="setting-page-footer">
                        <button type="button" class="btn btn-primary return-btn" data-previous="3">Zurück</button>
                        <button type="button" class="btn btn-success continue-btn" data-next="5">Weiter</button>
                    </div>
                </div>

                <div class="setting-page bg-dark text-light" id="setting-page-5">
                    <div class="setting-page-header bg-light text-dark">Abschließen</div>
                    <div class="setting-page-body">
                        <div class="alert alert-danger" id="validate_alert" style="display: none">Du hast nicht alle Felder ordnungsgemäß ausgefüllt!</div>
                    </div>
                    <div class="setting-page-footer">
                        <button type="button" class="btn btn-primary return-btn" data-previous="4">Zurück</button>
                        <button type="submit" id="create_btn" class="btn btn-success">Party erstellen</button>
                    </div>
                </div>

            </form>
        </div>

    </main>

    {% include "global_elements/footer.html.twig" %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>

    {% block scripts %}
        <script type="text/javascript">
            $(".continue-btn").click(function () {
                let next_page = $(this).data("next");

                $("#setting-page-" + (next_page - 1)).fadeOut(500, function () {
                    $("#setting-page-" + next_page).fadeIn(500);
                })
            });

            $(".return-btn").click(function () {
                let previous_page = $(this).data("previous");

                $("#setting-page-" + (previous_page + 1)).fadeOut(500, function () {
                    $("#setting-page-" + previous_page).fadeIn(500);
                })
            });
            
            $("#create_btn").click(function () {
                    $("#validate_alert").fadeIn(1000)
            })
        </script>
    {% endblock %}
{% endblock %}