@extends('superadmin.layout.master')
@section('content')

<div class="content-wrapper" style="min-height: 1179px;">
    <style>
        .sidebar,
        .sidebar a,
        .skin-blue .sidebar a {

            /*color:rgba(255,​ 255,​ 255,​ 0.7) !important;*/
            /*color:#0a89d3!important;*/
            color: white !important;
            font-family: Roboto !important;
            font-size: 13px !important;

        }

        #stratup {

            background: #6777ef !important;
            height: 100px;
            color: #fff;

        }

        .skin-blue .sidebar ul.treeview-menu li a {
            color: #fff !important;
        }

        .skin-blue .sidebar ul.treeview-menu li a:hover {
            background: #0198ee !important;
        }

        .sidebar-menu .treeview-menu>li>a {

            font-size: 13px;
            padding: 12px 5px 12px 15px;
        }

        .skin-blue .sidebar-menu>li>a:hover,
        .skin-blue .sidebar-menu>li.active>a {
            background: #0198ee !important;
            color: #fff !important;
        }

        .folder {
            padding: 25px;
            float: left;
            width: 100%;
        }

        .folder ul li {
            padding: 0 25px;
            background: url(../assets/img/folder.png) no-repeat left top;
            float: left;
            width: 33.33%;
            list-style: none;
        }

    </style>

    <section class="content">
        <style type="text/css">
            #content {
                background: none !important;
            }

            #main {
                position: static !important;
            }

        </style>
        {{-- <link href="/startup/business/css/style.css" rel="stylesheet" type="text/css" media="all"> --}}
        <div id="wrapper">
            <div class="alert alert-primary text-center ">
                <div class="alert-title">
                    <h3>All the Business Documents You Need to Succeed</h3>
                </div>
                <h4> Made for Business Startups</h4>
            </div>
            <!--header-->
            <div id="main">
                <!--  mid portion start-->
                <div id="content" class="container">
                    <h2 class="text-dark text-center  border-bottom border-dark pb-3">No matter your business industry,
                        we have the documents you need</h2>
                    <div id="slider_wrap" class="img-fluid"> <img src={{ asset('assets/img/blog/img02.png') }}
                            width="100%" height="350px"></div>
                </div>
                <!--Content-->
            </div>
            <!--main-->
            <!--  mid portion end-->

        </div>
        <div id="wrapper_template" class="container  mt-3" style="display:block;">
            <div id="main">
                <div id="content">
                    <div class="text-center">
                        <h2 class="text-dark">Access thousands of Business Documents</h2>
                        <h6 class="text-secondary">No need to hire expensive lawyers, consultants and accountants.
                            <br>Get all of your business
                            documents here
                        </h6>

                        <h2 class="text-dark"> Browse Professional Business Documents for Your Business</h2>
                    </div>
                    <a name="showmaincatanvher"> </a>


                    <div class="folder">
                        <ul>

                            @foreach ($cate as $cat)
                                <li>
                                    <p style="cursor:pointer;"
                                        onclick="closeeditorss();close_document_list();showscat({{ $cat->id }},'{{ $cat->name }}');">
                                        {{ $cat->name }} ›</p>
                                </li>

                            @endforeach
                        </ul>
                    </div>
                    <a name="showmaincatanvherdown"> </a>
                    <h3 id="subcatnameonly" class="text-dark container " style="display:none; margin-left-15px">Sub
                        Category</h3>
                    <a name="catsubcat"> </a>
                    <div id="scat1" class="folder" style="">

                        <ul id='scategories'>

                        </ul>
                    </div>

                    <div id="document_list_vik">
                        <div id="divcatsubcatnameonlydiv" class="text-center" style="display:none;">
                            <h3><a id="divcatsubcatnameonly" class="text-center" name="subcatlist"></a></h3>
                            <div class="doc-head-wrap"> <a href="#" class="back-btn">« &nbsp;Back</a>
                                <span id="catsubcatnameonly">Browse available documents for category </span>
                            </div>
                            <div class="d-name-2">DOCUMENT NAME</div>
                            <div class="type-2">BOARD RESOLUTION</div>
                            <div class="page-2">PAGES</div>
                        </div>
                        <div id="scatdoclist" class="folder" style="display:none">

                            <div class="document-wrap" id="documents">
                                <!-- links to templates -->
                                <div class="d-name">
                                    <a href="javascript:void(0);"
                                        onclick="
                                          hideMessage(), getTemplate('www.canadastartups.org/startup/business/template/1'), movetodoc('Authorization to Debit Account')">
                                        Authorization to Debit Account </a>
                                </div>

                                <div class="type">Banking</div>
                                <div class="page">1</div>



                            </div>
                            <div class="doc-head-wrap"> . . . </div>
                        </div>



                    </div>
                </div>
                <div class="claro" id="document_edits" style="display:none;">
                    <div id="resetTemp" style="display:none;float:right;"> <button class="btn btn-default" id="loadDoc"
                            style="float:right;margin-top:1%;background:#fffffa;font-weight:900;"> Applay
                            Changes</button>
                        <br /> <b id="updateDate" style="float:right;text-align:center;margin:5px;display:none;">Today
                            Changes</b>
                    </div>
                    <h2 id="editordocnameonly" style="display:none"> </h2>
                    The following is the default editor to edit templates</p>
                    <div id="editor">
                        <textarea class="summernote" id="text-template">


                                </textarea>
                    </div>
                    <!-- load dojo and provide config via data attribute -->
                    <form id="form">
                        <input type="hidden" name="html" value="" />
                        <input type="hidden" id="templatefilenamevalue" name="templatefilename" value="Template.docx" />
                        <button id="submitWord" type="submit" name="type" value="docx" class="fa fa-download download"
                            title="Download"></button>
                        <button id="#" type="submit" name="type" value="docx" class="fa fa-print print"
                            title="Print"></button>
                    </form>
                </div>
                <!-- message for xls files -->
                <div id="msg_xls" style="display:none; text-align: center;">
                    <h4>The editor(or preview) is not available for xls files. But, the download option is
                        still available.</h4>

                    <a id="link_download_xls" href="">
                        <button class="btn btn-primary">
                            <span class="fa fa-download"></span>
                            &nbsp;
                            <span id="link_filename"></span>
                        </button>
                    </a>

                </div>

                <p style="width:100%; height:100px;">&nbsp;</p>
                <div class="clear"></div>
            </div>
            <!--Content-->
        </div>
        <!--main-->
