{% extends 'base2.html.twig' %}
{% block body %}
    <style>
        .numberCircle {
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            font-size: 15px;
            padding: 5px;
            border: 2px solid #ffffff;
        }
        .numberCircle-inside{
            width: 51px;
            line-height: 16px;
            border-radius: 50%;
            text-align: center;
            font-size: 13px;
            border: 2px solid #ffffff;
            padding-left: 7px;
            padding-right: 8px;
            padding-top: 3px;
            padding-bottom: 3px;
        }
        .circle-light-green{
            background-color: #7fb231; 
            color: white;
        }
    </style>
    <div class="page-title-container">
        <div class="container">
            <div class="page-title pull-left">
                <h2 class="entry-title">Jouer</h2>
            </div>
            <ul class="breadcrumbs pull-right">
                <li><a href="#">Accueil</a></li>
                <li class="active">Jouer</li>
            </ul>
        </div>
    </div>

    <section id="content">
        <div class="container">
            <div id="main">
                <div class="row">
                    <div class="col-sm-11 col-md-12">
                        <div class="alert alert-error alert-game" style="display: none;">
                            <span class="error-game"></span>
                            <span class="close"></span>
                        </div>
                        <div class="sort-by-section clearfix">
                            <h4 class="sort-by-title block-sm">Jouer:</h4>
                            <ul class="sort-bar clearfix block-sm">
                                <li class="sort-by-name">
                                    <select name="type_lotto" onchange="location.href='/jouer/'+this.value">
                                        <option value="New York" {% if lotto == "New york" %} selected {%endif%}>New york</option>
                                        <option value="Saint-Domingue" {% if lotto == "Saint-Domingue" %} selected {%endif%}>Saint-Domingue</option>
                                        <option value="Nationale" {% if lotto == "Nationale" %} selected {%endif%}>Nationale</option>
                                    </select>
                                </li>
                                <li class="sort-by-name">
                                    <div class="selector" style="width: 150px;">
                                        <select  name="type_bull" id="type_bull">
                                            <option value="BORLETTE">Borlette</option>
                                            <option value="LOTTO3">Lotto3</option>
                                            <option value="LOTTO4">Lotto4</option>
                                            <option value="LOTTO5">Lotto5</option>
                                        </select>
                                    </div>
                                </li>
                                <li class="sort-by-name">
                                    <input type="text" class="input-text full-width" id="bull" style="height: 34px" name="bull" placeholder="Boule"/>
                                </li>
                                <li class="sort-by-name">
                                    <input type="number" min="0" class="input-text full-width" id="pariage" style="height: 34px" name="pariage" placeholder="Pariage"/>
                                </li>
                                <li class="sort-by-popularity">
                                    <button onclick="buildLotto()" style="padding-left: 10px; padding-right: 10px;" class="button btn-small pull-right dark-blue2">Ajouter</button>
                                </li>
                            </ul>
                        </div>
                        <div class="travelo-box re-search-box" style="background: #eee;">
                            <form method="post" action="/jeu/store" id="form-game">
                                <div id="add_bull"></div>
                                <br>
                                <br>
                            </form>
                            <button href="#travelo-login" id="validation" class="soap-popupbox icon-check full-width" >Valider</button>
                        </div>
                        {# <form >
                            
                            <button type="submit"  style="padding-left: 10px; padding-right: 10px;" class="button btn sea-blue">Valider</button>
                        </form> #}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block js_script_ %}
<script>
    var games = [];
    var id = 0;
    if(games.length == 0)
        tjq("#validation").hide();

    
    function buildLotto(){
        /*tjq.post("/jeu/lottox", games[id]).done(function(resp){
            tjq("#add_bull").append(resp);
        });*/
        var game = {};
        game["type_lotto"] = "{{lotto}}";
        game["type_bull"] = tjq("#type_bull").val();
        game["bull"] = tjq("#bull").val();
        game["pariage"] = tjq("#pariage").val();
        game["id"] = id;
        if(validate(game)){
            tjq(".alert-game").hide();
            games[id] = game;
            tjq.post("/jeu/lottox", games[id]).done(function(resp){
                tjq("#add_bull").append(resp);
                tjq("#validation").show();
                id = id + 1;
            });
            tjq("#bull").val("");
            tjq("#pariage").val("");
        }
    }
    
    function suprimer(id){
        delete games[id];
        tjq("#item-bull"+id).remove();
        if(games.length == 0)
            tjq("#validation").hide();
    }
    
    function modifier(id){
        tjq("#type_bull").val(games[id]["type_bull"]);
        tjq("#bull").val(games[id]["bull"]);
        tjq("#pariage").val(games[id]["pariage"]);
        suprimer(id);
    }
    
    function validate(game){
        if(game["type_bull"] == "BORLETTE"){
            if(game["bull"].length != 2 || !isNumeric(game["bull"])){
                tjq(".alert-game").show();
                tjq(".error-game").html("Pour le type "+game["type_bull"]+" la valeur à jouer doit etre 2 chiffres");
                
                return false;
            }
        }else if(game["type_bull"] == "LOTTO3"){
            if(game["bull"].length != 3 || !isNumeric(game["bull"])){
                tjq(".alert-game").show();
                tjq(".error-game").html("Pour le type "+game["type_bull"]+" la valeur à jouer doit etre 3 chiffres");
                return false;
            }
        }else if(game["type_bull"] == "LOTTO4"){
            if(game["bull"].length != 4 || !isNumeric(game["bull"])){
                tjq(".alert-game").show();
                tjq(".error-game").html("Pour le type "+game["type_bull"]+" la valeur à jouer doit etre 4 chiffres");
                return false;
            }
        }else if(game["type_bull"] == "LOTTO5"){
            if(game["bull"].length != 5 || !isNumeric(game["bull"])){
                tjq(".alert-game").show();
                tjq(".error-game").html("Pour le type "+game["type_bull"]+" la valeur à jouer doit etre 5 chiffres");
                return false;
            }
        }else if(game["type_bull"] == "" || game["bull"] == "" || game["pariage"] == ""){
            tjq(".alert-game").show();
            tjq(".error-game").html("Les champs sont obligatoires!");
            return false;
        }
        return true;
    }
    
    function isNumeric(value) {
        return /^\d+$/.test(value);
    }

    function authenticate(){
        tjq.post("/user/connexion", {
            username: tjq("#username").val(),
            password: tjq("#password").val()
        }).done(function(resp){
            if(resp == "true"){
                tjq("#form-game").submit();
            }else{
                tjq(".alert-connexion").show();
                tjq(".alert-connexion-message").html("Identifiant ou mot de passe incorrect");
            }
        });
    }
    {# function valider(){
        tjq("#add-bull").submit();
    } #}
</script>
{% endblock %}