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

{% block title %}E-wallet - 2KBES{% endblock %}

{% block body %}
    <div class="page-title-container">
        <div class="container">
            <div class="page-title pull-left">
                <h2 class="entry-title">E-wallet</h2>
            </div>
            <ul class="breadcrumbs pull-right">
                <li><a href="#">Accueil</a></li>
                <li class="active">2KBOUS</li>
            </ul>
        </div>
    </div>
    <section id="content">
        <div class="container">
            <div id="main">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <div class="pricing-table white box">
                            <div class="header clearfix">
                                <i class="soap-icon-suitcase circle green-color"></i><h4 class="box-title"><span>Montant gagnant</span></h4>
                                <span class="price">HTG {{account}}</span>
                            </div>
                            <br>
                            <div class="header clearfix">
                                <i class="soap-icon-shopping circle red-color"></i><h4 class="box-title"><span>Crédit</span></h4>
                                <span class="price">HTG {{credit}}</span>
                            </div>
                            <div class="row time">
                                <div class="col-xs-6">
                                    {#<button style="margin-top: 10px;background: linear-gradient(#F20000, #A30000);" onclick="show('#faire_depot', '#faire_retrait')" class="btn-small uppercase full-width sky-blue2 faire_depot">Faire un dépôt</button>#}
                                    <button class="btn-small uppercase full-width dark-orange faire_depot" onclick="show('#faire_depot', '#faire_retrait')"  style="position: relative; background: linear-gradient(#F20000, #A30000); padding-right: 0 !important; margin-top: 10px">
                                        {#<div style="float: left; width: 75%; font-size: 0.7em; height: 100%; margin-top: 15px;">#}
                                            {#<span style="margin-top: 3px;">Transaction</span>#}
                                        {#</div>#}
                                        {#<div style="float: right; width: 25%; height: 100%;  background: #fff;">#}
                                        Faire un dépôt
                                            <img style="width: 30px; height: 26px; float: right; position: absolute; top: 1px; right: 2px;" src=" {{ asset('assets/images/moncash.png') }}"/>
                                        {#</div>#}
                                        <!-- F20000 - A30000 -->
                                    </button>
                                </div>
                                <div class="col-xs-6">

                                    <button style="margin-top: 10px; position: relative;" onclick="show('#faire_retrait', '#faire_depot')" class="btn-small uppercase full-width dark-blue2 faire_retrait">
                                        Faire un retrait
                                    </button>
                                </div>
                            </div>
                            <hr/>
                            <div class="travelo-box re-search-box" id="faire_depot" style="display: none;">
                                <h4>Faire un dépôt</h4>
                                <form method="post" id="form-deposit">
                                    <input class="input-text full-width montant" name="montant" placeholder="Montant" type="text">
                                    <br>
                                    <br>
                                    <button type="button" onclick="submitWallet('{{ path('faire_depot') }}', '#form-deposit')"  class="icon-check full-width">Soumettre</button>
                                </form>
                            </div>
                            <div class="travelo-box re-search-box" id="faire_retrait" style="display: none;">
                                <h4>Faire un retrait</h4>
                                <form method="post" action="{{ path('faire_retrait') }}" id="form-retrait">
                                    <input name="montant" class="input-text full-width montant" placeholder="Montant" type="text">
                                    <br>
                                    <input name="telephone" style="margin-top: 10px;" class="input-text full-width telephone" placeholder="Telephone" type="text">
                                    <br>
                                    <br>
                                    <button type="button" onclick="submitWallet('{{ path('faire_retrait') }}', '#form-retrait')" class="icon-check full-width">Soumettre</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 col-md-8">
                        <div class="flight-list listing-style3 flight" id="resultat">
                            {% for transaction in transactions %}
                                <article class="box">
                                    <div class="details col-xs-11 col-sm-12">
                                        <div class="details-wrapper">
                                            <div class="first-row">
                                                <div>
                                                    <h4 class="box-title">
                                                        {% if transaction.type == 'GAME' or transaction.type == 'WITHDRAWAL' %}
                                                            Retrait
                                                        {% elseif transaction.type == 'POSDEPOSIT' %}
                                                            Dépôt
                                                        {% endif %}
                                                    </h4>
                                                </div>
                                            </div>
                                            <div class="second-row">
                                                <div class="time">
                                                    <div class="take-off col-sm-4">
                                                        <div class="icon"><i class="soap-icon-calendar-1 yellow-color"></i></div>
                                                        <div>
                                                            <span class="skin-color">Date/Heure</span>
                                                            <br>{{transaction.date_created}}
                                                        </div>
                                                    </div>
                                                    <div class="landing col-sm-4">
                                                        <div class="icon"><i class="fa fa-ticket yellow-color"></i></div>
                                                        <div>
                                                            <span class="skin-color">Statut</span>
                                                            <br>{{ transaction.status }}
                                                        </div>
                                                    </div>
                                                    <div class="total-time col-sm-4">
                                                        <div class="icon">
                                                            <i class="fa fa-money yellow-color"></i>
                                                        </div>
                                                        <div>
                                                            <span class="price">HTG {{transaction.amount}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            {% endfor %}
                        </div>
                        <button onclick="loadMore()" id="more" style="display: block;" class="uppercase full-width button btn-large">Charger</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block js_script_ %}
    <script>
        function show(selector1, selector2){
            tjq(".montant").val("");
            tjq(".telephone").val("");
            tjq(selector1).show();
            tjq(selector2).hide();
        }

        function submitWallet(url, form){
//            console.log(tjq(form).serialize());
            tjq.post(url, tjq(form).serialize()).done(function(resp){
                var myWindow = window.open("", "myWindow", "width=600, height=600, toolbar=no");
                if(resp.error == false){
//                    myWindow.document.write("<h1 style='color: red;'>"+resp.msg+"</h1>");
                    myWindow.location.href = resp.link;
                }else{
                    myWindow.document.write("<h1 style='color: red;'>"+resp.msg+"</h1>");
                }

            }).error(function(error){
                console.log(error);
            });
        }
    </script>
{%endblock%}