<% layout('../layouts/main') -%>
<% script('/js/form-validation/place.js') -%>


<% block('custom_style', `
<style type="text/css">
  em{
    color: red
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Edit Place
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/place">Place</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 Place</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="form-group">
              <label>Zone</label><em>*</em>
              <select name="zone" id="zone" class="form-control required">
                <option value="">Select Zone</option>
                <%
                for(var i=0; i<zones.length; i++){
                  %>
                <option value="<%= zones[i]._id %>" <%- doc.zone==zones[i]._id? 'selected': '' %>><%= zones[i].name %></option>
                  <%
                } 
                %>
              </select>
              <h5 class="text-danger" id="zone_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>Name</label><em>*</em>
                      <%
                        var displayName= "";
                        if(language[i].lang=='en') {
                          displayName = doc.name;
                        } else {
                          displayName = doc[language[i].lang+'_name'];
                        }
                      %>
                      <input name="<%= language[i].lang+'_name'%>" value="<%= displayName %>" id="<%= language[i].lang+'_name'%>"
                        class="form-control required" placeholder="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>
              </div>
              <% 
              }
              %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Ranking</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 class="row">
          <div class="col-md-6">
            <div class="form-group ">
              <label>Name</label><em>*</em>
              <input name="name" value="<%= flash.data_name || '' %>" id="name" class="form-control" placeholder="Name"
                data-validation="required" type="text">
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_name %>
              </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 -->