@extends('layouts.app')
@if($user->hasRole(4) && session()->has('notice'))
    <div class="alert alert-success">
        {{ session()->get('notice') }}
    </div>
@endif
@if(!$user->hasRole(4) && session()->get('alert') != "")
    <div class="alert alert-danger">
        {{ session()->get('alert') }}
    </div>
@endif
@section('content')
@if (!empty($project->deleted_at))
    @elseif( $project->status < 1 )
	@else
	@endif

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify-html.min.js"></script>
<script>
 $(document).ready(function () {
     $(".close-message").on("click", function () {
         $(".status-message, .container-fluid").removeClass("active");
     })

     $(".view-toggle").on("click", function(){
         if($(".translate-table").hasClass("wide-translate")){
             document.cookie = "wide-translate=0";
             $(".translate-table").removeClass("wide-translate");
             autosize.update($("textarea"));
         } else {
             document.cookie = "wide-translate=1";
             $(".translate-table").addClass("wide-translate");
         }
     });

     function importFromSource(textId) {
         var source = $("textarea.source-"+textId).filter(function(){
             if($(this).parent().parent().css('display') != 'none')
                 return $(this);
         });
         var target = $("textarea.translation-"+textId).filter(function(){
             if($(this).parent().parent().css('display') != 'none')
                 return $(this);
         });

         target.text(source.text());
         autosize.update(target);
         if(target.hasClass("html")){
             var id = target.attr("id").split("-")[1];
             console.log(id);
             parseHtml(id);
         }
     }

     $(".textfieldImport").on("click", function(){
         var id = $(this).attr("id").split("-")[1];
         importFromSource(id);
         $(this).remove();
     })

     function parseHtml(translationId) {
         var htmlBox = $("#htmlBox-"+translationId);
         htmlBox.removeAttr("contenteditable");

         var textbox = $("#translation-"+translationId);

         var text = textbox.text();

         var beautifulText = html_beautify(text, {
             'wrap_line_length': 0
         });

         if(text.indexOf("--notranslate--") > 0){
             htmlBox.addClass("notranslate").text(beautifulText);
         } else {
             function markRestricted(selection) {
                 return "<mark contenteditable='false'>" + selection.replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</mark>";
             }

             // some more prep befre general replace
             beautifulText = beautifulText.replace("<style>","<style&gt;").replace("</style>","&lt;/style>");

             var replacedText = beautifulText
                 .replace(/(\<[\s\S]*?\>)/g, markRestricted)
                 .replace(/(\{\{[\s\S]*?\}\})/g, markRestricted)
             ;

             htmlBox.html(replacedText);
             htmlBox.contents().filter(function(){
                 return this.nodeType == 3;
             }).each(function(){
                 var value = this.wholeText;
                 if(value.trim().length > 0){
                     $(this).replaceWith("<span class='editable-span' contenteditable='true'>" + value + "</span>" );
                 }
             });
         }
     }

     $(".htmlBox").each(function(){
         var id = $(this).attr("id").split("-")[1];
         parseHtml(id);
     });

     $(".text-container").on("click",".textfieldValidate", function(e){
         e.preventDefault();
         var textarea = $(this).parents(".text-container").find("textarea");
         var id = textarea.attr("id").split("-")[1];
         parseHtml(id);
         $(this).parent().append('<button class="textfieldAsHtml">Edit as HTML</button>');
         $(this).remove();
     });

     $(".text-container").on("click",".textfieldAsHtml", function(e){
         e.preventDefault();
         var htmlBox = $(this).parents(".text-container").find(".htmlBox");
         var text = htmlBox.text();
         htmlBox.text(text);
         htmlBox.attr("contenteditable", true);
         $(this).parent().append('<button class="textfieldValidate">Validate</button>');
         $(this).remove();
     });

///// STRINGS

     $(".translate-row").on( "blur", ".target-text", function(){
         var translationId = $(this).data("translation-id");
         var texts = $(".translation-"+translationId);
         var textarea = $("#translated-"+translationId);

         var dataArray = {};
         for (var i = 0; i < texts.length; i++) {
             dataArray[texts[i].dataset.target_id] = {
                 "context": texts[i].dataset.context,
                 "string": texts[i].textContent.trim(),
                 "orig_string": $.trim($(".source-row.language-0 .source-" + texts[i].dataset.target_id ).text()),
                 "crc_string": texts[i].dataset.target_id
             }
         }
         var json = JSON.stringify(dataArray);
         textarea.text(json);
     });

     $(".target-text").on( "focus", function(){
         $(this).addClass("changed");
         $(this).parent().find("input").each(function(){$(this).attr("checked", true)});
     });

     //setTimeout(function(){
         $(".refresh-strings").attr("href", document.location.origin + "/importStrings/" + $('.translate-select').val());
     //}, 1000);

 })
</script>

<div class="status-message active"> This Project is <span>active</span><div class="close-message">&times;</div> </div>
<div class="container-fluid project-page active">
    {!! Form::model($project, array('route' => array('project.update',$project->id), 'method' => 'patch')) !!}
    <div class="title-container">
        <div class="col-xs-12">
            <h1>
                            </h1>
            <a href="{{ url('/importStrings/0') }}" class="btn btn-danger refresh-strings">Refresh Language {{ $project->getMagentoProductType()}}</a>
            @if($user->hasRole(2)) <a href="{{ url('/importStrings/all') }}" class="btn btn-warning">Refresh ALL {{ $project->getMagentoProductType()}}</a> @endif
            <div class="project-status-by-language">
                @foreach($languages as $id => $language)
                    <span class="language status-