@extends('org.layout.adminPanel')
@section('title', 'Project')
@section('section')
    @php
        $indexKeys = array_keys($folderpath);
        $projectInfo = \App\Models\Project::where('id', decode($project_id))->first();
        $depInfo = \App\Models\Department::where('id', decode($dep_id))->first();
        $org_location_id = encode($depInfo->org_location);
        $depParent = trim(treeParent($depInfo), ',');
        $depParent = array_reverse(explode(',', $depParent));
    @endphp
    @foreach ($depParent as $key => $dep)
        @if (!empty($dep))
            @php
                $depInfo = \App\Models\Department::find($dep);
                if ($key == 0) {
                    $locationInfo = \App\Models\Location::find($depInfo->org_location);
                    $orgInfo = $locationInfo->parent;
                }
            @endphp
            @if ($key == 0)
                <a href="{{ route('org.view', compact('subdomain')) }}" style="text-decoration: none; color:var(--primary);"
                    class="link">Organisation</a>
                /
                <a href="{{ route('org.form', ['subdomain' => $subdomain, 'view' => 'organisation', 'id' => encode($orgInfo->id)]) }}"
                    style="text-decoration: none; color:var(--primary);" class="link">{{ $orgInfo->name }}</a>
                /
                <a href="{{ route('org.dep.view', ['subdomain' => $subdomain, 'org_location_id' => $org_location_id]) }}"
                    style="text-decoration: none; color:var(--primary);" class="link">{{ $locationInfo->name }}</a>
                /
            @endif
            <a href="{{ route('org.dep.view', ['subdomain' => $subdomain, 'id' => encode($depInfo->id), 'org_location_id' => $org_location_id]) }}"
                class="link">{{ $depInfo->name }}</a>
            /
        @endif
    @endforeach
    {{ $projectInfo->name }}
    /
    @if (count($folderpath) > 0)
        <a href="{{ route('org.folder.view', ['subdomain' => $subdomain, 'project_id' => $project_id, 'dep_id' => $dep_id]) }}"
            class="link draggable-area" data-folder-id="{{ encode(0) }}" data-folder-project-id="{{ $project_id }}"
            data-type="folderLink">Folders</a>
    @else
        Folders
    @endif
    @foreach ($folderpath as $key => $val)
        @if (end($indexKeys) != $key)
            {{ ' / ' }} <a
                href="{{ route('org.folder.view', ['id' => encode($key), 'subdomain' => $subdomain, 'project_id' => $project_id, 'dep_id' => $dep_id]) }}"
                class="link draggable-area" data-folder-id="{{ encode($key) }}"
                data-folder-project-id="{{ $project_id }}" data-type="folderLink">{{ $val }}</a>
        @else
            {{ ' / ' }} {{ $val }}
        @endif
    @endforeach
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/horizontal_treeview.css">
    <link rel="stylesheet" href="{{ asset(JQUERYUICSS) }}">
    {{-- <link rel="stylesheet" href="{{ asset(SELECTBOXCSS) }}"> --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
    <style>
        .folder {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .folder-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(12ch, 1fr));
            grid-auto-rows: 120px;
            grid-gap: .2em;
        }

        @media screen and (min-width:576px) {
            .folder-container {
                grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
            }
        }

        .folder-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            border-radius: .6em;
            pointer-events: none;
            height: 100%;
        }

        .folder-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .folder-box i {
            font-size: 48px;
        }

        .folder-titlebox {
            flex-grow: 1;
            text-align: center;
        }

        .folder-titlebox p {
            padding-inline: .4em;
        }

        .folder-actionbar {
            position: absolute;
            left: 95%;
            top: 5%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .folder:hover .folder-actionbar {
            display: block;
        }

        .folder-actionbar:hover+a .folder-wrapper {
            background: var(--primaryHover);
        }

        .actionbar-iconbox {
            border: 1px solid var(--border-color);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--space);
        }

        .folder-menu {
            position: absolute;
            list-style: none;
            padding: 0;
            background: var(--space);
            right: 0;
            border: 1px solid var(--border-color);
            border-radius: .6em;
            padding-block: .2em;
            box-shadow: 0px 5px 12px rgba(0, 0, 0, .2);
            display: none;
        }

        .folder-actionbar:hover .folder-menu {
            display: block;
        }

        .folder-menu li {
            padding-inline: .4em;
            cursor: context-menu;
        }

        .folder-menu li:hover {
            background: #d3d3d3;
        }

        .folder-delete {
            background: rgb(226, 69, 69);
            color: #fff;
        }

        .folder-delete:hover {
            background: rgb(177, 51, 51) !important;
            color: #fff;
        }

        .draggable-item {
            border: 2px dashed transparent;
        }

        .draggable-item:hover .folder-wrapper {
            background: var(--primaryHover);
        }

        .draggable-item:hover .folder-titlebox.ellipsis-text {
            --lines: 2;
        }

        .dragging {
            opacity: 0.8;
        }

        .dragHover {
            border: 2px dashed var(--primary);
            background: var(--primaryHover);
        }

        /* context-menu */
        .context-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            background: var(--space);
            border: 1px solid var(--border-color);
            border-radius: .6em;
            min-width: 180px;
            max-width: min-content;
            overflow: hidden;
            position: fixed;
            z-index: 999999999;
            top: 0;
            left: 0;
            box-shadow: 0px 3px 12px rgba(0, 0, 0, .2);
            transform: scale(1);
            transition: transform 70ms ease-in-out;
            transform-origin: top left;
        }

        .context-item {
            padding: .47em .7em;
            user-select: none;
        }

        .context-item:hover {
            background: rgb(226, 226, 226);
        }

        .not-visible {
            visibility: hidden;
            pointer-events: none !important;
            transform: scale(0);
        }

        /* items */
        [aria-label="itemtype"]:checked+label {
            background-color: var(--primary);
            color: var(--space);
            border: 1px solid transparent;
        }

        [aria-label="itemtype"]:checked+label>i {
            color: var(--space);
        }

        .selectionWrapper {
            display: flex;
            border-radius: .4em;
            overflow: hidden;
            width: min-content;
            border: 1px solid var(--border-color);
        }

        .selectionWrapper>div>label {
            border-radius: 0;
            border: transparent;
            white-space: nowrap;
        }

        .hide-this {
            display: none;
        }

        .trash-floting-icon {
            position: absolute;
            padding: .4em;
            background-color: var(--space);
            border-radius: 5rem;
            font-size: 1.3rem;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 4px;
            margin-left: 1.3em;
        }

        #previewLink {
            display: flex;
            align-items: center;
            gap: .7em;
            border: 1px solid var(--border-color);
            border-radius: .6em;
            padding: .5em 1em;
            /* max-width: max-content; */
        }

        #previewLink:hover {
            background-color: var(--primaryHover);
        }

        .menu-wrapper>*,
        .item-menu-wrapper>* {
            position: relative;
        }

        .menu-wrapper>*::after,
        .item-menu-wrapper>*::after {
            content: "";
            position: absolute;
            width: 1px;
            height: 50%;
            right: -0.2em;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--border-color);
        }

        .menu-wrapper> :last-child::after,
        .item-menu-wrapper> :last-child::after {
            display: none;
        }

        .folder-selected,
        .item-selected {
            background: var(--primary2) !important;
        }

        .folder-list {
            list-style: none;
            padding: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            overflow-y: auto;
        }

        .folder-list li {
            display: flex;
            align-items: center;
            gap: .4em;
            padding: .4em .6em;
            border-radius: .6em;
            cursor: default;
        }

        .folder-list li:hover {
            background-color: var(--primaryHover);
        }

        .folder-list-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 260px;
        }

        .draggable-item-tr.dragging {
            position: fixed;
            z-index: 99999;
            border: 1px solid var(--primary);
            pointer-events: none;
            width: max-content;
        }

        .draggable-item-tr.dragging td:not(:first-child, :nth-child(2)) {
            display: none;
        }
    </style>
