@extends('layouts.panel')

@section('content')
<div id="fs" class="container-fluid">
    <form class="form-ajax" method="POST" action="{{ route('panel.settings.greeting.update') }}" enctype="multipart/form-data">
        @method('PUT')
        <div class="row">
            <div class="d-flex flex-column flex-md-row w-100 vh-100">
                <div id="bg" class="col-12 col-sm-6 col-md-7 col-lg-8 h-md-100" style="background-image:url('{{ asset('storage/greeting/background.jpg') }}'); background-repeat:no-repeat; background-size:cover; background-position:center center;">
                    <div class="d-flex h-100 justify-content-center align-items-center">
                        <div class="p-5 w-100">
                            <div class="content-area w-100">
                                <textarea id="summernote-content" name="content" class="w-100">@php include_once(storage_path('app/public/greeting/content.html')); @endphp</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-relative col-12 col-sm-6 col-md-5 col-lg-4 h-md-100 bg-primary bg-opacity-10">
                    <div class="d-flex h-100 justify-content-center align-items-center">
                        <div class="w-100 p-5">
                            <div class="form-group mb-3">
                                <label for="">Background</label>
                                <div class="d-flex justify-content-center">
                                    <img id="background-cropper" class="img-fluid" src="{{ $user->background ?? '' }}" onerror="javascript:this.src = '{{ asset('storage/greeting/background.jpg') }}';">
                                </div>
                                <input id="background-cropped-result" class="d-none" type="file" name="background">
                                <div class="input-group has-validation mt-3">
                                    <input id="background" type="file" class="form-control">
                                    <button id="set-bg" type="button" class="btn btn-outline-secondary">Set</button>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/cropperjs/cropper.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/summernote/summernote-lite.min.css') }}">
<style>
.note-editor {
    background-color:transparent !important;
}
.content-area {
    border-style:dashed !important;
    border-width: 1px;
    border-color: transparent;
}
.content-area:hover {
    border-color:var(--bg-primary);
    background-color:rgba(255,255,255,.125);
}
</style>
@endpush

@push('js')
<script src="{{ asset('vendor/summernote/summernote-lite.min.js') }}"></script>
<script src="{{ asset('vendor/cropperjs/cropper.min.js') }}"></script>
<script>

    $(function(){
        'use strict'

        let image   = document.querySelector('#background-cropper'),
            bg      = document.querySelector('#bg'),
        cropper = new Cropper(image, {
            viewMode : 1,
            movable: false,
            zoomable: false,
            rotatable: false,
            scalable: false,
            aspectRatio: 16 / 9,
            cropBoxResizable: false,
            autoCropArea: 1,
            responsive: true
        });

        image.addEventListener('ready', function () {
            if(this.cropper === cropper){
                cropper.getCroppedCanvas({
                    imageSmoothingEnabled   : true,
                    imageSmoothingQuality   : 'high'
                }).toBlob((blob) => {
                    let file = new File([blob], 'background.png');
                    let container = new DataTransfer();
                    container.items.add(file);
                    $('#background-cropped-result').get(0).files = container.files;
                });

                window.setTimeout(() => {
                    let canvas = cropper.getCroppedCanvas();

                    console.log($(canvas));
                }, 0);
            }
        });

        $('#background').change(function(e){
            e.preventDefault();
            let files = e.target.files;
            if(files && files.length > 0){
                cropper.replace(URL.createObjectURL(files[0]));
            }
        });

        $('#set-bg').click(function(){
            let canvas = cropper.getCroppedCanvas({
                    imageSmoothingEnabled   : true,
                    imageSmoothingQuality   : 'high'
                }),
                dataUrl = canvas.toDataURL();
            $('#bg').css('background-image',`url(${dataUrl})`);
        });
        
        $('#summernote-content').summernote({
            airMode: true,
            popover: {
                image: [
                    ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                    ['float', ['floatLeft', 'floatRight', 'floatNone']],
                    ['remove', ['removeMedia']]
                ],
                link: [
                    ['link', ['linkDialogShow', 'unlink']]
                ],
                table: [
                    ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
                    ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
                ],
                air: [
                    ['style', ['style']],
                    ['color', ['color']],
                    ['fontsize', ['fontsize']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['para', ['ul', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']]
                ]
            }
        });
        
        $('form.form-ajax').submit((e)=>{
            e.preventDefault();
            let form    = e.target,
                data    = new FormData(form),
                btn     = $(form).find('[type="submit"]'),
                btnHTML = btn.html();

            $.ajax({
                method  : $(form).attr('method'),
                url     : $(form).attr('action'),
                data    : data,
                contentType: false,
                processData: false,
                beforeSend:()=>{
                    btn.prop('disabled',true).addClass('disabled').html('Loading ...');
                },
                error:(xhr)=>{
                    btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
                    let errorFields = xhr.responseJSON.errors;
                    let toast = new bootstrap.Toast(document.getElementById('toast-error'));
                    toast.show();
                    $.each(errorFields, (key, value)=>{
                        $(`[name="${key}"]`).addClass('is-invalid');
                        $(`[name="${key}"]`).next('.invalid-feedback').text(value[0]);
                    });
                },
                success: (response)=>{
                    btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
                    let toast = new bootstrap.Toast(document.getElementById('toast-success'));
                    toast.show();
                    setTimeout(()=>{
                        window.location.reload();
                    },1000);
                }
            });
        });
    });

</script>
@endpush