{% extends 'base.html.twig' %}

{% block title %}Jouer - 2KBES{% endblock %}

{% block body %}
    {% block css_style %}
        <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
        <link href="{{ asset('assets/css/multi.select.css') }}" rel="stylesheet" type="text/css">
    {% endblock %}
    <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;
        }
        a.boxclose {
            float: right;
            width: 26px;
            height: 26px;

        }
    </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>#}
                                <input type="hidden" value="{{ lotto }}">
                                <li class="sort-by-name">
                                    <div class="selector" style="width: 150px;">
                                        <select  name="type_bull" id="type_bull" onchange="showOption()">
                                            <option value="BORLETTE" selected>Borlette</option>
                                            <option value="MARIAGE">Mariage</option>
                                            <option value="MARIAGEFREE">Mariage free</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-name" id="show-type-bull" style="display: none;">
                                    <div class="selector" style="width: 150px;">
                                        <select  name="type_bull" id="type_bull_lotto3">
                                            {% for option in options_lotto3 %}
                                                <option value="{{option.value}}">{{option.label}}</option>
                                            {% endfor %}
                                        </select>
                                        {#<input type="hidden" name="option" value="0">#}
                                    </div>
                                </li>
                                <li class="sort-by-name" id="show-type-bull45" style="display: none;">
                                    {#style="display: none; visibility: hidden;">#}
                                    {#<input type="hidden" name="choices[{% set counter = ( counter | default(0) ) + 1 %}][type]" value="{{type_bull}}">#}
                                    <div class="multi" id="multi"></div>
                                    {#{% for option in options_lotto45 %}#}
                                        {#<div class="form-group">#}
                                            {#<label>#}
                                                {#<input type="checkbox" name="choices[option][]" value="{{option.value}}"> {{option.label}}#}
                                            {#</label>#}
                                        {#</div>#}
                                    {#{% endfor %}#}
                                </li>
                                {#<li id="show-type-bull-else">#}
                                    {#<input type="hidden" name="option" value="0">#}
                                    {#<input type="hidden" name="choices[type][]" value="{{type_bull}}">#}
                                {#</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="row flight-list image-box flight listing-style1">
                            {#{% if type_bull == 'LOTTO3' %}#}
                                {#<label>Option: </label>#}
                                {#<select  name="choices[{{id}}][type]" style="width: 100%; margin-bottom: 5px;">#}
                                    {#{% for option in options %}#}
                                        {#<option value="{{option.value}}">{{option.label}}</option>#}
                                    {#{% endfor %}#}
                                {#</select>#}
                                {#<input type="hidden" name="choices[{{id}}][option]" value="0">#}
                                {#<br>#}
                                {#<br>#}
                            {#{% elseif type_bull == 'LOTTO4' or type_bull == 'LOTTO5' %}#}
                                {#<input type="hidden" name="choices[{{id}}][type]" value="{{type_bull}}">#}
                                {#{% for option in options %}#}
                                    {#<div class="form-group">#}
                                        {#<label>#}
                                            {#<input type="checkbox" name="choices[{{id}}][option][]" value="{{option.value}}"> {{option.label}}#}
                                        {#</label>#}
                                    {#</div>#}
                                {#{% endfor %}#}
                            {#{% else %}#}
                                {#<input type="hidden" name="choices[{{id}}][option]" value="0">#}
                                {#<input type="hidden" name="choices[{{id}}][type]" value="{{type_bull}}">#}
                            {#{% endif %}#}
                            {#<div style="padding-right: 0; margin-right: 0; margin-top: 4px;" class="col-sm-2 col-lg-1">#}
                                {#<article class="box" style="margin: 0; padding: 0;">#}
                                    {#<div style="text-align: right;">#}
                                        {#<a style="padding: 4px; background: #ddd; color: blue; cursor: pointer;" title="Modifier"><i class="fa fa-pencil"></i></a>#}
                                        {#<a style="padding: 4px; background: #ddd; color: red; cursor: pointer;" title="Supprimer"><i class="fa fa-times"></i></a>#}
                                    {#</div>#}
                                    {#<figure style="background: #fff;">#}
                                        {#<div style="padding: 0px !important;">#}
                                            {#<section class="stage" style="margin: auto; display: block !important;">#}
                                                {#<figure class="ball bull-green-color">#}
                                                    {#<span class="shadow"></span>#}
                                                    {#<span class="eight">#}
                                                                {#<span class="text-bull" style="position: absolute; font-size: 1em !important; transform-origin: 50px 50px;">0000</span>#}
                                                            {#</span>#}
                                                {#</figure>#}
                                            {#</section>#}
                                        {#</div>#}
                                    {#</figure>#}
                                    {#<div class="details" style="padding-top: 0 !important;">#}
                                        {#<div style="margin: 0;">#}
                                            {#<div style="padding: 0!important;">#}
                                                {#<div style="margin-left: 8px;">#}
                                                    {#<small><span class="skin-color">Borlette</span>#}
                                                        {#<br>Option: 0#}
                                                        {#<br>Type: BOX</small>#}
                                                {#</div>#}
                                            {#</div>#}
                                        {#</div>#}
                                    {#</div>#}
                                {#</article>#}
                            {#</div>#}
                            <form method="post" action="/jeu/store" id="form-game">
                                <div id="add_bull"></div>
                            </form>
                            <button id="validation" onclick="valider()" style="margin-top: 10px;" class="icon-check full-width" >Valider</button>
                        </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 id="validation" class="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 src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></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() == "LOTTO3")?tjq("#type_bull_lotto3").val():tjq("#type_bull").val();
            game["bull"] = tjq("#bull").val();
            game["pariage"] = tjq("#pariage").val();
           if(tjq("#type_bull").val() == "LOTTO4" || tjq("#type_bull").val() == "LOTTO5")
               game["option"] = $('#multi').multi_select('getSelectedValues').join(',');
            else
               game["option"] = "0";
            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" || game["type_bull"] == "MARIAGE"|| game["type_bull"] == "MARIAGEFREE"){
                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;
                }
            }
            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;
                }
            }
            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;
                }
            }
            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;
                }
            }
            if(game["type_bull"] == "" || game["bull"] == "" || game["pariage"] == "" || game["pariage"] <= 0){
                tjq(".alert-game").show();
                tjq(".error-game").html("Les champs sont obligatoires!");
                return false;
            }
            return true;
        }

        function isNumeric(value) {
            return /^\d+$/.test(value);
        }

        function showOption(){
            var type_bull = tjq("#type_bull").val();
            console.log(type_bull);
            tjq("#show-type-bull").hide();
            tjq("#show-type-bull45").hide();
            tjq("#show-type-bull-else").hide();
            if(type_bull == "LOTTO3"){
                tjq("#show-type-bull").show();
            }else if(type_bull == "LOTTO4" || type_bull == "LOTTO5"){
                tjq("#show-type-bull45").show();
            }else{
                tjq("#show-type-bull-else").show();
            }
        }
//        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.post("{{ path('store_game') }}", {"games":games}).done(function(resp){
                 if(resp == "Succes"){
                     tjq().html();
                     setTimeout(function(){
                         window.location.reload();
                     }, 2000);
                 }
             });
         }
        tjq("#msg-success").html("");
    </script>
    <script src="{{ asset('assets/js/multi.select.js') }}"></script>
    <script>
        $('.multi').multi_select({
            selectColor: 'purple',
            selectSize: 'small',
            selectText: 'Select option',
            duration: 300,
            easing: 'slide',
            listMaxHeight: 300,
            selectedCount: 2,
            sortByText: true,
            fillButton: true,
            data: {
                {% for option in options_lotto45 %}
                    "{{ option.value }}": "{{ option.label }}",
                {% endfor %}
            },
            onSelect: function(values) {
                console.log('return values: ', values);
                console.log('Games: : ', JSON.stringify(games));
                console.log('Id: : ', id);
            },
        });
        $('#get_values').on('click', function(event) {
            console.log($('#multi').multi_select('getSelectedValues'));
            $('.data-display').remove();
            var json = { items: $('#multi').multi_select('getSelectedValues') };
            if (json.items.length) {
                var ul = $('<ul>', { 'class': 'data-display' }).appendTo('body');
                $(json.items).each(function(index, item) {
                    ul.append(
                            '<li style="display: block;">' + item + '</li>'
                    );
                });
            }
        })
        $('#clear_values').on('click', function(event) {
            $('#multi').multi_select('clearValues');
            $('.data-display').slideUp(300, function() {
                $(this).remove()
            })
        })
        showOption();
    </script>
{% endblock %}