{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-user" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>Election</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-user" class="form-horizontal">

          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-general" data-toggle="tab">General</a></li>
            <li><a href="#tab-president" data-toggle="tab">President</a></li>
            <li><a href="#tab-secretary" data-toggle="tab">Secretary</a></li>
            <li><a href="#tab-jsecretary" data-toggle="tab">Joint Secretary</a></li>
            <li><a href="#tab-treasurer" data-toggle="tab">Treasurer</a></li>
            <li><a href="#tab-zpresident" data-toggle="tab">Zonal President/Zonal Councillor</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-general">
              <div class="form-group required">
                <label class="col-sm-2 control-label" for="input-title">Title</label>
                <div class="col-sm-10">
                  <input type="text" name="title" value="{{ title }}" placeholder="Election Title" required id="input-title" class="form-control" />
                </div>
              </div>

              <div class="form-group required">
                <label class="col-sm-2 control-label" for="input-year">Year</label>
                <div class="col-sm-10">
                  <input type="number"  name="year" value="{{ year }}" placeholder="Year eg. 2020" required id="input-year" class="form-control" />
                </div>
              </div>

              <div class="form-group required">
                <label class="col-sm-2 control-label" for="input-description{{ language.language_id }}">Notice</label>
                <div class="col-sm-10">
                  <textarea name="notice" id="" data-toggle="summernote" data-lang="{{ summernote }}" class="form-control">{{ notice }}</textarea>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                <div class="col-sm-10">
                  <select name="status" id="input-status" class="form-control">
                    {% if status %}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                    {% else %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="tab-president">
                <div class="col-sm-12">
                  <fieldset>
                    <table id="proute" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left" width="15%">Image</td>
                          <td class="text-left" width="25%">Presidents</td>
                          <td class="text-left" width="60%">Information</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% set president_row = 0 %}
                        {% for president in presidents %}
                        <tr id="proute-row{{ president_row }}">
                          <td>
                            <div class="col-sm-10"><a href="" id="thumb-president{{ president_row }}image" data-toggle="image" class="img-thumbnail"><img src="{{ president.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="president[{{ president_row }}][image]" value="{{ president.image }}" id="input-president{{ president_row }}image" />
                            </div>
                          </td>
                          <td class="text-left">
                            <input type="text" name="president[{{ president_row }}][name]" value="{{ president.name }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="president[{{ president_row }}][nominee_id]" value="{{ president.nominee_id }}" placeholder="Nominee ID" class="form-control" /><br>
                            <input type="text" name="president[{{ president_row }}][designation]" value="{{ president.designation }}" placeholder="Designation" class="form-control" />
                            
                          </td>
                          <td class="text-left">
                            <textarea class="form-control" name="president[{{ president_row }}][about]" placeholder="About Nominee" rows="8">{{ president.about }}</textarea>
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#proute-row{{ president_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set president_row = president_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="3"></td>
                          <td class="text-left"><button type="button" onclick="addPresident();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </fieldset>
                </div>
            </div>
            <div class="tab-pane" id="tab-secretary">
                <div class="col-sm-12">
                  <fieldset>
                    <table id="sroute" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left" width="15%">Image</td>
                          <td class="text-left" width="25%">Secretary</td>
                          <td class="text-left" width="60%">Information</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% set secretary_row = 0 %}
                        {% for secretary in secretaries %}
                        <tr id="sroute-row{{ secretary_row }}">
                          <td>
                            <div class="col-sm-10"><a href="" id="thumb-secretary{{ secretary_row }}image" data-toggle="image" class="img-thumbnail"><img src="{{ secretary.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="secretary[{{ secretary_row }}][image]" value="{{ secretary.image }}" id="input-secretary{{ secretary_row }}image" />
                            </div>
                          </td>
                          <td class="text-left">
                            <input type="text" name="secretary[{{ secretary_row }}][name]" value="{{ secretary.name }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="number" name="secretary[{{ secretary_row }}][id]" value="{{ secretary.nominee_id }}" placeholder="Nominee ID" class="form-control" /><br>
                            <input type="text" name="secretary[{{ secretary_row }}][designation]" value="{{ secretary.designation }}" placeholder="Designation" class="form-control" />
                          </td>
                          <td class="text-left">
                            <textarea class="form-control" name="secretary[{{ secretary_row }}][about]" placeholder="About Nominee" rows="8">{{ secretary.about }}</textarea>
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#sroute-row{{ secretary_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set secretary_row = secretary_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="3"></td>
                          <td class="text-left"><button type="button" onclick="addSecretary();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </fieldset>
                </div>
            </div>
            <div class="tab-pane" id="tab-jsecretary">
                <div class="col-sm-12">
                  <fieldset>
                    <table id="jsroute" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left" width="15%">Image</td>
                          <td class="text-left" width="25%">Joint Secretary</td>
                          <td class="text-left" width="60%">Information</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% set jsecretary_row = 0 %}
                        {% for jsecretary in jsecretaries %}
                        <tr id="jsroute-row{{ jsecretary_row }}">
                          <td>
                            <div class="col-sm-10"><a href="" id="thumb-jsecretary{{ jsecretary_row }}image" data-toggle="image" class="img-thumbnail"><img src="{{ jsecretary.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="jsecretary[{{ jsecretary_row }}][image]" value="{{ jsecretary.image }}" id="input-jsecretary{{ jsecretary_row }}image" />
                            </div>
                          </td>
                          <td class="text-left">
                            <input type="text" name="jsecretary[{{ jsecretary_row }}][name]" value="{{ jsecretary.name }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="nnumber" name="jsecretary[{{ jsecretary_row }}][id]" value="{{ jsecretary.nominee_id }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="jsecretary[{{ jsecretary_row }}][designation]" value="{{ jsecretary.designation }}" placeholder="Designation" class="form-control" />
                          </td>
                          <td class="text-left">
                            <textarea class="form-control" name="jsecretary[{{ jsecretary_row }}][about]" placeholder="About Nominee" rows="8">{{ jsecretary.about }}</textarea>
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#jsroute-row{{ jsecretary_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set jsecretary_row = jsecretary_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="3"></td>
                          <td class="text-left"><button type="button" onclick="addJsecretary();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </fieldset>
                </div>
            </div>
            <div class="tab-pane" id="tab-treasurer">
                <div class="col-sm-12">
                  <fieldset>
                    <table id="troute" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left" width="15%">Image</td>
                          <td class="text-left" width="25%">Treasurer</td>
                          <td class="text-left" width="60%">Information</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% set treasurer_row = 0 %}
                        {% for treasurer in treasurers %}
                        <tr id="troute-row{{ treasurer_row }}">
                          <td>
                            <div class="col-sm-10"><a href="" id="thumb-treasurer{{ treasurer_row }}image" data-toggle="image" class="img-thumbnail"><img src="{{ treasurer.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="treasurer[{{ treasurer_row }}][image]" value="{{ treasurer.image }}" id="input-treasurer{{ treasurer_row }}image" />
                            </div>
                          </td>
                          <td class="text-left">
                            <input type="text" name="treasurer[{{ treasurer_row }}][name]" value="{{ treasurer.name }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="treasurer[{{ treasurer_row }}][id]" value="{{ treasurer.nominee_id }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="treasurer[{{ treasurer_row }}][designation]" value="{{ treasurer.designation }}" placeholder="Designation" class="form-control" />
                          </td>
                          <td class="text-left">
                            <textarea class="form-control" name="treasurer[{{ treasurer_row }}][about]" placeholder="About Nominee" rows="8">{{ treasurer.about }}</textarea>
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#troute-row{{ treasurer_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set treasurer_row = treasurer_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="3"></td>
                          <td class="text-left"><button type="button" onclick="addTreasurer();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </fieldset>
                </div>
            </div>
            <div class="tab-pane" id="tab-zpresident">
                <div class="col-sm-12">
                  <fieldset>
                    <table id="zroute" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left" width="20%">Zone/Image</td>
                          <td class="text-left" width="20%">Zonal President & Councillor</td>
                          <td class="text-left" width="60%">Information</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% set zonal_row = 0 %}
                        {% for zonal in zonal_nominees %}
                        <tr id="zroute-row{{ zonal_row }}">
                          <td class="text-left">

                            <select name="zonal[{{ zonal_row }}][zone]" class="form-control">
                                {% for zone in zones %}
                                  <option value="{{zone.code}}" {% if zonal.zone == zone.code %} selected {% endif %}>{{zone.name}}</option>
                                {% endfor %}
                            </select>

                            <br>
                            <p class="text-center"><b>President Image</b></p>
                            <div class="col-sm-12 text-center"><a href="" id="thumb-zonal{{ zonal_row }}pimage" data-toggle="image" class="img-thumbnail"><img src="{{ zonal.pthumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="zonal[{{ zonal_row }}][pimage]" value="{{ zonal.pimage }}" id="input-zonal{{ zonal_row }}pimage" />
                            </div>

                            <br>
                            <p class="text-center"><b>Councillor Image</b></p>
                              <div class="col-sm-12 text-center"><a href="" id="thumb-zonal{{ zonal_row }}cimage" data-toggle="image" class="img-thumbnail"><img src="{{ zonal.cthumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                              <input type="hidden" name="zonal[{{ zonal_row }}][cimage]" value="{{ zonal.cimage }}" id="input-zonal{{ zonal_row }}cimage" />
                            </div>

                          </td>
                          <td class="text-left">
                            <input type="text" name="zonal[{{ zonal_row }}][pname]" value="{{ zonal.pname }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="number" name="zonal[{{ zonal_row }}][pid]" value="{{ zonal.pid }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="zonal[{{ zonal_row }}][pdesignation]" value="{{ zonal.pdesignation }}" placeholder="Designation" class="form-control" /><br>
                            <input type="text" name="zonal[{{ zonal_row }}][cname]" value="{{ zonal.cname }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="number" name="zonal[{{ zonal_row }}][cid]" value="{{ zonal.cid }}" placeholder="Nominee" class="form-control" /><br>
                            <input type="text" name="zonal[{{ zonal_row }}][cdesignation]" value="{{ zonal.cdesignation }}" placeholder="Designation" class="form-control" />
                          </td>
                          <td class="text-left">
                            <textarea class="form-control" name="zonal[{{ zonal_row }}][pabout]" placeholder="About Nominee" rows="8">{{ zonal.pabout }}</textarea><br>
                            <textarea class="form-control" name="zonal[{{ zonal_row }}][cabout]" placeholder="About Nominee" rows="8">{{ zonal.cabout }}</textarea>
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#zroute-row{{ zonal_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set zonal_row = zonal_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="3"></td>
                          <td class="text-left"><button type="button" onclick="addZonal();" data-toggle="tooltip" title="{{ button_route_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </fieldset>
                </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">

function productNameComplete(obj,product_row,election_id){
    $("#"+obj.id).autocomplete({
    'source': function(request, response){
        $.ajax({
            url: 'index.php?route=election/main/autocomplete&token={{token}}&filter_name=' +obj.value,
            data: {'election_id':election_id},
            dataType: 'json',
            success: function(json){ aconsole.log(json);
                response($.map(json, function(item){
                    return {
                        label: item['name'],
                        value: item['name'],
                        customer_id: item['customer_id'],
                        designation: item['designation'],
                        address: item['address']
                    }
                }));
            }
        });
    },
    appendTo: "#list_"+obj.id,
    open: function() {
        var position = $("#list_"+obj.id).position(),
        left = position.left, top = position.top;
        
        $("#list_"+obj.id+" > ul").css({left: (left + 20) + "px",top: (top + 4) + "px" });
        
    },

    select: function( event, ui ){
        $("#"+obj.id).val(ui.item.label);
        $("#id_"+obj.id).val(ui.item.customer_id);
        $("#add_"+obj.id).html(ui.item.address);
        if (ui.item.designation != ''){
            $("#des_"+obj.id).html(ui.item.designation);
        }
    }
  });
}
</script>
<script type="text/javascript"><!--
var president_row = {{ president_row }};
var secretary_row = {{ secretary_row }};
var jsecretary_row = {{ jsecretary_row }};
var treasurer_row = {{ treasurer_row }};
var zonal_row = {{ zonal_row }};

function addPresident() {
  html  = '<tr id="proute-row' + president_row + '">';
  html  += ' <td class="text-left"><div class="col-sm-10"><a href="" id="thumb-president' + president_row + 'image" data-toggle="image" class="img-thumbnail"><img src="{{jsthumbnail}}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="president[' + president_row + '][image]" value="" id="input-president' + president_row + 'image" /></td>';
  html += '  <td class="text-left"><input type="text" id="presidentrow_' + president_row + '_name"  name="president[' + president_row + '][name]" value="" placeholder="Nominee" class="form-control" /><br><input type="number" id="presidentrow_' + president_row + '_id" name="president[' + president_row + '][id]" value="" placeholder="Nominee ID" class="form-control" /><br><input type="text" name="president[' + president_row + '][designation]" value="" placeholder="Designation" class="form-control" /></td>';
  html += '  <td class="text-left"><textarea class="form-control" name="president[' + president_row + '][about]" placeholder="About Nominee" rows="8"></textarea></td>';
  html += '  <td class="text-left"><button type="button" onclick="$(\'#proute-row' + president_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';
  
  $('#proute tbody').append(html);
  
  president_row++;
}

function addSecretary() {
  html  = '<tr id="sroute-row' + secretary_row + '">';

  html  += ' <td class="text-left"><div class="col-sm-10"><a href="" id="thumb-secretary' + secretary_row + 'image" data-toggle="image" class="img-thumbnail"><img src="{{jsthumbnail}}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="secretary[' + secretary_row + '][image]" value="" id="input-secretary' + secretary_row + 'image" /></td>';

  html += '  <td class="text-left"><input type="text" name="secretary[' + secretary_row + '][name]" value="" placeholder="Nominee" class="form-control" /><br><input type="number" name="secretary[' + secretary_row + '][id]" value="" placeholder="Nominee ID" class="form-control" /><br><input type="text" name="secretary[' + secretary_row + '][designation]" value="" placeholder="Designation" class="form-control" /></td>';
  html += '  <td class="text-left"><textarea class="form-control" name="secretary[' + secretary_row + '][about]" placeholder="About Nominee" rows="8"></textarea></td>';
  html += '  <td class="text-left"><button type="button" onclick="$(\'#sroute-row' + secretary_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';
  
  $('#sroute tbody').append(html);
  
  secretary_row++;
}

function addJsecretary() {
  html  = '<tr id="jsroute-row' + jsecretary_row + '">';

  html  += ' <td class="text-left"><div class="col-sm-10"><a href="" id="thumb-jsecretary' + jsecretary_row + 'image" data-toggle="image" class="img-thumbnail"><img src="{{jsthumbnail}}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="jsecretary[' + jsecretary_row + '][image]" value="" id="input-jsecretary' + jsecretary_row + 'image" /></td>';

  html += '  <td class="text-left"><input type="text" name="jsecretary[' + jsecretary_row + '][name]" value="" placeholder="Nominee" class="form-control" /><br><input type="number" name="jsecretary[' + jsecretary_row + '][id]" value="" placeholder="Nominee ID" class="form-control" /><br><input type="text" name="jsecretary[' + jsecretary_row + '][designation]" value="" placeholder="Designation" class="form-control" /></td>';
  html += '  <td class="text-left"><textarea class="form-control" name="jsecretary[' + jsecretary_row + '][about]" placeholder="About Nominee" rows="8"></textarea></td>';
  html += '  <td class="text-left"><button type="button" onclick="$(\'#jsroute-row' + jsecretary_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';
  
  $('#jsroute tbody').append(html);
  
  jsecretary_row++;
}

function addTreasurer() {
  html  = '<tr id="troute-row' + treasurer_row + '">';

  html  += ' <td class="text-left"><div class="col-sm-10"><a href="" id="thumb-treasurer' + treasurer_row + 'image" data-toggle="image" class="img-thumbnail"><img src="{{jsthumbnail}}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="treasurer[' + treasurer_row + '][image]" value="" id="input-treasurer' + treasurer_row + 'image" /></td>';

  html += '  <td class="text-left"><input type="text" name="treasurer[' + treasurer_row + '][name]" value="" placeholder="Nominee" class="form-control" /><br><input type="number" name="treasurer[' + treasurer_row + '][id]" value="" placeholder="Nominee ID" class="form-control" /><br><input type="text" name="treasurer[' + treasurer_row + '][designation]" value="" placeholder="Designation" class="form-control" /></td>';
  html += '  <td class="text-left"><textarea class="form-control" name="treasurer[' + treasurer_row + '][about]" placeholder="About Nominee" rows="8"></textarea></td>';
  html += '  <td class="text-left"><button type="button" onclick="$(\'#troute-row' + treasurer_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';
  
  $('#troute tbody').append(html);
  
  treasurer_row++;
}

function addZonal() {
  
  html  = '<tr id="zroute-row' + zonal_row + '">';
  html += '  <td class="text-left"><select name="zonal[' + zonal_row + '][zone]" class="form-control">';

  {% for zone in zones %}
  html += '<option value="{{zone.code}}">{{zone.name}}</option>';
  {% endfor %}

  html += '</select>  ';

  html  += '<br><p class="text-center"><b>President Image</b></p><div class="col-sm-12 text-center"><a href="" id="thumb-zonal' + zonal_row + 'pimage" data-toggle="image" class="img-thumbnail"><img src="{{ jsthumbnail }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="zonal[' + zonal_row + '][pimage]" value="" id="input-zonal' + zonal_row + 'pimage" /></div><br><p class="text-center"><b>Councillor Image</b></p><div class="col-sm-12 text-center"><a href="" id="thumb-zonal' + zonal_row + 'cimage" data-toggle="image" class="img-thumbnail"><img src="{{ jsthumbnail }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="zonal[' + zonal_row + '][cimage]" value="" id="input-zonal' + zonal_row + 'cimage" /></div>';
  
  html  += ' </td>';

  html += '  <td class="text-left"><input type="text" name="zonal[' + zonal_row + '][pname]" value="" placeholder="President Name" class="form-control" /><br><input type="number" name="zonal[' + zonal_row + '][pid]" value="" placeholder="President ID" class="form-control" /><br><input type="text" name="zonal[' + zonal_row + '][pdesignation]" value="" placeholder=" President Designation" class="form-control" /><br><input type="text" name="zonal[' + zonal_row + '][cname]" value="" placeholder="Councillor Name" class="form-control" /><br><input type="number" name="zonal[' + zonal_row + '][cid]" value="" placeholder="Councillor ID" class="form-control" /><br><input type="text" name="zonal[' + zonal_row + '][cdesignation]" value="" placeholder="Councillor Designation" class="form-control" /></td>';
  html += '  <td class="text-left"><textarea class="form-control" name="zonal[' + zonal_row + '][pabout]" placeholder="About President" rows="8"></textarea><br><textarea class="form-control" name="zonal[' + zonal_row + '][cabout]" placeholder="About Councillor" rows="8"></textarea></td>';
  html += '  <td class="text-left"><button type="button" onclick="$(\'#zroute-row' + zonal_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';
  
  $('#zroute tbody').append(html);
  
  zonal_row++;
}

//--></script>
<link href="view/javascript/codemirror/lib/codemirror.css" rel="stylesheet" />
  <link href="view/javascript/codemirror/theme/monokai.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script> 
  <script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
  <link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/summernote/summernote-image-attributes.js"></script> 
  <script type="text/javascript" src="view/javascript/summernote/opencart.js"></script> 
  <script type="text/javascript"><!--
$('#language a:first').tab('show');
//--></script></div>
{{ footer }}