<div class="store">
    <div class="card">
        {% for service in store_services %}
        <div class="store-item">
            <div class="store-info">
                <img class="store-icon" src="{% if service.icon|length > 0 %}{{service.icon}}{% else %}{{template.dir}}/assets/img/noimage.png{% endif %}" alt="Ikona" />
                <div>
                    <h3 class="name">{{service.name}}</h3>
                    <span class="block">
                        {{service.desc}}
                    </span>
                </div>
            </div>
            <div class="store-price">
                <table>
                    <tr>
                        <td>SMS:</td>
                        <td><span class="price"><span class="big-price">{{service.sms_price|split('.')|join('</span><span class="small-price">')|raw}}</span></span></td>
                    </tr>
                    <tr>
                        <td>PAYPAL:</td>
                        <td><span class="price"><span class="big-price">{{service.paypal|split('.')|join('</span><span class="small-price">')|raw}}</span></span></td>
                    </tr>
                    <tr>
                        <td>PSC:</td>
                        <td><span class="price"><span class="big-price">{{service.psc|split('.')|join('</span><span class="small-price">')|raw}}</span></span></td>
                    </tr>
                </table>
                <button class="button buy-button" id="buy-{{service.id}}">KUP</button>
            </div>
        </div>
        {% endfor %}
    </div>

    <script type="text/javascript">
        if(window.onload){
            var curronload = window.onload;
            window.onload = function(evt){
                curronload(evt);
                storeSetup();
            };
        }else{
            window.onload = function(evt){
                storeSetup();
            };
        }
        function storeSetup(){
            var services = {{store_services|json_encode()|raw}};
            $(document).ready(function(){
                $('button.buy-button').each(function(n, button){
                    $(button).click(function(){
                        var id = $(this).attr("id");
                        id = parseInt(id.substring(4));
                        $(services).each(function(n, service){
                            if(id == service.id){
                                $container = $("<div id=\"store-modal\" style=\"display: none;\">\
        <div class=\"tabs\">\
            <div class=\"tabs-nav\">\
                <h1>Wybierz metodę płatności:</h1>\
                <ul>\
                  <li><a href=\"#sms\">SMS</a></li>\
                  <li><a href=\"#paypal\">Paypal</a></li>\
                  <li><a href=\"#psc\">PSC</a></li>\
                  <li class=\"slider\"></li>\
                </ul>\
            </div>\
            <div class=\"tabs-content\">\
                <div id=\"sms\" class=\"tab-container\">\
                    <h3>Aby zakupić "+service.name+"</h3>\
                    <p>Wyślij sms o treści <span class=\"label\">"+service.sms_content+"</span>\
                    pod numer <span class=\"label\">"+service.sms_number+"</span>.</p>\
                    <p>Koszt <span class=\"label\">"+service.sms_price+"</span>.</p>\
                    <form method=\"POST\" action=\"action/store/buy/sms/"+service.id+"/\">\
                        <div class=\"group\">\
                          <input type=\"text\"  name=\"nickname\" required>\
                          <span class=\"highlight\"></span>\
                          <span class=\"bar\"></span>\
                          <label>Nick</label>\
                        </div>\
                        <div class=\"group\">\
                          <input type=\"text\"  name=\"sms_code\" required>\
                          <span class=\"highlight\"></span>\
                          <span class=\"bar\"></span>\
                          <label>Kod z sms</label>\
                        </div>\
                        <button class=\"button\">Kup!</button>\
                    </form>\
                </div>\
                <div id=\"paypal\" class=\"tab-container\">\
                    <h3>Aby zakupić "+service.name+"</h3>\
                    Możesz dokonać zakupu używając paypal'a, w tym celu wypełnij poniższy formularz.\
                    Koszt <span class=\"label\">"+service.paypal+"</span>.\
                    <form method=\"POST\" action=\"action/store/buy/paypal/"+service.id+"/\">\
                        <div class=\"group\">\
                          <input type=\"text\"  name=\"nickname\" required>\
                          <span class=\"highlight\"></span>\
                          <span class=\"bar\"></span>\
                          <label>Nick</label>\
                        </div>\
                        <button class=\"button\">Kup!</button>\
                    </form>\
                </div>\
                <div id=\"psc\" class=\"tab-container\">\
                    <h3>Aby zakupić "+service.name+"</h3>\
                    Możesz dokonać zakupu używając psc, w tym celu wypełnij poniższy formularz.\
                    Koszt <span class=\"label\">"+service.psc+"</span>.\
                    <form method=\"POST\" action=\"action/store/buy/psc/"+service.id+"/\">\
                        <div class=\"group\">\
                          <input type=\"text\"  name=\"nickname\" required>\
                          <span class=\"highlight\"></span>\
                          <span class=\"bar\"></span>\
                          <label>Nick</label>\
                        </div>\
                        <button class=\"button\">Kup!</button>\
                    </form>\
                </div>\
            </div>\
        </div>\
    </div>");
                                //$container.html(service.desc);
                                //$('div').append($container);
                                $container.modal();
                                $(".tabs-nav li a").click(function(e) {
                                  e.preventDefault();
                                  if ($(this).hasClass('slider')) {
                                    return;
                                  }
                                  $('.tabs-content > div').each(function(){
                                      $(this).css({
                                          display: 'none'
                                      });
                                  });
                                  $($(this).attr('href')).css({
                                      display: 'block'
                                  })
                                  var whatTab = $(this).index();

                                  var howFar = $(this).parent().position().left;
                                  $(".slider").css({
                                    left: howFar + "px",
                                    width: $(this).width()
                                  });

                                  $(".ripple").remove();

                                  var posX = $(this).offset().left,
                                      posY = $(this).offset().top,
                                      buttonWidth = $(this).width(),
                                      buttonHeight = $(this).height();

                                  $(this).prepend("<span class='ripple'></span>");

                                  if (buttonWidth >= buttonHeight) {
                                    buttonHeight = buttonWidth;
                                  } else {
                                    buttonWidth = buttonHeight;
                                  }

                                  var x = e.pageX - posX - buttonWidth / 2;
                                  var y = e.pageY - posY - buttonHeight / 2;

                                  $(".ripple").css({
                                    width: buttonWidth,
                                    height: buttonHeight,
                                    top: y + 'px',
                                    left: x + 'px'
                                  }).addClass("rippleEffect");

                                });
                                $(".tabs-nav li a").first().click();
                                return;
                            }
                        });
                    })
                });
            });
        }

    </script>
</div>