<% 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) %>');
  var saleSessions = JSON.parse('<%- JSON.stringify(saleSessions) %>');
  var extraRules = JSON.parse('<%- JSON.stringify(extraRules) %>');
  var quantity = JSON.parse('<%- JSON.stringify(quantity) %>');
  var secialSessions = JSON.parse('<%- JSON.stringify(secialSessions) %>');
  var occupents = JSON.parse('<%- JSON.stringify(occupents) %>');
</script>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
  })
  $(".timepicker").timepicker({
    showInputs: false,
    showMeridian: false
  });

  $(document).ready(function() {
    let extraRuleCount = 0;
    let addQuantity = 0;
    let addSale = 0;
    let addSpecial = 0;
    let addSpecialChild = {};
    let addoccupents=0;

    saleSessions.forEach(ss => {
      $(".sales")
        .last()
        .after(getSaleDiv(addSale++, ss.rule, ss.startDate.substring(0, 10), ss.endDate.substring(0, 10), ss.currency))
    });
    
    quantity.forEach(q => {
      $(".quants")
        .last()
        .after(getQuantDiv(addQuantity++, q.form, q.to, q.adjust, q.currency));
    });
    
    occupents.forEach(q => {
      $(".occupents")
        .last()
        .after(getOccupentDiv(addoccupents++, q.adult, q.child, q.adjust, q.currency));
    });
    extraRules.forEach(er => {
      $(".extra")
        .last()
        .after(getExtraDiv(extraRuleCount++, er.extra, er.adult, er.child, er.accomodationdult, er.currency))
    });
    secialSessions.forEach(ss => {
      $(".special")
        .last()
        .after(getSpecialDiv(addSpecial++, ss.saleStartdate.substring(0, 10), ss.saleEnddate.substring(0, 10)))

        ss.rules.forEach(r => {
          var selector = "special-"+ (addSpecial-1);
          
          var idx = addSpecialChild[addSpecial-1] || 0
          var pid = selector.split("-")[1];

          if(r.type=="quantity"){
            $('.' + selector)
              .last()
              .after(getAddQuantityDiv(pid, idx, r.form, r.to, r.adjust, r.currency ))
          }

          if(r.type == "basePrice"){
            $('.' + selector)
              .last()
              .after(getBasePriceDiv(pid, idx, r.price))
          }

          if(r.type == "guestoccu"){
            $('.' + selector)
              .last()
              .after(getAddGuestDiv(pid, idx,r.adult, r.child, r.adjust, r.currency ))
          }
          if(r.type == "extraprice"){
            $('.' + selector)
              .last()
              .after(getAddExtraDiv(pid, idx,r.adult, r.child, r.adjust, r.currency ))
          }
          addSpecialChild[addSpecial-1] = idx + 1;
        });
    });

  
    $('.select2').select2();


    $("#salesSession").click(function(){
      $(".sales")
        .last()
        .after(getSaleDiv(addSale++))

      $('.select2').select2();
    });
    $("#minusSalesSession").click(function () {
      if(addSale > 0){
        $("#sale"+ (addSale-1)).remove();
        addSale--;
      }
    });

    $("#addExtraRules").click(function(){
      $(".extra")
        .last()
        .after(getExtraDiv(extraRuleCount++))

        $('.select2').select2();
    });
    $("#minusExtraRules").click(function () {
      if(extraRuleCount > 0){
        $("#extra"+ (extraRuleCount-1)).remove();
        extraRuleCount--;
      }
    });

    $("#addQuantity").click(function(){
      $(".quants")
        .last()
        .after(getQuantDiv(addQuantity++))
        
        $('.select2').select2();
    });
    $("#minusQuantity").click(function () {
      if(addQuantity > 0){
        $("#quant"+ (addQuantity-1)).remove();
        addQuantity--;
      }
    });

    $("#addOccupents").click(function(){
      $(".occupents")
        .last()
        .after(getOccupentDiv(addoccupents++))

      $('.select2').select2();
    });
    $("#minusOccupents").click(function () {
      if(addoccupents > 0){
        $("#ocupent"+ (addoccupents-1)).remove();
        addoccupents--;
      }
    });
    
    $('#specialSession').click(function () {
      $(".special")
        .last()
        .after(getSpecialDiv(addSpecial++))
    });
    $("#minusSpecialSession").click(function () {
      if(addSpecial > 0){
        $(".special-"+ (addSpecial-1)).remove();
        addSpecial--;
      }
    });

    $(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', '.addGuestOccu', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getAddGuestDiv(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();

    });

      
    $(document).on('click', '.addExtraprice', function(){
      var selector = $(this).data("selector");

      var idx = addSpecialChild[addSpecial-1] || 0
      var pid = selector.split("-")[1];

      $('.' + selector)
          .last()
          .after(getAddExtraDiv(pid, idx))

      addSpecialChild[addSpecial-1] = idx + 1;

      $('.select2').select2();

    });
    function getSpecialDiv(idx = 0, specialStartdate="", specialEnddate="") {
    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" value="'+ specialStartdate +'" >' +
            '</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" value="'+ specialEnddate +'" >' +
            '</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 getOccupentDiv(idx = 0, selectedAdult=null, selectedChild=null, adjust=0, currency="" )
{
  var optionsAdult= '';
    for (let i = 1; i <= 5; i++) {
      optionsAdult = optionsAdult + '<option value="'+ i +'" '+ (i == selectedAdult ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    var optionsChild= '';
    for (let i = 1; i <= 5; i++) {
      optionsChild = optionsChild + '<option value="'+ i +'" '+ (i == selectedChild ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    return '<div class="row occupents" id="ocupent' + idx + '">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-2">' +
            '<label>adult</label>' +
            '<select class="form-control select2" name="occupents[' + idx + '][adult]" required>' +
              optionsAdult +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>child</label>' +
            '<select class="form-control select2" name="occupents[' + idx + '][child]" required>' +
              optionsChild +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Adjust</label>' +
            '<input type="text" name="occupents[' + idx + '][adjust]" class="form-control"  value="'+ adjust +'" />' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="occupents[' + idx + '][currency]" value="euro" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="occupents[' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }
  function getAddQuantityDiv(pIdx = 0, idx = 0, selectedFrom=null, selectedTo=null, adjust="", currency="" ) {
    var optionsFrom = '';
    for (let i = 1; i <= 5; i++) {
      optionsFrom = optionsFrom + '<option value="'+ i +'" '+ (i == selectedFrom ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    var optionsTo = '';
    for (let i = 1; i <= 5; i++) {
      optionsTo = optionsTo + '<option value="'+ i +'" '+ (i == selectedTo ? ' selected="selected"' : '') +' >' + 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]">' +
                optionsFrom +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>To</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][to]">' +
                optionsTo +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-1">' +
              '<label>Adjust</label>' +
              '<input type="text" name="special[' + pIdx + '][rules][' + idx + '][adjust]" class="form-control" value="'+ adjust +'" />' +
            '</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" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
              '</div>' +
              '<div class="radio">' +
                '<label><input type="radio" name="special[' + pIdx + '][rules][' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</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 getAddGuestDiv(pIdx = 0, idx = 0, selectedAdult=null, selectedChild=null, adjust="", currency="" ) {
    var optionsAdult = '';
    for (let i = 1; i <= 5; i++) {
      optionsAdult = optionsAdult + '<option value="'+ i +'" '+ (i == selectedAdult ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    var optionsChild = '';
    for (let i = 1; i <= 5; i++) {
      optionsChild = optionsChild + '<option value="'+ i +'" '+ (i == selectedChild ? ' selected="selected"' : '') +' >' + 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>Adult</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][adult]">' +
                optionsAdult +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>Child</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][child]">' +
                optionsChild +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-1">' +
              '<label>Adjust</label>' +
              '<input type="text" name="special[' + pIdx + '][rules][' + idx + '][adjust]" class="form-control" value="'+ adjust +'" />' +
            '</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" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
              '</div>' +
              '<div class="radio">' +
                '<label><input type="radio" name="special[' + pIdx + '][rules][' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</label>' +
              '</div>' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label>On</label>' +
              '<input type="text" name="" class="form-control" value="Guest Occcuency rules" readonly="readonly" />' +
            '</div>' +
          '</div>' +
        '</div>';
  }

  function getAddExtraDiv(pIdx = 0, idx = 0, selectedAdult=null, selectedChild=null, adjust="", currency="" ) {
    var optionsAdult = '';
    for (let i = 1; i <= 5; i++) {
      optionsAdult = optionsAdult + '<option value="'+ i +'" '+ (i == selectedAdult ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    var optionsChild = '';
    for (let i = 1; i <= 5; i++) {
      optionsChild = optionsChild + '<option value="'+ i +'" '+ (i == selectedChild ? ' selected="selected"' : '') +' >' + 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>Adult</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][adult]">' +
                optionsAdult +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-2">' +
              '<label>Child</label>' +
              '<select class="form-control select2" name="special[' + pIdx + '][rules][' + idx + '][child]">' +
                optionsChild +
              '</select>' +
            '</div>' +
            '<div class="form-group col-md-1">' +
              '<label>Adjust</label>' +
              '<input type="text" name="special[' + pIdx + '][rules][' + idx + '][adjust]" class="form-control" value="'+ adjust +'" />' +
            '</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" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
              '</div>' +
              '<div class="radio">' +
                '<label><input type="radio" name="special[' + pIdx + '][rules][' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</label>' +
              '</div>' +
            '</div>' +
            '<div class="form-group col-md-3">' +
              '<label>On</label>' +
              '<input type="text" name="" class="form-control" value="Extra rules" readonly="readonly" />' +
            '</div>' +
          '</div>' +
        '</div>';
  }
  function getBasePriceDiv(pIdx = 0, idx = 0, price="" ) {
    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" value="'+ price +'" />' +
            '</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 getQuantDiv(idx = 0, selctedFrom=null, selectedTo=null, adjust="", currency="") {
    var optionsFrom = '';
    for (let i = 1; i <= 5; i++) {
      optionsFrom = optionsFrom + '<option value="'+ i +'" '+ (i == selctedFrom ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    var optionsTo = '';
    for (let i = 1; i <= 5; i++) {
      optionsTo = optionsTo + '<option value="'+ i +'" '+ (i == selectedTo ? ' selected="selected"' : '') +' >' + i + '</option>';
    }

    return '<div class="row quants" id="quant' + idx + '">' +
        '<div class="col-md-12">' +
          '<div class="form-group col-md-2">' +
            '<label>Form</label>' +
            '<select class="form-control select2" name="quantity[' + idx + '][form]" required>' +
              optionsFrom +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>To</label>' +
            '<select class="form-control select2" name="quantity[' + idx + '][to]" required>' +
              optionsTo +
            '</select>' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Adjust</label>' +
            '<input type="text" name="quantity[' + idx + '][adjust]" class="form-control"  value="'+ adjust +'" />' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="quantity[' + idx + '][currency]" value="euro" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="quantity[' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }

  function getExtraDiv(idx = 0, selectedExtra=null, adult="", child="", accomodationdult="", currency=null) {
    var options = '';
    extras.forEach(function (e) {
      options = options + '<option value="'+ e._id +'"'+ (selectedExtra == e._id ? ' selected="selected"' : '') +'>' + (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</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" value="'+ adult +'" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Child</label>' +
            '<input type="text" name="roomextra[' + idx + '][child]" class="form-control" value="'+ child +'" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>per Accomodation</label>' +
            '<input type="text" name="roomextra[' + idx + '][accomodationdult]" class="form-control" value="'+ accomodationdult +'" />' +
          '</div>' +
          '<div class="form-group col-md-2">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="roomextra[' + idx + '][currency]" value="euro" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="roomextra[' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +'  >%</label>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }

    function getSaleDiv(idx = 0, selectedRule=null, saleStartdate="", saleEnddate="", currency="") {
    var options = '';
    for (let i = 1; i <= 5; i++) {
      options = options + '<option value="'+ i +'" '+ (i == selectedRule ? ' selected="selected"' : '') +' >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" value="'+ saleStartdate +'"  >' +
          '</div>' +
          '<div class="form-group col-md-3">' +
            '<label>End Date</label>' +
            '<input class="form-control" type="date" name="salessession[' + idx + '][saleEnddate]" placeholder="Date" value="'+ saleEnddate +'" >' +
          '</div>' +
          '<div class="form-group col-md-1">' +
            '<label>Currency</label>' +
            '<div class="radio">' +
              '<label><input type="radio" name="salessession[' + idx + '][currency]" value="euro" '+ (currency=="euro" ? 'checked="checked"': ' ') +' >euro</label>' +
            '</div>' +
            '<div class="radio">' +
              '<label><input type="radio" name="salessession[' + idx + '][currency]" value="%" '+ (currency=="%" ? 'checked="checked"': ' ') +' >%</label>' +
            '</div>' +
          '</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>
    Edit 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/'+doc.hotel %>">Rooms</a></li>
    <li class="active">Edit 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">
      <input type="hidden" value="<%= doc.hotel %>" name="hotelId" />
      <div class="box-header with-border">
        <h3 class="box-title">Edit 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>
              <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
              <input name="no_of_rooms" value="<%= doc.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>
              <select id="room_type" class="form-control" name="room_type" required>
                <% for(idx in roomTypes) { %>
                <option value="<%= roomTypes[idx]._id %>" <%- (doc.room_type && doc.room_type._id.toString()==roomTypes[idx]._id.toString())
                  ? 'selected="selected"' : '' %>>
                  <%= 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="<%= doc.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 Number Of Children</label><em>*</em>
              <input name="no_of_child" value="<%= doc.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>
        </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()">
                <% 
                var roomFacilitiesId = roomFacilities.map(ele => ele.facility.toString())
                for(idx in facilities) { %>
                <option value="<%= facilities[idx]._id %>" <%=(roomFacilitiesId ||
                  []).includes(facilities[idx]._id.toString()) ? 'selected="selected"' : '' %>>
                  <%= 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 sleepIcon) { %>
                <option value="<%= sleepIcon[idx]._id %>"
                  <%= sleep ? sleepIcon[idx]._id.toString() == sleep.sleep_icon.toString() ? 'selected' : '' : '' %>>
                  <%= sleepIcon[idx].en_name %>
                </option>
                <%}%>
              </select>
             
             
            </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="<%= doc.checkInTime %>" 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="<%= doc.checkOutTime %>" 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="<%= doc.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 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>
                <% for (var i =1; i <=5;  i++ ) { %>

                <option value="<%= i %>" <%- i== doc.p_adult ? 'selected="selected"' : '' %>><%= i %> </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>

                <% for (var i =1; i <=5;  i++ ) { %>

                <option value="<%= i %>" <%- i== doc.p_child ? 'selected="selected"' : '' %>><%= i %> </option>
                <% } %>


              </select>

            </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 %>" <%- (doc.benefit &&
                      doc.benefit.toString().includes(benefits[bidx]._id.toString())) ? 'selected="selected"' : '' %>>
                  <%= 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"== doc.paymentMethod ? 'selected="selected"' : '' %>>Card</option>
                <option value="Cash" <%- "Cash"== doc.paymentMethod ? 'selected="selected"' : '' %>>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 %>"
                  <%- ttax.includes(taxes[tax]._id.toString()) ? 'selected="selected"': '' %></option>
                  <%= taxes[tax].en_name %>
                </option>
                <%}%>
        </select>
       
        </div>

        <div class="form-group col-md-6">
          <label for="bathroom">Bathroom</label><em>*</em>
          <select id="bathroom" name="bathroom" class="form-control select2" required onchange="deleteTags()">
            <% for(idx in bathroomIcon) { %>
                <option value="<%= bathroomIcon[idx]._id %>"
                  <%= bathroom ? bathroomIcon[idx]._id.toString() == bathroom.bathroom_icon.toString() ? 'selected' : '' : '' %>>
                  <%= bathroomIcon[idx].en_name %>
                </option>
                <%}%>
          </select>
         
         
        </div>
        <div class="form-group col-md-6">
          <label for="extrabed">Extrabed</label><em>*</em>
          <select id="extrabed" name="extrabed" class="form-control select2" required onchange="deleteTags()">
            <% for(idx in extrabedIcon) { %>
                <option value="<%= extrabedIcon[idx]._id %>"
                  <%= extrabed ? extrabedIcon[idx]._id.toString() == bathroom.bathroom_icon.toString() ? 'selected' : '' : '' %>>
                  <%= extrabedIcon[idx].en_name %>
                </option>
                <%}%>
          </select>
         
         
        </div>
        </div>
        </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>Guest Occupents Rules</label>
              <a id="addOccupents" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-plus"></span>
              </a>
              <a id="minusOccupents" class="btn btn-sm btn-primary" title="">
                <span class="glyphicon glyphicon-minus"></span>
              </a>
            </div>
          </div>
        </div>
        <div class="occupents"></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="minusSalesSession" 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>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>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>
      <!-- /.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 -->