@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'documents'
])

@section('head_supplement')
    <style type="text/css">

        .regular {
            width: 18px !important;
            position: relative;
            top: -8px;
            left: 7px;
        }


        #toolbar, #annotations-bar {
            color: rgb(241, 241, 241);
            display: flex;
            height: 48px;
            padding: 0 16px;
            display: none !important;
        }

        #title {

            display: none !important;
        }

        #aligner {
            align-items: center;
            display: flex;
            padding: 0 8px;
            width: 100%;
            display: none !important;
        }

        ul.nested li {
            margin-top: 10px;
            /* border-top: 1px solid #ccc; */
            padding-top: 10px;
            border-left: 1px solid #ccc;
            padding-left: 17px;
            padding-bottom: 7px;
        }


        li button.btn.mr-2.mb-2.btn-primary {
            padding: 1px;
            padding-right: 4px;
            padding-left: 4px;
            margin-left: 9px;
        }

        .small_button {
            padding: 1px;
            padding-right: 4px;
            padding-left: 4px;
            margin-left: 9px;
        }

        ul, #myUL {
            list-style-type: none;
        }

        /* Remove margins and padding from the parent ul */
        #myUL {
            margin: 0;
            padding: 0;
        }

        /* Style the caret/arrow */
        .caret {
            cursor: pointer;
            user-select: none; /* Prevent text selection */
        }

        /* Create the caret/arrow with a unicode, and style it */
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }

        /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
        .caret-down::before {
            transform: rotate(90deg);
        }

        /* Hide the nested list */
        .nested {
            display: none;
        }

        /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
        .active {
            display: block;
        }

        .nested.active {
            border: 0px;
            box-shadow: none;
        }

        .nested li a {
            border: 1px solid #ccc;
            padding: 15px;
            background: #7190ffd1;
            color: white !important;
            border-radius: 7px;
            /* min-width: 100%; */
            /* max-width: 100%; */
        }
    </style>
@endsection
@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="far fa-folder-open icon-gradient bg-strong-bliss"></i>
                </div>
                <div>
                    Gestion documentaire
                    <div class="page-title-subheading">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-md-12 col-xl-12">
            <div class="card-hover-shadow-2x mb-3 card">
                <ul id="myUL ">
                    <li style="border:0px!important;padding-top:25px">
                        <span class="caret-down card-header">Gestion Documentaire
                            @if (Auth::user()->user_type == 1)
                                <button onclick="$('#menu_id').val(0)" type="button"
                                        class="btn mr-2 mb-2 btn-primary small_button" data-toggle="modal"
                                        data-target="#add_doc">+</button>
                                <button onclick="$('#sous_menu_id').val(0)" type="button"
                                        class="btn mr-2 mb-2 btn-warning small_button" data-toggle="modal"
                                        data-target="#add_sous_menu">+ sous-menu</button>

                            @endif
                        </span>
                        {{ printTree(parseTree($newarr, $names, $type, $link, 0, $autho, $autho_fonction)) }}
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <form method="post" id="del_menu_form" action="/documents/delete">
        @method('delete')
        @csrf
        <input type="hidden" name="del_menu_id" id="del_menu_id">
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function change_menu(a, b, c, d) {

                $('#change_menu_name').val(a);
                $('#change_menu_id').val(b);

                var split = c.split(';');
                var split_fonction = d.split(';');


                $.each(split, function (index, value) {

                    $('#choice' + value).prop('checked', true);
                });

                $.each(split_fonction, function (index, value) {

                    $('#choice_fonction' + value).prop('checked', true);
                });

                $('#change_menu').modal('show');

            }

            function show_doc(a, b) {

                if (b == 'pdf' || b == 'PDF' || b == 'jpg' || b == 'JPG') {

                    $('#frame_doc_div').html('<iframe id="frame_doc" style="display:none;width:100%;min-height:1000px" src=""></iframe>');

                    $('#frame_doc').show();
                    $('#frame_doc').attr('src', 'uploads/documentation/' + a);
                }

                if (b == 'doc' || b == 'docx' || b == 'xls' || b == 'xlsx') {
                    a = a.replace("'", "\'");
                    $('#frame_doc').show();
                    $('#frame_doc_div').html("<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://{{ asset('storage/') }}documentation/" + a + "' width='100%' height='1000px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>");
                }
            }

            // document.oncontextmenu = function() {return false;};
            var toggler = document.getElementsByClassName("caret");
            var i;

            for (i = 0; i < toggler.length; i++) {
                toggler[i].addEventListener("click", function () {
                    this.parentElement.querySelector(".nested").classList.toggle("active");
                    this.classList.toggle("caret-down");
                });
            }
        });
    </script>
@endsection

@section('modal')
    @include('modals.documents.change_menu')
    @include('modals.documents.add_doc')
    @include('modals.documents.add_sous_menu')
@endsection