{% import "helpers.html.twig" as helpers %}

{% extends '@Admin/base.html.twig' %}

{% block title %}
    التعديلات
{% endblock %}

{% block body %}
    <div class="table-responsive">
        <table id="mytable" class="table table-bordred table-striped">
            <thead>
            <tr>
                <th>{{ '_DATE_'|trans({},'admin') }}</th>
                <th>{{ '_TITLE_'|trans({},'admin') }}</th>
                <th>{{ 'WORD_COUNT'|trans({},'admin') }}</th>
                <th>{{ '_CATEGORY_'|trans({},'admin') }}</th>
                <th>{{ '_PRIORITY_'|trans({},'admin') }}</th>
                <th>المعدل</th>
                {#<th>المعدل</th>#}
                <th>{{ '_STATUS_'|trans({},'admin') }}</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                {% set lastNews = currentNews[0][0] %}
                <td>{{ lastNews.getNewsUpdateDate() }}</td>
                <td><a target="_blank" href="{{ lastNews.getUrl(production_url) }}">{{ lastNews.title|raw }}</a></td>
                <td class="{{ lastNews.getWordCountColor() }} align-center">{{ lastNews.getWordCount() }}</td>
                <td>{{ lastNews.getCategoryName() }}</td>
                <td>{{ lastNews.showPriority() }}</td>
                <td>{{ currentNews[0]['user'] }}</td>
                {#<td>{{ newsData['updator'] }}</td>#}
                <td class="align-center">
                    <span class="flag flag-{{ lastNews.displayStatus() }}" title="{{ lastNews.displayStatus() }}"></span>
                </td>
                <td><input type="hidden" id="lastBody" value="{{ lastNews.getRawBody() }}"></td>
                <td><input type="hidden" id="lastTags" value="{{ lastNews.tagNames }}"></td>
                <td><input type="hidden" id="lastPictures" value="{{ lastNews.getBodyImages() }}"></td>
            </tr>
            {% for newsData in newsArray %}
                {% set news = newsData[0] %}
                <tr>
                    <td>{{ news.getNewsUpdateDate() }}</td>
                    <td><a target="_blank" href="{{ news.getUrl(production_url) }}">{{ news.title|raw }}</a></td>
                    <td class="{{ news.getWordCountColor() }} align-center">{{ news.getWordCount() }}</td>
                    <td>{{ news.getCategoryName() }}</td>
                    <td>{{ news.showPriority() }}</td>
                    <td>{{ newsData['user'] }}</td>
                    {#<td>{{ newsData['updator'] }}</td>#}
                    <td class="align-center">
                        <span class="flag flag-{{ news.displayStatus() }}" title="{{ news.displayStatus() }}"></span>
                    </td>
                    <td><a class="btn btn-default btn-xs compareBody" data-images="{{ news.getBodyImages() }}" data-title="{{ news.title|raw }}" data-category="{{ news.getCategoryName() }}" data-priority="{{ news.showPriority() }}" data-tags="{{ news.getTagsIds() }}" data-body="{{ news.getRawBody() }}" data-author="{{ news.getAuthor() }}" data-level="{{ news.showLevel() }}" data-hotnews="{{ news.getHotNews() }}" >قارن النص</a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="bodyDifference hidden">
        <div id="oldBody" class="newsBody"></div>
        <div id="newBody" class="newsBody"></div>
    </div>
    <div class="newsDataDifference hidden">
        <div id="oldNews" class="newsData">
            <ul>
                <li><b>{{ '_TITLE_'|trans({},'admin') }}: </b><span></span></li>
                <li><b>{{ '_CATEGORY_'|trans({},'admin') }}: </b><span></span></li>
                <li><b>{{ '_PRIORITY_'|trans({},'admin') }}: </b><span></span></li>
                <li><b>{{ '_TAGS_'|trans({},'admin') }}: </b><span></span></li>
                <li><b>{{ '_LEVEL_'|trans({},'admin') }}: </b><span></span></li>
                <li><b>{{ '_AUTHOR_'|trans({},'admin') }}: </b><span></span></li>
                <li><span></span></li>
            </ul>
            <div class="pictures">

            </div>
        </div>
        <div id="newNews" class="newsData">
            <ul>
                <li><b>{{ '_TITLE_'|trans({},'admin') }}: </b>{{ lastNews.title|raw }}</li>
                <li><b>{{ '_CATEGORY_'|trans({},'admin') }}: </b>{{ lastNews.getCategoryName() }}</li>
                <li><b>{{ '_PRIORITY_'|trans({},'admin') }}: </b>{{ lastNews.showPriority() }}</li>
                <li><b>{{ '_TAGS_'|trans({},'admin') }}: </b>{{ lastNews.tagNames }}</li>
                <li><b>{{ '_LEVEL_'|trans({},'admin') }}: </b>{{ lastNews.showLevel() }}</li>
                <li><b>{{ '_AUTHOR_'|trans({},'admin') }}: </b>{{ lastNews.getAuthor() }}</li>
                <li>{{ lastNews.getHotNews() }}</li>
            </ul>
            <div class="pictures">

            </div>
        </div>
    </div>
    <nav aria-label="Page navigation" class="text-center">
        {{ knp_pagination_render(newsArray) }}
    </nav>
    <script src="/js/diff.js"></script>
    <script>
        document.querySelectorAll(".compareBody").forEach(function(el){
            el.addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById('oldBody').innerHTML = this.getAttribute('data-body');
                document.getElementById('newBody').innerHTML = document.getElementById('lastBody').value;

                const one = document.getElementById('newBody').innerHTML,
                    other = document.getElementById('oldBody').innerHTML,
                    color = '';

                document.getElementById('newBody').innerHTML = "";

                let span = null;

                const diff = Diff.diffChars(one, other),
                    display = document.getElementById('newBody'),
                    fragment = document.createDocumentFragment();

                diff.forEach((part) => {
                    // green for additions, red for deletions
                    // grey for common parts
                    const color = part.added ? 'unchanged' :
                        part.removed ? 'removedText' : 'unchanged';
                    span = document.createElement('span');
                    span.className += ' ' + color;
                    span.appendChild(document
                        .createTextNode(part.value));
                    fragment.appendChild(span);
                });

                display.appendChild(fragment);

                /*  newFragment = document.createDocumentFragment();
                  lineByLine = document.getElementById('newBody').innerHTML.split("\n");

                  lineByLine.forEach(function(el){
                      const color = (el.indexOf("removedText") > -1) ? 'changedLine' : 'unchanged';
                      span = document.createElement('div');
                      span.className += ' ' + color;
                      span.appendChild(document
                          .createTextNode(el.replace(/<[^>]*>?/gm, '')));
                      newFragment.appendChild(span);
                  })

                  document.getElementById('newBody').innerHTML = "";
                  display.appendChild(newFragment);*/
            })
        })
    </script>
    <style>
        .highlight {background-color: #B4D5FF}

        ul{
            list-style: none;
            padding-right: 0;
        }
        .newsData img {
            height: 200px;
            margin-left: 10px;
        }
        .bodyDifference,.newsDataDifference{
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }

        .bodyDifference.hidden{
            display: none;
        }
        .bodyDifference .newsBody,
        .newsDataDifference .newsData{
            width: 45%;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
            display: block;
            padding: 9.5px;
            white-space: pre-line;
            color: #4d4d4d;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: .2px;
            line-height: 1.6;
        }

        .removedText,.changedLine{
            background: #00800082;
            color: #fff;
        }
        .addedText{
            background: red;
            color: #fff;
        }
    </style>
{% endblock %}