</div>
</section>
<style>
    .document-wrap {
        clear: both;
        width: 100%;
        float: left;
        height: 400px;
        overflow-y: scroll;
    }

    .document-wrap div {
        border: 1px solid #eee;
        padding: 5px;
    }

    .d-name {
        float: left;
        width: 70%;
        clear: both;
    }

    .type {
        float: left;
        width: 20%;
    }

    .page {
        float: right;
        width: 10%;
    }

    .d-name-2 {
        float: left;
        width: 70%;
        clear: both;
        padding: 10px;
        font-weight: bold;
    }

    .type-2 {
        float: left;
        width: 20%;
        padding: 10px;
        font-weight: bold;
    }

    .page-2 {
        float: right;
        width: 10%;
        padding: 10px;
        font-weight: bold;
    }

    .doc-head-wrap {
        width: 100%;
        float: left;
        background: #003da6;
        color: #FFF;
        position: relative;
        text-align: center;
        font: 700 24px/47px Roboto;
    }

    .back-btn {
        position: absolute;
        width: 100px;
        color: #FFF;
        left: 0;
        top: 0;
        font: 400 14px/47px Roboto;
    }

    .back-btn:hover {
        color: #FFF;
        cursor: pointer;
    }

    .claro .dijitEditor {
        border: 1px solid #fff !important;
    }

    #dijitEditorBody {
        overflow: hidden !important;
    }

    .claro {
        display: block;
        padding: 20px;
        position: initial;
        padding-top: 25px;
        border: 1px solid #ccc;
    }

    .download {
        border: none;

        position: absolute;
        top: 5px;
        right: 10px;
        color: #003da6;
        background: none;
    }

    .print {
        border: none;

        position: absolute;
        top: 5px;
        right: 35px;
        color: #003da6;
        background: none;
    }

    .save {
        border: none;
        position: absolute;
        top: 4px;
        right: 65px;
        color: #003da6;
        background: none;
    }

