{% extends 'admin/admin_base.html.twig' %}
{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% set page_title = "Kategoriler" %}
{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="{{ asset('assets/admin/css/pages/category.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block breadcrumb %}
    {% set fields = [  { 'name': page_title }] %}
    {% include 'admin/Common/_breadcrumb.html.twig' %}
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        {{ button.button_new({'text':'Yeni Oluştur','href':path('admin_category_new'),'class':'waves-effect waves-float waves-light mb-1 btn-block'}) }}

                        {% include "admin/Main/Product/Category/_list.html.twig" %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">



            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        {% if category|default %}
                            {{ category.name }}
                        {% else %}
                            Yeni Kategori
                        {% endif %}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body">


                        <form action="{{ category|default ? path('admin_category_edit',{'id':category.id}) :  path('admin_category_new')  }}" method="post" enctype="multipart/form-data">
                            {%  include "admin/Main/Product/Category/_form.html.twig" %}
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}


    <script src="{{ asset('assets/admin/js/jquery-ui.min.js') }}"></script>


    <script>
        $(document).ready(function () {

            var toggler = document.getElementsByClassName("icon");
            var i;

            for (i = 0; i < toggler.length; i++) {
                toggler[i].addEventListener("click", function() {
                    this.parentElement.querySelector(".nested").classList.toggle("active");
                    this.classList.toggle("fa-caret-down");
                });
            }

            /**
             * Sortable
             */


            $( "ul[data-sortable]" ).each(function () {
                $(this).sortable({
                    handle : '.title',
                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');

                        $.ajax({
                            url: "{{ path('admin_category_sortable') }}",
                            type: 'POST',
                            data: data,
                            success: function (response) {
                                if(response.statu == 'success'){
                                    _kodpit.toast.success("Başarılı", response.message);
                                }else{
                                    _kodpit.toast.error("Hata", response.message);
                                }
                            }

                        });
                    }
                });
            });






        });
    </script>

{% endblock %}