@extends('temp.admin')
@php
use NN\Module\DB;
@endphp
@section("content")

<div class="content-header row">
    <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">Editor</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"></li>
                </ol>
            </div>
        </div>
    </div>
    <div class="content-header-right col-md-6 col-12">
        <div class="btn-group float-md-right">
            
        </div>
    </div>
</div>
<div class="content-body">
    <section id="dasbor">
        <div class="row">
           
            <div class="col-12">
                <div class="card border-top-3 border-top-vds">
                    <div class="card-header bg-light">
                        <div class="row">
                            <div class="col-6">
                                <h4 class="card-title">Editor Content</h4>        						
                            </div>
                            <div class="col-6 text-right">
                                <button class="btn btn-sm btn-primary" onclick="window.simpandata()">Simpan</button>        						
                            </div>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">        							
                           <textarea id="editor" class="form-control" name="" id="" cols="30" rows="10">{!! html_entity_decode($dataapp->data) !!}</textarea>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
    </section>
</div>


@endsection

@section('script')
<script>

    String.prototype.toHtmlEntities = function() {
        return this.replace(/./gm, function(s) {
            return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
        });
    };

    String.fromHtmlEntities = function(string) {
        return (string+"").replace(/&#\d+;/gm,function(s) {
            return String.fromCharCode(s.match(/\d+/gm)[0]);
        })
    };

    $("#editor").summernote();

    window.simpandata = function(){
        var val = $("#editor").val().toHtmlEntities();

        var t = cssLoader();

        var y = el('div').html($("#editor").val()).get();
        var imgs = [];
        var num = 0;
        Array.from(y.querySelectorAll('img')).forEach(function(ig){
            if(ig.src.indexOf('base64,') != -1){
                imgs.push({
                    base64: ig.src.split('base64,')[1],
                    path: '{{SETUP_PATH}}public/upload-image/{{$kode}}'+num+ig.dataset.filename,
                });
                ig.src = '{{ASSET}}/upload-image/{{$kode}}'+num+ig.dataset.filename+'?v='+Date.now()
            }
            num++;
        });

        upload('{{PATH}}/save/data/editor', '', 'saveeditor.data', btoa(JSON.stringify({
            val : y.innerHTML.toHtmlEntities()
            , img : imgs
            , kode : '{{$kode}}'
        })), function(){},function(r){
            console.log(r);
            t.remove();
            Swal('info', 'Data disimpan', 'success');
        });
    };


</script>  
@endsection