</style>
</div>
@endsection
@section('script')
<script>
    // function preSubmit() {
    //     var a = jQuery('form').find('input[name="html"]');
    //     var b = jQuery('#dijitEditorBody').html();
    //     a.val(b);
    //     console.log(b);
    //     return false;
    // }

    function opendoclist(id, na) {
        //catsubcatnameonly  Browse available documents for category name

        getData(window.location.origin + '/documents/' + id);

        req.onreadystatechange = function() {
            if (req.readyState == 4 && req.status == 200) {
                document.getElementById('scatdoclist').style.display = 'block';

                document.getElementById('document_list_vik').style.display = 'block';
                document.getElementById('divcatsubcatnameonlydiv').style.display = 'block';

                document.getElementById('divcatsubcatnameonly').innerHTML = na;

                document.getElementById('catsubcatnameonly').innerHTML = na;

                var aTag = $("#scatdoclist");

                $('html,body').animate({
                    scrollTop: aTag.offset().top
                }, 'slow');

                var container = document.getElementById('documents');

                container.innerHTML = "";

                var data = JSON.parse(req.response);
                for (i = 0; i < data.data.length; i++) {

                    container.innerHTML +=
                        '<div class="d-name"><a href="javascript:void(0);" onclick="getTemplate(' + data.data[i]
                        .id + '), movetodoc(\'' + data.data[i].name + '\')">' + data.data[i].name +
                        '</a></div><div class="type">' + na + '</div><div class="pages">' + data.data[i].pages +
                        '</div>';


                }
            } else {
                return;
            }


        }
    }

    function movetodoc(na) {
        let name = document.getElementById('editordocnameonly');
        name.style.display = 'block';
        name.innerHTML = na;
        //name.contentEditable ="true";
        document.getElementById('templatefilenamevalue').value = na + '.docx';
        var aTag = $('#editordocnameonly')
        $('html,body').animate({
            scrollTop: aTag.offset().top + 200
        }, 'slow');
    }

    function closeeditorss() {
        document.getElementById('document_edits').style.display = 'none';
    }

    function close_document_list() {
        document.getElementById('document_list_vik').style.display = 'none';
    }

    function openMsgXls() {
        document.getElementById('msg_xls').style.display = 'block';
    }

    function getData(url) {
        req = new XMLHttpRequest();
        req.open('get', url);
        req.send(null);
    }


    function showscat(id, na) {

        getData(document.location.origin + '/subcategories/' + id);

        req.onreadystatechange = function() {

            if (req.readyState == 4 && req.status == 200) {


                document.getElementById('subcatnameonly').style.display = 'block';
                document.getElementById('subcatnameonly').innerHTML = na;

                var aTag = $("a[name='subcat']"),
                    aTag = $('#subcatnameonly');

                if (aTag.length)
                    $('html,body').animate({
                        scrollTop: aTag.offset().top
                    }, 'slow');




                var data = JSON.parse(req.response);

                var container = document.getElementById('scategories');
                container.innerHTML = '';

                for (i = 0; i < data.data.length; i++) {

                    container.innerHTML += '<li><p style="cursor:pointer;" onclick="closeeditorss();opendoclist(' +
                        data.data[i].id + ',\'' + data.data[i].name + '\');">' + data.data[i].name + '›</p></li>';


                }

            } else {
                return;
            }
        }


    }

    // hide the editor if the file is a .xls file.
    function hideEditor() {
        // alert("xls file clicked!");
        closeeditorss();
        openMsgXls();
    }

    // hide message for xls files
    function hideMessage() {
        document.getElementById('msg_xls').style.display = 'none';
    }

    // update href and file name
    function updateHref(file) {
        var cat = document.getElementById("subcatnameonly").textContent;;
        var subcat = document.getElementById("divcatsubcatnameonly").textContent;;
        document.getElementById('link_download_xls').href = encodeURI(
            'LINK' + cat + '/' + subcat + '/' + file);
        document.getElementById("link_filename").innerHTML = file;
    }
