<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>
<% script('/js/timepicker/bootstrap-timepicker.min.js') %>
<% stylesheet('/js/timepicker/bootstrap-timepicker.min.css') %>

<script>
  var extras = JSON.parse('<%- JSON.stringify(extras) %>');
</script>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }

 
  $(function () {
    // Initialize Select2 Elements
    $('.select2').select2()
  });
  $(".timepicker").timepicker({
    showInputs: false,
    defaultTime: false,
    showMeridian: false
  });
  //Set start date min to current date
  $("#start_date").click(function() {
    var now = new Date();
    var dd = now.getDate();
    var mm = now.getMonth() + 1;
    var yyyy = now.getFullYear();
    if (dd < 10) {
      dd = "0" + dd;
    }
    if (mm < 10) {
      mm = "0" + mm;
    }
    var today = yyyy + "-" + mm + "-" + dd;
    $("#start_date").attr("min", today);
  });

  //Set end date min to one day after start date
  $("#end_date").click(function() {
    var start_date = $("#start_date").val();
    if (start_date !== "") {
      var newDate = new Date(Date.parse(start_date));
      newDate.setDate(newDate.getDate() + 1);
      var dd = newDate.getDate();
      var mm = newDate.getMonth() + 1;
      var yyyy = newDate.getFullYear();
      if (dd < 10) {
        dd = "0" + dd;
      }
      if (mm < 10) {
        mm = "0" + mm;
      }
      var set_date = yyyy + "-" + mm + "-" + dd;
      $("#end_date").attr("min", set_date);
    }
  });

  $(document).ready(function() {
    let extraRuleCount = 0;
    $("#addExtraRules").click(function(){
      $(".extra")
        .last()
        .after(getExtraDiv(extraRuleCount++))

        $('.select2').select2();
    });

    let addQuantity = 0;
    $(".quants").hide();
    $("#addQuantity").click(function(){
      $(".quants")
        .last()
        .after(getQuantDiv(addQuantity++))
        
        $('.select2').select2();
    });

    let addSale = 0;
    $(".sales").hide();
    $("#salesSession").click(function(){
      $(".sales")
        .last()
        .after(getSaleDiv(addSale++))

      $('.select2').select2();
    });

    let addSpecial = 0;
    let addSpecialChild = {};
    $(".special").hide();
    $('#specialSession').click(function () {
      $(".special")
        .last()
        .after(getSpecialDiv(addSpecial++))
    });

    $(document).on('click', '.addQuantity', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0

      $('.' + selector)
          .last()
          .after(getAddQuantityDiv(addSpecial-1, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
    
    $(document).on('click', '.addBasePrice', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0

      $('.' + selector)
          .last()
          .after(getBasePriceDiv(addSpecial-1, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });

  });


  function getExtraDiv(idx = 0) {
    var options = '';
    extras.forEach(function (e) {
      options = options + '<option value="'+ e._id +'">' + (e.slug ? e.slug : e.name) + '</option>';
    });

    return '<div class="row extra">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-3">' +
            '<label>Extra Rules</label>' +
            '<select class="form-control select2" multiple="multiple" name="extra[' + idx + '][rule]">' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Adult</label>' +
            '<input type="text" name="extra[' + idx + '][adult]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Child</label>' +
            '<input type="text" name="extra[' + idx + '][child]" class="form-control"  />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Accomodation</label>' +
            '<input type="text" name="extra[' + idx + '][accomodationdult]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="extra[' + idx + '][currency]" value="euro">euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="extra[' + idx + '][currency]" value="%">%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }


  function getQuantDiv(idx = 0 ) {
    var options = '';
    for (let i = 1; i <= 5; i++) {
      options = options + '<option value="'+ i +'">' + i + '</option>';
    }

    return '<div class="row quants">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-1">' +
            '<label>Form</label>' +
            '<select class="form-control select2" multiple="multiple" name="quantity[' + idx + '][form]" required>' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>To</label>' +
            '<select class="form-control select2" multiple="multiple" name="quantity[' + idx + '][to]" required>' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Adjust</label>' +
            '<input type="text" name="quantity[' + idx + '][adjust]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="quantity[' + idx + '][currency]" value="euro">euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="quantity[' + idx + '][currency]" value="%">%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }

  function getSaleDiv(idx = 0 ) {
    var options = '';
    for (let i = 1; i <= 5; i++) {
      options = options + '<option value="'+ i +'">Session ' + i + '</option>';
    }

    return '<div class="row sales">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-3">' +
            '<label>Sales Session Rules</label>' +
            '<select class="form-control select2" multiple="multiple" name="salessession[' + idx + '][rule]" required>' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-3">' +
            '<label>Start Date</label>' +
            '<input class="form-control" type="date" name="salessession[' + idx + '][saleStartdate]" placeholder="Date">' +
          '</div>' +
          '<div class="form-group col-md-3">' +
            '<label>End Date</label>' +
            '<input class="form-control" type="date" name="salessession[' + idx + '][saleEnddate]" placeholder="Date">' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="salessession[' + idx + '][currency]" value="euro">euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="salessession[' + idx + '][currency]" value="%">%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }

  function getSpecialDiv(idx = 0 ) {
    return '<div class="row special special-' + idx + '">' +
          '<div class="col-md-12">' +
            '<div class="form-group col-md-3">' +
              '<label>Special Start Date</label>' +
              '<input class="form-control" type="date" name="special[' + idx + '][specialStartdate]" placeholder="Date">' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label>Special End Date</label>' +
              '<input class="form-control" type="date" name="special[' + idx + '][specialEnddate]" placeholder="Date">' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label></label>' +
              '<div class="input-group margin">' +
                '<div class="input-group-btn">' +
                  '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">' +
                    'Add Rule On' +
                    '<span class="fa fa-caret-down"></span>' +
                  '</button>' +
                  '<ul class="dropdown-menu">' +
                    '<li><a href="javascript:void(0);" class="addQuantity" data-selector="special-' + idx + '">Quantity</a></li>' +
                    '<li><a href="javascript:void(0);" class="addBasePrice" data-selector="special-' + idx + '">Base price </a></li>' +
                  '</ul>' +
                '</div>' +
              '</div>' +
            '</div>' +
          '</div>' +
        '</div>';
  }

  function getAddQuantityDiv(pIdx = 0, idx = 0) {
    var options = '';
    for (let i = 1; i <= 5; i++) {
      options = options + '<option value="'+ i +'">' + i + '</option>';
    }

    return '<div class="row special special-' + pIdx + '">' +
          '<div class="col-md-12">' +
            '<div class="col-md-3"></div>' +
            '<input type="hidden" name="special[' + pIdx + '][rules][' + idx + '][type]" value="quantity" class="form-control" />' +
            '<div class="form-group col-md-2">' +
              '<label>Form</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][form]">' +
                options +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>To</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][to]">' +
                options +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-1">' +
              '<label>Adjust</label>' +
              '<input type="text" name="special[' + pIdx + '][rules][' + idx + '][adjust]" class="form-control" />' +
            '</div>' +
            '<div class="form-group col-md-1">' +
              '<label>Currency</label>' +
              '<div class="radio">' +
                '<label><input type="radio" name="special[' + pIdx + '][rules][' + idx + '][currency]" value="euro">euro</label>' +
              '</div>' +
              '<div class="radio">' +
                '<label><input type="radio" name="special[' + pIdx + '][rules][' + idx + '][currency]" value="%">%</label>' +
              '</div>' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label>On</label>' +
              '<input type="text" name="" class="form-control" value="Quantity rules" readonly="readonly" />' +
            '</div>' +
          '</div>' +
        '</div>';
  }

  function getBasePriceDiv(pIdx = 0, idx = 0) {
    return '<div class="row special special-' + pIdx + '">' +
          '<div class="col-md-12">' +
            '<div class="col-md-3"></div>' +
            '<input type="hidden" name="special[' + pIdx + '][rules][' + idx + '][type]" value="basePrice" class="form-control" />' +
            '<div class="form-group col-md-2">' +
              '<label>Euro</label>' +
              '<input type="text" name="special[' + pIdx + '][rules][' + idx + '][price]" class="form-control" />' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label>On</label>' +
              '<input type="text" class="form-control" value="Base Price" readonly="readonly" />' +
            '</div>' +
          '</div>' +
        '</div>';
  }


</script>
`) %>

<% 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 Tour
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/tour">Tour</a></li>
    <li class="active">Add</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <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 Tour</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 col-md-6">
              <label for="name">Name</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="name" value="<%= flash.data_name || '' %>" id="name" class="form-control" placeholder="Name"
                data-validation="required" type="text" required>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% 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 class="form-group col-md-6">
              <label for="name">Tour Type</label><em>*</em>
              <select id="tour_type" class="form-control select2" multiple="multiple" name="tour_type[]" required
                onchange="deleteTags()">
                <% for(tyidx in tourTypes) { %>
                <option value="<%= tourTypes[tyidx]._id %>">
                  <%= tourTypes[tyidx].slug %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_tour_type')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_tour_type %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="price">Base Price(EUR)</label><em>*</em>
              <input class="form-control" type="number" id="price" name="price" min="0" step=".01" required />
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_price')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_price %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="duration">Displacement</label><em>*</em>
              <select id="displacement" class="form-control select2" multiple="multiple" name="displacement[]" required
                onchange="deleteTags()">
                <% for(didx in displacements) { %>
                <option value="<%= displacements[didx]._id %>">
                  <%= displacements[didx].slug ? displacements[didx].slug : displacements[didx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_displacement')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_displacement %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="duration">Duration</label><em>*</em>
              <select id="duration" class="form-control select2" name="duration" required>
                <% for(dtidx in durationTypes) { %>
                <option value="<%= durationTypes[dtidx]._id %>">
                  <%= durationTypes[dtidx].slug %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_duration')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_duration %>
                </h5>
                <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="owner">Owner</label><em>*</em>
              <select id="owner" class="form-control select2" name="owner" required>
                <% for(idx in owner) { %>
                <option value="<%= owner[idx]._id %>">
                  <%= owner[idx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_owner')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_owner %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="duration">Facilities</label><em>*</em>
              <select id="facilities" class="form-control select2" multiple="multiple" name="facilities[]" required
                onchange="deleteTags()">
                <% for(tfidx in tourFacilities) { %>
                <option value="<%= tourFacilities[tfidx]._id %>">
                  <%= tourFacilities[tfidx].slug ? tourFacilities[tfidx].slug : tourFacilities[tfidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_facilities')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_facilities %>
                </h5>
                <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="duration">Interest</label><em>*</em>
              <select id="interest" class="form-control select2" multiple="multiple" name="interest[]" required
                onchange="deleteTags()">
                <% for(tfidx in interests) { %>
                <option value="<%= interests[tfidx]._id %>">
                  <%= interests[tfidx].slug ? interests[tfidx].slug : interests[tfidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_interest')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_interest %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="duration">Start at</label><em>*</em>
              <select id="start_place" class="form-control select2" name="start_place" required>
                <% for(pidx in places) { %>
                <option value="<%= places[pidx]._id %>">
                  <%= places[pidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_start_place')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_start_place %>
                </h5>
                <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="duration">End At</label><em>*</em>
              <select id="end_place" class="form-control select2" name="end_place" required>
                <% for(pidx in places) { %>
                <option value="<%= places[pidx]._id %>">
                  <%= places[pidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_end_place')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_end_place %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label>Zone</label><em>*</em>
              <select id="zone" class="form-control select2" multiple="multiple" name="zone[]" required
                onchange="deleteTags()">
                <% for(zidx in zones) { %>
                <option value="<%= zones[zidx]._id %>">
                  <%= zones[zidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_zone')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_zone %>
                </h5>
                <% } %>
            </div>
            <div class="form-group col-md-6">
              <label>Benefit</label><em>*</em>
              <select id="benefit" class="form-control select2" name="benefit" required>
                <% for(bidx in benefits) { %>
                <option value="<%= benefits[bidx]._id %>">
                  <%= benefits[bidx].slug ? benefits[bidx].slug : benefits[bidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_benefit')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_benefit %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <!-- <div class="form-group col-md-6">
              <label>Start Date</label><em>*</em>
              <input id="start_date" name="start_date" onkeydown="return false" class="form-control" type="date"
                value="<%= flash.data_start_date || '' %>" required>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_start_date')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_start_date %>
              </h5>
              <% } %>
            </div>   -->



            <div class="form-group col-md-6">
              <label>Days</label><em>*</em>
              <!-- <input id="days" name="days" onkeydown="return false" class="form-control" type="text"
                value="<%= flash.data_start_date || '' %>" required> -->

              <select name="days" id="days" class="form-control" required>
                <option value="">Select a Day</option>
                <option value=-1>All Day </option>
                <option value=0>Monday</option>
                <option value=1>Tuesday</option>
                <option value=2>Wednesday</option>
                <option value=3>Thursday</option>
                <option value=4>Friday</option>
                <option value=5>Saturday</option>
                <option value=6>Sunday</option>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_days')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_days %>
              </h5>
              <% } %>
            </div>
            <!-- <div class="form-group col-md-6">
              <label>End Date</label><em>*</em>
              <input id="end_date" name="end_date" onkeydown="return false" class="form-control" type="date"
                value="<%= flash.data_end_date || '' %>" required>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_end_date')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_end_date %>
              </h5>
              <% } %>
            </div> -->




            <div class="form-group col-md-6">
              <label>End Days </label><em>*</em>
              <!-- <input id="days" name="days" onkeydown="return false" class="form-control" type="text"
                value="<%= flash.data_start_date || '' %>" required> -->

              <select name="enddays" id="enddays" class="form-control" onChange="changeDateTime(this);" required>
                <option value="" id="default">select return day</option>
                <option value="1" id="same">Same Day</option>
                <option value="2" id="next">Next Day </option>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_enddays')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_enddays %>
              </h5>
              <% } %>
            </div>








            <div class="form-group col-md-6 bootstrap-timepicker">
              <label>End Hours</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="endhrs" value="" id="endhrs" class="form-control timepicker" placeholder="Check Out Time"
                data-validation="required" type="text" required readonly="true">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_endhrs')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_endhrs %>
              </h5>
              <% } %>
            </div>

            <div class="form-group col-md-6 bootstrap-timepicker">
              <label>Tax</label><em>*</em>
              <select id="tax" class="form-control select2" multiple="multiple" name="tax[]" required
                onchange="deleteTags()">
                <% for(tax in taxes) { %>
                <option value="<%= taxes[tax]._id %>">
                  <%= taxes[tax].en_name %>
                </option>
                <%}%>
            </select>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_facilities')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_facilities %>
                </h5>
                <% } %>

            </div>


          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label>Recommend</label><br>
              <label><input type="radio" <%=flash.data_recommend || false ? 'checked' : '' %> name="recommend"
                  id="recommend" value="1" class="form-control minimal" /> Yes</label>
              <label><input type="radio" <%=flash.data_recommend || true ? '' : 'checked' %> name="recommend"
                  id="recommend" value="0" class="form-control minimal" /> No</label>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_recommend')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_recommend %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>


        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-3">
              <label>Extra Rules</label>
              <a id="addExtraRules" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-plus"></span>
              </a>
            </div>
          </div>
        </div>
        <div class="extra"></div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-3">
              <label>Quantity Rules</label>
              <a id="addQuantity" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-plus"></span>
              </a>
            </div>
          </div>
        </div>
        <div class="quants"></div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-3">
              <label>Sales Session</label>
              <a id="salesSession" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-plus"></span>
              </a>
            </div>
          </div>
        </div>
        <div class="sales"></div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-3">
              <label>Special Session</label>
              <a id="specialSession" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-plus"></span>
              </a>
            </div>
          </div>
        </div>

        <div class="special"></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">
        </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 -->