@endsection
@section('content')
    <script>
        let genUID = 0;
    </script>
    <ul id="folder-context-menu" class="context-menu not-visible">
        <li class="context-item" data-context-menu="assign"><i class="bi bi-person-lines-fill me-2"></i>Manager</li>
        <li class="context-item" data-context-menu="rename"><i class="bi bi-pencil-fill me-2"></i>Rename</li>
        <li class="context-item" data-context-menu="move"><i class="bi bi-arrows-move me-2"></i>Move to project</li>
        <li class="context-item" data-context-menu="delete"><i class="bi bi-trash-fill me-2"></i>Trash</li>
        <li class="context-item" data-context-menu="info"><i class="bi bi-info-circle-fill me-2"></i>Details</li>
    </ul>
    {{-- content --}}
    <div class="container-fluid pb-5">
        <div class="container">
            @if (count($folderpath) > 0)
                <div class="text-center py-2">
                    <h2>{{ end($folderpath) }}</h2>
                </div>
            @endif
            <div data-container="tree-view">
                <center><x-pre-loader :uibLoader="['class' => 'pre-loader mx-auto']" /></center>
            </div>
            <div>
                <div class="d-flex align-items-center stickyTop py-2 mb-3 bg-light flex-wrap"
                    style="gap: .4em; position: sticky; top:138px; z-index:1;">
                    <button class="button btn-primary d-flex flex-wrap justify-content-center text-center"
                        style="gap: .4em; border:1px solid transparent;" onclick="createFolder()">
                        <i class="bi bi-plus-circle text-white mx-auto" style="font-size: 1rem;"></i>
                        <p class="m-0 text-white text-center"> New folder </p>
                    </button>
                    <div class="menu-wrapper d-flex d-none align-items-center align-self-center"
                        style="gap: .4em; background-color:var(--space); border: 1px solid var(--border-color); border-radius: 0.6em;">
                        <button class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em" title="Manager" data-button="assign">
                            <i class="bi bi-person-lines-fill mx-auto" style="font-size: 1rem;"></i>
                        </button>
                        <button class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em" title="Rename" data-button="rename">
                            <i class="bi bi-pencil-fill mx-auto" style="font-size: 1rem;"></i>
                        </button>
                        <button class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em" title="Move to project" data-button="folder-move">
                            <i class="bi bi-arrows-move mx-auto" style="font-size: 1rem;"></i>
                        </button>
                        <button class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em" title="Trash" data-button="trash">
                            <i class="bi bi-trash-fill mx-auto" style="font-size: 1rem;"></i>
                        </button>
                        <button class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em" title="Details" data-button="details">
                            <i class="bi bi-info-circle-fill mx-auto" style="font-size: 1rem;"></i>
                        </button>
                    </div>
                </div>
                <div id="msgBox">
                    @if (!empty(Session::get('msg')))
                        <div class="alert alert-danger" role="alert">
                            {{ Session::get('msg') }}
                        </div>
                    @endif
                </div>
                <div
                    class="content-wrapper-7 mx-auto box-wrapper {{ count($folders) > 0 ? 'folder-container' : 'd-flex flex-column align-items-center' }} ">
                    @if (count($folders) < 1)
                        <i class="bi bi-folder" style="font-size: 3rem; color:var(--border-color);"></i>
                        <div>
                            Nothing found,
                            <b style="color:var(--primary); cursor: pointer;" onclick="createFolder()">Create folder</b>
                        </div>
                    @endif
                    @foreach ($folders as $folder)
                        @php
                            $folderEncodedId = encode($folder->id);
                        @endphp
                        <div class="folder" data-folder-id="{{ $folderEncodedId }}">
                            <div data-target-link = "{{ route('org.folder.view', ['id' => $folderEncodedId, 'subdomain' => $subdomain, 'project_id' => $project_id, 'dep_id' => $dep_id]) }}"
                                class="draggable-item draggable-area" draggable="true"
                                data-folder-id="{{ $folderEncodedId }}" data-folder-project-id="{{ $project_id }}"
                                data-folder-department-id="{{ $dep_id }}" title="{{ $folder->name }}"
                                data-folder-assign-link="{{ route('org.folder.assign.view', ['id' => $folderEncodedId, 'project_id' => $project_id, 'dep_id' => $dep_id, 'subdomain' => $subdomain]) }}">
                                <div class="folder-wrapper">
                                    <div class="folder-box">
                                        <i class="bi bi-folder-fill"></i>
                                    </div>
                                    <div class="folder-titlebox ellipsis-text">
                                        <p class="m-0">{{ $folder->name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            @if (!empty($main_id))
                {{-- item --}}
                <br>
                <br>
                <div>
                    <div class="d-flex align-items-center stickyTop py-2 mb-3 bg-light flex-wrap"
                        style="gap: .4em; position: sticky; top:138px; z-index:1;">
                        <button class="button btn-primary d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em;border:1px solid transparent;"
                            onclick="window.location.href = '{{ route('org.item.add.update', compact('subdomain', 'project_id', 'dep_id', 'main_id')) }}',showLoader()"
                            id="addItemBtn">
                            <i class="bi bi-plus-circle text-white mx-auto" style="font-size: 1rem;"></i>
                            <p class="m-0 text-white text-center"> Add item</p>
                        </button>
                        <button class="button btn-primary d-flex flex-wrap justify-content-center text-center"
                            style="gap: .4em;border:1px solid transparent;"
                            onclick="window.location.href = '{{ route('org.item.add.update', array_merge_recursive(compact('subdomain', 'project_id', 'dep_id', 'main_id'), ['add_type' => 'register'])) }}',showLoader()"
                            id="addItemBtn">
                            <i class="bi bi-clipboard-plus text-white mx-auto" style="font-size: 1rem;"></i>
                            <p class="m-0 text-white text-center"> New Register</p>
                        </button>
                        <div class="item-menu-wrapper d-flex d-none align-items-center align-self-center"
                            style="gap: .4em; background-color:var(--space); border: 1px solid var(--border-color); border-radius: 0.6em;">
                            <button
                                class="button btn-secondary border-0 d-flex flex-wrap justify-content-center text-center"
                                style="gap: .4em" title="Move item" data-button="item-move">
                                <i class="bi bi-arrows-move mx-auto" style="font-size: 1rem;"></i>
                            </button>
                        </div>
                    </div>
                    {{-- <div class="content-wrapper-7 mx-auto box-wrapper d-flex flex-column align-items-center"> --}}
                    <div class="table-wrapper">
                        <table id="items" class="display responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Next review due </th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                {{-- <i class="bi bi-box" style="font-size: 3rem; color:var(--border-color);"></i>
                    <div>
                        Nothing found,
                        <b style="color:var(--primary); cursor: pointer;" onclick="addItem()">Add item</b>
                    </div> --}}
                {{-- </div> --}}
            @endif
        </div>
    </div>
    <!-- folder add/edit -->
    <div class="modal fade p-0" id="newFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-2" style="max-width:300px;">
            <div class="modal-content">
                <form action="{{ route('org.folder.create', compact('subdomain')) }}" method="post">
                    @csrf
                    <input type="hidden" name="main" value="{{ !empty($main_id) ? $main_id : '' }}">
                    <input type="hidden" name="is_edit" value="" id="is_edit">
                    <input type="hidden" name="project_id" value="{{ $project_id }}">
                    <input type="hidden" name="dep_id" value="{{ $dep_id }}">
                    <div class="modal-body">
                        <div class="folder-box">
                            <i class="bi bi-folder-fill"></i>
                        </div>
                        <div class="px-2">
                            <input type="text" name="name" id="foldername" style="border-radius: .6em;">
                        </div>
                    </div>
                    <div class="p-3 pt-0 d-flex flex-column" style="gap:.4em;">
                        <input type="submit" id="submitbtn" value="Create" class="button btn-primary">
                        <button type="button" class="button" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- folder delete -->
    <div class="modal fade p-0" id="deleteFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-trash-fill" style="font-size: 48px;"></i>
                        <i class="bi bi-folder-fill trash-floting-icon"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to trash <br>"<b><span id="folderDeleteTitle"
                                    class="fs-5"></span></b>"?</p>
                    </div>
                    <center>
                        <p class="my-3">This action will also trash <br><b>sub-folders and items</b></p>
                    </center>
                    <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                        style="max-width: 350px;">
                        <button type="button" id="deletebtn" class="button btn-danger flex-grow-1"
                            data-bs-dismiss="modal">Yes, trash</button>
                        <button type="button" class="button btn-secondary flex-grow-1"
                            data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- folder info -->
    <div class="modal fade p-0" id="infoFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-2" style="max-width:480px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="folder-box">
                        <i class="bi bi-folder-fill"></i>
                    </div>
                    <div class="px-2">
                        <center><span id="folderInfoTitle"></span></center>
                        <hr>
                        <div id="folderMoreInfo">

                        </div>
                    </div>
                </div>
                <div class="p-3 pt-0 d-flex flex-column" style="gap:.4em;">
                    <button type="button" class="button" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Item add/edit-->
    <div class="modal fade p-0" id="newItemModal" tabindex="-1" aria-labelledby="newItemModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-2" style="max-width:480px;">
            <div class="modal-content">
                <form action="{{ route('org.item.store', compact('subdomain')) }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="folder_id" value="{{ !empty($main_id) ? $main_id : '' }}">
                    <input type="hidden" name="is_update" value="" id="is_update">
                    <input type="hidden" name="project_id" value="{{ $project_id }}">
                    <input type="hidden" name="dep_id" value="{{ $dep_id }}">
                    <div class="modal-body">
                        <div class="folder-box">
                            <i class="bi bi-box-fill"></i>
                        </div>
                        <label for="" class="flex-fill px-2 mb-1 fw-bold">Item type</label>
                        <div class="px-2 mb-2 d-flex flex-wrap" style="gap:0.4em;">
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="video" data-type="video"
                                    id="type_video" aria-label="itemtype" checked>
                                <label for="type_video" class="button"><i class="bi bi-film me-2"></i>Video</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="image" data-type="image"
                                    id="type_image" aria-label="itemtype">
                                <label for="type_image" class="button"><i class="bi bi-image-fill me-2"></i>Image</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="document"
                                    data-type="document" id="type_document" aria-label="itemtype">
                                <label for="type_document" class="button"><i
                                        class="bi bi-file-earmark-medical-fill me-2"></i>Document</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="text" data-type="text"
                                    id="type_text" aria-label="itemtype">
                                <label for="type_text" class="button"><i class="bi bi-fonts me-2"></i>Text</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="hardware"
                                    data-type="hardware" id="type_hardware" aria-label="itemtype">
                                <label for="type_hardware" class="button"><i
                                        class="bi bi-motherboard-fill me-2"></i>Hardware/Asset</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="free_text"
                                    data-type="freetext" id="type_freetext" aria-label="itemtype">
                                <label for="type_freetext" class="button"><i class="bi bi-cursor-text me-2"></i>Free Text
                                    Option</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="certificate"
                                    data-type="certificate" id="type_certificate" aria-label="itemtype">
                                <label for="type_certificate" class="button"><i
                                        class="bi bi-award-fill me-2"></i>Certificate</label>
                            </div>
                            <div>
                                <input type="radio" class="d-none" name="item_type" value="register"
                                    data-type="register" id="type_register" aria-label="itemtype">
                                <label for="type_register" class="button"><i
                                        class="bi bi-clipboard-check-fill me-2"></i>Register</label>
                            </div>
                        </div>
                        <center>
                            <div class="hr my-4" style="max-width:80%;"></div>
                        </center>

                        <div class="px-2 mb-2">
                            <label for="itemTitle" class="form-label fw-bold">Item Name</label>
                            <input class="form-control" name="name" id="itemTitle" type="text"
                                placeholder="Item name" aria-label="default input example">
                        </div>
                        @error('name')
                            <div class="alert alert-danger" data-error="input" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        <div class="px-2 mb-2">
                            <label for="itemDescription" class="form-label fw-bold">Description</label>
                            <textarea class="form-control" name="description" id="itemDescription" type="text" placeholder="Description..."
                                aria-label="default input example"></textarea>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="itemReference" class="form-label fw-bold">ID/Reference number (<b
                                    class="text-success m-0 fw-light">optional</b>)</label>
                            <input class="form-control" name="reference_number" id="itemReference" type="text"
                                placeholder="ID/Reference number" aria-label="default input example">
                        </div>
                        {{-- depend inputs --}}
                        <div class="px-2 mb-2" data-input-of="video,image,document">
                            <div class="selectionWrapper">
                                <div>
                                    <input type="radio" class="d-none" value="file" name="upload_type"
                                        aria-label="itemtype" checked id="upload_file">
                                    <label for="upload_file" class="button">
                                        <i class="bi bi-upload"></i>
                                    </label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" value="link" name="upload_type"
                                        aria-label="itemtype" id="upload_link">
                                    <label for="upload_link" class="button">
                                        <i class="bi bi-link-45deg"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="px-2 mb-2">
                            <a href="#" target="_blank" class="d-none" id="previewLink" title="">
                                <i class="bi bi-file-earmark-medical-fill d-none" style="font-size: 28px;"
                                    data-preview="document"></i>
                                <i class="bi bi-play-circle-fill d-none" style="font-size: 28px;"
                                    data-preview="video"></i>
                                <i class="bi bi-image-fill d-none" style="font-size: 28px;" data-preview="image"></i>
                                <p class="m-0">Preview</p>
                            </a>
                        </div>
                        {{-- video --}}
                        <div class="px-2 mb-2 hide-this" data-input-of="video" data-upload-type="link">
                            <label for="itemVideoLink" class="form-label fw-bold">Embed code</label>
                            <input class="form-control" id="itemVideoLink" name="video_link" type="text"
                                placeholder="Embed code" aria-label="default input example">
                        </div>
                        <div class="px-2 mb-2" data-input-of="video" data-upload-type="file">
                            <label for="itemEmbed" class="form-label fw-bold">Upload video</label>
                            <input class="form-control" id="itemEmbed" name="video_file" type="file"
                                placeholder="Embed code" aria-label="default input example">
                        </div>
                        {{-- image --}}
                        <div class="px-2 mb-2 d-none hide-this" data-input-of="image" data-upload-type="link">
                            <label for="itemImageLink" class="form-label fw-bold">Image link</label>
                            <input class="form-control" id="itemImageLink" name="image_link" type="text"
                                placeholder="Image link" aria-label="default input example">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="image" data-upload-type="file">
                            <label for="itemImage" class="form-label fw-bold">Upload Image</label>
                            <input class="form-control" id="itemImage" name="image_file" type="file"
                                placeholder="Image link" aria-label="default input example">
                        </div>
                        {{-- document --}}
                        <div class="px-2 mb-2 d-none hide-this" data-input-of="document" data-upload-type="link">
                            <label for="itemDocumentLink" class="form-label fw-bold">Document link</label>
                            <input class="form-control" id="itemDocumentLink" name="document_link" type="text"
                                placeholder="Document link" aria-label="default input example">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="document" data-upload-type="file">
                            <label for="itemDocument" class="form-label fw-bold">Upload document</label>
                            <input class="form-control" id="itemDocument" name="document_file" type="file"
                                placeholder="Document link" aria-label="default input example">
                        </div>
                        @error('document_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="document"
                                data-upload-type="file" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        @error('image_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="image" data-upload-type="file"
                                role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        @error('video_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="video" data-upload-type="file"
                                role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        <div class="px-2 mb-2 d-none" data-input-of="text">
                            <label for="itemText" class="form-label fw-bold">Text content</label>
                            <textarea class="form-control" id="itemText" name="text_content" type="text" placeholder="Text content..."
                                aria-label="default input example"></textarea>
                        </div>
                        <div class="px-2 mb-2" data-input-of="video,image,document,text">
                            <label for="itemCreationDate" class="form-label fw-bold">Creation date</label>
                            <input class="form-control datePicker" name="creation_at" id="itemCreationDate"
                                type="text" placeholder="Review CreationDate" aria-label="default input example">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="hardware">
                            <label for="itemPurchase" class="form-label fw-bold">Purchase date</label>
                            <input class="form-control datePicker" id="itemPurchase" name="purchase_at" type="text"
                                placeholder="Review Purchase" aria-label="default input example">
                        </div>
                        {{-- end --}}
                        {{-- <div class="px-2 mb-2">
                            <label for="itemPerson" class="form-label fw-bold">Person to review</label>
                            <select class="form-select" id="personreview" aria-label="Default select example" multiple
                                id="itemPerson">
                                <option value="">Select</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                                <option value="4">One</option>
                                <option value="5">Two</option>
                                <option value="6">Three</option>
                                <option value="7">One</option>
                                <option value="8">Two</option>
                                <option value="9">Three</option>
                                <option value="10">One</option>
                                <option value="11">Two</option>
                                <option value="12">Three</option>
                            </select>
                        </div> --}}
                        <div class="px-2 mb-2">
                            <label for="itemPeriod" class="form-label fw-bold">Review period</label>
                            <div class="d-flex gap-2">
                                <input class="form-control" id="itemPeriod" type="number" name="review_period"
                                    placeholder="Review period" aria-label="default input example">
                                <select class="form-select d-flex" aria-label="Default select example"
                                    name="review_period_type" id="itemPeriodType">
                                    <option value="DAYS" selected>Days</option>
                                    <option value="WEEKS">Weeks</option>
                                    <option value="MONTHS">Months</option>
                                    <option value="YEARS">Years</option>
                                </select>
                            </div>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="itemReminder" class="form-label fw-bold">Notification</label>
                            <div class="d-flex gap-2 mb-3" data-section="reminderInput">
                                <select class="form-select d-flex" aria-label="Default select example" id="itemReminder"
                                    onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                    <option value="1-month" selected>1 month before</option>
                                    <option value="1-week">1 week before</option>
                                    <option value="1-day">1 day before</option>
                                    <option value="custom">Custom date</option>
                                </select>
                                <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none"
                                    name="">
                                <div class="reminder-icon-box d-flex align-items-center justify-content-center"
                                    onclick="addReminder(this)" style="cursor: pointer;">
                                    <i class="bi bi-plus-circle-fill fs-3"></i>
                                </div>
                            </div>
                            <div class="reminder-area">

                            </div>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="itemReminder" class="form-label fw-bold">After due date</label>
                            <div class="d-flex gap-2 mb-3" data-section="reminderInput">
                                <select class="form-select d-flex" aria-label="Default select example" id="itemReminder"
                                    onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                    <option value="1-month" selected>1 month after</option>
                                    <option value="1-week">1 week after</option>
                                    <option value="1-day">1 day after</option>
                                    <option value="custom">Custom date</option>
                                </select>
                                <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none"
                                    name="">
                                <div class="reminder-icon-box d-flex align-items-center justify-content-center"
                                    onclick="addReminder(this)" style="cursor: pointer;">
                                    <i class="bi bi-plus-circle-fill fs-3"></i>
                                </div>
                            </div>
                            <div class="reminder-area">

                            </div>
                        </div>
                        <div class="px-2 mb-2" data-input-of="all">
                            <label for="itemEndDate" class="form-label fw-bold">End date (<b
                                    class="text-success m-0 fw-light">optional</b>)
                                <i class="bi bi-info-circle" data-toggle="tooltip" data-placement="right"
                                    title="If you not enter any date then item never expire"></i>
                            </label>
                            <input class="form-control datePicker" name="expired_at" id="itemEndDate" type="text"
                                placeholder="Review end date" aria-label="default input example">
                        </div>
                    </div>
                    <div class="p-3 pt-0 d-flex flex-wrap" style="gap:.4em;">
                        <input type="submit" id="itemSubmitbtn" value="Add" class="button btn-primary flex-fill">
                        <button type="button" class="button flex-fill" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- item trash -->
    <div class="modal fade p-0" id="itemTrashModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-trash-fill" style="font-size: 48px;"></i>
                        <i class="bi bi-box trash-floting-icon"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to trash <br>"<b><span data-set="trash-name"
                                    class="fs-5"></span></b>"?</p>
                    </div>
                    <center>
                        <p class="my-3">This action will also trash <br>data releted to <q data-set="trash-name"></q>
                        </p>
                    </center>
                    <form action="{{ route('org.item.trash', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="item_id" id="trash-id" value="">
                        <input type="hidden" name="folder_id" value="{{ !empty($main_id) ? $main_id : '' }}">
                        <input type="hidden" name="project_id" value="{{ $project_id }}">
                        <input type="hidden" name="dep_id" value="{{ $dep_id }}">
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-danger flex-grow-1" style="width" id="trash-button"
                                value="Yes, trash">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <!-- item move -->
    <div class="modal fade p-0" id="itemMoveModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:480px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div>
                        <div class="d-flex justify-content-between align-items-center" style="padding: .4em .6em;">
                            <h3 class="m-0" id="move-title">Move Item name</h3>
                            <i class="bi bi-x-lg" style="cursor: pointer;" data-bs-dismiss="modal"></i>
                        </div>
                        <div class="mb-2 d-flex align-items-center" style="gap: .6em; padding: .4em .6em;height:46px;">
                            <i class="bi bi-arrow-left d-none" id="back-arrow" data-folder=""
                                style="font-size: 1.5rem; cursor: pointer;"></i>
                            <h4 class="m-0" id="folder-title">{{ $project_name }}</h4>
                        </div>
                        <hr>
                        <div class="folder-list-container">
                        </div>
                        <div class="my-3" style="overflow-x: auto; white-space: nowrap;" id="folder-path"></div>
                        <div class="d-flex justify-content-end d-none" id="move-footer">
                            <form action="{{ route('org.item.move', compact('subdomain')) }}" id="move-form"
                                method="post">
                                @csrf
                                <input type="hidden" name="move_item" id="move_item" value="">
                                <input type="hidden" name="move_folder" id="move_folder" value="">
                                <button type="submit" class="button btn-primary" id="move_here">Move here</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(ADMINJS) }}/layout/horizontal_treeview.js"></script>
    <script src="{{ asset(JQUERYUI) }}"></script>
    {{-- <script src="{{ asset(SELECTBOXJS) }}"></script> --}}
    <script src="{{ asset(JSHELPER) }}"></script>
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        // resize sticky
        setStickyTop();

        function setStickyTop() {
            $(".stickyTop").css("top", `${$(`.header-sticky`).outerHeight() - 2}px`);
        }
        $(window).on("resize", setStickyTop);
        @if (!empty($main_id))
            $(document).ready(function() {
                $('#items').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('org.item.fetch', ['subdomain' => $subdomain, 'folder_id' => $main_id ?? '', 'project_id' => $project_id, 'dep_id' => $dep_id]) }}",
                    language: {
                        emptyTable: `
                                <i class="bi bi-box" style="font-size: 3rem; color:var(--border-color);"></i>
                                <div>
                                    Nothing found,
                                    <b style="color:var(--primary); cursor: pointer;" onclick="window.location.href = '{{ route('org.item.add.update', compact('subdomain', 'project_id', 'dep_id', 'main_id')) }}',showLoader()">Add item</b>
                                </div>`,
                        processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                    },
                    order: [
                        [0, 'desc']
                    ],
                    initComplete: function() {
                        if ("{{ Session::has('itemId') }}") {
                            if ("{{ Session::get('itemId') }}" == "none") {
                                $("#addItemBtn").click();
                            } else {
                                $(`[data-item-id="{{ Session::get('itemId') }}"]`).click();
                            }
                        }
                    },
                    createdRow: function(row, data, dataIndex) {
                        $(row).attr('data-item-id', data.item_id_encode)
                            .attr("data-item-name", data.name)
                            .addClass('bg-white')
                            .addClass('draggable-item-tr');
                    },
                    columnDefs: [{
                            "width": "0px",
                            "targets": 0
                        },
                        {
                            "width": "0px",
                            "targets": 1
                        },
                    ],
                    columns: [{
                            data: "DT_RowIndex",
                            name: "id",
                            render: function(data, a, obj) {
                                return `${data} ${obj.icon}`;
                            }
                        },
                        {
                            data: "name",
                            name: "name",
                            render: function(data) {
                                let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                                return columnWrapper;
                            }
                        },
                        {
                            data: "type",
                            name: "type"
                        },
                        {
                            data: "status",
                            name: "review_slot.status",
                        },
                        {
                            data: "remind_at",
                            name: "latest_reminder.remind_at",
                            render: function(data) {
                                if (data == "OVERDUE")
                                    return "<b style='color:var(--danger);'>OVERDUE</b>";
                                else return data;
                            }
                        },
                        {
                            data: "action",
                            name: "action",
                            sortable: false,
                            searchable: false
                        }
                    ],
                });
            });
        @endif
        const itemTrashModal = new bootstrap.Modal($("#itemTrashModal"));

        function showTrashPopup(e) {
            $("[data-set='trash-name']").text(e.dataset.trashName);
            $("#trash-id").val(`${e.dataset.trashId}`);
            itemTrashModal.toggle();
        }
    </script>
    <script>
        const dragItems = document.querySelectorAll(`.draggable-item`);
        const dragAreas = document.querySelectorAll(`.draggable-area`);
        const folderMenu = document.querySelector(`#folder-context-menu`);
        const renameBtn = folderMenu.querySelector(`[data-context-menu='rename']`);
        const deleteBtn = folderMenu.querySelector(`[data-context-menu='delete']`);
        const assignBtn = folderMenu.querySelector(`[data-context-menu='assign']`);
        const infoBtn = folderMenu.querySelector(`[data-context-menu='info']`);
        const moveBtn = folderMenu.querySelector(`[data-context-menu='move']`);
        const moveURLs = {
            item: "{{ route('org.item.move', compact('subdomain')) }}",
            folder: "{{ route('org.folder.move.to', compact('subdomain')) }}"
        };
        const itemMoveModal = new bootstrap.Modal($("#itemMoveModal"));
        // some default event
        document.addEventListener("click", e => {
            if (e.target.closest('#folder-context-menu') == null) {
                folderMenu.classList.add("not-visible");
            }
        });
        folderMenu.addEventListener("click", e => folderMenu.classList.add("not-visible"));
        // drag event
        dragItems.forEach(item => {
            item.addEventListener("dragstart", e => {
                item.classList.add("dragging");
            });
            item.addEventListener("dragend", e => {
                item.classList.remove("dragging");
            });
        });

        dragAreas.forEach(area => {
            area.addEventListener("dragenter", e => {
                if (![...area.classList].includes("dragging")) area.classList.add("dragHover");
            });
            area.addEventListener("dragleave", e => {
                area.classList.remove("dragHover");
            });
            area.addEventListener("dragover", e => {
                e.preventDefault();
            });
            area.addEventListener("drop", e => {
                console.log('dd');
                area.classList.remove("dragHover");
                let folder = document.querySelector(".dragging");
                if (folder.dataset.folderId == area.dataset.folderId) return;
                $.ajax({
                    type: "post",
                    url: "{{ route('org.folder.move', compact('subdomain')) }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: folder.dataset.folderId,
                        main: area.dataset.folderId,
                        project_id: area.dataset.folderProjectId
                    },
                    success: function(response) {
                        // success
                        if (response.status == 200) return folder.closest('.folder').remove(),
                            $("#msgBox").html(""),
                            quickAlert("success", "Successfully moved");
                        // error
                        if (response.status == 202) {
                            quickAlert("fail", `Fail to move`);
                            $("#msgBox").html(`
                        <div class="alert alert-danger" role="alert">
                            ${response.msg}
                        </div>`);
                        }
                    }
                });
            });
            // context-menu
            area.addEventListener("contextmenu", e => {
                if (area.dataset.type == "folderLink") return;
                e.preventDefault();
                folderMenu.classList.add("not-visible");
                // init coordinate
                let xCoordinate = e.clientX;
                let yCoordinate = e.clientY;
                // check is out of range or not
                let outOfRangeX = e.clientX + folderMenu.clientWidth > window.innerWidth;
                let outOfRangeY = e.clientY + folderMenu.clientHeight > window.innerHeight;
                if (outOfRangeX) {
                    xCoordinate = +(window.innerWidth - (folderMenu.clientWidth + 7));
                }
                if (outOfRangeY) {
                    yCoordinate = +(window.innerHeight - (folderMenu.clientHeight + 7));
                }
                // set coordinate
                folderMenu.style.top = `${yCoordinate}px`;
                folderMenu.style.left = `${xCoordinate}px`;
                // set buttons
                assignBtn.setAttribute("onclick",
                    `assignPage({'assignLink':'${area.dataset.folderAssignLink}'})`);
                renameBtn.setAttribute("onclick",
                    `renameFolder({'id':'${area.dataset.folderId}','name':'${area.title}'})`);
                deleteBtn.setAttribute("onclick",
                    `showDeletePopup({'id':'${area.dataset.folderId}','name':'${area.title}'})`);
                infoBtn.setAttribute("onclick",
                    `showInfoPopup({'id':'${area.dataset.folderId}','name':'${area.title}'})`);
                moveBtn.setAttribute("onclick",
                    `movePopup({id:'${area.dataset.folderId}',name:'${area.title}'})`);
                // show menu
                setTimeout(() => {
                    folderMenu.classList.remove("not-visible");
                }, 80);
            });
        });
        // Draggable items tr
        let startPointX, startPointY = 0;
        const moment = 8;
        let draggingItem;
        $(document).on('mousedown', '.draggable-item-tr', function(e) {
            draggingItem = this;
            $(`#move-form`).attr('action', moveURLs['item']);
            $(this).addClass('no-textselect');
            startPointX = e.clientX;
            startPointY = e.clientY;
        });
        $(document).on('mousemove', function(e) {
            const dragX = e.clientX - 8;
            const dragY = e.clientY - 8;

            $(`.dragHover`).removeClass('dragHover');
            if (draggingItem)
                if (Math.abs(startPointX - dragX) > moment || Math.abs(startPointY - dragY) > moment) {
                    if (e.target.classList.contains('draggable-area')) $(e.target).addClass('dragHover');
                    $(draggingItem).css('left', `${dragX}px`).css('top', `${dragY}px`).addClass('dragging');
                };
        });
        $(document).on('mouseup', function(e) {
            if (e.target.classList.contains('draggable-area') && draggingItem) {
                $(`#move_folder`).val(e.target.dataset.folderId);
                $(`#move_item`).val(draggingItem.dataset.itemId);
                $(`#move_here`).click();
            }
            $(`.dragHover`).removeClass('dragHover');
            $(draggingItem).removeClass('no-textselect').removeClass('dragging');
            draggingItem = undefined;
        });

        // assign
        function assignPage(data) {
            const {
                assignLink
            } = data;
            return window.location.href = assignLink;
        }
        // create
        function createFolder() {
            let target = document.getElementById('newFolderModal');
            let modal = new bootstrap.Modal(target);
            $("#foldername").val("");
            $("#submitbtn").val("Create");
            $("#is_edit").val("");
            modal.toggle();
        }
        // rename
        function renameFolder(data) {
            let target = document.getElementById('newFolderModal');
            let modal = new bootstrap.Modal(target);
            $("#foldername").val(data.name);
            $("#submitbtn").val("Rename");
            $("#is_edit").val(data.id);
            modal.toggle();
        }
        // delete
        function showDeletePopup(data) {
            const target = document.getElementById(`deleteFolderModal`);
            let modal = new bootstrap.Modal(target);
            $(`#folderDeleteTitle`).text(data.name);
            $(`#deletebtn`).attr("onclick", `deleteFolder('${data.id}')`);
            modal.toggle();
        }
        // info
        function showInfoPopup(data) {
            const target = document.getElementById(`infoFolderModal`);
            let modal = new bootstrap.Modal(target);
            $(`#folderInfoTitle`).text(data.name);

            $.ajax({
                type: "post",
                url: "{{ route('org.folder.info', compact('subdomain')) }}",
                data: {
                    id: data.id,
                    _token: "{{ csrf_token() }}"
                },
                success: function(result) {
                    let info = result.info;
                    let table = "";
                    table = `
                    <table style='width:100%;'>
                        <tr>
                            <td>Sub folders</td>
                            <td>:</td>
                            <td>${info.subfolder}</td>
                        </tr>
                        <tr>
                            <td>Items</td>
                            <td>:</td>
                            <td>${info.items}</td>
                        </tr>
                        <tr>
                            <td>Create by</td>
                            <td>:</td>
                            <td>${info.create_by}</td>
                        </tr>
                    </table>
                    `;
                    $("#folderMoreInfo").html(table);
                }
            }).always(function() {
                modal.toggle();
            });
        }
        // move
        function movePopup(data) {
            $(`#move-form`).attr('action', moveURLs['folder']);
            $(`#move-title`).text(`Move "${data.name}"`);
            $(`#move_item`).val(data.id);
            $(`#back-arrow`).addClass("d-none");
            $(`#folder-title`).html("{{ $depInfo->name }}");
            $(`#move_folder`).val("");
            $(`#move-footer`).addClass("d-none");
            folderPathId = [];
            folderPathName = [];
            $.ajax({
                type: "get",
                url: "{{ route('org.project.move.list', compact('subdomain')) }}",
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    if (response.length > 0) {
                        response.forEach(data => {
                            li +=
                                `<li onclick="selectProject('${data.encoded_id}','${data.name}','{{ $depInfo->name }}')"><i class="bi bi-stack" style="font-size: 1.3rem"></i>
                                    <div>
                                        <p class='m-0'>${data.name}</p>
                                        <small class='opacity-50'>${data.parent?.name || ''}</small>
                                    </div>
                                </li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                    }
                }
            }).always(function() {
                itemMoveModal.toggle();
            });
        }

        function deleteFolder(id) {
            $.ajax({
                type: "post",
                url: "{{ route('org.folder.remove', compact('subdomain')) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                },
                beforeSend: function() {
                    $(`.folder[data-folder-id='${id}']`).hide();
                },
                success: function(response) {
                    if (response.status == 200) $(`.folder[data-folder-id='${id}']`).remove(),
                        quickAlert("success", "Successfully trashed");
                    else $(`.folder[data-folder-id='${id}']`).show();
                },
                error: function(e) {
                    $(`.folder[data-folder-id='${id}']`).show();
                    if (e.status == 403) {
                        alert(e.responseJSON.message);
                    }
                }
            });
        }
        // add item
        let folderPathId = [];
        let folderPathName = [];
        $(document).ready(function() {
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd-mm-yy",
                beforeShow: function(input, inst) {
                    setDatePickerPosition(input, inst);
                },
                onSelect: function() {
                    $(this).focus();
                    $(this).blur();
                }
            });
            // dynamic assign datepicker
            $('body').on("focus", ".customDate", function(e) {
                $(this).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd-mm-yy",
                    beforeShow: function(input, inst) {
                        setDatePickerPosition(input, inst);
                    },
                    onSelect: function() {
                        $(this).focus();
                        $(this).blur();
                    }
                });
            });

            // tree view
            $.ajax({
                type: "get",
                url: `{{ route('org.get.tree.view', ['subdomain' => $subdomain, 'section' => 'project', 'upto' => 'folder']) }}`,
                data: {
                    id: "{{ $project_id }}",
                    dep_id: "{{ $dep_id }}"
                },
                success: function(response) {
                    let layout = `<center>
                                            <button class="button btn-primary" data-is-collapse="false" onclick="collapseTree(this)">
                                                <i class="bi bi-arrows-angle-expand text-white me-2"></i>Expand
                                            </button>
                                      </center>
                        <div class="horizontal-tree-panel mb-2 mx-auto border-0" style="width: min-content; max-width:100%;">
                            ${response}
                        </div>`;
                    $("[data-container='tree-view']").html(layout);
                    initCollapse();
                }
            });

            // select folder
            const allFolder = $(`.folder .draggable-item`);
            allFolder.on("click", function() {
                // set buttons
                $(`[data-button="assign"]`).attr("onclick",
                    `assignPage({'assignLink':'${this.dataset.folderAssignLink}'})`);
                $(`[data-button="rename"]`).attr("onclick",
                    `renameFolder({'id':'${this.dataset.folderId}','name':'${this.title}'})`);
                $(`[data-button="trash"]`).attr("onclick",
                    `showDeletePopup({'id':'${this.dataset.folderId}','name':'${this.title}'})`);
                $(`[data-button="details"]`).attr("onclick",
                    `showInfoPopup({'id':'${this.dataset.folderId}','name':'${this.title}'})`);
                $(`[data-button="folder-move"]`).attr("onclick",
                    `movePopup({id:'${this.dataset.folderId}',name:'${this.title}'})`);

                allFolder.each((index, folder) => {
                    if (folder == this) {
                        folder.firstElementChild.classList.add("folder-selected");
                        $(`.menu-wrapper`).removeClass("d-none");
                    } else {
                        folder.firstElementChild.classList.remove("folder-selected");
                    }
                });
            });
            allFolder.on("dblclick", function(e) {
                window.location.href = this.dataset.targetLink;
            });

            $(document).on("click", "#items tbody tr", function() {
                $(`.item-menu-wrapper`).removeClass("d-none");
                $("#items tbody tr").each((index, item) => {
                    if (item == this) {
                        $(`[data-button="item-move"]`).attr("data-item", this.dataset.itemId)
                            .attr("data-name", this.dataset.itemName);
                        for (let child of item.children) {
                            child.classList.add("item-selected");
                        }
                    } else {
                        for (let child of item.children) {
                            child.classList.remove("item-selected");
                        }
                    }
                });
            });

            $(document).on("click", function(e) {
                // folder menus
                if (e.target.closest(".folder") == null &&
                    e.target.closest(".menu-wrapper") == null &&
                    e.target.closest(".modal") == null) {
                    $(`.menu-wrapper`).addClass("d-none");
                    $(`.folder-selected`).removeClass("folder-selected");
                }

                // items menus
                if (e.target.closest("table") == null &&
                    e.target.closest(".modal") == null &&
                    e.target.closest(".item-menu-wrapper") == null) {
                    $(`.item-menu-wrapper`).addClass("d-none");
                    $(`.item-selected`).removeClass("item-selected");
                }

            });
            // move item
            $(`[data-button="item-move"]`).on("click", function() {
                $(`#move-form`).attr('action', moveURLs['item']);
                $(`#back-arrow`).removeAttr('data-parent');
                $(`#move-title`).text(`Move "${this.dataset.name}"`);
                $(`#move_item`).val(this.dataset.item);
                $(`#back-arrow`).addClass("d-none");
                $(`#folder-title`).text("{{ $project_name }}");
                $(`#move_folder`).val("");
                $(`#move-footer`).addClass("d-none");
                folderPathId = [];
                folderPathName = [];
                $.ajax({
                    type: "get",
                    url: "{{ route('org.folder.list', compact('subdomain')) }}",
                    data: {
                        project_id: "{{ $project_id }}",
                        id: ''
                    },
                    beforeSend: function() {
                        $(`.folder-list-container`).html(
                            `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                    },
                    success: function(response) {
                        let li = ``;
                        if (response.folders.length > 0) {
                            response.folders.forEach(folder => {
                                li +=
                                    `<li onclick="getFolderList('${folder.encoded_id}','${folder.name}')"><i class="bi bi-folder-fill" style="font-size: 1.3rem"></i>${folder.name}</li>`;
                            });
                            $(`.folder-list-container`).html(
                                `<ul class="folder-list">${li}</ul>`);
                        }
                    }
                }).always(function() {
                    itemMoveModal.toggle();
                });
            });
            $(`#back-arrow`).on("click", function() {
                if (this.dataset.parent == 'project') {
                    getProjectList(this.dataset.parentName);
                    return;
                }
                getFolderList(`${this.dataset.folder}`, `${this.dataset.folderName}`, true);
            });
        });

        function getFolderList(id = "", name = "", back = false) {
            $.ajax({
                type: "get",
                url: "{{ route('org.folder.list', compact('subdomain')) }}",
                data: {
                    project_id: "{{ $project_id }}",
                    id: (id != "undefined") ? id : ''
                },
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    if (response.folders.length > 0) {
                        response.folders.forEach(folder => {
                            li +=
                                `<li onclick="getFolderList('${folder.encoded_id}','${folder.name}')"><i class="bi bi-folder-fill" style="font-size: 1.3rem"></i>${folder.name}</li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                        $(`#folder-path`).html("");

                    } else {
                        $(`.folder-list-container`).html(`
                        <div class="d-flex flex-column align-items-center">
                            <i class="bi bi-folder" style="font-size: 3rem;color:var(--border-color);"></i>
                            <h3 class="m-0" style="color:var(--border-color);">Empty folder</h3>
                        </div>`);
                    }
                    if (!back) {
                        folderPathId.push(id);
                        folderPathName.push(name);
                        $(`#back-arrow`).attr("data-folder", `${folderPathId.at(-2)}`).attr("data-folder-name",
                            `${folderPathName.at(-2)}`);
                    } else {
                        folderPathId.pop();
                        folderPathName.pop();
                        $(`#back-arrow`).attr("data-folder", `${folderPathId.at(-2)}`).attr("data-folder-name",
                            `${folderPathName.at(-2)}`);
                    }
                    if (id == "undefined") {
                        $(`#back-arrow`).addClass("d-none");
                        $(`#folder-title`).text("{{ $project_name }}");
                        $(`#move_folder`).val("");
                        $(`#move-footer`).addClass("d-none");
                    } else {
                        $(`#back-arrow`).removeClass("d-none");
                        $(`#folder-title`).text(name);
                        $(`#move_folder`).val(folderPathId.at(-1));
                        $(`#move-footer`).removeClass("d-none");
                    }
                }
            });
        }

        function selectProject(id, name, parentName) {
            $(`.folder-list-container`).html(`
                        <div class="d-flex flex-column align-items-center">
                            <i class="bi bi-box-arrow-in-down" style="font-size: 3rem;color:var(--border-color);"></i>
                            <h3 class="m-0" style="color:var(--border-color);">Move here</h3>
                        </div>`);
            $(`#back-arrow`).attr('data-parent', 'project').attr('data-parent-name', parentName);
            $(`#back-arrow`).removeClass("d-none");
            $(`#folder-title`).text(name);
            $(`#move_folder`).val(id);
            $(`#move-footer`).removeClass("d-none");

        }

        function getProjectList(parentName) {
            $.ajax({
                type: "get",
                url: "{{ route('org.project.move.list', compact('subdomain')) }}",
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    if (response.length > 0) {
                        response.forEach(data => {
                            li +=
                                `<li onclick="selectProject('${data.encoded_id}','${data.name}')"><i class="bi bi-stack" style="font-size: 1.3rem"></i>
                                    <div>
                                        <p class='m-0'>${data.name}</p>
                                        <small class='opacity-50'>${data.parent?.name || ''}</small>
                                    </div>
                                </li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                    }
                }
            });
            $(`#back-arrow`).addClass("d-none");
            $(`#folder-title`).html(parentName);
            $(`#move_folder`).val("");
            $(`#move-footer`).addClass("d-none");
        }

        function setDatePickerPosition(input, inst) {
            var rect = input.getBoundingClientRect();
            let dp = inst.dpDiv;
            setTimeout(function() {
                let outOfScreenY = (dp.height() + rect.top + rect.height +
                    8) > $(
                    window).height();
                let outOfScreenX = (dp.width() + rect.left + rect.width +
                    8) > $(
                    window).width();
                let topPosition = (outOfScreenY) ? rect.top - dp.height() :
                    rect.top +
                    rect.height;
                let LeftPosition = (outOfScreenX) ? $(window).width() - (dp
                        .width() + 17) :
                    rect.left;
                inst.dpDiv.css({
                    top: topPosition,
                    left: LeftPosition
                });
            }, 0);
        }

        // let personreview = new selectBox('personreview');
        const itemTypes = document.querySelectorAll(`[name="item_type"]`);

        // when hide model
        $('#newItemModal').on('hidden.bs.modal', function(e) {
            $(`[data-error="file"]`).addClass("d-none").attr("data-input-of", "");
            $(`[data-error="input"]`).addClass("d-none").attr("data-input-of", "");
        });

        function addItem() {
            let target = document.getElementById('newItemModal');
            let modal = new bootstrap.Modal(target);
            target.querySelector("form").reset();
            $("[data-preview]").addClass("d-none"); // hide preview icons
            $(`#previewLink`).addClass("d-none"); // hide preview link
            $("#is_update").val("");
            $("#itemSubmitbtn").val("Add");
            itemTypes.forEach(itemType => {
                let event = new Event("change");
                itemType.checked = itemType.value == "video";
                itemType.parentElement.classList.remove("d-none");
                if (itemType && itemType.value == "video") itemType.dispatchEvent(event);
            });
            modal.toggle();
        }

        function editItem(data) {
            let target = document.getElementById('newItemModal');
            let modal = new bootstrap.Modal(target);
            $("#is_update").val("");
            $("#itemSubmitbtn").val("Update");
            $.ajax({
                type: "get",
                url: `{{ route('org.item.get', compact('subdomain')) }}`,
                data: {
                    id: data?.id
                },
                success: function(response) {
                    const item = response.data;
                    // console.log(item);
                    $("#is_update").val(data.id);

                    itemTypes.forEach(itemType => {
                        let event = new Event("change");
                        itemType.checked = itemType.value == item.type?.toLowerCase();
                        if (!itemType.checked) itemType.parentElement.classList.add("d-none");
                        else itemType.dispatchEvent(event),
                            itemType.parentElement.classList.remove("d-none");
                    });

                    if (item.source_type == "LINK") {
                        $(`input[value="link"]`).prop("checked", true).trigger("change");
                    } else {
                        $(`input[value="file"]`).prop("checked", true).trigger("change");
                    };

                    // set value to form
                    $("#itemTitle").val(item.name);
                    $("#itemDescription").val(item.description);
                    $("#itemReference").val(item.reference_number);
                    $("#itemText").val(item.text_content);
                    $("#itemCreationDate").val(dateFormat("dd-mm-yy", item.creation_at));
                    $("#itemPurchase").val(dateFormat("dd-mm-yy", item.purchased_at));
                    $("#itemPeriod").val(item.review_period);
                    $("#itemPeriodType option").prop("selected", false);
                    $(`#itemPeriodType option[value="${item.review_period_type}"]`).prop("selected", true);
                    $(`#itemEndDate`).val(dateFormat("dd-mm-yy", item.expired_at));
                    $(`#previewLink`).attr("href", "#");
                    $(`#previewLink`).attr("href", item.url);
                    $(`#previewLink`).attr("title", item.file_name);
                    $(`#previewLink`).removeClass("d-none");
                    $("[data-preview]").addClass("d-none"); // hide preview icons
                    $(`[data-preview="${item.type.toLowerCase()}"]`)
                        .removeClass("d-none"); // show only match icon

                    // video
                    if (item.type == "VIDEO") {
                        if (item.source_type == "LINK") {
                            $("#itemVideoLink").val(item.url);
                        }
                    }
                    // image
                    if (item.type == "IMAGE") {
                        if (item.source_type == "LINK") {
                            $("#itemImageLink").val(item.url);
                        }
                    }
                    // document
                    if (item.type == "DOCUMENT") {
                        if (item.source_type == "LINK") {
                            $("#itemDocumentLink").val(item.url);
                        }
                    }
                }
            }).always(function() {
                modal.toggle();
            });
        }

        const itemType = document.querySelectorAll(`[name='item_type']`);
        const inputOf = document.querySelectorAll(`[data-input-of]`);
        itemType.forEach(item => {
            item.addEventListener("change", e => {
                inputOf.forEach(input => {
                    if (input.dataset.inputOf == "all") return input.classList.remove("d-none");
                    if (!input.dataset.inputOf.split(",").includes(item.dataset.type))
                        input.classList.add("d-none");
                    else input.classList.remove("d-none");
                });
            });
        });

        $("[name='upload_type']").on("change", function(e) {
            if (this.value == "link" && this.checked) {
                $("[data-upload-type='link']").removeClass("hide-this");
                $("[data-upload-type='file']").addClass("hide-this");
            } else {
                $("[data-upload-type='file']").removeClass("hide-this");
                $("[data-upload-type='link']").addClass("hide-this");
            }
        });

        // add reminder
        function addReminder(e) {
            genUID += 1;
            const parent = e.closest("[data-section='reminderInput']").parentNode;
            const reminderInput = e.closest("[data-section='reminderInput']").cloneNode(true);
            const iconBox = reminderInput.querySelector(`.reminder-icon-box`);
            const customDate = reminderInput.querySelector(".customDate");
            reminderInput.id = `reminder_${genUID}`;
            customDate?.classList.remove("hasDatepicker");
            customDate?.classList.add("d-none");
            customDate.value = "";
            customDate?.removeAttribute("id");
            iconBox.innerHTML = `<i class="bi bi-dash-circle fs-3"></i>`;
            iconBox.setAttribute("onclick", `removeReminder(${genUID})`);
            parent.querySelector(`.reminder-area`).append(reminderInput);
        }

        function removeReminder(id) {
            document.querySelector(`#reminder_${id}`).remove();
        }
    </script>
@endsection