{% extends'@admin/base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css">
    <style>
        .dd {
            max-width: 100%
        }
        .dd-list .dd-item .dd-handle {
            background: #f8f8f8;
            border: 1px solid #e2e2e2;
            padding: 10px 16px;
            font-size: 14px;
            height: auto;
            font-weight: 400;
            border-radius: 3px;
            color: #6c757d
        }
        .dd-list .dd-item .dd-handle:hover {
            color: #64c5b1
        }
        .dd-list .dd-item button {
            height: 36px;
            font-size: 17px;
            margin: 0;
            color: #8c9396;
            width: 36px
        }
        .dd-list .dd3-item {
            margin: 5px 0
        }
        .dd-list .dd3-item .dd-item button {
            width: 36px;
            height: 36px
        }
        .dd-list .dd3-handle {
            margin: 0;
            height: 36px!important;
            float: left
        }
        .dd-list .dd3-content {
            height: auto;
            border: none;
            padding: 8px 16px 8px 46px;
            background: #f8f8f8
        }
        .dd-list .dd3-content:hover {
            color: #64c5b1
        }
        .dd-list .dd3-handle:before {
            content: "\F35C";
            font-family: "Material Design Icons";
            color: #adb5bd
        }
        .dd-empty,.dd-placeholder {
            background: #fbfbfb;
            border-color: #e2e2e2
        }
        .custom-dd-empty .dd-list .dd3-handle {
            border: none
        }
        .dd-dragel .dd-handle {
            -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
            box-shadow: 0 0 35px 0 rgba(154,161,171,.15)
        }
        .dd-dragel .dd3-handle {
            border: none!important
        }
</style>
{% endblock %}

{% block subheader %}
    <h3 class="m-subheader__title m-subheader__title--separator">
       Order des catégories de la page d'accueil
    </h3>

{% endblock %}
{% block breadcrumb %}{% endblock %}
{% block stat %}
    <div class="flex-right">
        <ul class="action-nav">
            <li>
                <div>
                    <a href="javascript:history.back()" class="btn btn-outline-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill m-btn--air" title="Retour">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
            </li>
        </ul>
    </div>
{% endblock %}
{% block bodycontent %}
    <div class="row">
        <div class="col-lg-12">
            <!--begin::Portlet-->
            <div class="m-portlet">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Glissez/déposez les catégories ci-dessous pour les réarranger.
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <!--begin::Section-->
                    <div class="m-section m-section--last">
                        <div class="m-section__content">
                            <div class="dd">
                                <ol class="dd-list">
                                    {% for category in categories %}
                                        <li class="dd-item" data-id="{{ category.id }}">
                                            <div class="pull-right item_actions pt-2 pe-2">
                                                <a href="{{ path('produit_index', {'category':category.id,'isAvailable':'All' }) }}"
                                                   class="m-portlet__nav-link btn m-btn m-btn--hover-info m-btn--icon m-btn--icon-only m-btn--pill me-2"
                                                   title="liste des produits">
                                                    <i class="fa fa-list"></i>
                                                </a>
                                            </div>
                                            <div class="dd-handle">
                                                <strong>{% if category.icon %}<i class="{{ category.icon }}"></i>{% endif %} {{ category.name }}</strong>
                                                <span class="ms-5 m-badge {{ category.produits?"m-badge--primary":"m-badge--danger" }} m-badge--wide">{{ category.produits | length }} produits</span>
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>

        </div>
    </div>

{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[name="filter_category"] .select2').select2();
            $('.dd').nestable({
                maxDepth:1 ,
                scroll: true,
                callback: function(l,e){
                    $.post(Routing.generate('nestable_homepage_save'), {
                        nestable: JSON.stringify($('.dd').nestable('serialize'))
                    }, function (data) {
                        toastr.success("Elément de menu réordonné avec succès.");
                    });
                }
            });

        });
    </script>
{% endblock %}