{% extends 'templates/callluge/site_layout.html' %}
{% block content %}
{% load app_filters %}

<div class="widget-box">
    <div class="col-md-12 col-sm-12">
        <div class="widget-title">
            <h2>Title</h2>
        </div>
    </div>
    <div id="msg_div" style="padding-left: 0;display: none;"></div>

    

    <div class="widget-content no-padding add-sear-pos-slide">
      <div class="col-md-12">

            <div class="cust-fields-block" style="margin-top: 15px;">

            <ul>
                     {% for i in context %}
                       <input type="hidden" id="hid_{{i}}" value="no" />

              <li>             
                 <div class="row" style="margin-top: 10px;"> 

                 <div class="col-md-2 col-sm-2">
                   Custom {{i}}
                 </div>      
                    {% for value in customfields %}    

                      {% if value.field_id == i %} 
                        <script type="text/javascript">
                          $('#hid_{{i}}').val('{{i}}');
                        </script>

                        <div class="col-md-2 col-sm-2 no-padding">
                            <span class="clabel">
                              <label for="">
                                  {{value.label}}
                              </label>
                            </span>
                        </div>
                      

                        <div class="col-md-2 col-sm-3">
                          <select tabindex="1" class="form-control cf-select">
                            {% for key,menu in value.data.items %}
                              <option value="{{menu}}">{{key}}</option>
                            {% endfor %}
                          </select>
                        </div>

                        <div class="col-md-2 col-sm-2 no-padding">
                            <div class="action cfields">
                              <a tabindex="5" tooltip="Edit" flow="left" href="/campaigns/updatefield/{{i}}"><i class="icon-edit"></i></a>
                              <a tabindex="6" tooltip="Remove" flow="left" href='javascript:void(0);'  onclick="deleteCustomFields('{{value.pid}}')"><i class="icon-delete"></i></a>
                            </div>
                        </div>

                {% endif %}
                {% endfor %}  
                  <div class="col-md-2 col-sm-1 div_configure_{{i}}">
                    <i>{{value.field_id}}not configured</i>
                  </div>
                  <div class="col-md-2 col-sm-1 div_configure_{{i}}">
                    <a href="/campaigns/addfield/{{i}}">Configure</a>
                  </div>
                  <script type="text/javascript">
                    if($('#hid_{{i}}').val() != 'no' ){
                      $('.div_configure_{{i}}').hide();
                    }
                  </script>
              {% endfor %}
              </div>
              <br>
              </li>
                    
            <!-- static item -->
               <!--  <li>
                    <div class="container">
                        <div class="row">
                            <div class='col-md-offset-2 col-md-2'>
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                            $(function () {
                            $('#datetimepicker1').daterangepicker();
                            });
                            </script>
                        </div>
                    </div>
                </li> -->
            </ul>

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




</div>
<script>
function deleteCustomFields(pid){
    $(this).hide();
$.ajax({
                type: "POST",
                dataType: 'json',
                url: "/campaigns/deletefield/",
                data: {'pid':pid,'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success: function (data) {
$("#msg_div").show().addClass('success');
                   $("#msg_div").html("<i class='glyphicon glyphicon-ok-sign'></i><span style='color: green; padding: 0 0 15px 0;'>Deleted Successfully.</span>");
                   setTimeout(function(){ location.reload(); }, 5000);              
            },
                error: function(data) {

                    console.log(data);
                    }
                });
 


}
jQuery(document).ready(function($) {
  $('.cf-select').select2({
    minimumResultsForSearch: -1
  });
});
</script>
{% endblock %}