<% 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;
  }

  div.show-image:hover .primaryimage {
    display: block;
  }
  div.show-image .primaryimage {
    position: absolute;
    display: none;
    float: right;
  }
  div.show-image input.update {
    top: 0;
    left: 0;
  }
  div.show-image .primaryimage {
    top: 6px;
    left: 12%;
    color: blue;
  }
  .primaryimage :hover {
    color: blue;
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Add Transfer Images
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li>
      <a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a>
    </li>
    <li><a href="/vehicles">Transfer</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 Transfer 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="<%= '/vehicles/deleteImage/' + doc[i].pic._id %>"
                        title="Delete"
                      >
                        <i class="fa fa-trash delete" aria-hidden="true"></i>
                      </a>
                      <a
                        href="<%= '/vehicles/setPrimary/' + vehicle + '/' + doc[i].pic.name %>"
                        title="Set Primary"
                      >
                        <i
                          class="far fa-check-circle primaryimage"
                          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"
          />
          <input
            type="button"
            value="Done"
            class="btn btn-primary"
            onclick="location.href='/vehicles';"
          />
        </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 -->
