<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<!-- DataTables -->
<!-- DataTables -->
<% stylesheet('/css/dataTables.bootstrap.min.css') %>

<!-- DataTables -->
<% script('/js/jquery.dataTables.min.js') %>
<% script('/js/dataTables.bootstrap.min.js') %>

<% block('custom_scripts', `
<script>
     $(document).ready(function () {
      $('#example1').DataTable({
          "aoColumnDefs": [
//              {'bSortable': false, 'aTargets': [8]},
//              //{"aTargets": [3], "sClass": "text-justify"},
//              {"sClass": "center", "aTargets": [1, 2]},
              {"width": "9%", "targets": [0]},
            //   {"width": "15%", "targets": [3]},
//              {"width": "8%", "targets": [8]},
//                  //{"width": "9%", "targets": [7]},
          ],
          "paging": true,
          "lengthChange": true,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false
      });
  });
  $(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 = 70;
                  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>
`) %>

<section class="content-header">
    <h1>
        Media
        <!--<small>Preview</small>-->
    </h1>
    <ol class="breadcrumb">
        <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="/hotels">Media</a></li>
        <li class="active">Add Images</li>
    </ol>
</section>

<section class="content">
    <% if (Object.prototype.hasOwnProperty.call(flash, 'success')) { %>
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <%= flash.success %>
    </div>
    <% } %>
    <% if (Object.prototype.hasOwnProperty.call(flash, 'error')) { %>
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <%= flash.error %>
    </div>
    <% } %>

    <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">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>
                <div class="box-body">
                    <div class="row">
                        <div class="form-group col-md-1">
                            <label>Images</label>
                        </div>
                        <div class="form-group col-md-3">
                            <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 class="form-group col-md-3">
                            <input name="submit" value="Upload" class="btn btn-primary" type="submit" />
                        </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>
            </form>

        </div>


        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">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>
            <div class="box-body">
                <table id="example1" class="table table-bordered table-hover">
                    <thead>
                        <tr>

                            <th>Image</th>
                            <th>URL</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% 
              for(var i=0; len=media.length, i < len; i++) { %>
                        <tr>
                            <td>
                                <img height="110" width="150" src="<%='/images/' +media[i].name %>" alt="" />
                            </td>
                            <td>
                                <pre><%= baseUrl + '/images/' +media[i].name %></pre>
                            </td>
                            <td> <a href="<%= '/media/delete/'+media[i]._id %>"
                                    class="btn btn-sm btn-danger delete_confirmation" title="Delete"><span
                                        class="glyphicon glyphicon-trash"></span></a></td>
                        </tr>
                        <% } %>
                    </tbody>

                    <tfoot>
                        <tr>

                            <th>Image</th>
                            <th>URL</th>
                            <th>Action</th>
                            <!-- <th>Action</th> -->
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </section>