
<!--<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>-->
<div class="npost">
    <div class="n-sidebar">
        <div class="n-side-collapse">
            <i class="fa fa-times-circle"></i>
            Hide
        </div>
        <br/>
        <h3 class="text-center">Page Setting</h3>
        <span class="n-close">&times;</span>
        <hr/>
        <div class="form-group">
            <label for="n-page">Page Title</label>
            <input type="text" class="form-control" name="title" id="n-page" placeholder="Some Page Title" required>
        </div>
        <div class="form-group d-none">
            <label for="tag">Publish As Article</label>
            <input class="toggle n-act-page" name="pagetipe" checked type="checkbox" onchange="setPage($(this))" value=0>
            <small id="emailHelp" class="form-text text-muted">If Active, the page will display as artikel display, with header and footer.</small>
        </div>
        <label for="tag">Categories</label>
        <textarea type="text" class="form-control" name="tag" placeholder="separate by comma (Post, Action)"></textarea>
        <div class='npost-tag n-toggle-pick py-1'>
            <!--add wid tag-->
            {{tag}}
        </div>
        
    </div>
    
    <div class="n-editor">
        <div class="n-editor-bar" id="editorbar">
          <a href="admin" class="n-blog">
            <i class="fa fa-arrow-left"></i>
            <img src="{{app_logo}}" width="50" height="50" class="mx-3 d-inline-block align-top bg-light p-1 mr-3 rounded-circle" alt="">
            <span class="fs-6-b">Add new page</span>
          </a>
          
            
            
            
            <!-- 3 = Link -->
            <div class="n-edit-btn n-add-part border"><i class="fa fa-plus"></i></div>
            <div class="n-edit-btn n-setting border"><i class="fa fa-cog"></i></div>
            <div class="btn btn-sm n-act-save mx-2 text-light n-short-save" name="submit" style="background:var(--1)"><i class="fa fa-paper-plane"></i> Publish</div>
            
        </div>
        <div class="n-editor-main my-2">
            <section part="content" tema="1" n-type="content" id="content-2">
                <div n-widget-background="" n-widget-padding="" class="mx-auto" style="padding-top:50px;padding-bottom:50px;">
                  <div class="container">
                    <h3 nitem="title" class="fs5" njas-edit="H3"><h3 nitem="title" class="fs5" njas-edit="H3" style="font-family: Rubik;">THis is A Sample Title</h3>
                    <div class="fs3" nitem="text" njas-edit="DIV">Welcome, TRY Edit this block or <a href="javascript:void(0)" class="" link="#" nitem="a" njas-edit="A">Add</a> new block</div>
                  </div>
                </div>
            </section>
        </div>
    </div>
    
    </div>
    <!-- Modal -->
    <div class="modal fade" id="nmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Image Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                        <div class="row">
                                <div class="col-sm-5"><span>Suggested size (<b class="nimg-saran"></b>)pixel</span><img class="ne-img my-1" src="ndata/img/box.jpg"></div>
                                <div class="col-sm-7">
                                       <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#img-change" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-retweet"></i> Change</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#img-edit" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-pencil-alt"></i> Edit</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#img-delete" role="tab" aria-controls="contact" aria-selected="false"><i class="fa fa-trash"></i> Delete</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="img-change" role="tabpanel" aria-labelledby="home-tab">
          <div class="accordion" id="accordionExample">
                        <div class="card mt-1">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <i class="fa fa-link"></i>
                                        Select from URL
        
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="basic-addon1">Url image</span>
                                        </div>
                                        <input type="text" class="form-control" placeholder="https://" aria-label="Username" aria-describedby="basic-addon1" onkeyup="neSetImg($(this).val())" onchange="neSetImg($(this).val())">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        <i class="fa fa-images"></i>
                                        From Gallery
        
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                <div class="card-body galeri">
                                    <div class="text-right">
                                        <div class="btn btn-sm btn-2 text-uppercase add"><i class="fa fa-plus"></i> Upload</div>
                                    </div>
                                    <hr/>
                                    <div class="list-galeri"></div>
                                </div>
                            </div>
                        </div>
                    </div>
  </div>
  <div class="tab-pane fade" id="img-edit" role="tabpanel" aria-labelledby="profile-tab">
        <div class="alert alert-info mt-1 text-left" role="info">
                Edit style of image, to show on the page.
        </div>
          <div class="input-group my-3">
                <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">Image Style</span>
                </div>
                <select class="form-control form-control-lg ni-select-img">
                  <option value="">--Default style</option>
                </select>
                
         </div>
          <!-- img pos -->
      <div class="input-group my-3">
                <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">Image Position</span>
                </div>
                <select class="form-control form-control-lg ni-select-img-pos">
                  <option value="">--Default style</option>
                </select>
                
         </div>
          
  </div>
  <div class="tab-pane fade" id="img-delete" role="tabpanel" aria-labelledby="contact-tab">
          <div class="alert alert-danger mt-1 text-left" role="alert">
                  The image will be removed from the page view.<br/>You can still add it from the image gallery
          </div>
          <div class="btn btn-danger ne-img-delete"><i class="fa fa-trash"></i> Delete Image</div>
  </div>
