@extends('admin.layouts.app')
@section('title','Edit')
@section('content')
<style>
    .career-tooltip{
        color: #d70b0b;
        cursor: pointer;
    }
    img {
        display: block;
        max-width: 100%;
    }
    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }
    .modal-lg{
        max-width: 100vh !important;
    }
</style>
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Edit</p>
            <a class="btn btn-sm btn-warning" href="{{route('news-event.index')}}">View All</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="modal fade bd-example-modal-lg imagecrop" id="model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-bs-backdrop="static">
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Crop Image</h5>
                                    <button type="button" id="reset-image reset-image-close" class="close btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="img-container">
                                        <div class="row">
                                            <div class="col-md-11">
                                                <img id="imageTorrentThumbnail" src="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" id="reset-image" data-bs-dismiss="modal"  style="background-color:#6c757d!important">Close</button>
                                    <button type="button" class="btn btn-primary crop" id="cropThumnail">Crop</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <form action="{{route('news-event.update',$news_event->id)}}" method="post" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Name *</label>
                                    <input type="text" class="form-control rounded-0" name="name" id="name" onkeyup="listingslug(this.value)" value="{{(isset($news_event->name)?$news_event->name:old('name'))}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Slug *</label>
                                    <input type="text" readonly="readonly" class="form-control rounded-0" name="slug" id="slug" value="{{(isset($news_event->slug)?$news_event->slug:old('slug'))}}">
                                </div>
                                {{-- <div class="col-md-6 mb-3">
                                    <label class="form-label">Image *</label>
                                    <input type="hidden" id="image" name="old_image" value="{{(isset($news_event->image)?$news_event->image:old('image'))}}">
                                    <input type="file" id="image"  name="image" class="form-control rounded-0" >
                                    <p style="font-size:12px;"><small style="color:red;">The previous image is stored here in case of uploading new image click on Choose File.</small></p>
                                </div> --}}
                                <div class="form-group col-md-6">
                                    <label class="form-label">Image *</label>
                                    <i class="fa fa-question-circle career-tooltip" class="float-right" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="Upload your Profile Image"></i>
                                    <div class="torrent-thumbnail-edit">
                                        <input type="file" id="imageUploadThumbnail" accept=".png, .jpg, .jpeg" name="image" class="form-control wizard-required imageUploadThumbnail">
                                        <p style="font-size:13px;"><small style="color:red;">The previous image is stored here in case of uploading new image click on Choose File.</small></p>
                                        <input type="hidden" name="thumbnailbase64image" id="thumbnailbase64image">
                                        <label for="imageUploadThumbnail"></label>
                                    </div>
                                    <div class="wizard-form-error"></div>
                                    <div class="torrent-thumbnail-preview container-torrent-thumbnail-preview">
                                        <div id="torrent-thumbnail-imagePreview"></div>
                                    </div>

                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Date *</label>
                                    <input type="date" class="form-control rounded-0" name="date" value="{{(isset($news_event->date)?$news_event->date:old('date'))}}">
                                </div>
                                {{-- <div class="col-md-6 mb-3">
                                    <label class="form-label">Comment</label>
                                    <input type="text" class="form-control rounded-0" name="comment" value="{{(isset($news_event->comment)?$news_event->comment:old('comment'))}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">View</label>
                                    <input type="text" class="form-control rounded-0" name="view" value="{{(isset($news_event->view)?$news_event->view:old('view'))}}">
                                </div> --}}
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">Description </label>
                                    <div id="toolbar-container"></div>
                                    <div id="editor" class="form-control rounded-0" style="border: 3px solid #efefef">{!! (isset($news_event->description)?$news_event->description:old('description')) !!}</div>
                                    <textarea style='display:none;' name='description' id='description'></textarea>
                                </div>

                                <div class="col-md-12 mb-3">
                                    <input type="submit" class="btn btn-sm btn-success" value="Update">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script src="{{asset('admin/ckeditor/ckeditor.js')}}"></script>
<script>
    // $( "#datepicker" ).datepicker();
    // Editor
    DecoupledEditor
        .create( document.querySelector( '#editor' ),
            {
                toolbar: [
                    'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
                ]
            })
        .then( editor => {
            const toolbarContainer = document.querySelector( '#toolbar-container' );
            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
        } )
        .catch( error => {
            console.error( error );
        } );
    $(document).on('submit',function(){
        html = $("#editor").html()
        $("#description").val(html)
    });

    // Slugify
    function slugify(text) {
        return text
            .toString()                     // Cast to string
            .toLowerCase()                  // Convert the string to lowercase letters
            .normalize('NFD')       // The normalize() method returns the Unicode Normalization Form of a given string.
            .trim()                         // Remove whitespace from both sides of a string
            .replace(/ /g, '-')
            .replace(/[^\w-]+/g, '')   // Remove all non-word chars
            .replace(/\-\-+/g, '-');        // Replace multiple - with single -
    }

    function listingslug(text) {
        document.getElementById("slug").value = slugify(text);
    }
</script>
<script>
    $(document).ready(function() {
        var $modal = $('.imagecrop');
        var image = document.getElementById('imageTorrentThumbnail');
        var cropper;
        $("body").on("change", ".imageUploadThumbnail", function(e){
            e.preventDefault();
            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, {
                dragMode: 'move',
                aspectRatio: 1.58/1,
                autoCropArea: 0.65,
                restore: false,
                guides: false,
                center: false,
                highlight: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
            });
        }).on('hidden.bs.modal', function() {
            cropper.destroy();
            cropper = null;
        });
        $("body").on("click", "#cropThumnail", function() {
            canvas = cropper.getCroppedCanvas({
                width: 200,
                height: 300,
            });
            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $('#thumbnailbase64image').val(base64data);
                    document.getElementById('torrent-thumbnail-imagePreview').style.backgroundImage = "url("+base64data+")";
                    $modal.modal('hide');
                }
            });
        });
    });
</script>
    <script type="text/javascript">
    document.getElementById('reset-image').onclick= function() {
        var field= document.getElementById('imageUploadThumbnail');
        field.value= field.defaultValue;
    }
    document.getElementById('reset-image-close').onclick= function() {
        var field= document.getElementById('imageUploadThumbnail');
        field.value= field.defaultValue;
    }
</script>
@endpush