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

{% block title %}
    Mon panier

{% endblock %}

{% block body %}

    {% set currentPath = url(app.request.attributes.get('_route'),
        app.request.attributes.get('_route_params')) %}


    <main id="main" class="site-main">
        <div class="page-title background-cart">
            <div class="container">
                <h1>Cart</h1>
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="index.html">Home</a><span>/</span></li>
                        <li>Cart</li>
                    </ul>
                </div><!-- .breadcrumbs -->
            </div>
        </div><!-- .page-title -->
        <div class="container">
            {% if count > 0 %}
                <div class="main-content">

                    <div class="product-table">
                        <table>
                            <thead>
                            <tr>
                                <th>Récompense</th>
                                <th>Montant</th>
                                <th>Quantité</th>
                                <th>Total</th>
                                <th></th>
                            </tr>
                            </thead>
                            {% for reward in rewards %}
                                <tr id="js-del-produit-{{ reward.product.id }}"
                                    data-url="{{ path('basket.reward.update', {'id':reward.product.id,}) }}">
                                    <td>
                                        <img src="{{ vich_uploader_asset(reward.product, 'imageFile') | imagine_filter('mini') }}"
                                             alt="">
                                        <h3>{{ reward.product.title }}</h3>
                                    </td>
                                    <td>{{ reward.product.amount | format_currency('GNF') }}</td>
                                    <td>
                                        {# <select class="number-quatity js-reward-quantity-change" data-id="{{ reward.id }}" data-url="{{ url('basket.reward.update_quantity',{'id':reward.reward.id}) }}">

                                    {% for q in range(1,reward.reward.remainingQuantity) %}
                                        <option  value="{{ q}}" {% if q==reward.quantity %} selected {% endif%} >{{ q }}</option>
                                    {% endfor %}
                                </select> #}

                                        <input class="number-quatity js-update-quantity-panier"
                                               value="{{ reward.quantity }}"
                                               id="js-reward-quantity-change-{{ reward.product.id }}"

                                               type="number" min="1"
                                               data-id="{{ reward.product.id }}"
                                               max="{{ reward.product.remainingQuantity }}"
                                               data-unitprice="{{ reward.product.amount }}"

                                               data-url="{{ path('basket.reward.update', {'id':reward.product.id,}) }}"
                                        />
                                        {# <a class="controls-quatity js-update-product" href="{{ path('basket.reward.update',{'action': 'decrement', 'id':reward.reward.id, 'quantity':reward.quantity}) }}" data-action="decrement" data-quantity="{{ reward.quantity }}">-</a>
                                <span class="number-quatity" id="js-reward-quantity-{{ reward.reward.id }}">{{ reward.quantity }}</span>
                                <a class="controls-quatity js-update-product" href="{{ path('basket.reward.update',{'action': 'increment', 'id':reward.reward.id, 'quantity':reward.quantity}) }}" data-action="increment" data-quantity="{{ reward.quantity }}">+</a>
                                        #}
                                    </td>
                                    <td>
                                        <span id="js-total-product-amount-{{ reward.product.id }}">{{ (reward.product.amount*reward.quantity) | format_currency('GNF') }}</span>
                                    </td>
                                    <td><a href="#" class="js-del-produit" data-id="{{ reward.product.id }}"
                                           data-url="{{ path('basket.reward.delete',{'id':reward.product.id }) }}"><span
                                                    class="ion-ios-close-empty"></span></a></td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div><!-- .product-table -->
                    <div class="row js-total-div">
                        {# <div class="col-lg-6 col-sm-6 col-6">
                    <div class="calculate-shipping">
                        <h3>Calculate Shipping</h3>
                        <form action="s" method="POST" id="calculateForm" class="clearfix">
                            <div class="field field-select">
                                <select name="s">
                                    <option value="">United States</option>
                                    <option value="">Fulham</option>
                                </select>
                            </div>
                            <div class="field clearfix">
                                <div class="field-select align-left">
                                    <select name="s">
                                        <option value="">State</option>
                                        <option value="">State</option>
                                    </select>
                                </div>
                                <div class="align-right">
                                    <input type="text" value="" name="s" placeholder="Zip Code" />
                                </div>
                            </div>
                            <button type="submit" value="Send Messager" class="btn-primary">Calculate Shipping</button>
                        </form>
                    </div>
                </div> #}
                        <div class="col-lg-6 col-sm-6 col-6">
                        </div>
                        <div class="col-lg-6 col-sm-6 col-6">
                            <div class="cart-totals">
                                <h3>Total</h3>
                                <ul>
                                    <li><p>Sous Total</p>
                                        <p class="price js-sous-total-panier">{{ total | format_currency('GNF') }}</p>
                                    </li>
                                    <li><p>Frais de Transport</p>
                                        <p>0</p></li>
                                    <li><p>Total</p>
                                        <p class="price js-total-panier">{{ total | format_currency('GNF') }}</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="coupon-form js-total-div">
                        <div class="row">
                            <div class="col-lg-6">
                                {# <form action="s" method="POST" id="couponForm" class="clearfix">
                            <input type="text" value="" name="s" placeholder="Coupon Code..." />
                            <button type="submit" value="Send Messager" class="btn-primary">Apply Coupon</button>
                        </form> #}
                            </div>
                            <div class="col-lg-6">
                                <div class="button">
                                    {# <button type="submit" value="Send Messager" class="btn-primary update-cart">Updated Cart</button> #}
                                    <a href="{{ path('basket.delivery') }}" class="btn-primary">Payer</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            {% endif %}
        </div>
    </main>

{% endblock %}