<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2();

      function previewImages() {
          var preview = document.querySelector('#preview');
          preview.innerHTML = null;
          if (this.files) {
              [].forEach.call(this.files, readAndPreview);
          }

          function readAndPreview(file) {
              var reader = new FileReader();

              reader.addEventListener("load", function () {
                  var image = new Image();
                  image.height = 100;
                  image.title = file.name;
                  image.className = "margin";
                  image.src = this.result;
                  preview.appendChild(image);
              }, false);

              reader.readAsDataURL(file);
          }
      }

      document.querySelector('#images')
          .addEventListener("change", previewImages, false);
  })
</script>
`) %>

<% block('custom_style', `
<style type="text/css">
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #2a83a7;
    border: 1px solid #2a83a7;
  }
  div.show-image {
    position: relative;
    float:left;
    margin:5px;
  }
  div.show-image:hover img{
    opacity:0.75;
  }
  div.show-image:hover .delete {
    display: block;
  }
  div.show-image .delete {
    position:absolute;
    display:none;
  }
  div.show-image input.update {
    top:0;
    left:0;
  }
  div.show-image .delete {
    top: 6px;
    left:79%;
    color: red;
  }
  .delete :hover{
    color: darkred;
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Add Room Images
    <!--<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/' + hotel._id %>">Rooms</a></li>
    <li class="active">Add Images</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST" enctype="multipart/form-data">
      <div class="box-header with-border">
        <h3 class="box-title">New Room Images</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>Images</label>
              <input id="images" name="images" type="file" class="form-control" multiple="multiple" accept="image/*" />
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_images')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_images %>
              </h5>
              <% } %>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="timeline-item">
            <div class="timeline-body" id="preview">
              <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Existing Image(s)</label>
            <div class="timeline-item">
              <div class="timeline-body">
                <div class="row">
                  <div class="col-md-12">
                    <% 
                        for(var i=0; len=doc.length, i < len; i++) { %>
                    <div class="show-image">
                      <img height="110" width="150" src="<%='/images/' +doc[i].pic.name %>" alt="" />
                      <a href="<%= '/hotels/rooms/deleteImage/' + doc[i].pic._id %>" title="Delete">
                        <i class="fa fa-trash delete" aria-hidden="true"></i>
                      </a>
                    </div>
                    <% 
                        }
                        %>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.row -->
      <div class="box-footer">
        <div class="pull-left">
          <p class="text-success">
          </p>
        </div>
        <div class="pull-right">
          <input name="submit" value="Save" class="btn btn-primary" type="submit">
          <a href='<%="/hotels/rooms/" + hotel._id%>'"><input type="button" value="Done" class="btn btn-primary"  /></a>
        </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 -->