{% extends 'admin\\baseadmin.html.twig' %}
{% trans_default_domain 'attributes' %}

{% block stylesheets %}
{{parent()}}
    {# Font Awesome #}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    {# Artgris FileManager #}
    <link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
    {# Import fengyuanchen/cropper #}
    <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
    {# Then the default bundle's CSS #}
    <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">
{% endblock %}

{% block content%}
    {{ form_start(form) }}
    <section class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    {{ form_label(form.name) }}
                                    {{ form_widget(form.name) }}
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    {{ form_label(form.type) }}
                                    {{ form_widget(form.type) }}
                                </div>
                            </div>
                        </div>
                        {% for lang in langs %}
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>{% trans %}name{% endtrans %} <span class="text-uppercase">{{lang.languageCode}}</span></label>
                                        {{ form_widget(attribute(form,"name_"~lang.languageCode)) }}
                                    </div>
                                </div>
                            </div>                            
                        {% endfor %}
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    {{ form_label(form.content_type) }}
                                    {{ form_widget(form.content_type) }}
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    {{ form_label(form.order_value) }}
                                    {{ form_widget(form.order_value) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ATTRIBUTES VALUES -->
                <div class="card structure-block">
                    <div class="card-header">
                        {% trans %}values{% endtrans %}
                        <button class="btn btn-primary btn-sm float-right add-attribute-value" data-q-action="add-value" type="button">{{ 'Add value'|trans({},'attributes')}}</button>
                    </div>
                    <div class="card-body body-attributes-values block-content" block="1" counter="1">
                        {% include 'admin\\stdattributes\\loadFields.html.twig' %}
                    </div>
                    <div class="card-footer">
                        <button type="submit" id="std_attributes_form_save" name="std_attributes_form[save]" class="btn-primary btn float-right">{{ 'Save'|trans({},'attributes')}}</button>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <div style="display: none">
        {{ form_rest(form) }}
    </div>
    {{ form_end(form) }}

{% endblock %}

{% block javascripts %}
{{parent()}}
    <script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
   {#  Jqueri UI #}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    {# jquery.collection.js #}
    <script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
    {# Import fengyuanchen/cropper #}
    {# <script src="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.js') }}"></script> #}
    {# Then the default bundle's JavaScript: #}
    {% include '@ArtgrisMedia/assets/include_js.html.twig' %}

    <script>
        
        $(function() {
            $(".colorpicker").spectrum({
                showInput: true,
                showAlpha: true,
                showInitial: true,
                allowEmpty:true,
                showPalette: true,
                showSelectionPalette: true,
                palette: [
                    [$bodycolor, $textcolor],
                    [$primary, $secondary, $tertiary],
                    [$info, $light, $dark], 
                    [$success, $warning, $danger]
                ],
                preferredFormat: "hsl",
            });
            $(".colorpicker").show();

            $(".card").on("click", ".add-attribute-value", function(){
                $this=$(this);
                $this.attr("disabled",true);
                var dataSearch = {};
                if( $(".repeatables-wrap").length > 0 ){
                    var blockcontent = $(".body-attributes-values .repeatables-wrap");
                } else {
                    var blockcontent = $(".body-attributes-values");
                }
                var lastitemindex = blockcontent.find(".item-repeatable").length;
                var itemindex = parseInt((lastitemindex ? lastitemindex : 0))+1;
                var $form = $(this).closest('form');
                dataSearch['counter'] = lastitemindex+1;
  
                $.ajax({ 
                    url: "/{{ app.request.getLocale() }}/admin/attributesvalue/add",
                    type: $form.attr('method'),
                    type: "POST",
                    data: dataSearch,
                    success: function(html) {
                        blockcontent.append('<div class="card m-b-10 item-repeatable"><div class="item-repeatable-index">'+itemindex+'</div><ul class="actions top-right"> <li><a href="javascript:void(0)" ><i class="icon dripicons-move move-item"></i></a></li> <li><a href="javascript:void(0)" data-q-action="card-remove"><i class="icon dripicons-trash"></i></a></li> </ul>'+html+'</div></div>');
                        $("html, body").animate({ scrollTop: blockcontent.find(".item-repeatable").last().offset().top - 75}, 400);
                        initFileUpload('.fileupload.alone');
                        initFileUpload('.ui-sortable-handle .fileupload');
                        $(".colorpicker").spectrum({
                            showInput: true,
                            showAlpha: true,
                            showInitial: true,
                            allowEmpty:true,
                            showPalette: true,
                            showSelectionPalette: true,
                            palette: [
                                [$bodycolor, $textcolor],
                                [$primary, $secondary, $tertiary],
                                [$info, $light, $dark], 
                                [$success, $warning, $danger]
                            ],
                            preferredFormat: "hsl",
                        });
                        $(".colorpicker").show();

                    },
                    complete: function(){
                        $this.attr("disabled",false);

                    }

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