@once
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js" integrity="sha512-ooSWpxJsiXe6t4+PPjCgYmVfr1NS5QXJACcR/FPpsdm6kqG1FmQ2SVyg2RXeVuCRBLr0lWHnWJP6Zs1Efvxzww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cropper/1.0.1/jquery-cropper.min.js" integrity="sha512-V8cSoC5qfk40d43a+VhrTEPf8G9dfWlEJgvLSiq2T2BmgGRmZzB8dGe7XAABQrWj3sEfrR5xjYICTY4eJr76QQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" integrity="sha512-0SPWAwpC/17yYyZ/4HSllgaK7/gg9OlVozq8K7rf3J8LvCjYEEIfzzpnA2/SSjpGIunCSD18r3UhvDcu/xncWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="{{mix('js/main/cropper.js')}}" type="text/javascript"></script>
@endpush
@endonce

<style>
    .img-container img {
        max-width: 100%;
    }
    #cropper-preview canvas{
        width: 100% !important;
    }
</style>

<div id="cropper-loader" style="display: none;">
    <h5>{{ __('cropper_editor.titleCropperEditorMsg') }}</h5>
    <div class="img-container d-flex align-items-center justify-content-center" style="height: 200px; font-size: 80px;">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</div>


<div id="cropper-editor" class="img-container">
    <h5>{{ __('cropper_editor.titleCropperEditorMsg') }}</h5>
    <div class="img-container">
        <img id="image" src="" alt="Picture"/>
    </div>
    <div class="d-flex justify-content-between mt-3">
        <button id="btn-reset" class="btn btn-secondary btn-sm">
            <i class="fas fa-sync-alt mr-1"></i> {{ __('cropper_editor.btnCropperEditorReset') }}
        </button>
        <button id="btn-rotate" class="btn btn-secondary btn-sm">
            <i class="fas fa-redo-alt mr-1"></i> {{ __('cropper_editor.btnCropperEditorRotate') }}
        </button>
        <button id="btn-save" class="btn btn-success btn-sm">
            <i class="fas fa-check mr-1"></i> {{ __('cropper_editor.btnCropperEditorCrop') }}
        </button>
    </div>
</div>

<div id="cropper-preview" style="display: none">
    <h5>{{ __('cropper_editor.titleCropperPreviewMsg') }}</h5>
    <div id="cropper-canvas" class="image w-100"></div>
    <div class="d-flex justify-content-between mt-3">
        <button id="btn-undo" class="btn btn-secondary btn-sm">
            <i class="fas fa-chevron-left mr-1"></i> {{ __('cropper_editor.btnCropperPreviewBack') }}
        </button>
        <button id="{{$id}}-cropper-submit" class="btn btn-success btn-sm">
            <i class="fas fa-check mr-1"></i>{{ __('cropper_editor.btnCropperPreviewConfirm') }}
        </button>
    </div>
</div>