<?php
use Illuminate\Support\Facades\Storage;

?>

<style>
img {
  display: block;
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}
</style>

<div class="modal-header">
  <h5 class="modal-title">Crop Immagine</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
  <div>
    <img src="{{ Storage::disk('temp')->url($filename) }}" width="100%" id="copertina"/>
  </div>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-primary" onclick="getCroppedData()">Ritaglia immagine</button>
  <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Annulla ritaglio</button>
</div>


<script>

$(document).ready(function () {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    }
  });

  const cropper = new window.Cropper('#copertina');
});
</script>

<script>

function getCroppedData(){
  var $image = $('#copertina');
  cropBoxData = $image.cropper('getData');

  $.ajax({
    type: "POST",
    async: false,
    dataType: 'json',
    url: "{{ route('user.cropImage') }}",
    data: {
      filename: "{{ $filename }}",
      cropBoxData: cropBoxData,
      _token : "{{csrf_token()}}",
    },
    success: function(data){
      $("#uploadedAvatar").attr("src", data['url']);
      $("[name='path_foto']").val(data['filename']);
      $("#extraLargeModal").modal('hide');
    },
    error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + XMLHttpRequest.responseText + "\n" + exception); },
  });
}
</script>
