{% extends 'YOUAdminBundle::layout.html.twig' %}

{% block body %}
    <div class="main-content">


        <div class="container-fluid">
            <div class="row-fluid">

                <div class="well" id="newsletter">

                    <div>
                        <select id="category" class="pull-left">
                            {% for item in category %}
                                <option value="{{ item.id }}">{{ item.indentedtitle }}</option>
                            {% endfor %}
                        </select>&nbsp;
                        <a href="#" id="btn-open" class="btn btn-default">Ouvrir</a>
                        <a href="#" id="btn-save" class="btn btn-default">Sauvegarder</a>
                    </div>
<br/>
                    <div id="menuEditForm" class="btn-group">
                        <p class="btn btn-default disabled">Ajouter au formulaire : </p>
                    </div>

                </div>

                <div style="display:none;">
                    <input id="listItemForm" value="">
                    <div id="htmlContent">

                    </div>
                </div>

                <ul id="listItemInForm">

                </ul>

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

{% endblock %}


{% block append_javascript %}

    <script>
        formObject = [];

        formObject.push({
            type:'input',
            titre:'Champs libre',
            attr:['type="text"'],
            name:'input'
        });

        formObject.push({
            type:'textarea',
            titre:'Champs texte',
            attr:[],
            name:'textarea'
        });

        formObject.push({
            type:'select',
            titre:'Liste à choix',
            attr:[],
            name:'select',
            generate:'option'
        });

        formObject.push({
            type:'input',
            titre:'Liste à choix multiple',
            attr:['type="checkbox"'],
            name:'checkbox',
            generate:'this'

        });

        for(index in formObject){
            $('#menuEditForm').append('<a href="#" onclick="return addForm('+index+');" class="btn btn-default">'+formObject[index].titre+'</a>');
        }

        var unique = 0;
        function addForm(index){

            unique++;
            $('#listItemInForm').append(baseHtmlLabel(generateEditPart(index),unique));
            $( "#listItemInForm ul.generate" ).sortable({stop:launchGeneratePreview});

            launchGeneratePreview();

        }

        function generateEditPart(index){

            var e = formObject[index];

            if(e.type == 'input' && !e.generate){
                return '<input type="hidden" class="e" value="'+index+'">';
            }
            if(e.type == 'textarea' && !e.generate){
                return '<input type="hidden" class="e" value="'+index+'">';
            }
            if(e.generate){
                return '<input type="hidden" class="e" value="'+index+'"><ul class="generate"><li><a href="#" onclick="$(this).parent().parent().append(\'<li><input type=\\\'text\\\'></li>\');" class="btn btn-default">Ajouter</a></li><li><input type="text"></li></ul>';
            }
        }

        function baseHtmlLabel(content,unique){
            var html = '';

            html += '<li class="item"><a href="#" class="btn btn-danger" onclick="$(this).parent().remove(); return false;"><i class="icon icon-trash"></i></a>';

            html += '<div class="leftPart"><label for="item-'+unique+'">Nom du champ : </label><input type="text" value="" placeholder="label ici ..." id="item-'+unique+'"></div>';

            html += '<div class="editPart">'+content+'</div>';
            html += '<div class="previewPart"></div>';

            html += '</li>';

            return html;
        }

        function generateAttr(attr){
            var html = ' ';
            for(i in attr){
                html += attr+' ';
            }
            return html;
        }

        function generatePreview(){

            var contentList = {};
            var contentFormHTML = "";

            var compteur = 0;
            $('#listItemInForm li.item').each(function(){
                compteur++;
                var label = $('.leftPart input',this).val();

                $('.leftPart input',this).attr('value',label);

                if(label == '') {
                    label = 'label';
                }
                var index = $('.editPart input[type="hidden"]',this).val();
                var e = formObject[index];
                console.log(formObject[index]);
                if(!e.generate){
                    if(e.type == 'input'){
                        var content = '<input name="'+e.name+'-'+compteur+'"'+generateAttr(e.attr)+'>'
                    }
                    if(e.type == 'textarea'){
                        var content = '<textarea name="'+e.name+'-'+compteur+'"'+generateAttr(e.attr)+'></textarea>'
                    }
                }else{

                    var content = '';

                    if(e.type == 'select'){
                        content += '<select name="'+e.name+'-'+compteur+'"'+generateAttr(e.attr)+'>'
                        $('.editPart li input',this).each(function(){
                            if($(this).val() != ''){
                                $(this).attr('value',$(this).val());
                                content += '<option value="'+$(this).val()+'">'+$(this).val()+'</option>';
                            }
                        });
                        content += '</select>';
                    }else{
                        var self = this;
                        var cpt = 0;
                        $('.editPart li input',this).each(function(){
                            cpt++;
                            if($(this).val() != ''){
                                $(this).attr('value',$(this).val());
                                content += '<div><input type="checkbox" value="'+$(this).val()+'" name="'+e.name+'-'+compteur+'" id="'+e.name+'-'+compteur+'-'+cpt+'-id"><label for="'+e.name+'-'+compteur+'-'+cpt+'-id">'+$(this).val()+'</label></div>';
                            }
                        });
                    }

                }

                contentList[compteur] = {label:label,name:e.name+'-'+compteur};
                contentFormHTML += '<fieldset><p>'+label+' : </p><div>'+content+'</div></fieldset>';

                $('.previewPart', this).html('<p>'+label+' : </p><div>'+content+'</div>');

            });
            $('#listItemForm').val(JSON.stringify(contentList));
            $('#htmlContent').html(contentFormHTML);

        }

        var generateTimeout;
        function launchGeneratePreview(){
            clearTimeout(generateTimeout);
            generateTimeout = setTimeout(generatePreview,500);
        }


        $('input').live('change',launchGeneratePreview);
        $('input').live('keyup',launchGeneratePreview);

        $( "#listItemInForm" ).sortable();

        $('#btn-save').click(function(e){

            e.preventDefault();

            $.post('{{ path('you_admin_devis_edit_save') }}',{category:$('#category').val(),htmlForm:$('#htmlContent').html(),html:$('#listItemInForm').html(),list:$('#listItemForm').val()},function(data){
                alert(data);
            });

        });

        $('#btn-open').click(function(e){

            e.preventDefault();

            $.post('{{ path('you_admin_devis_edit_open') }}',{category:$('#category').val()},function(data){
                $('#htmlContent').html(data.htmlForm);
                $('#listItemInForm').html(data.html);
                $('#listItemForm').val(data.list);
                $( "#listItemInForm ul.generate" ).sortable({stop:launchGeneratePreview});

                $( "#listItemInForm ul.generate li").each(function(){
                   if($('input',this).val() == ''){
                       $(this).remove();
                   }
                });

            },'json');

        });
    </script>

{% endblock %}