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

{% set  maxAmount = user.qualification.maxAmountPackage %}

{% block body %}

    <div class="mb-4">
        <h4 class="text-center mb-4">{{ user.firstname }} {{ user.lastname }} confectionnez votre
            paquetage de {{ yearPaquetage }}</h4>
        <h4 class="d-flex justify-content-around w-50 m-auto">
            <a href="" class="btn btn-package ml-4" data-toggle="modal" data-target="#exampleModal">guide des
                tailles</a>
            <a href="" class="btn btn-package ml-4" data-toggle="modal" data-target="#exampleModal2">guide des
                chaussures</a>
            <a href="" class="btn btn-package ml-4" data-toggle="modal" data-target="#exampleModal3">rappel règles paquetage</a>
        </h4>
    </div>

    {% set progressionCart = (amountCart/maxAmount)*100 %}

    <div class="progress mb-4 w-50 mr-auto ml-auto">
        {% if progressionCart < 100 %}
            <div class="progress-bar progress-package" role="progressbar" style="width: {{ progressionCart|round }}%;"
                 aria-valuenow="{{ progressionCart|round }}"
                 aria-valuemin="0" aria-valuemax="100">{{ progressionCart|round }}%
            </div>
        {% else %}
            <div class="progress-bar progress-package-over" role="progressbar" style="width: {{ progressionCart|round }}%;"
                 aria-valuenow="{{ progressionCart|round }}"
                 aria-valuemin="0" aria-valuemax="100">{{ progressionCart|round }}%
            </div>
        {% endif %}
    </div>

    <!-- Modal Fiche Mesures -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal--fiches--mesures" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Fiche de mesures</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('images/fiche-mesures01.png') }}">
                    <img src="{{ asset('images/fiche-mesures02.png') }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Chaussures -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal--fiches--mesures" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Chaussures</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body ml-auto mr-auto">
                    <img src="{{ asset('images/chaussures.jpg') }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Conditions-->
        <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal--fiches--mesures" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Rappel des conditions à l'élaboration du paquetage</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>le paquetage doit contenir au moins : </p>
                    <ul>
                        <li>3 pantalons dont au moins un pantalon été et un pantalon hiver</li>
                        <li>1 paire de chaussures et au plus 2 paires</li>
                        <li>1 sweat shirt ou 1 veste d'hiver</li>
                        <li>2 tee-shirts classique et 1 tee-shirt aéré</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>


    <div class="package-front">
        <div class="row">
            <div class="container product--list p-3 col-6">
                <h4 class="p-2 mb-4 text-center">Sélection du paquetage</h4>
                <div class="row">
                    <div class="col-1">#</div>
                    <div class="col-5">Libellé</div>
                    <div class="col-2">Taille</div>
                    <div class="col-2">Quantité</div>
                    <div class="col-1">Ajouter</div>
                </div>
                <hr>
                {% for produit in produits %}
                    {% if produit.id in backOrder %}
                        {% set id = produit.id %}
                        <div class="row" id="productid-{{ produit.id }}">
                            <div class="col-1">{{ loop.index }}</div>
                            <div class="col-5 form-product"
                                 data-productid="{{ produit.id }}">
                                <p class="mb-0">{{ produit.name }}</p>
                                <p class="product--alert--qty mb-0">quantités min={{ produit.minQty }} max={{ produit.maxQty }}</p></div>
                            <div class="col-2 form-product-taille">
                                <select class="custom-select w-100 p-1">
                                    {% for addproduct in panier %}
                                        {% if addproduct.product.id == id %}
                                            {% set tailleorderid = addproduct.taille.id %}
                                            {% set selectedoption = '' %}
                                            {% for taille in produit.tailles %}
                                                <option class="form-product-taille-option"
                                                        value="{{ taille.id }}"
                                                        {{ (taille.id == tailleorderid) ? 'selected' : '' }}>
                                                    {{ taille.name }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-2 form-product-qty">
                                {% for addproduct in panier %}
                                    {% if addproduct.product.id == id %}
                                        {% set qte = addproduct.quantity %}
                                        <input type="number" class="form-product-qty-value form-group"
                                               id="quantity" value="{{ qte }}" min="{{ addproduct.product.minQty }}"
                                               max="{{ addproduct.product.maxQty }}"  required>
                                    {% endif %}
                                {% endfor %}

                            </div>
                            <div class="col-1 custom-switch">
                                <input type="checkbox" class="custom-switch-input" id="check-{{ produit.id }}" checked>
                                <label class="custom-switch-btn" for="check-{{ produit.id }}"></label>
                            </div>
                        </div>
                    {% else %}
                        <div class="row" id="productid-{{ produit.id }}">
                            <div class="col-1">{{ loop.index }}</div>
                            <div class="col-5 form-product"
                                 data-productid="{{ produit.id }}">
                                <p class="mb-0">{{ produit.name }}</p>
                            <p class="product--alert--qty mb-0">quantités min={{ produit.minQty }} max={{ produit.maxQty }}</p></div>
                            <div class="col-2 form-product-taille">
                                <select class="custom-select w-100 p-1">
                                    {#<option>tailles</option>#}
                                    {% for taille in produit.tailles %}
                                        <option class="form-product-taille-option"
                                                value="{{ taille.id }}">{{ taille.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-2 form-product-qty">
                                <input type="number" class="form-product-qty-value form-group"
                                       id="quantity" value="0" min="{{ produit.minQty }}"
                                       max="{{ produit.maxQty }}" required>
                            </div>
                            <div class="col-1 custom-switch">
                                <input type="checkbox" class="custom-switch-input" id="check-{{ produit.id }}">
                                <label class="custom-switch-btn" for="check-{{ produit.id }}"></label>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="container product--select p-3 col-5">
                <h4 class="p-2 mb-4 text-center">Sélection de {{ user.firstname }} {{ user.lastname }}</h4>
                <div id="panier" class="p-4">
                    <div class="mb-4">
                        <div>
                        <div class="row m-auto p-2 panier--title">
                            <div class="col-1">#</div>
                            <div class="col-7">Produit</div>
                            <div class="col-2">Taille</div>
                            <div class="col-1">Qté</div>
                        </div>
                        </div>
                        <div class="panier--product p-0">
                        {% for addproduct in panier %}
                            <div class="panier--addpdt row m-auto p-2" id="idpdt-panier-{{ addproduct.product.id }}"
                                data-panierproductid="{{ addproduct.product.id }}">
                                <div class="col-1">{{ loop.index }}</div>
                                <div class="col-7">{{ addproduct.product.name }}</div>
                                <div class="col-2">{{ addproduct.taille.name }}</div>
                                <div class="col-1">{{ addproduct.quantity }}</div>
                            </div>
                        {% endfor %}
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <a href="{{ path('panier') }}" class="btn btn-next float-right mb-3">Valider</a>
                    <a href="{{ path('reset_panier') }}" class="btn btn-back text-white mb-3">Annuler Sélection</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        $(document).ready(function () {
            let addProduct = {
                idPdt: null,
                taille: null,
                qty: null
            };
            let cart;
            $(".custom-switch-input").change(function () {
                let isChecked = $(this).is(":checked");

                if (isChecked) {
                    addProduct.idPdt = $(this).parent().parent().children('.form-product').data('productid');
                    addProduct.qty = $(this).parent().parent().children('.form-product-qty')
                        .children('input#quantity').val();
                    addProduct.taille = $(this).parent().parent().children('.form-product-taille')
                        .children('select.custom-select').val();
                    $.ajax({
                        url: '{{ path('package') }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {'addProduct': addProduct, 'cart': cart},
                        success: function (data) {
                            let idPdtCart = data['addPdtId'];
                            let qtyCart = data['addPdtQty'];
                            let amountCartAjax = data['amountCartAjax'];
                            let progressAmountCart = Math.floor(amountCartAjax / data['maxAmount'] * 100);
                            let tailleCart = data['addPdtTaille'];
                            let libellePdtCart = data['addPdtLibelle'].replace(/"/g, "");
                            let libelleTailleCart = data['addPdtTailleLibelle'].replace(/"/g, "");
                            $('.panier--product').append("<div class=\"panier--addpdt row m-auto p-2\" id=idpdt-" + idPdtCart + ">" +
                                "<div class=\"col-1\">" + idPdtCart + "</div>" +
                                "<div class=\"col-7\">" + libellePdtCart + "</div>" +
                                "<div class=\"col-2\">" + libelleTailleCart + "</div>" +
                                "<div class=\"col-1\">" + qtyCart + "</div>\n" +
                                "</div>");
                            $('.amount-cart').html(progressAmountCart);
                            $('.progress-bar').html(progressAmountCart + '%')
                            $('.progress-bar').attr('aria-valuenow', progressAmountCart);
                            $('.progress-bar').attr('style', 'width:' + progressAmountCart + '%');
                            if (progressAmountCart > 99) {
                                $('.progress-bar.progress-package').css('background-color', '#ea4e0e');
                            }

                        }
                    })
                } else {
                    let lessProduct = {
                        idPdt: null,
                        taille: null,
                        qty: null
                    };
                    lessProduct.idPdt = $(this).parent().parent().children('.form-product').data('productid');
                    lessProduct.qty = $(this).parent().parent().children('.form-product-qty')
                        .children('input#quantity').val();
                    lessProduct.taille = $(this).parent().parent().children('.form-product-taille')
                        .children('select.custom-select').val();
                    $.ajax({
                        url: '{{ path('package') }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {'lessProduct': lessProduct},
                        success: function (data) {
                            let lessPdtId = data['lessPdtId'];
                            let lessPdtIdMinQty = data['minQty'];
                            let amountCartAjax = data['amountCartAjax'];
                            let progressAmountCart = Math.floor(amountCartAjax / data['maxAmount'] * 100);
                            $('#idpdt-' + lessPdtId + '').remove();
                            $('#idpdt-panier-' + lessPdtId + '').remove();
                            $('#productid-' + lessPdtId + '').children('.form-product-qty').children('input#quantity').val(0);
                            $('#productid-' + lessPdtId + '').children('.custom-switch').children(':checkbox').attr('disabled','disabled');
                            $('.amount-cart').html(progressAmountCart);
                            $('.progress-bar').html(progressAmountCart + '%');
                            $('.progress-bar').attr('aria-valuenow', progressAmountCart);
                            $('.progress-bar').attr('style', 'width:' + progressAmountCart + '%');
                            if (progressAmountCart > 99) {
                                $('.progress-bar.progress-package').css('background-color', '#ea4e0e');
                            }
                        }
                    })
                }
            });

            $(".panier-form-product-check").change(function () {
                let isCheckedPanier = $(this).is(":checked");
                if (isCheckedPanier) {
                    let lessProductPanier = {
                        idPdt: null
                    };
                    lessProductPanier.idPdt = $(this).parent().parent().data('panierproductid');
                    $.ajax({
                        url: '{{ path('package') }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {'lessProductPanier': lessProductPanier},
                        success: function (data) {
                            let lessPdtIdPanier = data['lessPdtIdPanier'];
                            $('#idpdt-panier-' + lessPdtIdPanier + '').html('');
                            $('.product--list').$('#productid-' + lessPdtIdPanier + '').children('.form-product-qty').children('input#quantity').val('0');
                        }
                    })
                }
            })
        });

        $(function() {
            $("input[value='0']").parent().next().children(":checkbox").attr('disabled','disabled');
            $("input[value!='0']").parent().next().children(":checkbox").attr('disabled',!'disabled');
            $("input#quantity").change(function(){
                let qty = $(this).val();
                if (qty == 0) {
                    $(this).parent().next().children(":checkbox").attr('disabled','disabled');
                } else {
                    $(this).parent().next().children(":checkbox").attr('disabled',!'disabled');
                }
            });
        });


    </script>

{% endblock %}