@extends('admin.layouts.app')
@section('title', 'Add New')
@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">Add New</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.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <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="{{ 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="{{ old('slug') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    {{-- <label class="form-label">Image *</label>
                                    <input type="file" id="image" value="{{ old('image') }}" name="image" class="form-control rounded-0"> --}}
                                    <div class="form-group col-md-12">
                                        <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 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;"> Thumbnail</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>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Date *</label>
                                    <input type="date" class="form-control rounded-0" name="date"
                                        value="{{ 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="{{old('comment')}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">View</label>
                                    <input type="number" class="form-control rounded-0" name="view" value="{{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 bordered"
                                        style="border: 3px solid #efefef">{!! 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="Add New">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{ asset('admin/ckeditor/ckeditor.js') }}"></script>
    <script>
        $("#datepicker").datepicker();
        DecoupledEditor
            .create(document.querySelector('#editor'), {
                toolbar: [
                    'heading', 'bulletedList', 'uploadImage', '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)
        });

        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,
                autoCropArea: 1,
                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: 474,
                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