<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
  })
</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 Homestay Space
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/homestays">Homestay</a></li>
    <li><a href="<%= '/homestays/rooms/'+doc.homestay %>">Spaces</a></li>
    <li class="active">Edit Space</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.homestay %>" name="homestayId" />
      <div class="box-header with-border">
        <h3 class="box-title">Edit Homestay Space</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-4">
              <label for="room_type">Space Type</label><em>*</em>
              <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 class="form-group col-md-4">
              <label>No 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-4">
              <label>No 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-4">
              <label>No of Spaces</label><em>*</em>
              <input name="no_of_rooms" value="<%= doc.no_of_rooms %>" id="no_of_rooms" class="form-control"
                placeholder="No of Spaces" type="number" min="1" required>
              <% 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-4">
              <label for="price">Price</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-4">
              <label for="facilities">Facilities</label><em>*</em>
              <select id="facilities" name="facilities[]" multiple="multiple" class="form-control select2"
                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>
        </div>
        <div class="row">
          <div class="col-md-12">
            <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>
      <!-- /.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 -->