<% 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') %>

<% 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>
`) %>

<section class="content-header">
    <h1>
        Edit Subspace
        <!--<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 class="active">Edit Subspace</li>
    </ol>
</section>
<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">Edit Subspace</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>
        <div class="row">
            <div class="col-md-12">
                <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 bathroom) { %>
                      <option value="<%= bathroom[idx]._id %>" <%= subspace.bathroom_type ? bathroom[idx]._id.toString() == subspace.bathroom_type.toString() ? 'selected' : '' : '' %>>
                        <%= bathroom[idx].en_name %>
                      </option>
                      <%}%>
                    </select>
                   
                   
                  </div>


                <div class="form-group col-md-3">
                    <label for="sleep">Room Type</label><em>*</em>
                    <select id="room_type" name="room_type" class="form-control select2" required onchange="deleteTags()">
                        <% for(idx in roomTypes) { %>
                            <option value="<%= roomTypes[idx]._id %>" <%= subspace.room_type? roomTypes[idx]._id.toString() == subspace.room_type.toString() ? 'selected' : '' : '' %>>
                              <%= roomTypes[idx].names.en_name %>
                            </option>
                            <%}%>
                    </select>
                    <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_roomTypes')) { %>
                        <h5 class="text-danger">
                            <i class="fa fa-exclamation-triangle"></i>
                            <%= flash.errors_roomTypes %>
                        </h5>
                    <% } %>
                </div>
                <div class="form-group col-md-3">
                    <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 %>" <%= subspace.sleep_type? sleep[idx]._id.toString() ==subspace.sleep_type.toString() ? 'selected' : '' : '' %>>
                        <%= sleep[idx].en_name %>
                      </option>
                      <%}%>
                    </select>
                   
                   
                  </div>

                <div class="form-group col-md-1">
                    <label>Space</label>
                    <input type="text" name="space" class="form-control" value="<%= subspace.space %>"  />
                </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 = subspace.facilities.map(ele => ele.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="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>
    </form>
</div>

<!-- /.content -->