@push('liveStyle')
<link rel="stylesheet" href="{{ asset('assets/front/common/css/annotator.css?v='.time()) }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
    textarea.dummy {
        width: 20em !important;
    }
    #dummy {
        /* cursor: not-allowed; */
}
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Old versions of Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .highlight {
	background-color: #ccff00;
	height: 30px;
	z-index: -1;
}
    .annotationStyle {
        background-color: #2185d0 !important;
        border: 1px dashed white;
        color: white;
        z-index: 2000;
    }

    /* Popover Styles */
    /* #annotate_settings {
        background: #FFF;
        border-radius: 4px;
        color: white;
        font-size: 13px;
        font-weight: bold;
        padding: 4px 8px;
        z-index: 2000;
    } */

    #annotate_settings[data-show] {
        display: block;
    }

    #arrow,
    #arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        z-index: -1;
    }

    #arrow::before {
        content: '';
        transform: rotate(45deg);
        background: #FFF;
        box-shadow: -4px -4px 5px #00000012;
    }

    #annotate_settings[data-popper-placement^='top']>#arrow {
        bottom: -4px;
    }

    #annotate_settings[data-popper-placement^='bottom']>#arrow {
        top: -4px;
    }

    #annotate_settings[data-popper-placement^='left']>#arrow {
        right: -4px;
    }

    #annotate_settings[data-popper-placement^='right']>#arrow {
        left: -4px;
    }

    /* Semantic UI Overrides */
    .ui.floating {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 2001;
    }

    .ui.segment {
        margin: 0.5rem !important;
    }

    .ui.card>.content {
        height: 80vh;
        overflow-y: auto;
    }

    .ui.feed>.event>.content .example.text {
        font-size: 1.2em;
        line-height: 1.6285em;
        max-width: 100%;
        border: 2px dashed #8080803b;
        padding: 0.25em;
    }

    /* Utilities */
    .p-around_small {
        margin: 1rem !important;
    }

    .m-bottom_medium {
        margin-bottom: 2rem !important;
    }

    .m-bottom_x-small {
        margin-bottom: 1rem !important;
    }

    /* Custom Styles */
    .love {
        color: #ff2733;
    }
</style>
@endpush
<div>
    <div class="container-fluid">
        <div class="rb-heading">
            <h2 class="font-size-28">Dashboard</h2>
        </div>
        <div class="famous-design-main mt-10">
            <div class="container-fluid py-4">
                <div class="row">
                    <div class="col-lg-2 col-md-12">
                        <div class="items-list">
                            <ul class="nav nav-pills products-pics-list pb-4">
                                @foreach($allDrafts as $key => $value)
                                <li class="nav-item prev-space">
                                    <a class="nav-link p-0 active" data-toggle="pill" href="#img1" wire:click="changeDraftImage({{$value->id}})">
                                        <img src="{{asset('assets/front/common/images/Group-1521.png')}}" class="product-img">
                                        @if($value->id == $draftId)
                                        <span class="done_check">
                                            <span class="material-icons done_sign">check_circle</span>
                                        </span>
                                        @endif
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="tab-content full-view-image">
                            <div class="tab-pane active" id="img1">
                                <div class="zoom_img" id="hubble-container">
                                    <div class="example dummyseo_cnt" id="dummy">
                                        {!! file_get_contents($selectedDraft->preview_media->url) !!}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Annotator Popover Contents-->
        <div id="annotate_settings" style="display: none">
        </div>

    </div>
</div>
@include('inc.logo-loader')
@push('liveScript')
@if ( isAnonymousUser() )
<script>
    var anonymous_user = '{{ session('referalUser')->name }}';
</script>
@endif
<script>
    var projectType = 'content';
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
<!--Optional (used for Templating)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.6/jsrender.min.js"></script>
<!--Optional (used for Semantic UI)-->
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> --}}
<script src="{{asset('assets/front/js/classes/draftClasses.js?v='.time())}}"></script>
<script src="{{asset('assets/front/js/seo-comment.js?v='.time())}}"></script>
<script src="{{ asset('assets/front/common/js/annotator.js?v='.time()) }}"></script>
<script src="{{ asset('assets/front/js/seo-annotation.js?v='.time()) }}"></script>
<script>
     //  $(document).ready(function() {

       // var content = $("#dummy").text();
     //   console.log(content);
        //$("#dummy").text(content)
    //     const $element = document.createElement("span");
    //     $element.classList = "highlight";
    //     $($element).css({
    //             left: 149,
    //             top: 11.5,
    //             position: "absolute"

    //         });
    //     $("#dummy").append($element);
    //     $("#dummy").mousedown(function (evt) {
    //         var x = evt.pageX - $(this).offset().left;
    //         var y = evt.pageY - $(this).offset().top;

    //         console.log(x, y);
    //     });
    //     $("#dummy").mouseup(function (evt) {
    //         var x = evt.pageX - $(this).offset().left;
    //         var y = evt.pageY - $(this).offset().top;

    //         console.log(x, y);
    //     });



   //   });
</script>
<!-- <script>
    $(document).ready(function() {
        console.log('dfdsf',$('.example').text());
        // document.addEventListener("livewire:load", function(event) {
        //     commentDoc = document.getElementById("comment");
        //     commentComponent = window.livewire.find(commentDoc.getAttribute("wire:id"));
        //     var comments = DotCommentMethods.getDotComments(3, 3);
        //     comments.success(function(data) {
        //         if (data.success) {
        //             $.each(data.data, function(index, value) {
        //                 var position = JSON.parse(value.comment_position);
        //             });
        //         }
        //     });
        // });
    });
</script> -->
@endpush