@php
    // PARAM
    // input_field_name
@endphp

@push('include-css')
<style>

        #img {
            display: block;
            max-width: 100%;
        }
        .preview {
            overflow: hidden;
            width: 160px; 
            height: 160px;
            margin: 10px;
            border: 1px solid red;
        }


</style>
@endpush

<div class="modal fade" id="modal" 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">{{ __('lang.crop_image') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <div class="row">
                        <div class="col-md-8" style="height:500px;">  
                            <!--  default image where we will set the src via jquery-->
                            <img id="image">
                        </div>
                        <div class="col-md-4">
                            <div class="preview"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                           
                            <span style="margin-right:1rem">
                                <a type="button" class="btn btn-primary" onclick="zoomIn()"> <i class="fas fa-search-plus"></i>{{ __('lang.zoom_in') }}</a>
                                <a type="button" class="btn btn-primary" onclick="zoomOut()"><i class="fas fa-search-minus"></i>{{ __('lang.zoom_out') }}</a>
                            </span>

                            <span style="margin-right:2rem">
                                <a type="button" class="btn btn-primary" onclick="rotate()"><i class="fas fa-undo"></i> <span> {{ __('lang.rotate') }}</span></a>
                            </span>


                            @if($image_type != 'profile')

                                <span style="margin-right:2rem">
                                    <a type="button" class="btn btn-primary" onclick="setAspectRatio('NaN')">{{ __('lang.free') }}</a>
                                    <a type="button" class="btn btn-primary" onclick="setAspectRatio('1')">1:1</a>
                                    <a type="button" class="btn btn-primary" onclick="setAspectRatio('0.56')">16:9</a>
                                    <a type="button" class="btn btn-primary" onclick="setAspectRatio('0.75')">4:3</a>
                                    <a type="button" class="btn btn-primary" onclick="setAspectRatio('0.66')">3:2</a>
                                </span>

                            @endif

                            <span>
                                <a type="button" class="btn btn-warning" style="width: 100px " onclick="cropperReset()">{{ __('lang.reset') }}</a>

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

                </div>
               
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('lang.cancel') }}</a>
                <a type="button" class="btn btn-primary" id="crop">{{ __('lang.crop') }}</a>
            </div>
        </div>
    </div>
</div>


@push('include-js')


    <script>

        let input_field_name    =  "{{ $input_field }}";
        let output_field_name   =  "{{ $output_field }}";
        let preview_field_name  =  "{{ $preview_field ?? '' }}";
        let image_type          =  "{{ $image_type ?? '' }}";

        let allowedExtension    = ['image/jpeg', 'image/jpg', 'image/png','image/gif','image/bmp'];

        var bs_modal = $('#modal');
        var image = document.getElementById('image');
        var cropper,reader,file;


        $(`input[name=${input_field_name}]`).change(function(e){

            var file = this.files[0];
         
            let allowedExtension    = ['image/jpeg', 'image/jpg', 'image/png','image/gif','image/bmp'];
            var fileName            = file.name;
            let type                = file.type;
            let size                = file.size;

            var hasDoubleExtension      = (fileName.split('.').length > 2) ;

            if (hasDoubleExtension) {
                toastr["error"]("Error: Double Extension Found. Please Select Valid Image File");
                $(this).val("");
                return;
            }

            if(allowedExtension.indexOf(type) === -1){
                toastr["error"]('Image extension must be JPG,PNG,JPEG.');
                $(this).val("");
                return;
             }

            if(size > 1024000){
              toastr["error"]('Image should not be greater than 1 MB.');
              $(this).val("");
              return;
            }


            openCropper(e);

            
        });

        function openCropper(field){

            var files = field.target.files;
            var done = function(url) {
                image.src = url;
                bs_modal.modal('show');
            };


            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);
                }
            }

            $(`input[name=${input_field_name}]`).val('');

          
        }

        bs_modal.on('shown.bs.modal', function() {
            cropper = new Cropper(image, {
                aspectRatio: (image_type=='profile') ? 0.72 : 1,
                viewMode: 1,
                // allowExtraSpace: true,
                cropBoxResizable: (image_type=='profile') ? false : true, // Disable resizing of the crop box
                preview: '.preview',
                ready: function() {
                    cropper.zoomTo(0);
                }
            });

            if(image_type=="free"){
                cropper.setAspectRatio('NaN');
            }
            
        }).on('hidden.bs.modal', function() {
            cropper.destroy();
            cropper = null;
        });


        function setAspectRatio(aspectRatio){

            cropper.setAspectRatio(aspectRatio);
        }

        function zoomIn(){
            cropper.zoom(0.1);
        }
       
        function zoomOut(){
            cropper.zoom(-0.1);
        }

        function rotate(){
            cropper.rotate(-90); // Rotate left by 90 degrees
        }

        function cropperReset(){

            let aspectRatio = (image_type=='profile') ? 0.72 : 1;

           cropper.setAspectRatio(aspectRatio);
           cropper.reset();
        }
       

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

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    // Set the base64data to the "image" input field
                    $(`input[name=${output_field_name}]`).val(base64data);

                    $(`img[name=${preview_field_name}]`).attr('src', base64data);

                    // toastr.success("Image cropped successfully!");
                };
            });

            bs_modal.modal('hide');

        })
    </script>


@endpush