</script>
<script>
    var editor_doc = '';

    //  require(['dijit/Editor', 'dijit/form/Button'],
    /*    function(Editor) {
            var editor = new Editor({}, 'editor');
            editor.startup();
            editor_doc = editor;

            //var button = new Button({type: 'submit'}, 'submitODF');
            //var button = new Button({type: 'submit'}, 'submitWord');
            //var button = new Button({type: 'submit'}, 'submitPDF');
*/

    //         on(dom.byId('form'), 'submit', function(event) {

    //             console.log(editor.get('value'));
    //             event.target.elements.html.value = editor.get('value');
    //             event.preventDefault();
    //             return false;

    //         });
    //});

    // function escapeHtml(text) {
    //     return text
    //         .replace(/&/g, "&amp;")
    //         .replace(/"/g, "&quot;")
    //         .replace(/'/g, "&#039;");
    // }

    // $(document).ready(function() {
    //     setTimeout(function() {
    //         $('#editor').attr('id', 'editor2');
    //         var a = dojo.dijit.Editor({}, 'editor2');
    //         a.startup();
    //         editor_doc = a;
    //     }, 10000);
    //     $('#form').submit(function(event) {
    //         event.target.elements.html.value = escapeHtml(editor_doc.get('value'));
    //     });

    // })
