<!DOCTYPE HTML>
<!--
	Dimension by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
    <title>Scan TiBillet</title>
    <meta charset="utf-8"/>
    {% load static %}
    {% load humanize %}
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="{% static 'html5up-dimension/assets/css/main.css' %}"/>
    <noscript>
        <link rel="stylesheet" href="{% static 'html5up-dimension/assets/css/noscript.css' %}"/>
    </noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <div class="content">
            <div class="inner">
                <h1>Carte Cashless</h1>
                <h1>{{ numero_carte }}</h1>
                <h1>{{ client_name }}</h1>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="#recharger">Recharger</a></li>

                {% if history %}
                    <li><a href="#historique">Historique</a></li>
                {% endif %}

                {% if carte_resto %}
                    <li><a href="/media/{{ carte_resto }}">Restaurant</a></li>
                {% endif %}

                {% if billetterie_bool %}
                    <li><a href="/">Billetterie</a></li>
                {% endif %}

                {% if site_web %}
                    <li><a href="{{ site_web }}">Site web</a></li>
                {% endif %}

                {% if not email %}
                    <li><a href="#adherer">Adhérer</a></li>
                {% endif %}

                {% if email and not a_jour_cotisation %}
                    <li><a href="#adherer">Adhérer</a></li>
                {% endif %}
                {#                <li><a href="#elements">Elements</a></li>#}

            </ul>
        </nav>
    </header>

    <!-- Main -->
    <div id="main">

        <!-- Intro -->
        <article id="recharger">
            <h2 class="major">carte {{ numero_carte }}</h2>
            <span class="image main"><img src="/media/{{ image_carte.med }}" alt=""/></span>
            <form method="post" action="#">
                {% csrf_token %}
                <div class="fields">
                    <div class="field">
                        <label for="email">Email</label>
                        {% if email %}
                            <label for="email">Vérifiez votre adresse Email</label>
                            <input type="email" name="email" id="Email" required="True"
                                   style="text-transform: lowercase;"  value="{{ email }}" />
                        {% else %}
                            <label for="email">Entrez votre adresse Email</label>
                            <input type="email" name="email" id="email" required="True"
                                   style="text-transform: lowercase;"/>
                        {% endif %}
                    </div>

                    <div class="field">
                        <label for="montant_recharge">Somme à recharger (€)</label>
                        <input id="montant_recharge" type="number" name="montant_recharge" required="True"/>
                    </div>
                </div>
                <ul class="actions">
                    <li><input type="submit" value="Payer" class="primary"/></li>
                </ul>
            </form>

        </article>

        <!-- Historique -->
        <article id="historique">
            <div class="table-wrapper">
                {% if messages %}
                    {% for message in messages %}
                        <h3>{{ message }}</h3>
                    {% endfor %}
                {% endif %}
                <h2 class="major">Solde</h2>

                <table>
                    <thead>
                    <tr>
                        <th>Carte {{ numero_carte }}</th>
                        <th>Quantité</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for asset in assets %}
                        <tr>
                            <td>{{ asset.nom }}</td>
                            <td>{{ asset.qty | floatformat:2 | intcomma }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="1"></td>
                        <td>{{ total_monnaie | floatformat:2 | intcomma }}</td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <h2 class="major">Historique</h2>


            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Qty</th>
                        <th>Article</th>
                        <th>Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for ligne in history %}
                        <tr>
                            <td>{{ ligne.date | naturaltime }}</td>
                            <td>{{ ligne.qty  | floatformat:0 | intcomma }}</td>
                            <td>{{ ligne.article }}</td>
                            <td>{{ ligne.total }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </article>


        <article id="success">
            {% if messages %}
                {% for message in messages %}
                    <h2>{{ message }}</h2>
                {% endfor %}
            {% endif %}
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>Portefeuille</th>
                        <th>Quantité</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for asset in assets %}
                        <tr>
                            <td>{{ asset.nom }}</td>
                            <td>{{ asset.qty | floatformat:2 | intcomma }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="1"></td>
                        <td>{{ total_monnaie | floatformat:2 | intcomma }}</td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <ul class="actions">
                <li><a href="#historique" class="button primary">Voir l'historique</a></li>
            </ul>
        </article>


        <!-- adhesion -->
        <article id="adherer">
            <h2 class="major">Adhésion {{ client_name }}</h2>
            <form method="post" action="#">
                {% csrf_token %}
                <div class="fields">

                    <div class="field">
                        {% if email %}
                            <label for="email">Vérifiez votre adresse Email</label>
                            <input type="email" name="email" id="Email" required="True" value="{{ email }}"
                                   style="text-transform: lowercase;"/>
                        {% else %}
                            <label for="email">Entrez votre adresse Email</label>
                            <input type="email" name="email" id="email" required="True"
                                   style="text-transform: lowercase;"/>
                        {% endif %}
                    </div>
                </div>
                <ul class="actions">
                    <li><input type="submit" value="continuer" class="primary"/></li>
                </ul>
            </form>
        </article>

        <!-- adhesion -->
        <article id="demande_nom_prenom_tel">
            <h2 class="major">Adhésion {{ client_name }}</h2>
            <h4 id="knew_text">Nous avons déja : </h4>
            <h4>Il nous manque ces informations pour votre adhésion :</h4>
            <form method="post" action="#">
                {% csrf_token %}
                <div class="fields">
                    <input id="adhesion_email" name="email" required="True" type="email" style="display: none"/>

                    <div id="adhesion_name" class="field half">
                        <label for="name">Nom</label>
                        <input id="name" name="name" required="True" type="text"/>
                    </div>
                    <div id="adhesion_prenom" class="field half">
                        <label for="prenom">Prénom</label>
                        <input id="prenom" name="prenom" required="True" type="text"/>
                    </div>
                    <div id="adhesion_tel" class="field half">
                        <label for="tel">Téléphone</label>
                        <input id="tel" name="tel" required="True" type="tel"/>
                    </div>
                </div>
                <ul class="actions">
                    <li><input type="submit" value="Adhérer" class="primary"/></li>
                </ul>
            </form>
        </article>

        <article id="adhesionsuccess">
            <h2 class="major">Adhésion</h2>
            {% if messages %}
                {% for message in messages %}
                    <h3>{{ message }}</h3>
                {% endfor %}
            {% endif %}

            {% if adhesion_obligatoire %}
                {% if tarifs_adhesion %}
                    <h4>Payer en ligne avec un vrai robot :</h4>
                    {% for tarif in tarifs_adhesion %}
                        <ul class="actions">
                            <li><a id="{{ tarif.name | slugify }}" href="#paiementadhesionenligne"
                                   class="button primary field">{{ tarif.name }} {{ tarif.prix | floatformat:2 | intcomma }}€</a></li>
                        </ul>
                    {% endfor %}
                    <h4>Payer à l'acceuil de l'association avec un vrai humain :</h4>
                    <ul class="actions">
                        <li><a href="#" class="button primary field">CONTINUER</a></li>
                    </ul>
                {% endif %}
            {% endif %}
        </article>

        <article id="paiementadhesionenligne">
            <h2 class="major">Paiement en ligne</h2>
            <h3>Adhésion : <span id="text_name_adhesion"></span> <span id="text_tarif_adhesion"></span></h3>
            <form method="post" action="#">
                {% csrf_token %}
                <div class="fields">
                    <div class="field" style="display: none">
                        {% if email %}
                            <input type="email" name="email" id="email_paiement_adhesion" required="True"
                                   value="{{ email }}"/>
                        {% else %}
                            <input type="email" name="email" id="email" required="True"/>
                        {% endif %}
                    </div>

                    <div class="field" style="display: none">
                        <input id="pk_adhesion" type="text" name="pk_adhesion"
                               required="True"/>
                        <input id="montant_adhesion" type="number" step="any" name="montant_adhesion"
                               required="True"/>
                    </div>

                    <div class="field">
                        <h4>Voulez vous recharger votre carte en même temps ? Laissez vide si non.</h4>
                        <label for="montant_recharge">Recharge cashless (€) :</label>
                        <input id="montant_recharge" type="number" name="montant_recharge"/>
                    </div>
                </div>
                <ul class="actions">
                    <li><input type="submit" value="Payer" class="primary"/></li>
                </ul>
            </form>

        </article>

        <article id="erreurpaiement">
            <h2 class="major">ERREUR</h2>
            <h3>Le paiement n'a pas fonctionné.</h3>
            <h4>Vérifiez votre moyen de paiement ou contacter un administrateur</h4>
            {% if messages %}
                {% for message in messages %}
                    <h3>{{ message }}</h3>
                {% endfor %}
            {% endif %}
            <ul class="actions">
                <li><a href="#historique" class="button primary">Voir l'historique</a></li>
            </ul>
        </article>

        <article id="erreur">
            <h2 class="major">ERREUR</h2>
            <h3>Oups, Quelque chose s'est mal passé.</h3>
            {% if messages %}
                {% for message in messages %}
                    <h3>{{ message }}</h3>
                {% endfor %}
            {% endif %}
        </article>


    </div>

    <!-- Footer -->
    <footer id="footer">
        <p class="copyright"><a href="https://www.tibillet.re">TiBillet.re</a> Design: <a href="https://html5up.net">HTML5
            UP</a>.</p>
    </footer>

</div>

<!-- BG -->
<div id="bg"></div>

<!-- Scripts -->
<script src="{% static 'html5up-dimension/assets/js/jquery.min.js' %}"></script>
<script src="{% static 'html5up-dimension/assets/js/browser.min.js' %}"></script>
<script src="{% static 'html5up-dimension/assets/js/breakpoints.min.js' %}"></script>
<script src="{% static 'html5up-dimension/assets/js/util.js' %}"></script>
<script src="{% static 'html5up-dimension/assets/js/main.js' %}"></script>


{# Script qui n'affiche que les champs dont nous avons besoin lors de l'adhésion #}
<script type="text/javascript">
    document.getElementById("knew_text").hidden = true;
    {% if messages %}
        {% for message in messages %}
            {% if message.extra_tags == 'email' %}
                document.getElementById("adhesion_email").value = "{{ message }}";
            {% endif %}
            {% if message.extra_tags == 'name' %}
                document.getElementById("adhesion_name").hidden = true;
                document.getElementById("name").readOnly = true;
                document.getElementById("name").value = "connu";
                document.getElementById("knew_text").textContent += "votre nom,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
            {% if message.extra_tags == 'prenom' %}
                document.getElementById("adhesion_prenom").hidden = true;
                document.getElementById("prenom").readOnly = true;
                document.getElementById("prenom").value = "connu";
                document.getElementById("knew_text").textContent += "votre prénom,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
            {% if message.extra_tags == 'tel' %}
                document.getElementById("adhesion_tel").hidden = true;
                document.getElementById("tel").readOnly = true;
                document.getElementById("tel").value = "connu";
                document.getElementById("knew_text").textContent += "votre numéro de téléphone,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
        {% endfor %}
    {% endif %}

</script>

{#Script pour remplir la page d'adhésion de paiement#}
<script>
    {% for tarif in tarifs_adhesion %}
        document.getElementById('{{ tarif.name | slugify }}').onclick = function () {
            console.log('{{ tarif.name | slugify }}')
            document.getElementById("montant_adhesion").value = "{{ tarif.prix }}";
            document.getElementById("pk_adhesion").value = "{{ tarif.pk }}";
            document.getElementById("text_name_adhesion").textContent = "{{ tarif.name }}";
            document.getElementById("text_tarif_adhesion").textContent = "{{ tarif.prix }}€";
        }

    {% endfor %}
</script>


</body>
</html>
