@extends('layout.master')
@section('title', 'Images')
@section('images', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/morris.js/morris.css')}}">
@endsection

@section('body')
<div class="col-12 grid-margin stretch-card">
    <div class="card">
    <div class="card-body">
      <form class="forms-sample" method="post" action="{{route('/upload-image')}}" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
          <div class="input-group col-xs-12">
            <input type="file" name="image" class="form-control file-upload-info" placeholder="Upload Image">
            <span class="input-group-append">
              <button class="btn btn-primary" type="submit">Upload</button>
            </span>
          </div>
        </div>
      </form>
        <!-- partial -->
      <h4 class="card-title">Images</h4>
      <p>Double Click Image To Copy Path</p>
      <div id="lightgallery" class="row lightGallery">
        @foreach($img as $key => $im)
        <a href="#!" class="image-tile"><img ondblclick="copy('{{$key}}')" src="{{asset($im->path_to_picture)}}" alt="image small"></a>
        <a href="{{url('/delete-image/'.$im->id)}}">Delete</a>
        <input type="hidden" value="{{asset($im->path_to_picture)}}" id="{{$key}}" >
        @endforeach
      </div>
    </div>
  </div>
</div>
        <!-- content-wrapper ends -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
@endsection
@section('levelJS')
<script type="text/javascript">
    function copy(id){
        var copyText = document.getElementById(id);
        copyText.type = 'text';
        copyText.select();
        document.execCommand("copy");
        copyText.type = 'hidden';
        console.log(copyText.value);
        alert("Copied the text: " + copyText.value);     
    }
    
</script>
@endsection