</div>

                                </div>
                        </div>
                    <!--awal body-->
                    
                    <!--akhir body nmodal-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <!--         <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
        </div>
    </div>
    <!-- END N EDITOR FOR WEB -->
</div>

<!-- tambah elemen -->
<div class="njas-info"><h3 class="text-center border-bottom p-3 n-title text-light">Add Block Item</h3>
      <i class="n-right fa fa-times"></i>
      <div class="n-element" style="display: block;">
	      <div class="item"></div>
          <div class="menu"></div>
	  </div>
</div>
<!-- MAIN ZET -->
<link rel="stylesheet" href="assets/css/n-editor.css"/>
<script> var home = "{{%}}" </script>
<script src="assets/js/nblog.js"></script>
<script src="assets/tema/{{tema}}/parts.js"></script>
<script src="assets/js/n-editor.js"></script>
<script>
    var tema = "{{tema}}";
    var table;
    $(function(){
        load();
    })
    $(document).on('click', '.add', function(event) {
                    var h = `
                    <input type="file" accept=".jpg, .jpeg, .png, .webp, .svg" multiple="multiple" class="custom-file-input" name="file[]" required="">
                    <div class="panel-title mt-4 text-cennter">Select or Drop Images here</div><div class="custom-file njas-file">
                   <form enctype="multipart/form-data">
                   <input type="file" accept=".jpg, .jpeg, .png, .webp, .svg" multiple="multiple" class="custom-file-input" id="file" name="file[]" required="">
                   </form><div class="btn btn-primary" for="validatedCustomFile"><i class="fa fa-upload"></i> Choose Image</div>
                 </div>`;
                    //      note('Upload Images', h)
                    Swal.fire('Upload Images', h);
                });
                $(document).on('change', '#file', function(event) {
                    pageload('Uploading');
                    var fd = new FormData($(this).parents('form')[0]);
                    var files = $('#file')[0].files;
                    console.log(fd);
                    if (files.length > 0) {
                        $.ajax({
                            url: 'api.php',
                            type: 'post',
                            data: fd,
                            contentType: false,
                            processData: false,
                            success: function(response) {
                                $('#file').val('');
                                if (response == 'success') {
                                    Swal.fire('Uploaded!', 'Your images has been uploaded.', 'success');
                                    load();
                                    //window.location.reload();
                                } else {
                                    Swal.fire('File not uploaded!', 'Please check your connection and file.<br/>Support file type: jpg, jpeg, png.', 'error');
                                }
                                console.log(response);
                                pageload('');
                            },
                        });
                    } else {
                        alert("Please select a file.");
                        pageload('');
                    }
                });
                function load(){
                    $.ajax({
                            url: 'api.php',
                            type: 'post',
                            data: "load_galeri=1",
                            success: function(response) {
                                $(".list-galeri").html(response);
                                table = $('.njin-table').eq(0).addClass("n-galeri").DataTable({
                                    dom: 'frtip',
                                     order: [[0, 'desc']],
                                     "columnDefs": [
                    					
                    					{"targets": 0, "className": "text-right", "visible": false},
                    					{"targets": 1, "className": "text-right", "visible": false},
                    					{"targets": 2, "className": "text-right", "visible": false},
                    				],
                                });
                            },
                        });
                }
</script>
