@extends('front.layouts.front')


@section('css')
    <style>
        .profile {
            height: inherit;
        }
    </style>
@endsection

@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Memes</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section section--last">
        <div class="container">
            <div class="row galary">
                @if(count($Clips) > 0)
                    @foreach ($Clips as $Clip)
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-0" id="remove_{{ $Clip->id }}">
                            <div class="hovereffect">
                                <img class="img-responsive" src="{{ $Clip->url }}" alt="">
                                <div class="overlay">
                                    <h2>{{ $Clip->videos->titles->title ?? 'updated' }}</h2>
                                    <p>{{ $Clip->updated_at->diffForHumans() }}</p>
                                    {{-- <a class="info download" href="{{ route('front.memes.download',[$Clip->id]) }}"><i class="fa-solid fa-download"></i></a> --}}
                                    <div class="dropdown d-inline-block share-drp">
                                        <a href="javascript:void(0)" id="share-drp" class="btn info btn-share btn-share1" data-toggle="dropdown" aria-expanded="false">
                                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-share-alt fa-w-14 fa-7x">
                                                <path fill="currentColor" d="M352 320c-25.6 0-48.9 10-66.1 26.4l-98.3-61.5c5.9-18.8 5.9-39.1 0-57.8l98.3-61.5C303.1 182 326.4 192 352 192c53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 9.8 1.5 19.6 4.4 28.9l-98.3 61.5C144.9 170 121.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.6 0 48.9-10 66.1-26.4l98.3 61.5c-2.9 9.4-4.4 19.1-4.4 28.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96zm0-272c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM96 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm256 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path>
                                            </svg>
                                        </a>
                                        <ul class="dropdown-menu detail-share memes-share p-0 dropdown-menu-center" aria-labelledby="share-drp">
                                            <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://www.facebook.com/sharer/sharer.php?u={{ $Clip->url }}"><i class="fab fa-facebook-f"></i></a></li>
                                            <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://twitter.com/intent/tweet?text={{$Clip->videos->titles->title}}&url={{ $Clip->url }}"><i class="fab fa-twitter"></i></a></li>
                                            <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://wa.me/?text={{ $Clip->url }}"><i class="fab fa-whatsapp"></i></a></li>
                                            {{-- <li class="d-inline-flex"><a class="dropdown-item" href="#"><i class="fab fa-instagram"></i></a></li> --}}
                                        </ul>
                                    </div>
                                    <a class="btn info edit memes-image" href="#popup-info" data-image="{{ str_replace('https://d47a3uo502lqc.cloudfront.net/', 'https://omgdeveloper.s3.amazonaws.com/', $Clip->url) }}" data-id="{{ $Clip->id }}" data-video_id="{{ $Clip->video_id }}"><i class="fa-solid fa-pencil"></i></a>
                                    <a class="btn info delete" href="javascript:;" data-id="{{ $Clip->id }}"><i class="fa-solid fa-trash"></i></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <div id="popup-info" class="mfp-hide clip">
        <div class="trailer-popup modal">
            <h4 class="modal__title text-center">Memes</h4>
            {{-- <h2 class="text-white fw-bold mb-4 text-center">sdf</h2> --}}
            <div class="row">
                <div class="col-12 konvajs-content">
                    <div id="container" class="scroll"></div>
                    <div id="texxt"></div>
                </div>
                <div class="col-12 profile mt-2 py-4">
                    <div>
                        <div class="module-row cf d-flex" style="gap: 10px">
                            <div class="labelGroup w-50">
                                <label for="captioncolor" class="form__label">Color</label>
                                <input type="color" class="form__input changelayer p-0 m-0 color" id="captioncolor" value="#000000">
                                <input type="range" min="0" max="1" step="0.1" class="changelayer range" id="captionopacity">
                            </div>
                            <div class="labelGroup w-50">
                                <label for="captionbg" class="form__label">Background</label>
                                <input type="color" class="form__input changelayer p-0 m-0 color" id="captionbg" value="#FFFFFF">
                                <input type="range" min="0" max="1" step="0.1" class="changelayer range" id="bgopacity">
                            </div>
                        </div>
                    </div>
                    <div>
                        <ul class="filter__checkboxes">
                            <li>
                                <input id="bold" type="checkbox" value="1" class="changelayer">
                                <label for="bold">Bold</label>
                            </li>
                            <li>
                                <input id="italic" type="checkbox" class="changelayer" value="2">
                                <label for="italic">Italic</label>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div class="module-row py-2 cf">
                            <div class="labelGroup">
                                <textarea class="form__input changelayer m-0" id="captiontext" rows="2" maxlength="50">More Text Here</textarea>
                                <input type="hidden" id="imageid">
                                <input type="hidden" id="video_id">
                            </div>
                        </div>
                        <button class="btn btn-success w-100 px-4 me-2" id="addText"><i class="fas fa-plus small mr-2"></i>Add Text</button>
                    </div>
                </div>
                <div class="col-12 text-center">
                    <button class="btn btn-success px-4 saveimage" id="saveimage">Save</button>
                    <button class="btn btn-warning px-4 mclose">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end section -->
