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

{% block title %}{% trans %}ecd_emailing.template.edit.meta.title{% endtrans %}{% endblock %}

{% block content %}
<div id="overlay" style="
      display: none;
      top: 0px;
      left: 0px;
      right: 0px;
      min-height: 100%;
      background-color: #000000;
      z-index: 100;
      position: absolute;
      opacity: 0.7;
      padding-top: 300px;
    ">
    <div class="span4 offset6 progress progress-striped
     active" style="opacity: 1;">
      <div id="indicatorBar" class="bar" style="width: 10%;"></div>
    </div>
  </div>


<div class="row" style="width: 100%; margin-left: 0px; margin-bottom: 50px; position: fixed; top: 42px; height: 42px; border-bottom: thin #DDD solid; z-index: 1020; background-color: white;">
  <div class="container">
    <div class="btn-toolbar">
  <div class="btn-group">
                    <button type="submit" id="model_create" class="create-document btn">{% trans %}ecd_emailing.template.edit.button_update{% endtrans %}</button>
  </div>
   <div class="btn-group">
                    <a href="{{ path('ecd_emailing_template') }}" class="btn cancel">{% trans %}ecd_emailing.template.edit.link_cancel{% endtrans %}</a>
   </div>
 <div class="btn-group">
                    <a id="preview-button" class="btn btn-primary"><i class="icon-eye-open icon-white"></i> Preview</a>
 </div>
 <div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Injection de données utilisateur
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
      <li>&nbsp;{{ '{{' }} user.firstname {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.lastname {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.email {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.position {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.phone {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.cellphone {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.fax {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.delivery_name {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.delivery_address {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.delivery_zipcode {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.delivery_city {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.delivery_country {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.bill_name {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.bill_address {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.bill_zipcode {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.bill_city {{ '}}' }}</li>
      <li>&nbsp;{{ '{{' }} user.bill_country {{ '}}' }}</li>
    </ul>       
   </div>
{% if template.model %}
<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    {% trans %}Formulaire{% endtrans %}
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    {% include 'EcdEmailingBundle:Template:field_group.html.twig' with {'fields': template.model.rootField.children } %}
  </ul>
</div>
 {% endif %}

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

<div class="container" style="margin-top: 20px;">
        <div class="page-header">
                <h1>{% trans %}ecd_emailing.template.edit.title{% endtrans %}</h1>
        </div>
</div>

<div class="ecd_emailing_template container-fluid" id="emailing-template-editor">

        <div id="model-editor" class="span2">
            <div class="model">
                <div id="recipient-variable">
                    {%include 'EcdEmailingBundle:Template:recipient.html.twig' with {'template' : template, 'formAdditionalField': formAdditionalField}%}

                </div>
                
                <div class="images">
                    <h2>{% trans %}ecd_emailing.template.edit.title_image{% endtrans %}</h2>
                    <p>{% trans %}ecd_emailing.template.edit.info_image{% endtrans %}</p>
                    {% render 'EcdEmailingBundle:TemplateImage:index' with {'templateId': template.id} %}
                </div>
            </div>
        </div>
        
        

            <input type="hidden" name="_method" value="PUT" />
            <div class="editor">

                {{ form_errors(form) }}

                        
                        <div id="tabs-edit" style="width: 760px; height: 600px;" class="span8">
                <form id="template_form" action="{{ path('ecd_emailing_template_update', {'id': template.id}) }}" method="post">
                    {{ form_row(form.subject) }}
                    {{ form_row(form.body, {'attr': {'height': '60'}}) }}
                    {{ form_row(form.text_body, {'attr': {'height': '60'}}) }}
                    {{ form_rest(form) }}
                </form>
                    </div>
                    
                    <div id="tabs-preview" class="span8">
                     <h3>{% trans %}ecd_emailing.template.edit.tab_preview{% endtrans %}</h3>
                        <strong>Objet : </strong><span class="subject"></span><br />
                        <iframe name="preview-body"style="width: 750px; height: 600px;" src="{{ path('ecd_emailing_template_preview_empty_body') }}"></iframe>
                    </div>
                </div>





            </div>

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
        
<link rel="stylesheet" type="text/css" media="all" href="/emailing/codemirror/codemirror.css" />
<script src="/emailing/codemirror/codemirror.js"></script>
<script src="/emailing/codemirror/xml.js"></script>
<script src="/emailing/codemirror/javascript.js"></script>
<script src="/emailing/codemirror/css.js"></script>
<script src="/emailing/codemirror/htmlmixed.js"></script>
<script type="text/javascript">
  jQuery(function($) {
        
      $('#emailing-template-editor').emailingTemplateEditor({
          fieldSubject:   '#{{ form.subject.all.id }}',
          fieldBody:      '#{{ form.body.all.id }}',
          urlPreview:     '{{ path('ecd_emailing_template_preview', {'id': template.id}) }}',
          codemirror:     CodeMirror.fromTextArea(document.getElementById("ecd_emailing_template_body"), {mode: "text/html",
                                                                               tabMode: "indent",
                                                                               lineNumbers: true,
                                                                               matchBrackets: true}
                                                                               )
      });
  });

                        jQuery(function($) {
                            $(".delete-link-additionalFields").on('click', function (event) {
                                var href = $(this).attr('href');
                                $.ajax({
                                    type: "POST",
                                    url: href
                                }).done(function(html) {
                                    $("#recipient-variable").html(html);
                                });

                                return false;
                            });

                            $("#recipient-add-variable").on('submit', function (event) {
                                var data = '';
                                $("#recipient-add-variable input").each(function () {
                                  data = data + $(this).attr('name')+"="+$(this).val()+"&";
                                  });
                                var href = $(this).attr('action');
                                var input = $(this).find('input');
                                $.ajax({
                                    type: "POST",
                                    url: href,
                                    data: data
                                }).done(function(html) {
                                    $("#recipient-variable").html(html);
                                    $('#recipient-add-variable input[type="text"]').val(' ');
                                });

                                return false;
                            });
                        });
                    </script>
<div class="modal hide fade" id="image-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Image</h3>
  </div>
  <div class="modal-body" id="image-modal-body">
  </div>
  <div class="modal-footer">
    <a href="#" onclick="$('#image-modal form').submit()" class="btn btn-primary">Enregistrer</a>
  </div>
</div>
{% endblock %}