@extends('org.layout.adminPanel')
@section('title', 'Trash')
@section('section', 'Trash')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">

    <style>
        .button-bar {
            padding-block: 1em;
        }

        .dataTables_wrapper .dataTables_filter {
            float: none;
            text-align: center;
        }

        .dataTables_filter label {
            width: min(480px, 100%) !important;
            margin-bottom: .4em !important;
        }

        .dataTables_filter [type='search'] {
            border-radius: 45em !important;
            outline: transparent !important;
            padding: .5em .8em !important;
            margin: 0 !important;
            width: 100% !important;
            border: 2px solid var(--border-color) !important;
        }

        /* 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);
        }

        /* end context-menu */

        .btn-primary * {
            color: var(--space);
        }

        .checkbox-container {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        [aria-label="untick"] {
            display: block;
            color: var(--primary);
            opacity: 0.7;
            padding: .5em;
        }

        [aria-label="tick"] {
            display: none;
            color: var(--primary);
            padding: .5em;
        }

        [aria-hidden="true"] {
            display: none;
        }

        [aria-hidden="false"] {
            display: block;
        }

        .trashed-checkbox {
            display: none;
        }

        .trashed-checkbox:checked~label>[aria-label="tick"] {
            display: block;
        }

        .trashed-checkbox:checked~label>[aria-label="untick"] {
            display: none;
        }

        .highlight {
            background-color: var(--primaryHover) !important;
        }

        .highlight:hover {
            background-color: var(--primaryHover) !important;
        }

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

        .info-box i {
            font-size: 48px;
        }
    </style>
@endsection
@section('extraHeader')
    <div class="container-fluid">
        <div class="d-flex flex-wrap gap-2 button-bar">
            <button type="button" class="button btn-secondary" onclick="showRestorePopup(this,true)"
                {{ count($trashedData) > 0 ? '' : 'disabled' }}>
                <center><i class="bi bi-arrow-counterclockwise me-2"></i>Restore all trash</center>
            </button>
            <button type="button" class="button btn-secondary" onclick="showTrashPopup(this,true)"
                {{ count($trashedData) > 0 ? '' : 'disabled' }}>
                <center><i class="bi bi-trash me-2"></i>Empty all trash</center>
            </button>
            <button type="button" class="button btn-secondary" {{ count($trashedData) > 0 ? '' : 'disabled' }}
                onclick="selectModeChange(this)">
                <center><i class="bi bi-check2-circle me-2"></i>Select items</center>
            </button>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="button btn-secondary" {{ count($trashedData) > 0 ? '' : 'disabled' }}
                    onclick="showRestorePopup(this)" data-extra-option='select' title="Restore" aria-hidden="true">
                    <center><i class="bi bi-arrow-counterclockwise"></i></center>
                </button>
                <button type="button" class="button btn-secondary" {{ count($trashedData) > 0 ? '' : 'disabled' }}
                    onclick="showTrashPopup(this)" data-extra-option='select' title="Delete" aria-hidden="true">
                    <center><i class="bi bi-trash"></i></center>
                </button>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <ul id="record-context-menu" class="context-menu not-visible">
        <li class="context-item no-event" style="font-weight: bold;" data-context-menu="title"></li>
        <hr style="margin: 0; width:80%; margin-inline:auto;">
        <li class="context-item" data-context-menu="restore"><i class="bi bi-arrow-counterclockwise me-2"></i>Restore</li>
        <li class="context-item" data-context-menu="delete"><i class="bi bi-trash-fill me-2"></i>Delete</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">
        <div class="container">
            @php
                $collectTrashedId = [];
                $UUID = 0;
            @endphp
            @if (count($trashedData) > 0)
                <p class="m-0 mb-2"><i>To delete single or multiple items, right click.</i></p>
                <div class="table-wrapper">
                    <table id="trashedTable" class="display responsive nowrap">
                        <thead>
                            <th><input type="checkbox" class="trashed-checkbox" name=""
                                    id="record_{{ $UUID }}" onchange="recordSelectAll(this)"
                                    data-trashed-record="all-checkbox">
                                <label for="record_{{ $UUID }}" class="trashed-tick" aria-hidden="true">
                                    <i class="bi bi-check-circle-fill" aria-label="tick"></i>
                                </label>
                                <label for="record_{{ $UUID }}" class="trashed-untick" aria-hidden="true">
                                    <i class="bi bi-circle" aria-label="untick"></i>
                                </label>
                            </th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Date deleted</th>
                        </thead>
                        <tbody>
                            @foreach ($trashedData as $tData)
                                @if (count($tData) > 0)
                                    @foreach ($tData as $trashed)
                                        @php
                                            $collectTrashedId[$trashed->type][] = encode($trashed->id);
                                            $UUID += 1;
                                        @endphp
                                        <tr class="trashed-record" data-trashed-name="{{ $trashed->name }}"
                                            data-trashed-id="{{ encode($trashed->id) }}"
                                            data-trashed-type="{{ $trashed->type }}">
                                            <td>
                                                <div class="checkbox-container">
                                                    <div>
                                                        <input type="checkbox" class="trashed-checkbox" name=""
                                                            id="record_{{ $UUID }}" onchange="recordSelect(this)"
                                                            data-trashed-record="checkbox"
                                                            data-trashed-id="{{ encode($trashed->id) }}"
                                                            data-trashed-type="{{ $trashed->type }}">
                                                        <label for="record_{{ $UUID }}" class="trashed-tick"
                                                            aria-hidden="true">
                                                            <i class="bi bi-check-circle-fill" aria-label="tick"></i>
                                                        </label>
                                                        <label for="record_{{ $UUID }}" class="trashed-untick"
                                                            aria-hidden="true">
                                                            <i class="bi bi-circle" aria-label="untick"></i>
                                                        </label>
                                                    </div>
                                                    <div>
                                                        @switch($trashed->type)
                                                            @case('ORGANISATION')
                                                                <i class="bi bi-building-fill"></i>
                                                            @break

                                                            @case('DIVISION')
                                                                <i class="bi bi-buildings-fill"></i>
                                                            @break

                                                            @case('DEPARTMENT')
                                                                <i class="bi bi-people-fill"></i>
                                                            @break

                                                            @case('PROJECT')
                                                                <i class="bi bi-stack"></i>
                                                            @break

                                                            @case('FOLDER')
                                                                <i class="bi bi-folder-fill"></i>
                                                            @break

                                                            @case('ITEM')
                                                                <i class="bi bi-box"></i>
                                                            @break

                                                            @default
                                                        @endswitch
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $trashed->name }}</td>
                                            <td>{{ $trashed->type }}</td>
                                            <td>{{ date(DISPLAY_DATE_FORMAT . ' H:i:s a', strtotime($trashed->deleted_at)) }}
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach
                        @else
                            <div class="d-flex justify-content-center flex-column align-items-center h-100"
                                style="opacity: .7">
                                <i class="bi bi-trash" style="font-size: 5rem;"></i>
                                <h1>Empty trash</h1>
                            </div>
            @endif
            </tbody>
            </table>
        </div>
        <br>
        <br>
    </div>
    </div>
    {{-- trash popup --}}
    <!-- Modal -->
    <div class="modal fade" id="trashModal" tabindex="-1" aria-labelledby="exampleModalLabel" 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">
                        <i class="bi bi-trash" style="font-size: 48px;"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure you want to <br><b class="fs-5"
                                data-set="trash-title">empty trash</b>?</p>
                        <p class="text-center my-3" data-set="trash-text">This action will <b>permanently delete</b>
                            everything inside of trash
                            and <b>these can't be restored</b></p>
                    </div>
                    <form action="{{ route('org.trash.delete', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="trash" id="trash-id"
                            value="{{ json_encode($collectTrashedId) }}">
                        <input type="hidden" name="trash_type" id="trash-type" value="ALL">
                        <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, delete">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- restore popup --}}
    <!-- Modal -->
    <div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="exampleModalLabel" 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">
                        <i class="bi bi-arrow-counterclockwise" style="font-size: 48px;"></i>
                    </div>

                    <form action="{{ route('org.trash.restore', compact('subdomain')) }}" method="post">
                        @csrf
                        {{-- popup body --}}
                        <div>
                            <p class="fs-5 m-0 text-center">Are you sure you want to <br><b class="fs-5"
                                    data-set="restore-title">restore everything</b>?</p>
                            <p class="text-center my-3" data-set="restore-text">This action will <b>restore</b> everything
                                inside of trash</p>
                        </div>
                        <div class="d-flex justify-content-center align-items-center" id="child-restore-box">
                            <input type="checkbox" name="restore_child" id="child-restore" class="trashed-checkbox">
                            <label for="child-restore" class="trashed-tick">
                                <i class="bi bi-check-circle-fill" aria-label="tick"></i>
                            </label>
                            <label for="child-restore" class="trashed-untick">
                                <i class="bi bi-circle" aria-label="untick"></i>
                            </label>
                            <label for="child-restore">Also restore lower levels and folders.</label>
                        </div>
                        <br>
                        {{-- end --}}
                        <input type="hidden" name="restore" id="restore-id"
                            value="{{ json_encode($collectTrashedId) }}">
                        <input type="hidden" name="restore_type" id="restore-type" value="ALL">
                        <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-primary flex-grow-1" style="width"
                                id="trash-button" value="Yes, restore">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- folder info -->
    <div class="modal fade p-0" id="infoModal" 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="info-box" id="infoBoxIcon">
                        <i class="bi bi-folder-fill"></i>
                    </div>
                    <div class="px-2">
                        <center><span id="infoTitle"></span></center>
                        <hr>
                        <div id="moreInfo">

                        </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>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        // icons
        const Icons = {
            ORGANISATION: "<i class='bi bi-building-fill'></i>",
            DIVISION: "<i class='bi bi-buildings-fill'></i>",
            DEPARTMENT: "<i class='bi bi-people-fill'></i>",
            PROJECT: "<i class='bi bi-stack'></i>",
            FOLDER: "<i class='bi bi-folder-fill'></i>",
            ITEM: "<i class='bi bi-box'></i>"
        };
        // select mode
        let selectMode = false;
        // restore
        const restoreTitle = document.querySelector(`[data-set="restore-title"]`);
        const restoreText = document.querySelector(`[data-set="restore-text"]`);
        const restoreIds = document.querySelector(`#restore-id`);
        const restoreType = document.querySelector(`#restore-type`);
        // delete
        const trashTitle = document.querySelector(`[data-set="trash-title"]`);
        const trashText = document.querySelector(`[data-set="trash-text"]`);
        const trashIds = document.querySelector(`#trash-id`);
        const trashType = document.querySelector(`#trash-type`);
        const allTrashedIds = @json($collectTrashedId);

        function selectModeChange(e) {
            selectMode = (selectMode) ? false : true;
            if (selectMode) {
                e.classList.remove("btn-secondary");
                e.classList.add("btn-primary");
                document.querySelectorAll("#trashedTable .trashed-tick").forEach(e => e.setAttribute("aria-hidden",
                    "false"));
                document.querySelectorAll("#trashedTable .trashed-untick").forEach(e => e.setAttribute("aria-hidden",
                    "false"));
                document.querySelectorAll(`[data-extra-option = 'select']`).forEach(e => e.setAttribute("aria-hidden",
                    "false"));
            } else {
                e.classList.add("btn-secondary");
                e.classList.remove("btn-primary");
                document.querySelectorAll(".trashed-checkbox").forEach(e => {
                    e.checked = false;
                    let event = new Event("change");
                    e.dispatchEvent(event);
                });
                document.querySelectorAll("#trashedTable .trashed-tick").forEach(e => e.setAttribute("aria-hidden",
                    "true"));
                document.querySelectorAll("#trashedTable .trashed-untick").forEach(e => e.setAttribute("aria-hidden",
                    "true"));
                document.querySelectorAll(`[data-extra-option = 'select']`).forEach(e => e.setAttribute("aria-hidden",
                    "true"));
            }
        }

        let allCheckbox = "";

        function recordSelect(record) {
            let body = record.closest(".trashed-record");
            if (record.checked) {
                body.classList.add("highlight");
            } else {
                body.classList.remove("highlight");
            }
            let allSelected = true;
            if (allCheckbox != "") {
                allCheckbox.forEach(e => {
                    if (!e.checked) {
                        allSelected = false;
                    }
                });
            } else {
                allCheckbox = document.querySelectorAll("[data-trashed-record='checkbox']");
                allCheckbox.forEach(e => {
                    if (!e.checked) {
                        allSelected = false;
                    }
                });
            }
            document.querySelector("[data-trashed-record='all-checkbox']").checked = allSelected;
        }

        function recordSelectAll(e) {
            if (e.checked) {
                document.querySelectorAll("[data-trashed-record='checkbox']").forEach(e => {
                    e.checked = true;
                    let event = new Event("change");
                    e.dispatchEvent(event);
                });
            } else {
                document.querySelectorAll("[data-trashed-record='checkbox']").forEach(e => {
                    e.checked = false;
                    let event = new Event("change");
                    e.dispatchEvent(event);
                });
            }
        }
    </script>
    <script>
        // context-menu
        const trashedRecord = document.querySelectorAll(`.trashed-record`);
        const recordMenu = document.querySelector("#record-context-menu");
        const infoBtn = recordMenu.querySelector(`[data-context-menu='info']`);
        const deleteBtn = recordMenu.querySelector(`[data-context-menu='delete']`);
        const restoreBtn = recordMenu.querySelector(`[data-context-menu='restore']`);
        const menuTitle = recordMenu.querySelector(`[data-context-menu='title']`);

        // some default event
        document.addEventListener("click", e => {
            if (e.target.closest('#record-context-menu') == null) {
                recordMenu.classList.add("not-visible");
            }
        });
        recordMenu.addEventListener("click", e => recordMenu.classList.add("not-visible"));

        trashedRecord.forEach(record => {
            record.addEventListener("contextmenu", e => {
                // if (record.dataset.type == "folderLink") return;
                e.preventDefault();
                recordMenu.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 + recordMenu.clientWidth > window.innerWidth;
                let outOfRangeY = e.clientY + recordMenu.clientHeight > window.innerHeight;
                if (outOfRangeX) {
                    xCoordinate = +(window.innerWidth - (recordMenu.clientWidth + 7));
                }
                if (outOfRangeY) {
                    yCoordinate = +(window.innerHeight - (recordMenu.clientHeight + 7));
                }
                // set coordinate
                recordMenu.style.top = `${yCoordinate}px`;
                recordMenu.style.left = `${xCoordinate}px`;
                // set title

                menuTitle.textContent = (selectMode) ? "Selected items " +
                    `(${document.querySelectorAll(`[data-trashed-record="checkbox"]:checked`).length})` :
                    record.dataset.trashedName;
                // set buttons
                restoreBtn.setAttribute("onclick",
                    `showRestorePopup({
                            'id':'${record.dataset.trashedId}',
                            'name':'${record.dataset.trashedName}',
                            'type':'${record.dataset.trashedType}'
                        })`
                );
                deleteBtn.setAttribute("onclick",
                    `showTrashPopup({
                            'id':'${record.dataset.trashedId}',
                            'name':'${record.dataset.trashedName}',
                            'type':'${record.dataset.trashedType}'
                        })`);
                infoBtn.setAttribute("onclick",
                    `showInfoPopup({
                            'id':'${record.dataset.trashedId}',
                            'name':'${record.dataset.trashedName}',
                            'type':'${record.dataset.trashedType}'
                        })`);
                // show menu
                setTimeout(() => {
                    recordMenu.classList.remove("not-visible");
                }, 80);
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#trashedTable').DataTable({
                responsive: true,
                paging: false,
                autoWidth: false,
                order: [
                    [3, 'desc']
                ],
                columnDefs: [{
                        "width": "0px",
                        "targets": 0
                    },
                    {
                        "width": "50%",
                        "targets": 1
                    },
                    {
                        "width": "25%",
                        "targets": 2
                    },
                    {
                        "width": "25%",
                        "targets": 3
                    },
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search by name, type, date"
                },
                columns: [{
                        data: "icon",
                        name: "icon",
                        sortable: false,
                        searchable: false
                    },
                    {
                        data: "name",
                        name: "name",
                        render: function(data) {
                            let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                            return columnWrapper;
                        }
                    },
                    {
                        data: "type",
                        name: "type"
                    },
                    {
                        data: "delete",
                        name: "delete"
                    }
                ],
            });
        });

        const trashModal = new bootstrap.Modal($("#trashModal"));
        const restoreModal = new bootstrap.Modal($("#restoreModal"));

        function showTrashPopup(item, all = false) {
            if (all) {
                trashTitle.textContent = "delete all items";
                trashText.innerHTML =
                    `This action will permanently delete all of the items and data related to them. This cannot be undone.`;
                trashType.value = "ALL";
                trashIds.value = JSON.stringify(allTrashedIds);
            } else if (selectMode) {
                let checkedRecord = document.querySelectorAll(`[data-trashed-record="checkbox"]:checked`);
                trashTitle.textContent =
                    `delete (${checkedRecord.length}) selected items`;
                trashText.innerHTML =
                    `This action will permanently delete all of selected items and data related to them. This cannot be undone.`;
                trashType.value = "SELECTED";
                let obj = {};
                checkedRecord.forEach(e => {
                    if (typeof obj[e.dataset.trashedType] != "object") {
                        obj[e.dataset.trashedType] = [];
                    }
                    obj[e.dataset.trashedType].push(e.dataset.trashedId);
                    console.log(typeof obj[e.dataset.trashedType]);
                });
                trashIds.value = JSON.stringify(obj);
            } else {
                trashTitle.textContent = `delete "${item.name}"`;
                trashText.innerHTML =
                    `This action will permanently delete and lose every data releted to "${item.name}". This cannot be undone.`;
                trashType.value = "SINGLE";
                trashIds.value = JSON.stringify({
                    [item.type]: [item.id]
                });
            }
            trashModal.toggle();
        }

        function showRestorePopup(item, all = false) {
            document.querySelector("#child-restore-box").classList.remove("d-none");
            document.querySelector("#child-restore").checked = false;
            if (all) {
                restoreTitle.textContent = "restore everything";
                restoreText.innerHTML =
                    `This will restore all of the trashed items and data associated with them.`;
                restoreType.value = "ALL";
                restoreIds.value = JSON.stringify(allTrashedIds);
                document.querySelector("#child-restore-box").classList.add("d-none");
            } else if (selectMode) {
                let checkedRecord = document.querySelectorAll(`[data-trashed-record="checkbox"]:checked`);
                restoreTitle.textContent =
                    `restore (${checkedRecord.length}) item(s)`;
                restoreText.innerHTML = `This action will also restore the higher levels associated with it.`;
                restoreType.value = "SELECTED";
                let obj = {};
                checkedRecord.forEach(e => {
                    if (typeof obj[e.dataset.trashedType] != "object") {
                        obj[e.dataset.trashedType] = [];
                    }
                    obj[e.dataset.trashedType].push(e.dataset.trashedId);
                    console.log(typeof obj[e.dataset.trashedType]);
                });
                restoreIds.value = JSON.stringify(obj);
            } else {
                restoreTitle.textContent = `restore "${item.name}"`;
                restoreText.innerHTML = `This action will also restore the higher levels associated with it.`;
                restoreType.value = "SINGLE";
                restoreIds.value = JSON.stringify({
                    [item.type]: [item.id]
                });
            }
            restoreModal.toggle();
        }

        // info
        function showInfoPopup(data) {
            const target = document.getElementById(`infoModal`);
            let modal = new bootstrap.Modal(target);
            $(`#infoTitle`).text(data.name);
            $(`#infoBoxIcon`).html(Icons[data.type]);

            $.ajax({
                type: "post",
                url: "{{ route('org.trash.info', compact('subdomain')) }}",
                data: {
                    id: data.id,
                    type: data.type,
                    _token: "{{ csrf_token() }}"
                },
                success: function(result) {
                    let info = result.info;
                    let table = "";
                    table = `
                    <table style='width:100%;'>
                        <tr>
                            <td>Path</td>
                            <td>:</td>
                            <td>${info?.path}</td>
                        </tr>
                        <tr>
                            <td>Create by</td>
                            <td>:</td>
                            <td>${info?.create_by}</td>
                        </tr>
                    </table>
                    `;
                    $("#moreInfo").html(table);
                }
            }).always(function() {
                modal.toggle();
            });
        }
    </script>
@endsection