{% extends "YOUCommercantBundle::layout.html.twig" %}

{% block container %}
<div id="previewMail">
    <div class="head">
        <a href="#" onclick="$('#previewMail').fadeOut(); return false;" class="btn btn-small btn-default" style="float:right;">Fermer l'apercu</a>

        <p>objet : <span id="previewObject"></span></p>
    </div>
    {{ header|raw }}
    <div id="previewContent">

    </div>
    {{ footer|raw }}
</div>
<div class="well" id="newsletter">
    <div id="menuNewsletter" class="btn-group">
        <p class="btn btn-default disabled">Actions : </p>
        <a href="#" class="btn btn-default" id="apercu">Apercu de l'email</a>
        <a href="#" onclick="sendPreview();" class="btn btn-default">M'envoyer un apercu ( à {{ user.email }})</a>
        <a href="#" class="btn btn-default" onclick="if(confirm('Envoyer ?')){sendMail();} return false;">Envoyer la newsletter</a>
    </div>
    <form id="formSendMail" action="{{ path('you_commercant_news_send') }}" method="POST">
        <fieldset>
            <label for="objet">Destinataire : </label>
            <select name="dest">
                <option value="0">Mes clients, mes fans et mes ajouts</option>
                <option value="1">Mes clients</option>
                <option value="2">Mes fans</option>
                <option value="3">Mes ajouts</option>
            </select>
        </fieldset>
        <fieldset>
            <label for="objet">Objet : </label>
            <input id="objet" type="text" value="" name="objet">
        </fieldset>
        <input type="hidden" value="" id="htmlContent" name="content">
    </form>

    <div id="menuComposer" class="btn-group">
        <p class="btn btn-default disabled">Ajouter au contenu : </p>
    </div>

</div>


    <ul id="composerListe">

    </ul>
{% endblock %}


{% block append_javascript %}
<script>

    removeLink = '<a href="#" class="btn btn-default remove" onclick="if(confirm(\'Supprimer ?\')){$(this).parent().remove();} return false;">supprimer</a>';
    listTypeBlock = [];

    listTypeBlock['titre'] = '<li class="clearfix titre" data-type="titre">'+removeLink+'<input type="text" placeholder="titre..." value=""></li>';
    listTypeBlock['texte'] = '<li class="clearfix texte" data-type="texte">'+removeLink+'<textarea placeholder="Votre texte ici ..."></textarea></li>';
    listTypeBlock['lien'] = '<li class="clearfix lien" data-type="lien">'+removeLink+'<input type="text" value="" placeholder="lien"><textarea placeholder="Texte du lien"></textarea></li>';
    listTypeBlock['image'] = '<li class="clearfix image" data-type="image">'+removeLink+'<input type="hidden" value=""><a onclick="return upPicture(this);" href="#" class="btn add btn-default">Ajouter une image</a></li>';
    listTypeBlock['espace'] = '<li class="clearfix image" data-type="espace">'+removeLink+'<input type="hidden" value="<div style=\'height:1px;\'></div>">Espace</li>';

    for(index in listTypeBlock){
        $('#menuComposer').append('<a href="#" class="btn btn-default" data-type="'+index+'">'+index+'</a>');
    }

    $('#menuComposer a').on('click',function(e){
        e.preventDefault();
        console.log('test');
        $('#composerListe').append(listTypeBlock[$(this).attr('data-type')]);
    });

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

    function sendPreview(){
        objet = $('#objet').val();
        message = nl2br(createHtml(compileMessage()));
        $.post('{{ path('you_commercant_news_send_preview') }}',{objet:objet,content:message},function(data){
            alert('Apercu envoyé sur {{ user.email }} !')
        });

        return false;
    }

    function compileMessage(){
        var liste = {};
        var cpt = 0;
        $('#composerListe li').each(function(){
            var block = {};
            block.type = $(this).attr('data-type');
            if(block.type == 'texte'){
                block.contenu = '<div>'+$('textarea',this).val()+'</div>';
            }else if(block.type == 'lien'){
                block.contenu = '<a href="'+$('input',this).val()+'">'+$('textarea',this).val()+'</a>';
            }else if(block.type == 'image'){
                block.contenu = '<div><img src="'+$('input',this).val()+'" alt="" style="max-width:570px;" /></div>';
            }else{
                block.contenu = '<h4>'+$('input',this).val()+'</h4>';
            }
            liste[cpt] = block;
            cpt++;
        });

        return liste;
    }

    function createHtml(datas){

        var html = '';

        for(index in datas){

            html += datas[index].contenu;

        }
        return html;
    }
    $('#apercu').click(function(){
        $('#htmlContent').val(nl2br(createHtml(compileMessage())));
        $('#previewContent').html($('#htmlContent').val());
        $('#previewObject').html($('#objet').val());
        $('#previewMail').fadeIn();
    });

    function sendMail(){
        $('#htmlContent').val(nl2br(createHtml(compileMessage())));
        $('#formSendMail').submit();
    }

    var lastImgClick = false;
    function upPicture(elem){
        lastImgClick = elem;
        nino_OverlayShow(
                '{{ path('you_commercant_product_upload') }}',
                [

                    {text:'Annuler',class:'btn-default',action:'popup.cancel()'}

                ]
        );
        return false;
    }
    function setUploadEnd(id,path){
        $(lastImgClick).parent().append('<a href="'+path+'" target="_blank"><img src="'+path+'" style="max-width:300px;" /></a>').find('input').val(path);
        $(lastImgClick).remove();
        lastImgClick = false;
    }


</script>
{% endblock %}