<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  function goBack() {
    var details = {
      address: $('#address').val(),
      facilities: $('#facilities').val(),
      phone1: $('#phone1').val(),
      phone2: $('#phone2').val(),
      phone3: $('#phone3').val(),
      region: $('#region').val(),
      zone: $('#zone').val(),
      country: $('#country').val(),
      pin: $('#pin').val()
    };
    window.localStorage.setItem('details', JSON.stringify(details))
    window.history.back();
  }
  $(function () {
    var details = localStorage.getItem('details') || {};
    localStorage.removeItem('details');
    if(Object.keys(details).length) {
      details = JSON.parse(details);
      $('#address').val(details.address);
      $('#facilities').val(details.facilities);
      $('#phone1').val(details.phone1);
      $('#phone2').val(details.phone2);
      $('#phone3').val(details.phone3);
      $('#region').val(details.region);
      $('#zone').val(details.zone);
      $('#country').val(details.country);
      $('#pin').val(details.pin);
    }
    // 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 Hotel Details
    <!--<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 List</a></li>
    <li><a href="<%= '/hotels/edit/' + hotel.hotel %>">Hotel</a></li>
    <li class="active">Edit Details</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <h3 class="box-title">Edit Hotel Details</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="address">Address</label><em>*</em>
              <input name="address" value="<%= hotel.address || '' %>" id="address" class="form-control" placeholder="Address"
                data-validation="required" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_address')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_address %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label>Facilities</label><em>*</em>
              <select id="facilities" name="facilities[]" multiple="multiple" class="form-control select2" onchange="deleteTags()">
                <% 
                  var hotelFacilitiesId = hotelFacilities.map(ele => ele.facility.toString())
                  for(idx in facilities) { %>
                <option value="<%= facilities[idx]._id %>" <%=(hotelFacilitiesId ||
                  []).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-4">
              <label for="phone1">Phone 1</label><em>*</em>
              <input name="phone1" value="<%= hotel.phone1 || '' %>" id="phone1" class="form-control" placeholder="Phone 1"
                data-validation="required" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone1')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_phone1 %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label for="phone2">Phone 2</label>
              <input name="phone2" value="<%= hotel.phone2 || '' %>" id="phone2" class="form-control" placeholder="Phone 2"
                data-validation="required" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone2')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_phone2 %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label for="phone3">Phone 3</label>
              <input name="phone3" value="<%= hotel.phone3 || '' %>" id="phone3" class="form-control" placeholder="Phone 3"
                data-validation="required" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone3')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_phone3 %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-4">
              <label for="country">Country</label><em>*</em>
              <select id="country" class="form-control select2" name="country">
                <% for(cidx in country) { %>
                <option value="<%= country[cidx]._id %>" <%- hotel.country==country[cidx]._id.toString() ?
                  'selected="selected"' : '' %>
                  >
                  <%= country[cidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_country')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_country %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label>Region</label><em>*</em>
              <select id="region" class="form-control select2" name="region">
                <% for(ridx in regions) { %>
                <option value="<%= regions[ridx]._id %>" <%- hotel.region == regions[ridx]._id.toString() ?
                  'selected="selected"' : '' %>
                  >
                  <%= regions[ridx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_region')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_region %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label>Zone</label><em>*</em>
              <select id="zone" class="form-control select2" name="zone">
                <% for(zidx in zones) { %>
                <option value="<%= zones[zidx]._id %>" <%- hotel.zone == zones[zidx]._id.toString() ?
                  'selected="selected"' : '' %>
                  >
                  <%= zones[zidx].name %>
                </option>
                <%}%>
              </select>
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_zone')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_zone %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group col-md-6">
              <label for="pin">Zip Code</label>
              <input name="pin" value="<%= hotel.pin || '' %>" id="pin" class="form-control" placeholder="Zip Code" type="text">
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_pin')) { %>
                <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                  <%= flash.errors_pin %>
                </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">Back</a>
          <input name="submit" value="Update" 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 -->