<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>
<script>
  var extras = JSON.parse('<%- JSON.stringify(extras) %>');
</script>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
      $('#pick').hide();
      $('#pickUp').removeAttr("required");
      $('#drop').hide();
      $('#dropOff').removeAttr("required");
      $('#total').hide();
      $('#total_price').removeAttr("required");
      $('#useFor').on('change', function() {
          if($('#useFor').select2().val().includes('transfer')) {
              $('#pick').show();
              $('#pickUp').attr("required", "required");
              $('#drop').show();
              $('#dropOff').attr("required", "required");
              $('#total').show();
              $('#total_price').attr("required", "required");
          } else {
            $('#pick').hide();
            $('#pickUp').removeAttr("required");
            $('#drop').hide();
            $('#dropOff').removeAttr("required");
            $('#total').hide();
            $('#total_price').removeAttr("required");
          }
      })
  })
  $(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>Vehicle/day</label>' +
            '<input type="text" name="extra[' + idx + '][price]" 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 Transfer
        <!--<small>Preview</small>-->
    </h1>
    <ol class="breadcrumb">
        <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="/vehicles">Transfer</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 Transfer</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 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>Registration No.</label><em>*</em>
                            <input name="registration" value="<%= flash.data_registration || '' %>" id="registration"
                                class="form-control" placeholder="Registration No." data-validation="required"
                                type="text" required>
                            <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_registration')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_registration %>
                            </h5>
                            <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!-- <div class="form-group col-md-6">
                            <label>Price per Day</label><em>*</em>
                            <input name="price_per_day" value="<%= flash.data_price_per_day || '' %>" id="price_per_day"
                                class="form-control" placeholder="Price per day" data-validation="required" type="number"
                                min="0" step=".01" required>
                           
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_price_per_day')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_price_per_day %>
                            </h5>
                            <% } %>
                        </div> -->
                        <div class="form-group col-md-6">
                            <label>Price per Hour</label><em>*</em>
                            <input name="price_per_hour" value="<%= flash.data_price_per_hour || '' %>" id="price_per_hour"
                                class="form-control" placeholder="Price per hour" data-validation="required" type="number"
                                min="0" step=".01" required>
                            
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_price_per_hour')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_price_per_hour %>
                            </h5>
                            <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>Fuel Type</label><em>*</em>
                            <select id="fuel_type" class="form-control select2" name="fuel_type" required>
                                <% for(fidx in fuelTypes) { %>
                                <option value="<%= fuelTypes[fidx]._id %>">
                                    <%= fuelTypes[fidx].slug %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_fuel_type')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_fuel_type %>
                                </h5>
                                <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Vehicle Type</label><em>*</em>
                            <select id="car_type" class="form-control select2" multiple="multiple" name="car_type[]"
                                required onchange="deleteTags()">
                                <% for(vidx in vehicleTypes) { %>
                                <option value="<%= vehicleTypes[vidx]._id %>">
                                    <%= vehicleTypes[vidx].slug %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_car_type')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_car_type %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label>No. of Seats</label><em>*</em>
                            <input name="seats" value="<%= flash.data_seats || '' %>" id="seats" class="form-control"
                                placeholder="No. of Seats" data-validation="required" type="number" min="1" required>
                            <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_seats')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_seats %>
                            </h5>
                            <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Partner</label><em>*</em>
                            <select id="owner" class="form-control select2" name="owner" required>
                                <% for(oidx in owner) { %>
                                <option value="<%= owner[oidx]._id %>">
                                    <%= owner[oidx].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>Facility</label><em>*</em>
                            <select id="facility" class="form-control select2" multiple="multiple" name="facility[]"
                                required onchange="deleteTags()">
                                <% for(vidx in facility) { %>
                                <option value="<%= facility[vidx]._id %>">
                                    <%= facility[vidx].slug ? facility[vidx].slug : facility[vidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_facility')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_facility %>
                                </h5>
                                <% } %>
                        </div>
                        <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 zone) { %>
                                <option value="<%= zone[zidx]._id %>">
                                    <%= zone[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>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!-- <div class="form-group col-md-6">
                            <label>Extra Features</label><br>
                            <select id="extra" class="form-control select2" multiple="multiple" name="extra[]" onchange="deleteTags()">
                                <% for(eidx in extras) { %>
                                <option value="<%= extras[eidx]._id %>">
                                    <%= extras[eidx].slug ? extras[eidx].slug : extras[eidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_extra')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_extra %>
                            </h5>
                            <% } %>
                        </div> -->
                        <div class="form-group col-md-6">
                            <label>Use For</label><em>*</em><br>
                            <select id="useFor" class="form-control select2" name="useFor[]" required>
                                <% for(vufidx in vehicleUseFor) { %>
                                <option value="<%= vufidx %>">
                                    <%= vehicleUseFor[vufidx] %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_useFor')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_useFor %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="pick" class="form-group col-md-6">
                            <label>Pick Up</label><em>*</em><br>
                            <select id="pickUp" class="form-control select2" name="pickUp" required>
                                <% for(pidx in places) { %>
                                <option value="<%= places[pidx]._id %>">
                                    <%= places[pidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_pickUp')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_pickUp %>
                                </h5>
                                <% } %>
                        </div>
                        <div id="drop" class="form-group col-md-6">
                            <label>Drop Off</label><em>*</em><br>
                            <select id="dropOff" class="form-control select2" name="dropOff" required>
                                <% for(pidx in places) { %>
                                <option value="<%= places[pidx]._id %>">
                                    <%= places[pidx].name %>
                                </option>
                                <%}%>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_dropOff')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_dropOff %>
                                </h5>
                                <% } %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="total" class="form-group col-md-4">
                            <label>Total Price</label><em>*</em><br>
                            <input name="total_price" value="<%= flash.data_total_price || '' %>" id="total_price"
                                class="form-control" placeholder="Total Price" data-validation="required" type="number"
                                min="0" step=".01" required>
                            <% if
                                (Object.prototype.hasOwnProperty.call(flash, 'errors_total_price' )) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_total_price %>
                            </h5>
                            <% } %>
                        </div>
                        <!-- <div class="form-group col-md-4">
                            <label>Benefit</label><br>
                            <select id="benefit" class="form-control select2" multiple="multiple" name="benefit[]" onchange="deleteTags()">
                                <% 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 class="form-group col-md-4">
                            <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 class="row">
                        <div class="col-md-12">
                            <div class="form-group col-md-6">
                                <label>Basic Price per Day</label><em>*</em>
                                <input name="price_per_day" value="<%= flash.data_price_per_day || '' %>"
                                    id="price_per_day" class="form-control" placeholder="Price per day"
                                    data-validation="required" type="number" min="0" step=".01" required>

                                <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_price_per_day')) { %>
                                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                    <%= flash.errors_price_per_day %>
                                </h5>
                                <% } %>
                            </div>
                            <div class="form-group col-md-6">
                                <label>Inclusion and Exclusion</label><br>
                                <select id="benefit" class="form-control select2" multiple="multiple" name="benefit[]"
                                    onchange="deleteTags()">
                                    <% 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 for="paymentMethod">Payment Method</label><em>*</em>
                                <select name="paymentMethod" id="paymentMethod" class="form-control" required>
                                    <option value="">Select</option>
                                    <option value="card">Card</option>
                                    <option value="Cash">Cash</option>
                                </select>

                            </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>
                              
              
                              </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>
            </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 -->