<% layout('../layouts/main') -%>
<% script('https://cdn.ckeditor.com/4.5.7/full/ckeditor.js') %>
<% script('/js/form-validation/bannerType.js') -%>


<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Edit Banner Type
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/bannerType">Banner Type</a></li>
    <li class="active">Edit</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <% if (Object.prototype.hasOwnProperty.call(flash, 'success')) { %>
    <div class="alert alert-success alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <%= flash.success %>
    </div>
  <% } %>
  <% if (Object.prototype.hasOwnProperty.call(flash, 'error')) { %>
    <div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <%= flash.error %>
    </div>
  <% } %>
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <h3 class="box-title">Edit Banner Type</h3>

        <!--<div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
        </div>-->
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <div class="row">
          <div class="col-md-12">
            <div class="nav-tabs-custom">
              <ul class="nav nav-tabs">
                  <% for(var i=0; i<language.length; i++){
                    if(i==0){
                  %>
                  <li class="active"><a href="<%= '#'+language[i].name %>" data-toggle="tab" id="<%= language[i].lang+'_tag' %>"><%= language[i].name %></a>
                  <%
                    }else{
                  %>
                  <li><a href="<%= '#'+language[i].name %>" data-toggle="tab" id="<%= language[i].lang+'_tag' %>"><%= language[i].name %></a></li>
                  <%
                    }
                  } %>
              </ul>
              
            </div>

            <div class="tab-content">
              <%
              for(var i=0; i<language.length; i++){
                var activeTab = "";
                if(i==0){
                  activeTab = "active";
                }
              %>
              <div class="tab-pane <%= activeTab %>" id="<%= language[i].name %>">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group ">
                      <label for="<%= language[i].lang+'_name'%>">Banner Type Name</label><em>*</em>
                      <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                      <input name="<%= language[i].lang+'_name'%>" value="<%= doc[language[i].lang+'_name'] %>" id="<%= language[i].lang+'_name'%>"
                        class="form-control required" placeholder="Banner Type Name" type="text" data-attr="language">
                      <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                      <h5 class="text-danger" id="<%= language[i].lang+'_name'%>_error"></h5>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="<%= language[i].lang+'_title'%>">Title text</label><em>*</em>
                      <textarea class="form-control required" name="<%= language[i].lang+'_title'%>" id="<%= language[i].lang+'_title'%>" data-attr="language"><%= doc[language[i].lang+'_title'] %></textarea>
                      <h5 class="text-danger" id="<%= language[i].lang+'_title'%>_error"></h5>
                    </div>
                  </div>
                </div>
              </div>
              <% 
              }
              %>
            </div>
          </div>
        </div>
        
        
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="height">Banner Height</label><em>*</em>
                    <input id="height" name="height" type="number" class="form-control required" oninput="this.value = Math.abs(this.value)" value="<%= doc.height %>" />
                    <h5 class="text-danger" id="height_error"></h5>
                </div>
            </div>


            <div class="col-md-6">
                <div class="form-group">
                    <label for="width">Banner Width</label><em>*</em>
                    <input id="width" name="width" type="number" class="form-control required" oninput="this.value = Math.abs(this.value)" value="<%= doc.width %>" />
                    <h5 class="text-danger" id="width_error"></h5>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="width">Ranking position on entrance page</label><em>*</em>
                    <select name="ranking" id="ranking" class="form-control required">
                        <option value="">Select Ranking</option>
                        <%
                        for(var i=1; i<=12; i++){
                          %>
                        <option value="<%= i %>" <%= (doc.ranking===i)? 'selected':'' %>><%= i %></option>
                          <%
                        } 
                        %>
                    </select>
                    <h5 class="text-danger" id="ranking_error"></h5>
                </div>
            </div>
        </div>
        
      </div>
      <!-- /.row -->
      <div class="box-footer">
        <div class="pull-left">
          <p class="text-success">
          </p>
        </div>
        <div class="pull-right">
          <a onclick="goBack();" class="btn btn-primary" role="button">Cancel</a>
          <!-- <input name="submit" value="Submit" class="btn btn-primary" type="submit"> -->
          <input value="Submit" class="btn btn-primary" type="button" id="submitButton">
        </div>
      </div>
      <!--<div class="box-footer">
          Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
          the plugin.
      </div>-->
    </form>
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->