@extends('layouts.app')
@section('title', trans('menu.document_and_protocol'))
@section('plugin-styles')
    @php $u = request()->user();@endphp
    <link rel="stylesheet" href="{{ asset('vendors/jquery-contextmenu/jquery.contextMenu.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendors/cropperjs/cropper.min.css')}}">
    <link rel="stylesheet" href="{{ asset('vendors/dropzone/dropzone.css')}}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/mime-icons.min.css') }}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/document-editor.css') }}">
    {{-- <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/fsm.css') }}"> --}}
    <style>#content.list .draggable{height: 61px;}</style>
    <style>
        #content.list .draggable{height: 61px;}
        .selection-box {
            background: rgba(66, 133, 244, 0.1);
            border: 1px solid #4285f4;
            position: fixed;
            z-index: 99999;
            display: none;
            pointer-events: none;
        }
        .selectable-item {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
    </style>
@stop

@section('content')
    <div class="content">
        <x-content.header title="{{__('menu.document_and_protocol')}}"
            subTitle="{{$category->documents_count}} {{ __('title.items') }}" >

            <x-slot:headerRight>
                <button id="upload" type="button" class="btn-create btn-secondary-sm text-sm-semibold hidden">
                    <x-svg-icon icon="icon-upload" width="16" height="16" />
                    {{trans('menu.nav-upload')}}
                </button>


                <button id="add-folder" type="button" class="btn-create btn-secondary-sm text-sm-semibold hidden">
                    <x-svg-icon icon="icon-folder" width="16" height="16" />{{trans('menu.nav-new')}}
                </button>

            </x-slot:headerRight>
        </x-content.header>



        <div class="flex flex-col lg:flex-row justify-between gap-4 bg-base-white">

            <div class="w-full lg:w-[286px] lg:max-w-[286px] border h-[300px] overflow-y-scroll no-scrollbar lg:min-h-screen rounded-lg p-4 overflow-x-auto lg:sticky lg:top-32">
                <!-- tree view  -->
                <div id="tree" class="flex flex-col gap-4">

                </div>
            </div>

            <div class="w-full lg:w-[calc(100%-286px-16px)]" id="documents-page">
                <div class="selection-box"></div>

                <nav aria-label="breadcrumb" class="hidden lg:inline-block w-fit rounded-lg mb-4 text-xs-medium" id="breadcrumbs">
                    <ol class="breadcrumb flex w-fit items-center flex-wrap justify-start sticky gap-1 top-0 z-50 p-0 mb-0 !border-none">
                        <li class="breadcrumb-item invisible">{{trans('label.lbl_home')}}</li>
                    </ol>
                </nav>



                <div class="w-full flex flex-1 justify-center mb-4">

                    @include('organizationaldocument::manager.top-bar')

                </div>

                <div id="main">
                    <div id="alerts" class="hidden"></div>

                    <div class="flex flex-col gap-3 lg:gap-0 lg:flex-row justify-between lg:items-center mb-4">
                        <div class="w-full lg:w-[320px] search-bar">
                            <form method="GET">
                                <input type="text" id="search" class="search-input filter-search w-full"
                                    name="query"
                                    placeholder="{{__('forms.lbl_search_reports_by_name')}} ..."
                                />
                            </form>
                            <x-svg-icon icon="icon-search" />
                        </div>
                    </div>

                    <div id="empty" class="hidden">
                        <i class="fa fa-folder-open"></i>
                        {{ trans('menu.message-empty') }}
                    </div>

                    <div class="flex flex-col" id="content">
                    </div>

                    <div id="pagination" class="flex items-center justify-between w-full"></div>

                    <a id="item-template" class="hidden">
                        <div class="p-[10px] border rounded-lg border-custom-grey-200 mb-4 cursor-pointer">
                            <div class="flex items-center gap-2">
                                <div class="square"></div>
                                <div class="info truncate">
                                    <h1 class="item_name truncate text-custom-grey-900 text-md-semibold">
                                    </h1>
                                    <time class="text-custom-grey-600 text-sm-medium text-truncate">
                                    </time>
                                </div>
                            </div>
                        </div>
                    </a>

                </div>

            </div>

        </div>

    </div>

    @include('organizationaldocument::manager.modals')
@stop

    @section('footer-script')

        <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>

        <script src="{{asset('vendors/jquery-contextmenu/jquery.contextMenu.min.js')}}"></script>

        <script src="{{asset('vendors/dropzone/dropzone.js')}}"></script>

        <script src="{{asset('vendors/cropperjs/cropper.min.js')}}"></script>

        <script>

        var actions = [
            {
                name: 'rename',
                icon: 'edit',
                label: '{{trans('menu.menu-rename')}}',
                multiple: false
            },
            {
                name: 'download',
                icon: 'download',
                label: '{{trans('menu.menu-download')}}',
                multiple: true
            },
            {
                name: 'preview',
                icon: 'image',
                label: '{{trans('menu.menu-view')}}',
                multiple: false
            },
            {
                name: 'copy',
                icon: 'copy',
                label: '{{trans('menu.menu-copy')}}',
                multiple: true
            },
            {
                name: 'paste',
                icon: 'paste',
                label: '{{trans('menu.menu-paste')}}',
                multiple: false
            },
            {
                name: 'move',
                icon: 'arrows-alt',
                label: '{{trans('menu.menu-move')}}',
                multiple: true
            },
            {
                name: 'resize',
                icon: 'arrows-alt',
                label: '{{trans('menu.menu-resize')}}',
                multiple: false
            },
            {
                name: 'crop',
                icon: 'crop',
                label: '{{trans('menu.menu-crop')}}',
                multiple: false
            },
            {
                name: 'trash',
                icon: 'trash',
                label: '{{trans('menu.menu-delete')}}',
                multiple: true
            },
        ];

        var sortings = [
            {
                by: 'alphabetic',
                icon: 'sort-alpha-asc',
                label: '{{trans('menu.nav-sort-alphabetic')}}'
            },
            {
                by: 'time',
                icon: 'sort-amount-desc',
                label: '{{trans('menu.nav-sort-time')}}'
            }
        ];
        </script>
        @include("organizationaldocument::manager.document-script", ['userData' => auth()->user()])

        {{-- Use the line below instead of the above if you need to cache the script. --}}
        <script>
            let validationObject = validateFormObj;
            validationObject.rules = {
                pincode : {
                    required: function(element) {
                        return $("#uploadForm").find("input[name='is_protected']").is(":checked")
                    }
                }
            };

            $("#uploadForm").validate(validateFormObj);
            Dropzone.options.attachmentForm = {
                url     : "{{route('organizational-documents.categories.upload', $slug)}}",
                paramName: "upload", // The name that will be used to transfer the file
                uploadMultiple: true,
                autoProcessQueue: false,
                maxFiles: 100,
                parallelUploads: 100,
                timeout:0,
                clickable: '#upload-button',
                dictDefaultMessage: '{{trans('menu.message-drop')}}',
                addRemoveLinks: true,
                init: function() {
                    var _this = this; // For the closure

                    // for Dropzone to process the queue (instead of default form behavior):
                    document.getElementById("uploadfiles").addEventListener("click", function(e) {
                        // Make sure that the form isn't actually being sent.
                        e.preventDefault();
                        e.stopPropagation();

                        if($("#uploadForm").valid()) {
                            _this.processQueue();
                        }
                    });
                    performFsmRequest('errors')
                    this.on("sendingmultiple", function(file, xhr, formData) {

                        formParams = $("#uploadForm").serializeArray();

                        $.each(formParams, function(i, val) {
                            formData.append( val.name, val.value );
                        });

                    });

                    this.on('success', function(file, response) {
                        const allFiles = _this.files.slice();
                        const resetAndRestoreFiles = () => {
                            _this.removeAllFiles(true); // Clear current files
                            allFiles.forEach(f => _this.addFile(f)); // Re-add the same file
                        };
                        if (response.password_needed === true) {
                            getPasswordConfirmation(response)
                            .then(function(success) {
                               resetAndRestoreFiles();
                                // Handle the success or failure of the password confirmation
                                if (success) {
                                    _this.processQueue();        // Process again
                                } else {
                                    return null; // User canceled password confirmation or it failed
                                }
                            }).catch(error => {
                                if (error.response && error.response.status === 422) {
                                    resetAndRestoreFiles();
                                    PDToast(localize_string.password_confirmation, 'error');
                                }
                                return null;
                            });
                        } else {
                            _this.removeAllFiles(true);
                            $('#uploadModal').modal('hide');
                            loadFolders();
                        }
                    });

                    this.on('error', function(file, response) {
                        let jqXHR = {
                            responseJSON : {
                                message : response.message,
                                status  : response.status
                            }
                        };
                        $(file.previewElement).find('.dz-error-message').text(response.message);
                        if(response.type == "unauthorized"){
                            displayErrorResponse(jqXHR);
                        }


                    });
                },
                headers: {
                    'Authorization': 'Bearer ' + getUrlParam('token')
                },
                acceptedFiles: "{{ implode(',', $helper->availableMimeTypes()) }}",
                maxFilesize: ({{ $helper->maxUploadSize() }} / 1000)
            }


            $('body').on('click', '.extra-form-pincode', function(){
                if($(this).is(":checked")){
                    $(".extra-form-pincode-dependent").removeClass('hidden');
                } else {
                    $(".extra-form-pincode-dependent").addClass('hidden');
                }

            });

            $("body").on('click', '.tree-menu-item', function () {

                $(this).siblings().toggleClass("active");

                $(this).siblings().toggleClass("hidden");

                $(this).toggleClass("bg-custom-blue-50");

                $(this).children().children().toggleClass("rotate-0");


                $(this)
                    .siblings()
                    .children()
                    .find(".tree-submenu-item")
                    .click(function () {
                        $(this)
                            .parent()
                            .find(".tree-submenu-item")
                            .toggleClass("bg-custom-blue-50");

                        $(this)
                            .parent()
                            .find(".tree-submenu-item")
                            .children()
                            .first()
                            .children()
                            .toggleClass("rotate-0");

                        $(this).parent().find(".nested-tree-list").toggleClass("active");

                        $(this).parent().find(".nested-tree-list").toggleClass("hidden");

                        $(this)
                            .parent()
                            .find(".nested-tree-item")
                            .click(function () {
                                $(this)
                                    .parent()
                                    .find(".nested-tree-item")
                                    .toggleClass("bg-custom-blue-50");
                                $(this)
                                    .parent()
                                    .find(".nested-tree-item")
                                    .children()
                                    .children()
                                    .toggleClass("rotate-0");

                                $(this)
                                    .parent()
                                    .find(".nested-tree-item")
                                    .siblings()
                                    .toggleClass("active");

                                $(this)
                                    .parent()
                                    .find(".nested-tree-item")
                                    .siblings()
                                    .toggleClass("hidden");
                            });
                    });
                });

        </script>

    @stop