<% layout('../layouts/main') -%>
<% stylesheet('/css/select2.min.css') %>
<% script('/js/select2.full.min.js') %>
<% script('/js/form-validation/cancelCondition.js') -%>


<% block('custom_style', `
<style type="text/css">
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #2a83a7;
    border: 1px solid #2a83a7;
  }
  em{
    color: red
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Add Cancel Condition
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/cancelCondition">Cancel Condition</a></li>
    <li class="active">Add</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">New Cancel Condition</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>Cancel Condition Name</label><em>*</em>
                      <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                      <input name="<%= language[i].lang+'_name'%>" value="" id="<%= language[i].lang+'_name'%>"
                        class="form-control required" placeholder="Cancel Condition 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>Type</label><em>*</em>
                    <select name="cancel_type_id" id="cancel_type_id" class="form-control required">
                        <option value="">Select Type</option>
                        <%
                        for(var i=0; i<cancelType.length; i++){
                        %>
                        <option value="<%= cancelType[i]._id %>"><%= cancelType[i].en_name %></option>
                        <%
                        } 
                        %>
                    </select>
                    <h5 class="text-danger" id="cancel_type_id_error"></h5>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Rate Number</label><em>*</em>
                    <input name="rate_number" value="" id="rate_number" class="form-control required" placeholder="00.00" type="number" step="0.01" onkeypress="return GFG_Fun(this, event)" >
                    <h5 class="text-danger" id="rate_number_error"></h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Rate Category</label><em>*</em>
                    <select name="rate_category" id="rate_category" class="form-control required">
                        <option value="">Select Rate Type</option>
                        <option value="%">%</option>
                        <option value="Euro">Euro</option>
                    </select>
                    <h5 class="text-danger" id="rate_category_error"></h5>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Hour</label><em>*</em>
                    <input name="cancel_hour" value="" id="cancel_hour" class="form-control required" placeholder="0" type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" step="1" min="-760" max="0">
                    <h5 class="text-danger" id="cancel_hour_error"></h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Minute</label><em>*</em>
                    <input name="cancel_minute" value="" id="cancel_minute" class="form-control required" placeholder="0" type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" step="1" min="-60" max="0">
                    <h5 class="text-danger" id="cancel_minute_error"></h5>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="categories">Category</label><em>*</em>
                    <select id="categories" class="form-control select2 required" multiple="multiple" name="categories[]">
                        <% for(idx in category) { %>
                        <option value="<%= category[idx]._id %>">
                        <%= category[idx].en_name %>
                        </option>
                        <%}%>
                    </select>
                    <h5 class="text-danger" id="categories_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+'_explanation' %>" data-toggle="tab" id="<%= language[i].lang+'_explanation_tag' %>"><%= language[i].name %></a>
                      <%
                      }else{
                      %>
                      <li><a href="<%= '#'+language[i].name+'_explanation' %>" data-toggle="tab" id="<%= language[i].lang+'_explanation_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+'_explanation' %>">
                      <div class="row">
                          <div class="col-md-12">
                              <div class="form-group ">
                                  <label>Explanation</label><em>*</em>
                                  <textarea class="form-control required" id="<%= language[i].lang+'_explanation'%>" name="<%= language[i].lang+'_explanation'%>" rows="3" placeholder="Explanation ..." data-explanation="language"></textarea>
                                  <h5 class="text-danger" id="<%= language[i].lang+'_explanation'%>_error"></h5>
                              </div>
                          </div>
                      </div>
                  </div>
                  <% 
                  }
                  %>
              </div>
          </div>
        </div>
        <!-- <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="categories">Explanation</label><em>*</em>
                    <textarea class="form-control required" id="explanation" name="explanation" rows="3" placeholder="Explanation ..."></textarea>
                    <h5 class="text-danger" id="explanation_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 -->