@push('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="/assets/dash/3rdparty/cropper/cropper.bundle.css" rel="stylesheet" type="text/css" />
@endpush
@push('modals')
    <div class="modal fade" id="kt_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header py-4">
                    <h2>Editor de Imágenes</h2>
                    <small id="explanation" class="text-muted fw-bold fs-6">Tamaño recomendado:  x * x</small>
                </div>
                <div class="modal-body">
                    <div class="pt-5">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="mb-3">
                                    <img id="cpImage" src="/assets/dash/media/svg/blank-image.svg" height="600px"/>
                                </div>
                                {{-- <div id="cropper-buttons">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="setDragMode" data-option="move" title="Mover">
                                            <span class="fa fa-arrows"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="setDragMode" data-option="crop" title="Edición">
                                            <span class="fa fa-crop"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="zoom" data-option="0.1" title="Zoom +">
                                            <span class="fa fa-search-plus"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="zoom" data-option="-0.1" title="Zoom -">
                                            <span class="fa fa-search-minus"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="move" data-option="-10" data-second-option="0" title="Mover a la Izquierda">
                                            <span class="fa fa-arrow-left"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="move" data-option="10" data-second-option="0" title="Mover a la Derecha">
                                            <span class="fa fa-arrow-right"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="move" data-option="0" data-second-option="-10" title="Mover hacia Arriba">
                                            <span class="fa fa-arrow-up"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="move" data-option="0" data-second-option="10" title="Mover hacia Abajo">
                                            <span class="fa fa-arrow-down"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="rotate" data-option="-45" title="Girar a la Izquierda">
                                            <span class="fa fa-undo"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="rotate" data-option="45" title="Girar a la Derecha">
                                            <span class="fa fa-repeat"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="scaleX" data-option="-1" title="Voltear Horizontalmente">
                                            <span class="fa fa-arrows-h"></span>
                                        </button>
                                        <button type="button" class="btn btn-primary mb-3" data-method="scaleY" data-option="-1" title="Voltear Verticalmente">
                                            <span class="fa fa-arrows-v"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary mb-3" data-method="reset" title="Restaurar">
                                            <span class="fa fa-refresh"></span>
                                        </button>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="col-lg-4">
                                <div class="cropper-preview clearfix d-flex flex-wrap mb-3">
                                    <div id="cropper-preview-lg" style="background-color: #f7f7f7;"></div>
                                </div>
                                <!-- <h3>Data:</h3> -->
                                <div id="cropper-data" class="mb-3">
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataX">X</label>
                                            <input type="text" class="form-control form-control-solid" id="dataX" placeholder="x" readOnly/>
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataY">Y</label>
                                            <input type="text" class="form-control form-control-solid" id="dataY" placeholder="y" readOnly/>
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataWidth">Ancho</label>
                                            <input type="text" class="form-control form-control-solid" id="dataWidth" placeholder="Ancho" readOnly/>
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataHeight">Alto</label>
                                            <input type="text" class="form-control form-control-solid" id="dataHeight" placeholder="Alto" readOnly/>
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataRotate">Rotación</label>
                                            <input type="text" class="form-control form-control-solid" id="dataRotate" placeholder="Rotación" readOnly/>
                                            <span class="input-group-text">grados</span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataScaleX">Escala X</label>
                                            <input type="text" class="form-control form-control-solid" id="dataScaleX" placeholder="scaleX" readOnly/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <label class="input-group-text" for="dataScaleY">Escala Y</label>
                                            <input type="text" class="form-control form-control-solid" id="dataScaleY" placeholder="scaleY" readOnly/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-end py-4">
                    {{-- <button type="button" class="btn btn-sm btn-icon-dark btn-text-dark bg-gray-300 btn-active-primary" id="cutImage">
                        <i class="ki-duotone ki-design-frame fs-2">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Cortar imagen
                    </button> --}}
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-sm btn-icon-dark btn-text-dark bg-gray-300 btn-active-danger" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-picture fs-2">
                            <i class="path1"></i>
                            <i class="path2"></i>
                        </i> Guardar imagen
                    </button>
                </div>
            </div>
        </div>
    </div>
@endpush
@push('scripts')
    <script src="/assets/dash/3rdparty/cropper/cropper.bundle.js"></script>
	<script type="text/javascript">

        function sleep (time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }

        function changeDimensions(){
            let BID = document.querySelector('select[name="type"]').value;
            if(BID){
                selected = types.find(type => type.id == BID);
                document.getElementById('imgH').innerHTML = selected.height;
                document.getElementById('imgW').innerHTML = selected.width;
                document.getElementById('explanation').innerHTML = `Tamaño recomendado: ${selected.width}px de ancho, ${selected.height}px de alto`;
            }
        }

        const types = {!! json_encode($options) !!};
        var selected;

        var Cropper = window.Cropper;
        var URL = window.URL || window.webkitURL;
        var modal = new bootstrap.Modal(document.getElementById('kt_modal'), {
            keyboard: false,
            backdrop: 'static'
        })
        var image = document.getElementById('cpImage');
        var cropper;
        var uploadedImageType = 'image/jpeg';
        var uploadedImageName = 'cropped.jpg';
        var uploadedImageURL;
        var imgCrop = '';

        const lgPreview = document.getElementById('cropper-preview-lg');

        KTUtil.onDOMContentLoaded(function() {

            changeDimensions();
            $('select[name="type"]').on('change', changeDimensions);

            document.querySelector('[name="imgfile"]').addEventListener('change', function(e){
                e.preventDefault();
                var files = this.files;
                let file;
                if (files && files.length) {
                    file = files[0];

                    uploadedImageType = file.type;
                    uploadedImageName = file.name;

                    if (uploadedImageURL) URL.revokeObjectURL(uploadedImageURL);
                    image.src = uploadedImageURL = URL.createObjectURL(file);
                    if(cropper) cropper.destroy()
                    modal.show();
                    sleep(500).then(() => {
                        cropper = new Cropper(image, {
                            aspectRatio: selected.width / selected.height,
                            responsive: false,
                            zoomOnTouch: false,
                            zoomOnWheel: false,
                            toggleDragModeOnDblclick: false,
                            cropBoxResizable: false,
                            data: {
                                width: selected.width,
                                height: selected.height
                            },
                            ready: function (e) {

                            },
                            crop: function (e) {
                                // var data = e.detail;
                                // dataHeight.value = Math.round(data.height);
                                // dataWidth.value = Math.round(data.width);

                                document.getElementById('dataX').value = Math.round(event.detail.x);
                                document.getElementById('dataY').value = Math.round(event.detail.y);
                                document.getElementById('dataWidth').value = Math.round(event.detail.width);
                                document.getElementById('dataHeight').value = Math.round(event.detail.height);
                                document.getElementById('dataRotate').value = event.detail.rotate;
                                document.getElementById('dataScaleX').value = event.detail.scaleX;
                                document.getElementById('dataScaleY').value = event.detail.scaleY;

                                lgPreview.innerHTML = '';
                                lgPreview.appendChild(cropper.getCroppedCanvas({ width: 256, height: 160 }));
                            },
                        });
                    });

                    // var buttons = document.getElementById('cropper-buttons');
                    // var methods = buttons.querySelectorAll('[data-method]');
                    // methods.forEach(function (button) {
                    //     button.addEventListener('click', function (e) {
                    //         let data = {
                    //             method: button.getAttribute('data-method'),
                    //             option: button.getAttribute('data-option') || undefined,
                    //             secondOption: button.getAttribute('data-second-option') || undefined
                    //         };
                    //         cropper[data.method](data.option, data.secondOption);
                    //         if(data.method == 'scaleX' || data.method == 'scaleY'){
                    //             button.setAttribute('data-option', -data.option)
                    //         }
                    //     });
                    // });
                }
            })

            // document.getElementById('cutImage').addEventListener('click', function(e){
            //     var result = cropper.getCroppedCanvas({
            //         maxWidth: 4096,
            //         maxHeight: 4096,
            //         imageSmoothingEnabled: false,
            //         imageSmoothingQuality: 'high',
            //         fillColor: 'transparent',
            //     })
            //     imgCrop = result.toDataURL(uploadedImageType)
            //     document.querySelector('#upImage .image-input-wrapper').style.backgroundImage = `url('${imgCrop}')`
            //     document.querySelector('[name="cropper"]').value = JSON.stringify(cropper.getData());
            //     modal.hide();
            // })
        });
    </script>
@endpush