@endsection

@section('script')
    <script src="https://unpkg.com/konva@8.4.0/konva.min.js"></script>
    {{-- <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> --}}
    <script>
        $( document ).ready( function() {
            $(document).on('click', '.delete', function(e) {
                var id = $(this).data("id");

                swal({
                    title: "Are you sure?",
                    text: "You want to permanently delete the selected Memes",
                    icon: "warning",
                    buttonClassName: "btn-danger",
                    buttons: ["Trash Can", "Permanently"],
                }).then((isConfirm) => {
                    var type = 2;
                    if (isConfirm) {
                        type = 1;
                    }
                    $.ajax({
                        type: "post",
                        url: "{{ route('front.memes.delete', ['_id']) }}".replace('_id', id),
                        dataType: "json",
                        data : {
                            '_token': $('meta[name="csrf-token"]').attr("content"),
                            'type' : type
                        },
                        success: function(response) {
                            var notyf = new Notyf();
                            if (response.status) {
                                notyf.success({
                                    message: response.message,
                                    duration: 5000,
                                    position: {
                                        x: "center",
                                        y: "top",
                                    },
                                });
                                $('#remove_' + id).remove();
                            } else {
                                notyf.error({
                                    message: response.message,
                                    duration: 5000,
                                    position: {
                                        x: "center",
                                        y: "top",
                                    },
                                });
                            }
                        },
                    });
                });
            });
            var sceneWidth = 960;
            var sceneHeight = 360;

            var stage = new Konva.Stage({
                container: 'container', // id of container <div>
                width: sceneWidth,
                height: sceneHeight
            });
            var layer = new Konva.Layer();
            stage.add(layer);

            var imageObj = new Image();
            imageObj.crossOrigin = "anonymous"

            function getScrollBarWidth() {
                var $outer = $('<div>').css({
                        visibility: 'hidden',
                        width: 100,
                        overflow: 'scroll'
                    }).appendTo('body'),
                    widthWithScroll = $('<div>').css({
                        width: '100%'
                    }).appendTo($outer).outerWidth();
                $outer.remove();
                return 100 - widthWithScroll;
            };


            // $( '.memes-image').click( function(event) {
            $(document).on('click', '.memes-image', function(event) {
                event.preventDefault();
                $(this).magnificPopup({
                    type: 'inline',
                    fixContentPos: true,
                    closeBtnInside: true,
                    closeOnBgClick: false,
                    enableEscapeKey: false,
                    preloader: false,
                    removalDelay: 0,
                    mainClass: 'mfp-fade',
                    callbacks: {
                        open: function() {
                            var mp = $.magnificPopup.instance,
                                t = $(mp.currItem.el[0]);
                            $('.header').css('margin-left', "-" + (getScrollBarWidth() / 2) + "px");
                            imageObj.onload = function() {
                                var yoda = new Konva.Image({
                                    image: imageObj
                                });
                                layer.add(yoda);
                                stage.width(yoda.width());
                                stage.height(yoda.height());
                            };
                            imageObj.src = t.data('image');
                            $('#imageid').val(t.data('id'));
                            $('#video_id').val(t.data('video_id'));
                        },
                        close: function() {
                            if ($(window).width() > 1200) {
                                $('.header').css('margin-left', 0);
                            }
                        }
                    }
                }).magnificPopup('open');
            });

            $(document).on('click', '.mclose', function() {
                $.magnificPopup.close();
            });

            let currentShape;
            let trdata;
            $(document).on('click', '#addText', function(e) {
                // let transFormer1 = new Konva.Transformer({
                //     enabledAnchors: [
                //         'top-left',
                //         'top-right',
                //         // 'bottom-left',
                //         // 'bottom-right',
                //     ],
                //     boundBoxFunc: function (oldBox, newBox) {
                //         newBox.width = Math.max(30, newBox.width);
                //         return newBox;
                //     },
                // });
                // transFormer1.keepRatio(true); // ** Tell the transformer to maintain aspect ratio **
                // layer.add(transFormer1);

                var txt = $('#captiontext').val();
                var bold = document.getElementById("bold").checked == true ? '700' : '400';
                var italic = document.getElementById("italic").checked == true ? 'italic  ' : '';

                var captionopacity = $("#captionopacity").val();
                var captioncolor = $("#captioncolor").val();
                var rgbaCol = 'rgba(' + parseInt(captioncolor.slice(-6, -4), 16) + ',' + parseInt(captioncolor.slice(-4, -2), 16) + ',' + parseInt(captioncolor.slice(-2), 16) + ',' + 1 + ')';

                var bgopacity = $("#bgopacity").val();
                var captionbg = $("#captionbg").val();
                var rgbabg = 'rgba(' + parseInt(captionbg.slice(-6, -4), 16) + ',' + parseInt(captionbg.slice(-
                    4, -2), 16) + ',' + parseInt(captionbg.slice(-2), 16) + ',' + 0 + ')';
                // text.parent.children[0].setAttr('fill', rgbabg);
                var textNode = new Konva.Label({
                    x: 40,
                    y: 65,
                    opacity: 1,
                    draggable: true,
                    class: 'grouptext',
                    name: 'grouptext',
                });

                textNode.add(
                    new Konva.Tag({
                        fill: rgbabg,
                        class: 'lable',
                        name: 'lable',
                    })
                );
                textNode.add(
                    new Konva.Text({
                        x: 40,
                        y: 65,
                        text: txt,
                        fontSize: 36,
                        fontFamily: 'Calibri',
                        fill: rgbaCol,
                        name: 'text',
                        class: 'text',
                        fontStyle: italic + bold,
                        padding: 5,
                    })
                );
                layer.add(textNode);
                // currentShape = textNode;

                textNode.on('dblclick dbltap', () => {
                    textNode.hide();
                    tr.hide();
                    var textPosition = textNode.absolutePosition();
                    var areaPosition = {
                        x: stage.container().offsetLeft + textPosition.x,
                        y: stage.container().offsetTop + textPosition.y,
                    };
                    var textarea = document.createElement('textarea');
                    $('#texxt').append(textarea);
                    textarea.value = textNode.children[1].attrs.text;
                    // textarea.value = textNode.text();
                    textarea.style.position = 'absolute';
                    textarea.style.top = areaPosition.y + 'px';
                    textarea.style.left = areaPosition.x + 'px';
                    // textarea.style.width = textNode.width() - textNode.padding() * 2 + 'px';
                    textarea.style.width = textNode.width() * 2 + 'px';
                    // textarea.style.width = textNode.width() - textNode.padding() * 2 + 'px';
                    textarea.style.height = textNode.height() * 2 + 5 + 'px';
                    // textarea.style.fontSize = textNode.fontSize() + 'px';
                    textarea.style.fontSize = textNode.children[1].attrs.fontSize + 'px';
                    textarea.style.border = 'none';
                    // textarea.style.padding = '0px';
                    // textarea.style.margin = '0px';
                    // textarea.style.overflow = 'hidden';
                    textarea.style.background = 'none';
                    textarea.style.outline = 'none';
                    // textarea.style.resize = 'none';
                    // textarea.style.lineHeight = textNode.lineHeight();
                    textarea.style.lineHeight = 1;
                    // textarea.style.fontFamily = textNode.fontFamily();
                    textarea.style.fontFamily = textNode.children[1].attrs.fontFamily;
                    textarea.style.transformOrigin = 'left top';
                    // textarea.style.textAlign = textNode.align();
                    // textarea.style.color = textNode.fill();
                    textarea.style.color = textNode.children[1].attrs.fill;
                    textarea.style.zIndex = 9999;
                    rotation = textNode.rotation();
                    var transform = '';
                    if (rotation) {
                        transform += 'rotateZ(' + rotation + 'deg)';
                    }

                    var px = 0;
                    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
                    if (isFirefox) {
                        px += 2 + Math.round(textNode.fontSize() / 20);
                    }
                    transform += 'translateY(-' + px + 'px)';
                    textarea.style.transform = transform;
                    textarea.style.height = 'auto';
                    textarea.style.width = 'auto';
                    textarea.style.height = textarea.scrollHeight + 3 + 'px';
                    textarea.focus();

                    function removeTextarea() {
                        textarea.parentNode.removeChild(textarea);
                        window.removeEventListener('click', handleOutsideClick);
                        textNode.show();
                        tr.show();
                        tr.forceUpdate();
                    }

                    function setTextareaWidth(newWidth) {
                        if (!newWidth) {
                            // set width for placeholder
                            newWidth = textNode.placeholder.length * textNode.fontSize();
                        }
                        // some extra fixes on different browsers
                        var isSafari = /^((?!chrome|android).)*safari/i.test(
                            navigator.userAgent
                        );
                        var isFirefox =
                            navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
                        if (isSafari || isFirefox) {
                            newWidth = Math.ceil(newWidth);
                        }

                        var isEdge =
                            document.documentMode || /Edge/.test(navigator.userAgent);
                        if (isEdge) {
                            newWidth += 1;
                        }
                        textarea.style.width = newWidth + 'px';
                    }

                    textarea.addEventListener('keydown', function(e) {
                        // if (!e.shiftKey) {
                        //     textNode.text(textarea.value);
                        //     removeTextarea();
                        // }
                        // on esc do not set value back to node
                        if (e.keyCode === 27) {
                            removeTextarea();
                        }
                    });

                    textarea.addEventListener('keydown', function(e) {
                        scale = textNode.getAbsoluteScale().x;
                        setTextareaWidth(textNode.width() * scale);
                        textarea.style.height = 'auto';
                        textarea.style.height =
                            textarea.scrollHeight + textNode.children[1].attrs.fontSize + 'px';
                        // textarea.scrollHeight + textNode.fontSize() + 'px';
                    });

                    function handleOutsideClick(e) {
                        if (e.target !== textarea) {
                            textNode.children[1].setAttr('text', textarea.value);
                            // textNode.text(textarea.value);
                            removeTextarea();
                        }
                    }
                    setTimeout(() => {
                        window.addEventListener('click', handleOutsideClick);
                    });
                });

                var MIN_WIDTH = 20;
                var tr = new Konva.Transformer({
                    nodes: [textNode],
                    padding: 5,
                    boundBoxFunc: (oldBox, newBox) => {
                        if (newBox.width < MIN_WIDTH) {
                            return oldBox;
                        }
                        return newBox;
                    },
                });

                stage.on("click", function(e) {
                    console.log(e);
                    tr.show();
                    trdata = tr;
                    currentShape = e.target;
                    if (currentShape === stage) {
                        tr.nodes([]);
                    } else {
                        if (e.target.hasName('text')) {
                            tr.nodes([currentShape.parent]);

                        } else {
                            tr.nodes([]);
                        }
                    }
                    layer.draw();
                });

                var container = stage.container();
                container.tabIndex = 1;
                container.focus();
                container.addEventListener('keydown', (e) => {
                    if (e.keyCode === 46) {
                        tr.nodes([]);
                        currentShape.parent.remove();
                        // currentShape.destroy();
                    }
                });
                layer.add(tr);

                // applySettings();
                // layer.fire('click');
                // layer.draw();
                // console.log(currentShape);
                // $('.grouptext').trigger('click');
                // textNode.hide();
                tr.hide();
            });

            $(document).on('change keyup click input', '.changelayer', function(e) {
                if (currentShape != undefined) {
                    if (currentShape.index != 0) {
                        var text = currentShape;
                        var bold = document.getElementById("bold").checked == true ? '700' : '400';
                        var italic = document.getElementById("italic").checked == true ? 'italic  ' : '';
                        // var transparent = document.getElementById("transparent").checked == true ? 'transparent  ' : $('#captionbg').val();
                        text.setAttr('text', $('#captiontext').val());

                        var captionopacity = $("#captionopacity").val();
                        var captioncolor = $("#captioncolor").val();
                        var rgbaCol = 'rgba(' + parseInt(captioncolor.slice(-6, -4), 16) + ',' + parseInt(captioncolor
                                .slice(-4, -2), 16) + ',' + parseInt(captioncolor.slice(-2), 16) + ',' +
                            captionopacity + ')';
                        text.setAttr('fill', rgbaCol);

                        var bgopacity = $("#bgopacity").val();
                        var captionbg = $("#captionbg").val();
                        var rgbabg = 'rgba(' + parseInt(captionbg.slice(-6, -4), 16) + ',' + parseInt(captionbg.slice(-
                            4, -2), 16) + ',' + parseInt(captionbg.slice(-2), 16) + ',' + bgopacity + ')';
                        text.parent.children[0].setAttr('fill', rgbabg);

                        // console.log(text.parent.children[0].setAttr('fill', $('#captionbg').val()));
                        // text.parent.children[0].setAttr('fill', $('#captionbg').val());
                        // text.parent.children[0].setAttr('fill', transparent);
                        text.setAttr('fontStyle', italic + bold);
                        layer.draw(); // remember to redraw the layer to see the change !
                    }
                }
            });

            document.getElementById('saveimage').addEventListener('click', function() {
                if(trdata != null) {
                    trdata.hide();
                }
                var dataURL = stage.toDataURL({ pixelRatio: 1 });
                swal({
                    title: "Are you sure?",
                    text: "do you want to update the image or add new!",
                    icon: "warning",
                    buttonClassName: "btn-danger",
                    cancelButtonText: "No, cancel plx!",
                    buttons: ["Update", "New"],
                    closeOnConfirm: false,
                    closeOnCancel: false
                }).then((isConfirm) => {
                    if (isConfirm) {
                        $.ajax({
                            type: "post",
                            url: "{{ route('front.imagestore') }}",
                            dataType: "json",
                            data: {
                                '_token': $('meta[name="csrf-token"]').attr("content"),
                                'video_id': $('#video_id').val(),
                                'type' : 1,
                                'imgurl' : dataURL,
                            },
                            success: function(data) {
                                $.magnificPopup.close();
                                var dd = `<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-0" id="remove_${data.message.id}">
                                    <div class="hovereffect">
                                        <img class="img-responsive" src="${data.message.url}" alt="">
                                        <div class="overlay">
                                            <h2>${data.name}</h2>
                                            <p>${data.date}</p>
                                            <div class="dropdown d-inline-block share-drp">
                                                <a href="javascript:void(0)" id="share-drp" class="btn btn-share" data-toggle="dropdown" aria-expanded="false">
                                                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-share-alt fa-w-14 fa-7x">
                                                        <path fill="currentColor" d="M352 320c-25.6 0-48.9 10-66.1 26.4l-98.3-61.5c5.9-18.8 5.9-39.1 0-57.8l98.3-61.5C303.1 182 326.4 192 352 192c53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 9.8 1.5 19.6 4.4 28.9l-98.3 61.5C144.9 170 121.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.6 0 48.9-10 66.1-26.4l98.3 61.5c-2.9 9.4-4.4 19.1-4.4 28.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96zm0-272c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM96 304c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm256 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path>
                                                    </svg>
                                                </a>
                                                <ul class="dropdown-menu detail-share memes-share p-0 dropdown-menu-center" aria-labelledby="share-drp">
                                                    <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://www.facebook.com/sharer/sharer.php?u=${data.message.url}"><i class="fab fa-facebook-f"></i></a></li>
                                                    <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://twitter.com/intent/tweet?text=${data.name}&url=${data.message.url}"><i class="fab fa-twitter"></i></a></li>
                                                    <li class="d-inline-flex"><a class="dropdown-item" target="blank" href="https://wa.me/?text=${data.message.url}"><i class="fab fa-whatsapp"></i></a></li>
                                                </ul>
                                            </div>
                                            <a class="info edit memes-image" href="#popup-info" data-image="${data.message.url}" data-id="${data.message.id}" data-video_id="${data.message.video_id}"><i class="fa-solid fa-pencil"></i></a>
                                            <a class="info delete" href="javascript:;" data-id="${data.message.id}"><i class="fa-solid fa-trash"></i></a>
                                        </div>
                                    </div>
                                </div>`;
                                $('.galary').prepend(dd);
                                $.magnificPopup.close();
                                // trdata.show();
                            }
                        });
                    } else {
                        $.ajax({
                            type: "post",
                            url: "{{ route('front.imagestore') }}",
                            dataType: "json",
                            data: {
                                '_token': $('meta[name="csrf-token"]').attr("content"),
                                'video_id': $('#video_id').val(),
                                'type' : 2,
                                'id' : $('#imageid').val(),
                                'imgurl' : dataURL,
                            },
                            success: function(data) {
                                $('#remove_'+ data.message.id + ' img' ).attr('src', data.message.url);
                                $.magnificPopup.close();
                                // trdata.show();
                            }
                        });
                    }
                });
            });
        });

    </script>
@endsection