</script>
<script>
    var Userdoc = null;
    var orignalDoc = null;

    function gid(id) {

        return document.getElementById(id);
    }

    function changeTemp(st) {

        if (st == "user" || st == "now") {
            if (st == "now") {

                Userdoc = $('.note-editable.card-block').html();
            } else {
                $('.note-editable.card-block').html(Userdoc);
            }
            gid('loadDoc').innerHTML = "Load Orignal";
            gid('updateDate').style.display = "none";
            gid('loadDoc').onclick = function onclick(e) {
                changeTemp('orignal');

            }
        } else {
            gid('loadDoc').innerHTML = "Applay Changes";
            gid('updateDate').style.display = "block";
            $('.note-editable.card-block').html(orignalDoc);
            gid('loadDoc').onclick = function onclick(e) {
                changeTemp('user');

            }
        }
    }


    function getTemplate(id) {
        docId = id;
        // jQuery('#wrapper').css('display', 'none');
        jQuery('.claro').css('display', 'block');
        var btn = document.getElementById('download-btn');

        var btnContaner = $('.note-toolbar.card-header');
        if (btn == null) {

            btnContaner.append(
                '<div id="download-btn" class="note-btn-group btn-group note-view" style="float:right;" onclick="saveDoc();"><button type="button" class="note-btn btn btn-light btn-sm btn-download" tabindex="-1"><img src="{{ asset('save.png') }}" style="width:25px;"></button></div>'
                );


            btnContaner.append(
                '<div id="download-btn" class="note-btn-group btn-group note-view" style="float:right;" onclick="sendDoc();"><button type="button" class="note-btn btn btn-light btn-sm btn-download" tabindex="-1"><i class="note-icon-arrow-circle-down" style="color:#22cc22;font-size:24px;"></i></button></div>'
                );

        }

        var check = getData(window.location.origin + '/user/checkusertemp/' + id);
        req.onreadystatechange = function() {
            if (req.readyState == 4 && req.status == 200) {

                if (req.response) {
                    let obj = JSON.parse(req.response);
                    Userdoc = obj.html;

                    gid('updateDate').innerHTML = obj.updated_at.split('T')[0];
                    gid('resetTemp').style.display = "block";
                    gid('updateDate').style.display = "block";
                    gid('loadDoc').onclick = function onclick(e) {

                        changeTemp("user");
                    }

                } else {

                    gid('resetTemp').style.display = "none";
                    gid('updateDate').style.display = "none";
                    Userdoc = null;
                }
            }


        }



        $.ajax({
            type: 'GET',
            url: window.location.origin + '/templates/' + id,
            success: function(response) {
                // editor_doc.set('value', response);


                $('.note-editable.card-block').html(response);
                orignalDoc = $('.note-editable.card-block').html();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                $('.note-editable.card-block').html('');
                alert('File not found');
            }
        });



        return false;
    }

    var u3u3u26u4f3fe = '{{ csrf_token() }}';
    function sendDoc() {
        Userdoc = $('.note-editable.card-block').html();
        gid('resetTemp').style.display = "block";
        gid('updateDate').innerHTML = "Today Changes";
        changeTemp("now");
        var fd = new FormData();
        fd.append('file', $('.note-editable.card-block').html());
        fd.append('_token', u3u3u26u4f3fe);
        fd.append('name', document.getElementById('templatefilenamevalue').value);
        fd.append('id', docId);
        $.ajax({

            type: 'Post',
            url: '{{ route('docx') }}',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response) {
                window.location = "{{ route('download') }}/" + response;
            },
            error: function(xhr, err) {

                return alert('error in file:' + err);

            }


        });

        return false;


    }


    function saveDoc() {

        var fd = new FormData();
        fd.append('file', $('.note-editable.card-block').html());
        fd.append('_token', u3u3u26u4f3fe);
        fd.append('name', document.getElementById('templatefilenamevalue').value);
        fd.append('id', docId);
        $.ajax({

            type: 'Post',
            url: '{{ route('saveState') }}',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response) {
                    gid('resetTemp').style.display = "block";
                    gid('updateDate').innerHTML = "Today Changes";
                    changeTemp("now");
                    Userdoc = $('.note-editable.card-block').html();
                } else {

                    alert('Unable to Save Changings');
                }

            }


        });

        return false;


    }






    // update progress bar

    function progressHandlingFunction(e) {
        //if(e.lengthComputable){
        //  $('progress').attr({value:e.loaded, max:e.total});
        // reset progress on complete
        //  if (e.loaded == e.total) {
        //      $('progress').attr('value','0.0');
        //  }
        // }
    }

    // $(function() {
    //     $("#summernote").summernote({
    //         height: 190,
    //         onImageUpload: function(files, editor, welEditable) {

    //             sendFile(files[0], editor, welEditable);
    //         }
    //     });
    //     $('.slidestable ').slimScroll({
    //         height: '420px'
    //     });
    //     $('.file-tree').fileTree({
    //         root: '/home/canadastartups/public_html/startup/business/app/images/',
    //         script: '../app/helpers/jqueryFileTree.php',
    //         multiFolder: false
    //     }, function(file) {
    //         file = file.replace('/home/canadastartups/public_html/startup/business/',
    //             '/startup/business/');
    //         var html = '<span class="pull-right">URL: ' + file + '</span><img src="' + file +
    //             '" style="width:100%;" ></img>'
    //         $('#image-preview').html(html)
    //     });
    //     $(".extend-editor").on("click", function() {
    //         setTimeout(function() {
    //             $("div.col-lg-9").addClass(" col-lg-12");
    //             $("div.col-lg-9").removeClass("col-lg-9");
    //         }, 1000);
    //     });
    //     $("#slideheading").html('');
    //     $("#slideheading").val('');
    //     $("#summernote2").html('');

    //     $('#sb').on('click', function() {
    //         var content = $('#summernote2').html();
    //         $('#hiddenContent').val(content);
    //     });
    //     // fragment summernote button
    //     $("#fragbtn").on('click', function() {
    //         var sel, range;
    //         if (window.getSelection) {
    //             var sel = window.getSelection();
    //             var sel2 = sel.toString();
    //             var replacementText = "<frag>" + sel + "</frag>";
    //             if (sel.rangeCount) {
    //                 range = sel.getRangeAt(0);
    //                 range.deleteContents();
    //                 range.insertNode(document.createTextNode(replacementText));
    //             }
    //         } else if (document.selection && document.selection.createRange) {
    //             range = document.selection.createRange();
    //             range.text = replacementText;
    //         }
    //     });
    // });

     @if(auth('admin')->user() !=null && auth('admin')->user()->role_id ==1 && request()->plan =="business")

     opendoclist(67, "Business Plans");

    @endif

</script>
@endsection