<% layout('../layouts/main') -%>
<% script('https://cdn.ckeditor.com/4.5.7/full/ckeditor.js') %>
<% script('/js/form-validation/bannerList.js') -%>


<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Edit Banner
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/banner">Banner</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" enctype="multipart/form-data">
      <div class="box-header with-border">
        <h3 class="box-title">Edit Banner</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 -->
      <input type="hidden" name="bannerTypeId" id="bannerTypeId" value="<%= doc.bannerTypeId._id %>" />
      <input type="hidden" name="height" id="height" value="<%= doc.bannerTypeId.height %>" />
      <input type="hidden" name="width" id="width" value="<%= doc.bannerTypeId.width %>" />
      <input type="hidden" name="existImage" id="existImage" value="<%= doc.bannerImage %>" />
      <div class="box-body">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="bannerType">Banner Type</label><em>*</em>
                    <select name="bannerType" id="bannerType" class="form-control required" onchange="getBannerValue(this.value);">
                        <option value="">Select Banner Type</option>
                        <%
                        for(var i=0; i<bannerType.length; i++){
                        %>
                        <option value="<%= bannerType[i]._id %>@@<%= bannerType[i].height %>@@<%= bannerType[i].width %>" <%= (doc.bannerTypeId._id.toString()==bannerType[i]._id.toString())? 'selected':'' %> ><%= bannerType[i].en_name %></option>
                        <%
                        }
                        %>
                    </select>
                    <h5 class="text-danger" id="bannerType_error"></h5>
                </div>
            </div>
        </div>

        <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+'_header'%>">Header Message</label>
                      <textarea class="form-control" name="<%= language[i].lang+'_header'%>" id="<%= language[i].lang+'_header'%>"><%= doc[language[i].lang+'_header'] %></textarea>
                      <h5 class="text-danger" id="<%= language[i].lang+'_header'%>_error"></h5>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="<%= language[i].lang+'_bottom'%>">Bottom Message</label>
                      <textarea class="form-control" name="<%= language[i].lang+'_bottom'%>" id="<%= language[i].lang+'_bottom'%>"><%= doc[language[i].lang+'_bottom'] %></textarea>
                      <h5 class="text-danger" id="<%= language[i].lang+'_bottom'%>_error"></h5>
                    </div>
                  </div>
                </div>
              </div>
              <% 
              }
              %>
            </div>
          </div>
        </div>
        
        
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="categories">Image File</label><em>*</em>
                    <input id="image" name="image" type="file" class="form-control required" accept="image/*"  />
                    <h5 class="text-danger" id="image_error"></h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="categories">Pagelink</label><em>*</em>
                    <input id="bannerLink" name="bannerLink" type="text" class="form-control required" value="<%= doc.bannerLink %>" />
                    <h5 class="text-danger" id="bannerLink_error"></h5>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="timeline-item">
                <div class="timeline-body" id="preview">
                <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="categories">Exist Image</label><em>*</em>
                    <img src="<%= doc.imageLink %>" alt="..." class="form-control" style="width: 150px; height: 100px;">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="width">Ranking position</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 -->