<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>
<!-- Timepicker -->
<% 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
  });
  $(document).ready(function() {
    let addOcupentCount = 0;
    $("#addOcupents").click(function(){
      $(".ocupents")
        .last()
        .after(getOcupentDiv(addOcupentCount++))

        $('.select2').select2();
    });
    $("#minusOcupents").click(function () {
      if(addOcupentCount > 0){
        $("#ocupent"+ (addOcupentCount-1)).remove();
        addOcupentCount--;
      }
    });

    let addSale = 0;
    $(".sales").hide();
    $("#salesSession").click(function(){
      $(".sales")
        .last()
        .after(getSaleDiv(addSale++))

      $('.select2').select2();
    });
    $("#minusSession").click(function () {
      if(addSale > 0){
        $("#sale"+ (addSale-1)).remove();
        addSale--;
      }
    });

  });
  
  $(document).ready(function() {
    let extraRuleCount = 0;
    $("#addExtraRules").click(function(){
      $(".extra")
        .last()
        .after(getExtraDiv(extraRuleCount++))

        $('.select2').select2();
    });
    $("#minusExtraRules").click(function () {
      if(extraRuleCount > 0){
        $("#extra"+ (extraRuleCount-1)).remove();
        extraRuleCount--;
      }
    });

    let addQuantity = 0;
    $(".quants").hide();
    $("#addQuantity").click(function(){
      $(".quants")
        .last()
        .after(getQuantDiv(addQuantity++))
        
        $('.select2').select2();
    });
    $("#minusQuantity").click(function () {
      if(addQuantity > 0){
        $("#quant"+ (addQuantity-1)).remove();
        addQuantity--;
      }
    });

    let addSpecial = 0;
    let addSpecialChild = {};
    $(".special").hide();
    $('#specialSession').click(function () {
      $(".special")
        .last()
        .after(getSpecialDiv(addSpecial++))
    });
    $("#minusSpecialSession").click(function () {
      if(addSpecial > 0){
        $(".special-"+ (addSpecial-1)).remove();
        addSpecial--;
      }
    });
    
    $(document).on('click', '.addGuestOccu', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getAddGuestoccuDiv(pid, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
    $(document).on('click', '.addQuantity', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getAddQuantityDiv(pid, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
    
    $(document).on('click', '.addExtraprice', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getAddExtrapriceDiv(pid, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
    $(document).on('click', '.addBasePrice', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getBasePriceDiv(pid, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
  });
  $("#room").validate({
    errorClass: "text-danger",
    rules: {
      no_of_rooms: {
        required: true,
        min: 1
      },
      no_of_adult: {
        required: true,
        min: 1
      },
      no_of_child: {
        required: true,
        min: 0
      },
      price: {
        required: true,
        min: 0
      },
      checkInTime: {
        required: true
      },
      checkOutTime: {
        required: true
      }
    },
    messages: {
      no_of_rooms: {
        required: "Please provide a value",
        min: "Minimum value should be 1"
      },
      no_of_adult: {
        required: "Please provide a value",
        min: "Minimum value should be 1"
      },
      no_of_child: {
        required: "Please provide a value",
        min: "Minimum value should be 0"
      },
      price: {
        required: "Please provide a value",
        min: "Minimum value should be 0"
      },
      checkInTime: {
        required: "Please provide a value"
      },
      checkOutTime: {
        required: "Please provide a value"
      }
    }
  });

  function getOcupentDiv(idx = 0 ) {
    var options = '';
    for (let i = 1; i <= 5; i++) {
      options = options + '<option value="'+ i +'">' + i + '</option>';
    }

    return '<div class="row ocupents" id="ocupent' + idx + '">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-1">' +
            '<label>Adult</label>' +
            '<select class="form-control select2" multiple="multiple" name="ocupents[' + idx + '][adult]" required>' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Children</label>' +
            '<select class="form-control select2" multiple="multiple" name="ocupents[' + idx + '][child]" required>' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Adjust</label>' +
            '<input type="text" name="ocupents[' + idx + '][adjust]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="ocupents[' + idx + '][currency]" value="euro">euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="ocupents[' + idx + '][currency]" value="%">%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>'
  };

  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" id="extra' + idx + '">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-3">' +
            '<label>Extra Rules/Night</label>' +
            '<select class="form-control select2" multiple="multiple" name="roomextra[' + idx + '][rule]">' +
              options +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Adult</label>' +
            '<input type="text" name="roomextra[' + idx + '][adult]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Child</label>' +
            '<input type="text" name="roomextra[' + idx + '][child]" class="form-control"  />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Accomodation</label>' +
            '<input type="text" name="roomextra[' + idx + '][accomodationdult]" class="form-control" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="roomextra[' + idx + '][currency]" value="euro">euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="roomextra[' + 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" id="quant' + idx + '">' +
        '<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" id="sale' + idx + '">' +
        '<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>' +
                    '<li><a href="javascript:void(0);" class="addGuestOccu" data-selector="special-' + idx + '">Guest Ocupents</a></li>'+
                    '<li><a href="javascript:void(0);" class="addExtraprice" data-selector="special-' + idx + '">Extra price</a></li>'
                  '</ul>' +
                '</div>' +
              '</div>' +
            '</div>' +
          '</div>' +
        '</div>';
  }
  
  function getAddGuestoccuDiv(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="guestoccu" class="form-control" />' +
            '<div class="form-group col-md-2">' +
              '<label>Adults</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][adults]">' +
                options +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>Child</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][child]">' +
                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="Guest Occupents" readonly="readonly" />' +
            '</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>';
  }
  function getAddExtrapriceDiv(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="extraprice" class="form-control" />' +
            '<div class="form-group col-md-2">' +
              '<label>Adults</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][adults]">' +
                options +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>Child</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][child]">' +
                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="on extra" 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 Hotel Room
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li>
      <a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a>
    </li>
    <li><a href="/hotels">Hotel</a></li>
    <li><a href="<%= '/hotels/rooms/'+hotel._id %>">Rooms</a></li>
    <li class="active">Add Room</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" id="room">
      <div class="box-header with-border">
        <h3 class="box-title">New Hotel Room</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>No of Rooms</label><em>*</em>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="no_of_rooms" value="<%= flash.data_no_of_rooms || '' %>" id="no_of_rooms"
                class="form-control" placeholder="No of Rooms" data-validation="required" type="number" min="1"
                required />
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash,
              'errors_no_of_rooms')) { %>
              <h5 class="text-danger">
                <i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_no_of_rooms %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="room_type">Room Type</label><em>*</em>
              <select id="room_type" class="form-control" name="room_type" required>
                <% for(idx in roomTypes) { %>
                <option value="<%= roomTypes[idx]._id %>">
                  <%= roomTypes[idx].slug ? roomTypes[idx].slug :
                  roomTypes[idx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash,
              'errors_room_type')) { %>
                <h5 class="text-danger">
                  <i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_room_type %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-3">
              <label>Maximum number of Adults</label><em>*</em>
              <input name="no_of_adult" value="<%= flash.data_no_of_adult || '' %>" id="no_of_adult"
                class="form-control" placeholder="No of Adult" type="number" min="1" required />
              <% if (Object.prototype.hasOwnProperty.call(flash,
              'errors_no_of_adult')) { %>
              <h5 class="text-danger">
                <i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_no_of_adult %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-3">
              <label>Maximum no of Children</label><em>*</em>
              <input name="no_of_child" value="<%= flash.data_no_of_child || '' %>" id="no_of_child"
                class="form-control" placeholder="No of Child" type="number" min="0" required />
              <% if (Object.prototype.hasOwnProperty.call(flash,
              'errors_no_of_child')) { %>
              <h5 class="text-danger">
                <i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_no_of_child %>
              </h5>
              <% } %>
            </div>
            <!-- <div class="form-group col-md-4">
              <label for="price">Price</label><em>*</em>
              <input
                name="price"
                value="<%= flash.data_price || '' %>"
                id="price"
                class="form-control"
                placeholder="Price"
                type="number"
                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>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="facilities">Facilities</label><em>*</em>
              <select id="facilities" name="facilities[]" multiple="multiple" class="form-control select2" required
                onchange="deleteTags()">
                <% for(idx in facilities) { %>
                <option value="<%= facilities[idx]._id %>">
                  <%= facilities[idx].slug ? facilities[idx].slug :
                  facilities[idx].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="sleep">Sleep</label><em>*</em>
              <select id="sleep" name="sleep" class="form-control select2" required onchange="deleteTags()">
                <% for(idx in sleep) { %>
                <option value="<%= sleep[idx]._id %>">
                  <%= sleep[idx].en_name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash,
              'errors_sleep')) { %>
                <h5 class="text-danger">
                  <i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_sleep %>
                </h5>
                <% } %>
            </div>
            <!-- <div class="form-group col-md-6">
              <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>
        </div> -->

            <div class="row">
              <div class="col-md-12">
                <div class="form-group col-md-6 bootstrap-timepicker">
                  <label>Check In Time</label><em>*</em>
                  <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                  <input name="checkInTime" value="" id="checkInTime" class="form-control timepicker"
                    placeholder="Check In 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_checkInTime')) { %>
                  <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                    <%= flash.errors_checkInTime %>
                  </h5>
                  <% } %>
                </div>
                <div class="form-group col-md-6 bootstrap-timepicker">
                  <label>Check Out Time</label><em>*</em>
                  <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                  <input name="checkOutTime" value="" id="checkOutTime" 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_checkOutTime')) { %>
                  <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                    <%= flash.errors_checkOutTime %>
                  </h5>
                  <% } %>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group col-md-2">
                  <label for="price">Base Price/Night</label><em>*</em>
                  <input name="price" value="<%= flash.data_price || '' %>" id="price" class="form-control"
                    placeholder="Price" type="number" min="0" step=".01" required />
                </div>
                <div class="form-group col-md-2">
                  <label for="p_adult">For Adult</label><em>*</em>
                  <select name="p_adult" id="p_adult" class="form-control" required>
                    <option value="">Select</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                  </select>

                </div>

                <div class="form-group col-md-2">
                  <label for="p_child">For Children</label><em>*</em>
                  <select name="p_child" id="p_child" class="form-control" required>
                    <option value="">Select</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                  </select>

                </div>

                <div class="form-group col-md-6">
                  <label>Inclusion 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>
                <% 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="bathroom">Bathroom</label><em></em>
                  <select id="bathroom" name="bathroom" class="form-control select2" onchange="deleteTags()">
                    <% for(idx in bathroom) { %>
                    <option value="<%= bathroom[idx]._id %>">
                      <%= bathroom[idx].en_name %>
                    </option>
                    <%}%>
                  </select>
                  <% if (Object.prototype.hasOwnProperty.call(flash,
                  'errors_bathroom')) { %>
                    <h5 class="text-danger">
                      <i class="fa fa-exclamation-triangle"></i>
                      <%= flash.errors_bathroom%>
                    </h5>
                    <% } %>
                </div>
                <div class="form-group col-md-6">
                  <label for="extrabed">Extra Bed</label><em></em>
                  <select id="extrabed" name="extrabed" class="form-control select2" onchange="deleteTags()">
                    <% for(idx in extrabed) { %>
                    <option value="<%= extrabed[idx]._id %>">
                      <%= extrabed[idx].en_name %>
                    </option>
                    <%}%>
                  </select>
                  <% if (Object.prototype.hasOwnProperty.call(flash,
                  'errors_extrabed')) { %>
                    <h5 class="text-danger">
                      <i class="fa fa-exclamation-triangle"></i>
                      <%= flash.errors_extrabed%>
                    </h5>
                    <% } %>
                </div>

              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="form-group col-md-3">
                  <label>Guest Ocupents Rule</label>
                  <a id="addOcupents" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-plus"></span>
                  </a>
                  <a id="minusOcupents" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-minus"></span>
                  </a>
                </div>
              </div>
            </div>
            <div class="ocupents">
            </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>
                  <a id="minusExtraRules" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-minus"></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>
                  <a id="minusQuantity" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-minus"></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>
                  <a id="minusSession" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-minus"></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>
                  <a id="minusSpecialSession" class="btn btn-sm btn-primary" title="">
                    <span class="glyphicon glyphicon-minus"></span>
                  </a>
                </div>
              </div>
            </div>

            <div class="special"></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" />
        </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 -->