<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  function goForward() {
    window.history.forward() ? window.history.forward() : $('#addHotel').submit();
  }
  function goBack() {
    window.history.back();
  }
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2();
  })
  $('#addHotel').validate({
    errorClass: 'text-danger',
    rules: {
      name: {
        required: true,
        minlength: 3
      },
      email: {
        required: true,
        email: true
      },
      star_rating: {
        required: true,
        max: 5,
        min: 0
      },
      hotel_type: {
        required: true
      }
    },
    messages: {
      name: {
        required: "Please provide a name",
        minlength: "Your name must be at least 3 characters long"
      },
      email: {
        required: "Please provide an email",
        minlength: "Please provide a valid email"
      },
      star_rating: {
        required: "Please provide a star rating",
        max: "Your rating can be atmost 5",
        min: "Your rating can be atleast 0"
      },
      hotel_type: {
        required: "Please provide atleast 1 hotel type"
      }
    }
  });
</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 Accomodation
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/hotels">Accomodation List</a></li>
    <li class="active">Add</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form id="addHotel" role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <h3 class="box-title">New Accomodation</h3>

        <!--<div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
        </div>-->
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="name">Name</label><em>*</em>
              <input name="name" value="<%= flash.data_name || '' %>" id="name" class="form-control" placeholder="Name"
                type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_name %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="email">Email</label><em>*</em>
              <input name="email" value="<%= flash.data_email || '' %>" id="name" class="form-control"
                placeholder="Email" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_email')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_email %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="star_rating">Star Rating</label><em>*</em>
              <input name="star_rating" value="<%= flash.data_star_rating || '' %>" id="star_rating"
                class="form-control" placeholder="star rating" type="number" min="0" max="5">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_star_rating')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_star_rating %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label>Owner</label><em>*</em>
              <select id="owner" class="form-control select2" name="owner">
                <% for(oidx in owner) { %>
                <option value="<%= owner[oidx]._id %>">
                  <%= owner[oidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_owner')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_owner %>
                </h5>
                <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label>Accomodation Type</label><em>*</em>
              <select id="hotel_type" class="form-control select2" multiple="multiple" name="hotel_type[]" onchange="deleteTags()">
                <% for(hidx in hotelTypes) { %>
                <option value="<%= hotelTypes[hidx]._id %>">
                  <%= hotelTypes[hidx].slug ? hotelTypes[hidx].slug : hotelTypes[hidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_hotel_type')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_hotel_type %>
                </h5>
                <% } %>
            </div>
            <div class="form-group col-md-3">
              <label>Recommend</label><br>
              <label><input type="radio" <%=flash.data_recommend || false ? 'checked' : '' %> name="recommend"
                  id="recommend" value="1" class="form-control minimal" /> Yes</label>
              <label><input type="radio" <%=flash.data_recommend || true ? '' : 'checked' %> name="recommend"
                  id="recommend" value="0" class="form-control minimal" /> No</label>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_recommend')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_recommend %>
              </h5>
              <% } %>
            </div>

            <div class="form-group col-md-3">
              <label>Subspace</label><br>
              <label><input type="radio" <%=flash.data_recommend || false ? 'checked' : '' %> name="subspace"
                  id="subspace" value="1" class="form-control minimal" /> Yes</label>
              <label><input type="radio" <%=flash.data_recommend || true ? '' : 'checked' %> name="subspace"
                  id="subspace" value="0" class="form-control minimal" /> No</label>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_subspace')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_subspace %>
              </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>
          <a onclick="goForward();" class="btn btn-primary" role="button">Next</a>
          <!-- <input name="submit" value="Next" 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 -->