@extends('layouts.nifty')

@section('content')

<style type="text/css">
imgprofile {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px; 
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
</style>

              <div id="modal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="modalLabel">Crop your Image to Continue</h5>
                      <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="imgprofile-container">
                        <div class="row">
                          <div class="col-md-8">
                            <img id="image" src="{{ asset('assets/img/3456749.jpg') }}">
                            <br>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="crop">Change Profile Picture</button>
                          </div>
                          <div class="col-md-4">
                            <div class="preview"></div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>


        <section id="content" class="content">
            <div class="content__header content__boxed overlapping">
                <div class="content__wrap">

                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-home"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page">Employee 201 Files</li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">List of Employees</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.employees.show', $employees->id) }}">View Employees</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Change Profile Picture</li>
                        </ol>
                    </nav>
                    <!-- END : Breadcrumb -->

                    <h1 class="page-title mb-0 mt-2">Change Profile Picture</h1>
                    
                    <p>Change Profile Picture</p>
                    

                </div>

            </div>
            <div class="content__boxed">
                <div class="content__wrap">


                    <!-- Table with toolbar -->
                    <div class="card">
                        <div class="card-header -4 mb-3">
                                    <div class="card-body">
                                      <div class="form-group">
                                            <label>Upload Profile Pic</label>
                                            <input type="hidden" class="form-control form-control-sm" id="s_employid" name="s_employid" value="{{ $employees->s_employid }}">
                                            <input type="hidden" class="form-control form-control-sm" id="id" name="id" value="{{ $employees->id }}">
                                            <input type="hidden" class="form-control form-control-sm" id="oldfile" name="oldfile" value="{{ $employees->emp_photo }}">
                                            <input type="file" name="image" class="image" accept=".jpg, .png, .gif">
                                      </div>                                      

                                    

                                    </div>
                        </div>

                    </div>
                    <!-- END : Table with toolbar -->
                        <div class="card-footer" style="text-align: center;">
                          <button type="button" class="btn btn-sm btn-info" onclick="window.location.href='{{ route('admin.profiles.show', $employees->s_employid) }}'"><i class="fa fa-arrow-circle-left"></i> Back to Profile </button>
                          
                </div>
            </div>

            <!-- FOOTER -->
            @include('partials.footer')
            <!-- END - FOOTER -->
        </section>




<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery-3.5.1.js') }}"></script>

<link rel="stylesheet" href="{{ asset('mylib/css/cropper.css') }}"  />
<script src="{{ asset('mylib/js/cropper.js') }}" ></script>

<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var oldfile = document.getElementById('oldfile');
var cropper;

  
$("body").on("change", ".image", function(e){
    var files = e.target.files;
    var done = function (url) {
      image.src = url;
      $modal.modal('show');
    };
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
      file = files[0];

      if (URL) {
        done(URL.createObjectURL(file));
      } else if (FileReader) {
        reader = new FileReader();
        reader.onload = function (e) {
          done(reader.result);
        };
        reader.readAsDataURL(file);
      }
    }
});

$modal.on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
    aspectRatio: 1,
    viewMode: 2,
    preview: '.preview'
    });
}).on('hidden.bs.modal', function () {
   cropper.destroy();
   cropper = null;
});

$("#crop").click(function(){
    canvas = cropper.getCroppedCanvas({
      width: 360,
      height: 360,
      });

    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
        var s_employid = document.getElementById('s_employid').value;
        var oldfile = document.getElementById('oldfile').value;
        var id = document.getElementById('id').value;
         reader.readAsDataURL(blob); 
         reader.onloadend = function() {
            var base64data = reader.result; 
            $.ajax({
                dataType: "json",
                url: "{{ route('profileempcropper') }}",
                data: {
                    _token:"{{csrf_token()}}",
                    s_employid:s_employid, 
                    oldfile:oldfile,
                    image: base64data
                },
                type: "POST",
                success: function(data){
                    $modal.modal('hide');
                    
                    window.location.href = "{{route('admin.profiles.show', '')}}"+"/"+s_employid;
                    //alert("success upload image");
                }
              });

          
         }
    });
})

</script>

@endsection