@extends('org.layout.adminPanel')
@section('title', 'Item')
@section('section')
    @php
        $dep_id = encode($item->parent->mainParent->dep_id);
        $project_id = encode($item->parent->project_id);
        $folder_id = encode($item->folder_id);
        $org_location_id = encode(App\Models\Department::where('id', decode($dep_id))->value('org_location') ?? '');
        $idForPermission = encode($currentItem->item_id);
        $idArray = [
            App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
            App\Models\User::$DEP_MANAGER => $dep_id ?? '',
            App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
            App\Models\User::$GOVE_TEAM => $folder_id ?? '',
            App\Models\User::$REVIEWER => $idForPermission ?? '',
            App\Models\User::$GUEST => $idForPermission ?? '',
        ];
    @endphp
    @if (isset($registered_in) && !empty($registered_in))
        <a href="{{ route('org.item.view', ['subdomain' => $subdomain, 'id' => $registered_in]) }}" class="link">Back</a>
    @else
        @if (Helper::checkRole(['REVIEWER', 'GUEST']))
            <a href="{{ route('org.item.list.view', ['subdomain' => $subdomain]) }}" class="link">Back</a>
        @else
            <a href="{{ route('org.folder.view', ['subdomain' => $subdomain, 'dep_id' => $dep_id, 'project_id' => $project_id, 'id' => $folder_id]) }}"
                class="link">Back</a>
        @endif
    @endif
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
    <style>
        .item-container {
            display: grid;
            grid-template-columns: 1fr min-content;
            gap: .6em;
        }

        @media screen and (max-width: 992px) {
            .item-container {
                grid-template-columns: 1fr;
            }
        }

        .item-preview {
            max-width: 640px;
            position: relative;
            min-height: 68px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item-loader {
            position: absolute;
        }

        img {
            max-width: 100%;
            border-radius: .6em;
        }

        video {
            max-width: 100%;
            border-radius: .6em;
        }

        /* other sidebar */
        .other-sidebar {
            display: flex;
            flex-direction: column;
            gap: 0.6em;
        }

        .history-container {
            min-width: 32ch;
            list-style: none;
            padding: 0;
        }

        .history-container li:hover {
            background: var(--hover-bg);
        }

        .history-container li {
            cursor: pointer;
            border-radius: .6em;
            margin-bottom: .6em;
        }

        .history-container p {
            margin: 0;
        }

        .history-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .history-wrapper::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -0.3em;
            left: 50%;
            transform: translateX(-50%);
            background-color: #e0e0e0;
        }

        .history-wrapper:last-child::before {
            background-color: none !important;
        }

        .original-version {
            border-radius: .6em;
            border: 1px solid var(--border-color);
        }

        .original-version:hover {
            background: var(--hover-bg);
        }

        .original-version::before {
            display: none;
        }

        .history-link {
            flex-grow: 1;
            padding: .4em .8em;
        }

        .history-option-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36px;
            height: 36px;
            border-radius: 100%;
            flex-shrink: 0;
            margin-inline: .6em;
            cursor: pointer;
        }

        .history-option-wrapper:hover {
            background-color: var(--hover-bg-dark);
        }


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

        .file-preview {
            display: flex;
            width: min-content;
            align-items: center;
            gap: .6em;
            border-radius: .6em;
            padding: .4em 1em;
            border: 1px solid var(--border-color);
            background-color: var(--space);
        }

        .file-preview:hover {
            background-color: var(--primaryHover);
        }

        textarea {
            border-radius: .6em;
            width: 100%;
            padding: .6em;
            border: 2px solid var(--border-color);
            outline-color: var(--primary);
        }

        .tab-container {
            display: flex;
            list-style: none;
            padding: 0;
            position: relative;
            width: min-content;
        }

        .tab {
            padding: .4em .6em;
            cursor: pointer;
            position: relative;
            border-radius: .6em;
        }

        .tab:hover {
            background-color: var(--hover-bg);
        }

        .indicator {
            position: absolute;
            width: 100%;
            left: 0;
            transform: translateX(50%);
            height: 4px;
            border-radius: 1rem 1rem 0 0;
            background-color: var(--primary);
            bottom: 0;
            transition: .3s;
        }

        /* end context-menu */

        .comment-wrapper {
            display: flex;
            flex-direction: column;
            gap: .6em;
            padding: 1em 1em;
        }

        .attachment-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .conmment-bg {
            position: relative;
            z-index: 0;
            background-color: var(--hover-bg);
            border-radius: .6em;
            height: 480px;
            overflow-y: auto;
        }

        .attachment {
            padding: .4em 1em;
            border: 1px solid var(--border-color);
            border-radius: 2rem;
        }

        .attachment:hover {
            background-color: var(--hover-bg);
        }

        .comment-info {
            font-size: .9rem;
        }

        .comment-text {
            /* max-width: 70ch; */
        }

        .comment-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            min-height: 32px;
        }

        .non-solved-container {
            display: none;
        }

        .comment-wrapper:hover .non-solved-container {
            display: block;
        }

        .red-flag {
            background-color: var(--danger);
            color: #fff;
            padding: .2em;
            border-radius: calc(.6em + .2em);
        }

        .tag {
            border: 1px solid var(--border-color);
            padding: .1em .4em;
            border-radius: .4em;
            display: flex;
            align-items: center;
            gap: .3em;
        }
    </style>
@endsection
@section('content')
    @php
        $icons = [
            'pdf' => 'bi bi-filetype-pdf',
            'doc' => 'bi bi-filetype-doc',
            'docx' => 'bi bi-filetype-docx',
            'ppt' => 'bi bi-filetype-ppt',
            'txt' => 'bi bi-filetype-txt',
            'xls' => 'bi bi-filetype-xls',
            'xlsx' => 'bi bi-filetype-xlsx',
            'video' => 'bi bi-play-circle-fill',
            'zip' => 'bi bi-file-earmark-zip',
        ];
    @endphp
    {{-- 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>
    <div class="container-fluid">
        <div class="container">
            <div class="item-container content-wrapper-7 pb-5">
                <div style="overflow: hidden;">
                    @if (
                        !Helper::permissionChecker('ITEM', [
                            'permission' => ['comment'],
                            'default_return' => false,
                            'id' => [
                                App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
                                App\Models\User::$DEP_MANAGER => $dep_id ?? '',
                                App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
                                App\Models\User::$GOVE_TEAM => $folder_id ?? '',
                                App\Models\User::$REVIEWER => $idForPermission ?? '',
                                App\Models\User::$GUEST => $idForPermission ?? '',
                            ],
                        ]) && Helper::checkRole(['REVIEWER', 'GUEST']))
                        <div class="red-flag-container" style="margin-bottom: .6em;">
                        @else
                            <div class="red-flag-container {{ $status != 'Complete' ? 'red-flag' : '' }}"
                                style="margin-bottom: .6em;">
                                @if ($status != 'Complete')
                                    <div class="d-flex align-items-center my-2 mx-2 gap-2">
                                        <i class="bi bi-exclamation-triangle text-white" style="font-size: 1.3rem;"></i>
                                        <h5 class="m-0 text-white" id="red-flag-msg">{{ $status }}</h5>
                                    </div>
                                @endif
                    @endif
                    <div class="item-wrapper box-wrapper px-4">
                        <div class="d-flex justify-content-end align-items-center">
                            @if (!Helper::checkRole(['REVIEWER', 'GUEST']))
                                <div class="d-flex flex-wrap ms-auto" style="gap: .6em;" onclick="showLoader()">
                                    @if (!empty($item->closed_at))
                                        {{-- null --}}
                                    @elseif (!empty($slot))
                                        @if (isset($slot->status) && $slot->status == 'COMPLETE')
                                            <a href="{{ route('org.item.review.status', ['subdomain' => $subdomain, 'item_id' => encode($currentItem->item_id), 'slot_id' => encode($slot->id ?? '-')]) }}"
                                                class="button btn-hover border-0 text-black text-nowrap"
                                                style="background-color: var(--primary);vertical-align:middle;">
                                                <div class="d-flex">
                                                    <i class="bi bi-check-circle-fill me-2"
                                                        style="color: var(--space) !important;"></i>
                                                    <p class="m-0" style="color: var(--space) !important;">Reviewed
                                                    </p>
                                                </div>
                                            </a>
                                        @else
                                            <a href="{{ route('org.item.review.status', ['subdomain' => $subdomain, 'item_id' => encode($currentItem->item_id), 'slot_id' => encode($slot->id ?? '-')]) }}"
                                                class="button btn-hover border-0 text-black text-nowrap"
                                                style="vertical-align:middle;">
                                                <div class="d-flex">
                                                    <i class="bi bi-circle me-2"></i>
                                                    <p class="m-0">Mark as reviewed</p>
                                                </div>
                                            </a>
                                        @endif
                                    @endif
                                    <a href="{{ route('org.item.add.update', ['subdomain' => $subdomain, 'project_id' => $project_id, 'dep_id' => $dep_id, 'main_id' => $folder_id ?? '', 'id' => encode($currentItem->item_id), 'from' => 'view']) }}"
                                        class="button btn-secondary text-black text-nowrap">
                                        <i class="bi bi-pencil-fill me-2"></i>Edit
                                    </a>
                                    @if (empty($item->closed_at))
                                        <a href="{{ route('org.item.close', ['subdomain' => $subdomain, 'id' => encode($currentItem->item_id), 'project_id' => $project_id, 'dep_id' => $dep_id, 'folder_id' => $folder_id ?? '']) }}"
                                            class="button btn-secondary text-black text-nowrap">
                                            <i class="bi bi-x-lg me-2"></i>Close item
                                        </a>
                                    @endif
                                </div>
                            @else
                                @if (isset($slot->status) && $slot->status == 'COMPLETE')
                                    <div class="d-flex ms-auto no-textselect" style="gap: .6em;">
                                        <div class="button btn-hover border-0 text-black text-nowrap"
                                            style="background-color: var(--primary);vertical-align:middle;">
                                            <div class="d-flex">
                                                <i class="bi bi-check-circle-fill me-2"
                                                    style="color: var(--space) !important;"></i>
                                                <p class="m-0" style="color: var(--space) !important;">Reviewed</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>
                        <div class="d-flex align-items-start mb-2 flex-wrap">
                            {{-- <label class="m-0">Title</label> --}}
                            <h1 class="m-0" style="max-width: 28ch; white-space:balance;font-weight:bold;">
                                {{ $currentItem->name }}
                            </h1>
                        </div>
                        <div>
                            <p class="m-0">ID:
                                {{ !empty($currentItem->reference_number) ? $currentItem->reference_number : '-' }}</p>
                            <p class="m-0">Review period:
                                @if (!empty($item->closed_at))
                                    <b style="color: var(--danger)">
                                        Closed
                                    </b>
                                @elseif (!empty($currentItem->expired_at) && $currentItem->expired_at < date('Y-m-d'))
                                    <b style="color: var(--danger)">
                                        Expired by {{ readableTimeDiff($currentItem->expired_at) }}
                                    </b>
                                @elseif (empty($slot))
                                    <b style="color: var(--danger)">
                                        Unavailable
                                    </b>
                                @else
                                    <b>
                                        {{ !empty($slot->start_at) ? date(DISPLAY_DATE_FORMAT, strtotime($slot->start_at)) : '-' }}
                                        to
                                        {{ !empty($slot->end_at) ? date(DISPLAY_DATE_FORMAT, strtotime($slot->end_at)) : '-' }}
                                    </b>
                                @endif
                            </p>
                            <p class="m-0">Reviews Scheduled To End:
                                {{ !empty($currentItem->expired_at) ? date(DISPLAY_DATE_FORMAT_WITH_MONTH_NAME, strtotime($currentItem->expired_at)) : '-' }}
                            </p>
                            <p class="mt-2 mb-4">Type: <span class="p-1 px-2"
                                    style="border: 1px solid var(--border-color); border-radius:.6em;">{{ ucfirst(strtolower($currentItem->type)) }}</span>
                            </p>
                        </div>
                        @if (strtolower($currentItem->type) == 'register')
                            @if (!Helper::checkRole(['REVIEWER', 'GUEST']))
                                <div class="d-flex flex-wrap" style="gap: .6em;">
                                    <a
                                        href="{{ route('org.item.add.update', ['subdomain' => $subdomain, 'dep_id' => $dep_id, 'main_id' => $folder_id, 'project_id' => $project_id, 'register_id' => encode($currentItem->item_id)]) }}">
                                        <button type="button" class="button btn-primary" style="padding:.3em .8em;">
                                            <i class="bi bi-plus-lg text-white"></i> New item
                                        </button>
                                    </a>
                                    <button type="button" class="button btn-primary" style="padding:.3em .8em;"
                                        onclick="addItemPopup(this)">
                                        <i class="bi bi-plus-lg text-white"></i> Existing item
                                    </button>
                                </div>
                                <br>
                            @endif
                            <div class="table-wrapper p-1" style="border: none;">
                                <table id="items" class="display responsive nowrap" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            {{-- <th></th> --}}
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Expired at</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        @else
                            <div class="p-3" style="background-color:var(--hover-bg); border-radius:.6em;">
                                {{-- item preivew --}}
                                @if (strtolower($currentItem->type) == 'image' && !empty($currentItem->url))
                                    <div class="d-flex flex-column item-preview">
                                        <a href="{{ $currentItem->url }}" target="_blank">
                                            <x-pre-loader :uibLoader="['class' => 'pre-loader item-loader']" />
                                            <img class="" src="{{ $currentItem->url }}" style="width:640px;"
                                                onload="this.previousElementSibling.remove()" alt="">
                                        </a>
                                    </div>
                                @elseif(strtolower($currentItem->type) == 'video' && !empty($currentItem->url))
                                    @php
                                        $videoMeta = videoData($currentItem->url);
                                    @endphp
                                    @if ($videoMeta->source == 'youtube')
                                        <iframe src="{{ $videoMeta->embed }}"
                                            style="border-radius: .6em; width:640px; max-width:100%; aspect-ratio:16/9;"
                                            title="YouTube video player" frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen></iframe>
                                    @elseif ($videoMeta->source == 'wistia')
                                        <video style="width:640px;" src="{{ $videoMeta->embed }}"
                                            onload="this.previousElementSibling.remove()" controls></video>
                                    @else
                                        <video style="width:640px;" src="{{ $currentItem->url }}"
                                            onload="this.previousElementSibling.remove()" controls></video>
                                    @endif
                                @elseif (strtolower($currentItem->type) == 'document' && !empty($currentItem->url))
                                    <div>
                                        <a href="{{ $currentItem->url }}" class="link file-preview" target="_blank">
                                            @php
                                                $ext = explode('.', $currentItem->url);
                                            @endphp
                                            <i class="{{ $icons[end($ext)] ?? 'bi bi-file-earmark' }}"
                                                style="font-size: 2.5rem;"></i>
                                            Preview
                                        </a>
                                    </div>
                                @elseif(strtolower($currentItem->type) == 'text')
                                    {{-- text content --}}
                                    <p class="m-0" style="max-width: 65ch;">
                                        {{ $currentItem->text_content }}
                                    </p>
                                @else
                                    No preview
                                @endif
                                {{-- end preview --}}

                            </div>
                        @endif
                        <br>
                        <p class="m-0">
                            Created at:
                            {{ !empty($currentItem->creation_at) ? date(DISPLAY_DATE_FORMAT_WITH_MONTH_NAME, strtotime($currentItem->creation_at)) : '-' }}
                        </p>
                        @if ($currentItem->type == 'hardware')
                            <p class="m-0">Purchase date:
                                {{ !empty($currentItem->purchased_at) ? date(DISPLAY_DATE_FORMAT_WITH_MONTH_NAME, strtotime($currentItem->purchased_at)) : '-' }}
                            </p>
                        @endif
                        <p>Review every:
                            {{ $currentItem->review_period == 0 ? '' : $currentItem->review_period }}
                            {{ ucfirst(strtolower($currentItem->review_period_type)) }}
                            {{ $currentItem->review_period_type == 'ONCE' ? 'only' : '' }}
                        </p>
                        <div>
                            <label class="m-0"><b>Description</b></label>
                            <p style="max-width: 65ch; max-height:80ch; overflow-y:auto;">
                                {{ $currentItem->description }}
                            </p>
                        </div>
                        <div>
                            <label class="m-0 mb-1"><b>Tags</b></label>
                            <div class="d-flex flex-wrap gap-2" style="max-width: 340px;">
                                @foreach ($item->tags as $tag)
                                    <div class="tag">
                                        <i class="bi bi-tag"></i> {{ $tag->tag->name }}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <br>
                        <div>
                            <label class="m-0 mb-1"><b>Category Codes</b></label>
                            <div class="d-flex flex-wrap gap-2" style="max-width: 340px;">
                                @foreach ($item->categoryCodes as $code)
                                    <div class="tag">
                                        {{ str_pad($code->codeInfo->code, CODE_PAD, 0, STR_PAD_LEFT) }}:
                                        {{ $code->codeInfo->name }}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <br>
                        <div>
                            <label class="m-0 mb-1"><b>Unique Code</b></label>
                            <div class="d-flex flex-wrap gap-2" style="max-width: 340px;">
                                @if (!empty($item->uniqueCode))
                                    <div class="tag">
                                        **{{ str_pad($item->uniqueCode->codeInfo->code, UCODE_PAD, 0, STR_PAD_LEFT) }}** :
                                        {{ $item->uniqueCode->codeInfo->name }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="review-wrapper box-wrapper px-4">
                    <script>
                        let hideReviewWrapper = 0;
                    </script>
                    @if (Helper::permissionChecker('ITEM', [
                            'permission' => ['comment'],
                            'default_return' => false,
                            'id' => [
                                App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
                                App\Models\User::$DEP_MANAGER => $dep_id ?? '',
                                App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
                                App\Models\User::$GOVE_TEAM => $folder_id ?? '',
                                App\Models\User::$REVIEWER => $idForPermission ?? '',
                                App\Models\User::$GUEST => $idForPermission ?? '',
                            ],
                        ]))
                        @if (!empty($item->closed_at))
                        @elseif (
                            // !(!empty($currentItem->expired_at) && $currentItem->expired_at < date('Y-m-d')) &&
                            !empty($slot))
                            <form action="{{ route('org.item.review.store', compact('subdomain')) }}" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <strong>Review</strong>
                                <br>
                                <br>
                                <div class="mb-3">
                                    <label for="status">Status</label>
                                    <select name="review_for" id="status" class="form-select">
                                        <option value="no_change"
                                            {{ 'no_change' == old('review_for') ? 'selected' : '' }}>
                                            No
                                            change</option>
                                        <option value="change" {{ 'change' == old('review_for') ? 'selected' : '' }}>
                                            Change
                                            required</option>
                                        <option value="note" {{ 'note' == old('review_for') ? 'selected' : '' }}>
                                            Note
                                        </option>
                                        <option value="archive" {{ 'archive' == old('review_for') ? 'selected' : '' }}>
                                            Archive
                                        </option>
                                    </select>
                                </div>
                                @if (Helper::permissionChecker('ITEM', [
                                        'permission' => ['internal_comment'],
                                        'default_return' => false,
                                        'id' => [
                                            App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
                                            App\Models\User::$DEP_MANAGER => $dep_id ?? '',
                                            App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
                                            App\Models\User::$GOVE_TEAM => $folder_id ?? '',
                                            App\Models\User::$REVIEWER => $idForPermission ?? '',
                                            App\Models\User::$GUEST => $idForPermission ?? '',
                                        ],
                                    ]))
                                    <div class="mb-3 d-flex gap-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="type"
                                                id="typePublic" value="PUBLIC" checked>
                                            <label class="form-check-label" for="typePublic">
                                                Public
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="type"
                                                id="typeInternal" value="INTERNAL">
                                            <label class="form-check-label" for="typeInternal">
                                                Internal
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                <textarea id="review_box" name="comment" class="m-0" cols="30" rows="5" maxlength="255"
                                    placeholder="Write your review here...">{{ old('comment') }}</textarea>
                                <div class="d-flex justify-content-between" id="inputCount">
                                    <span class="text-danger">
                                        @error('comment')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                    0/255
                                </div>
                                <div id="attechment-area" class="d-flex flex-wrap" style="gap: .6em;">
                                    {{-- <div class="button d-flex align-items-center selected-item-wrapper"
                                    style="gap: .6em; width:min-content; border-radius:5rem;">
                                    <p href="#" class="d-flex m-0" style="width: min-content;">dsfasdfdsf.pdf</p>
                                    <i class="bi bi-x-lg" data-selected-file style="cursor: pointer;"></i>
                                </div> --}}
                                </div>
                                <br>
                                <input type="hidden" name="item_id" value="{{ encode($currentItem->item_id) }}">
                                <input type="hidden" name="item_history_id" value="{{ encode($currentItem->id) }}">
                                <input type="hidden" name="slot_id" value="{{ encode($slot->id ?? '') }}">
                                <div class="d-flex flex-wrap" style="max-width:max-content;gap: .6em;">
                                    <button type="submit" class="button btn-primary flex-fill">
                                        <i class='bi bi-send-fill' style="color: var(--space)"></i>
                                        Send Review</button>
                                    <label for="attachment" class="button btn-secondary flex-fill text-center"><i
                                            class="bi bi-paperclip"></i>Attachment<span id="fileCount"></span></label>
                                    <input type="file" name="attachment" id="attachment" class="d-none"
                                        onchange="selectedFile(this)">
                                </div>
                                @error('attachment')
                                    <br>
                                    <div class="alert alert-danger py-2" role="alert">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </form>
                            <br>
                            <br>
                            <br>
                        @endif
                    @else
                        <script>
                            hideReviewWrapper += 1;
                        </script>
                    @endif
                    @if (Helper::permissionChecker('ITEM', [
                            'permission' => ['comment_view'],
                            'default_return' => false,
                            'id' => [
                                App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
                                App\Models\User::$DEP_MANAGER => $dep_id ?? '',
                                App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
                                App\Models\User::$GOVE_TEAM => $folder_id ?? '',
                                App\Models\User::$REVIEWER => $idForPermission ?? '',
                                App\Models\User::$GUEST => $idForPermission ?? '',
                            ],
                        ]))
                        <ul class="tab-container">
                            <label for="tab-review">
                                <input type="radio" class="d-none" value="reviews" name="tab" checked
                                    id="tab-review">
                                <li class="tab">Reviews</li>
                            </label>
                            <label for="tab-notes" class="d-none">
                                <input type="radio" class="d-none" value="notes" name="tab" id="tab-notes">
                                <li class="tab">Notes</li>
                            </label>
                            <label for="tab-attachments">
                                <input type="radio" class="d-none" value="attachment" name="tab"
                                    id="tab-attachments">
                                <li class="tab">Attachments</li>
                            </label>
                            <div class="indicator"></div>
                        </ul>
                        <div class="content-wrapper-full p-2 p-md-3 px-md-4 d-flex flex-column conmment-bg"
                            style="gap: .6em;" id="comment-area">
                            {{-- comments --}}
                            {{-- <div class="content-wrapper-full box-wrapper comment-wrapper">
                                <b>Status: Change required</b>
                                <p class="m-0">
                                    It is a long established fact that a reader will be distracted by the readable content
                                    of
                                    a page when looking at its layout. The point of using Lorem Ipsum is that it has a
                                    more-or-less normal distribution of letters, as opposed to using 'Content here, content
                                    here', making it look like readable English. Many desktop publishing packages and web
                                    page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
                                    ipsum' will uncover many web sites still in their infancy. Various versions have evolved
                                    over the years, sometimes by accident, sometimes on purpose (injected humour and the
                                    like).
                                </p>
                                <div class="attachment-wrapper">
                                    <a href="" class="link attachment"><i
                                            class="bi bi-paperclip"></i>Preview.pdf</a>
                                </div>
                                <div class="d-flex justify-content-end align-items-center">
                                    <p class="m-0">
                                        Jaypal Sapara
                                        <i class="bi bi-dot"></i>
                                        2023-05-13
                                    </p>
                                </div>
                            </div> --}}
                        </div>
                    @else
                        <script>
                            hideReviewWrapper += 1;
                        </script>
                    @endif
                    <script>
                        if (hideReviewWrapper == 2)
                            document.querySelector(".review-wrapper").remove();
                    </script>
                </div>
            </div>

            @if (!Helper::checkRole(['REVIEWER', 'GUEST']))
                <div class="other-sidebar">
                    {{-- History --}}
                    <div class="other-wrapper box-wrapper" style="max-height: 720px; overflow-y:auto;">
                        <div class="mb-3">
                            <label for="" style="white-space: nowrap;">
                                <i class="bi bi-clock-history me-2"></i><b>History</b>
                            </label>
                        </div>
                        <div>
                            <ul class="history-container" id="history-area">
                            </ul>
                            <div id="originalClone">

                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </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-dash-circle" 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" style="white-space: balance;" data-set="trash-text">This action will
                            <b>remove</b>
                            item from this register
                        </p>
                    </div>
                    <form action="{{ route('org.item.register.remove', compact('subdomain')) }}" method="post"
                        id="trashForm">
                        @csrf
                        <input type="hidden" name="trash" id="trash-id" value="">
                        <input type="hidden" name="item_id" value="{{ encode($item->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, remove">
                            <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.item.restore.history', 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>
                        <br>
                        {{-- end --}}
                        <input type="hidden" name="restore" id="restore-id" value="">
                        <input type="hidden" name="item_id" value="{{ encode($item->id) }}">
                        <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>


    {{-- addItem popup --}}
    <!-- Modal -->
    <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 100rem">
            <div class="modal-content">
                <div class="modal-body" style="width:100rem; max-width:100%;">
                    <div class="table-wrapper p-1" style="border: none;">
                        <table id="itemsList" class="display responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Project</th>
                                    <th>Type</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <br>
                    <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto">
                        <button type="button" class="button btn-secondary flex-grow-1"
                            data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script src="{{ asset(JSHELPER) }}"></script>
    <script>
        let dt = new DataTransfer();

        function selectedFile(file) {
            if (file.files.length > 0) {
                dt = new DataTransfer();
                for (let fl of file.files) {
                    dt.items.add(fl);
                }
                file.files = dt.files;
                $(`#attechment-area`).html("");
                for (let fl of file.files) {
                    let html = `
                                <div class="button d-flex align-items-center selected-item-wrapper"
                                    style="gap: .6em; max-width:100%; border-radius:5em;">
                                    <div class="ellipsis-text" style="--long:100%; font-size:1.15rem;">${fl.name}</div>
                                    <i class="bi bi-x-lg" data-selected-file style="cursor: pointer;" onclick="removeAttatchment(this,{name:'${fl.name}'})"></i>
                                </div>`;
                    $(`#attechment-area`).append(html);
                }
            }
        }

        function removeAttatchment(el, data) {
            for (let i = 0; i < dt.items.length; i++) {
                if (data.name === dt.items[i].getAsFile().name) {
                    dt.items.remove(i);
                }
            }
            document.querySelector("#attachment").files = dt.files;
            el.closest(".selected-item-wrapper").remove();
        }
    </script>
    <script>
        $(document).ready(function() {
            @if (strtolower($currentItem->type) == 'register')
                $('#items').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: `{{ route('org.item.fetch.registered', ['subdomain' => $subdomain, 'dep_id' => $dep_id, 'project_id' => $project_id, 'folder_id' => $folder_id, 'register_id' => encode($currentItem->item_id)]) }}`,
                    language: {
                        emptyTable: `
                                <i class="bi bi-box" style="font-size: 3rem; color:var(--border-color);"></i>
                                <div>
                                    Nothing found
                                </div>`,
                        processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                    },
                    order: [
                        [0, 'desc']
                    ],
                    lengthMenu: [5, 10],
                    initComplete: function() {
                        if ("{{ Session::has('itemId') }}") {
                            if ("{{ Session::get('itemId') }}" == "none") {
                                $("#addItemBtn").click();
                            } else {
                                $(`[data-item-id="{{ Session::get('itemId') }}"]`).click();
                            }
                        }
                    },
                    columnDefs: [{
                            "width": "0px",
                            "targets": 0
                        },
                        {
                            "width": "0px",
                            "targets": 1
                        },
                    ],
                    columns: [{
                            data: "DT_RowIndex",
                            name: "id"
                        },
                        // {
                        //     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: "expired_at",
                            name: "expired_at",
                        },
                        {
                            data: "action",
                            name: "action",
                            sortable: false,
                            searchable: false
                        }
                    ],
                });

                // item list
                $('#itemsList').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: `{{ route('org.item.fetch.exist', ['subdomain' => $subdomain, 'folder_id' => $folder_id, 'project_id' => $project_id, 'dep_id' => $dep_id, 'register_id' => encode($currentItem->item_id)]) }}`,
                    language: {
                        emptyTable: `
                                <i class="bi bi-box" style="font-size: 3rem; color:var(--border-color);"></i>
                                <div>
                                    Nothing found
                                </div>`,
                        processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                    },
                    order: [
                        [0, 'desc']
                    ],
                    lengthMenu: [5],
                    initComplete: function() {
                        if ("{{ Session::has('itemId') }}") {
                            if ("{{ Session::get('itemId') }}" == "none") {
                                $("#addItemBtn").click();
                            } else {
                                $(`[data-item-id="{{ Session::get('itemId') }}"]`).click();
                            }
                        }
                    },
                    columnDefs: [{
                            "width": "0px",
                            "targets": 0
                        },
                        {
                            "width": "0px",
                            "targets": 1
                        },
                    ],
                    columns: [{
                            data: "DT_RowIndex",
                            name: "id"
                        },
                        {
                            data: "name",
                            name: "name",
                            render: function(data) {
                                let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                                return columnWrapper;
                            }
                        },
                        {
                            data: "project_name",
                            name: "project_name"
                        },
                        {
                            data: "type",
                            name: "type"
                        },
                        {
                            data: "action",
                            name: "action",
                            sortable: false,
                            searchable: false
                        }
                    ],
                });
            @endif
            @error('comment')
                $(`#review_box`).focus();
            @enderror
        });
        const addItemModal = new bootstrap.Modal($("#addItemModal"));

        function addItemPopup() {
            addItemModal.toggle();
        }
        const removeItemURL = "{{ route('org.item.register.remove', compact('subdomain')) }}";
        const trashHistoryURL = "{{ route('org.item.delete.history', compact('subdomain')) }}";
    </script>
    <script>
        // context-menu
        const Records = document.querySelectorAll(`.history-option-wrapper`);
        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"));

        $(document).on("click", ".history-option-wrapper", (e) => {
            let record = e.target.closest(".history-option-wrapper");
            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}'
                        })`
            );
            if (record.closest(".original-version") == null) {
                deleteBtn.classList.remove("d-none");
                deleteBtn.setAttribute("onclick",
                    `showTrashPopup({
                            'id':'${record.dataset?.trashedId}',
                            'name':'${record.dataset?.trashedName}',
                            'type':'${record.dataset?.trashedType}'
                        })`);
            } else {
                deleteBtn.classList.add("d-none");
            }
            // 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>
    @if (!Helper::checkRole(['REVIEWER', 'GUEST']))
        <script>
            const historyRoute =
                "{{ route('org.item.view', ['subdomain' => $subdomain, 'id' => encode($item->id), 'history_id' => '_id_']) }}";
            const lastRecordObserver = new IntersectionObserver((entry) => {
                let lastRecord = entry[0];
                if (lastRecord.isIntersecting) {
                    history(function(data) {
                        lastRecordObserver.unobserve(lastRecord.target);
                        if (data.length > 0) {
                            lastRecordObserver.observe(
                                document.querySelector(`#history-area li:last-child`)
                            );
                        }
                    });
                }
            });
            let offset = 0;

            function history(callback) {
                $.ajax({
                    type: "get",
                    url: "{{ route('org.item.fetch.history', ['subdomain' => $subdomain, 'item_id' => encode($item->id)]) }}",
                    data: {
                        offset
                    },
                    beforeSend: function() {
                        $("#history-area").append(`
                    <center id="history-loader"><x-pre-loader :uibLoader="['class'=>'pre-loader','size'=>'28px']" /></center>
                    `);
                    },
                    success: function(response) {
                        let historys = response?.item?.history;
                        $("#history-loader").remove();
                        historys.forEach((history, index) => {
                            let date = getDateTime(history.created_at, true);
                            let strDate =
                                `${date.date} ${date.monthName}, ${date.year}`;
                            let strTime = `${date.hour}:${date.min} ${date.dayType.toUpperCase()}`;
                            let currentStatus = (history.encode_id ==
                                    "{{ encode($currentItem->id) }}") ?
                                "Current version" : "";
                            if (currentStatus.trim() != "") currentStatus =
                                `<small style="color:var(--primary)">${currentStatus}</small><br>`;
                            let url = historyRoute.replace("_id_", history.encode_id);
                            let html = `<li class="history-wrapper">
                                        <a href="${url}" class="history-link">
                                            <div class="history-text-wrapper">
                                                <b>${strDate}</b>
                                                <br>
                                                ${strTime}
                                                <br>
                                                ${currentStatus}
                                                <small style="">${history.user.full_name}</small>
                                            </div>
                                        </a>
                                        <div class="history-option-wrapper" data-trashed-id = "${history.encode_id}" data-trashed-name = "${strDate} ${strTime}" data-trashed-type="history">
                                            <i class="bi bi-three-dots-vertical" style="font-size: 1.1rem;"></i>
                                        </div>
                                    </li>`;
                            $("#history-area").append(html);
                        });
                        offset += 8;
                    }
                }).always(function(result) {
                    callback(result?.item?.history);
                });
            }
            history(function(data) {
                if (data.length > 0) {
                    lastRecordObserver.observe(
                        document.querySelector(`#history-area li:last-child`)
                    );
                } else {
                    $(`#history-area`).html(`
                                        <center>
                                        <div>
                                            <i class="bi bi-clock-history not-found-icon"></i>
                                            <p>No history</p>
                                        </div>
                                        </center>`);
                }
                let originalClone = @json($originalClone);
                let date = getDateTime(originalClone.created_at, true);
                let strDate =
                    `${date.date} ${date.monthName}, ${date.year}`;
                let strTime = `${date.hour}:${date.min} ${date.dayType.toUpperCase()}`;
                let currentStatus = (originalClone.encode_id ==
                        "{{ encode($currentItem->id) }}") ?
                    "Current version" : "";
                if (currentStatus.trim() != "") currentStatus =
                    `<small style="color:var(--primary)">Original version</small><br>`;
                else
                    currentStatus =
                    `<small style="color:var(--primary)">Original version</small><br>`;
                let url = historyRoute.replace("_id_", originalClone.encode_id);
                let html = `<li class="history-wrapper original-version">
                                        <a href="${url}" class="history-link">
                                            <div class="history-text-wrapper">
                                                <b>${strDate}</b>
                                                <br>
                                                ${strTime}
                                                <br>
                                                ${currentStatus}
                                                <small style="">${originalClone.user.full_name}</small>
                                            </div>
                                        </a>
                                        <div class="history-option-wrapper" data-trashed-id = "${originalClone.encode_id}" data-trashed-name = "${strDate} ${strTime}">
                                            <i class="bi bi-three-dots-vertical" style="font-size: 1.1rem;"></i>
                                        </div>
                                    </li>`;
                $("#originalClone").html(html);

            });
        </script>
    @endif
    @if (Helper::permissionChecker('ITEM', [
            'permission' => ['comment_view'],
            'default_return' => false,
            'id' => [
                App\Models\User::$DIV_MANAGER => $org_location_id ?? '',
                App\Models\User::$DEP_MANAGER => $dep_id ?? '',
                App\Models\User::$PROJECT_MANAGER => $project_id ?? '',
                App\Models\User::$GOVE_TEAM => $folder_id ?? '',
                App\Models\User::$REVIEWER => $idForPermission ?? '',
                App\Models\User::$GUEST => $idForPermission ?? '',
            ],
        ]))
        <script>
            const reviewRoute =
                "{{ route('org.item.review.fetch', ['subdomain' => $subdomain, 'item_id' => encode($currentItem->item_id)]) }}";
            const lastReviewObserver = new IntersectionObserver((entry) => {
                let lastReview = entry[0];
                if (lastReview.isIntersecting) {
                    review(function(data) {
                        lastReviewObserver.unobserve(lastReview.target);
                        if (data.length > 0) {
                            lastReviewObserver.observe(
                                document.querySelector(`#comment-area .comment-wrapper:last-child`)
                            );
                        }
                    });
                }
            });
            let reviewOffset = 0;

            function review(callback) {
                $.ajax({
                    type: "get",
                    url: reviewRoute,
                    data: {
                        start: reviewOffset,
                        status: document.querySelector(`[name="tab"]:checked`).value,
                        permId: @json($idArray),
                        length: 4,
                    },
                    beforeSend: function() {
                        $("#comment-area").append(`
                    <center id="review-loader"><x-pre-loader :uibLoader="['class'=>'pre-loader','size'=>'28px']" /></center>
                    `);
                    },
                    success: function(response) {
                        response.data.forEach(rev => {
                            let date = getDateTime(rev.created_at, true);
                            let strDate = `${date.date} ${date.monthName}, ${date.year}`;
                            let strTime = `${date.hour}:${date.min} ${date.dayType.toUpperCase()}`;
                            let attatchmentLink = ``;
                            if (rev.attachment != null) {
                                attatchmentLink = `<div class="attachment-wrapper">
                                                    <a href="${rev.attachment}" target="_blank" class="link attachment"><i
                                                            class="bi bi-paperclip"></i>${rev.file_name}</a>
                                                </div>`;
                            }
                            let slovedButton = ``;
                            @if (!Helper::checkRole(['REVIEWER', 'GUEST']))
                                if (rev.status != "SOLVED") {
                                    slovedButton = `<span class="resolve-container non-solved-container">
                                                    <button type="button" class="resolve-button button btn-secondary border-0 p-1 px-2" data-review-id="${rev.encode_id}">
                                                        Mark as solved
                                                    </button>
                                                </span>`;
                                } else {
                                    slovedButton = `<span class="resolve-container">
                                                    <button type="button" class="resolve-button button btn-primary p-1 px-2" data-review-id="${rev.encode_id}">
                                                        <i class="bi bi-check-circle-fill text-white"></i> Solved
                                                    </button>
                                                </span>`;
                                }
                            @else
                                if (rev.review_by_me && rev.status == "SOLVED") {
                                    slovedButton = `<span class="resolve-container">
                                                    <button type="button" class="button btn-primary p-1 px-2" data-review-id="${rev.encode_id}">
                                                        <i class="bi bi-check-circle-fill text-white"></i> Solved
                                                    </button>
                                                </span>`;
                                }
                            @endif

                            let html = `
                                    <div class="content-wrapper-full box-wrapper comment-wrapper">
                                                <div class="comment-header">
                                                    <b class="${(rev.type != "") ? 'tag-label tag-label-center' :''}" style="--tag:'${rev.type}';margin-right:.6em;">Status: ${rev.review_for}</b>
                                                    ${slovedButton}
                                                </div>
                                                <p class="m-0 comment-text">
                                                    ${rev.comment || ""}
                                                </p>
                                                ${attatchmentLink}
                                                <div class="d-flex justify-content-end align-items-center">
                                                    <p class="m-0 text-end comment-info">
                                                        ${rev.review_by}
                                                            <br>
                                                        ${strDate} ${strTime}
                                                    </p>
                                                </div>
                                            </div>`;
                            $("#comment-area").append(html);
                        });
                        reviewOffset += 4;
                        $("#review-loader").remove();
                    }
                }).always(function(result) {
                    callback(result?.data);
                });
            }
            // review(function(data) {
            //     if (data.length > 0) {
            //         lastReviewObserver.observe(
            //             document.querySelector(`#comment-area .comment-wrapper:last-child`)
            //         );
            //     } else {
            //         $("#comment-area").html(`<div>
    //                             <center>
    //                             <i class="bi bi-chat-left-text not-found-icon" style="color:hsl(0,0%,70%);"></i>
    //                             <p>No reviews</p>
    //                             </center>
    //                          </div>`);
            //     }
            // });
        </script>
    @endif
    <script>
        const trashModal = new bootstrap.Modal($("#trashModal"));
        const restoreModal = new bootstrap.Modal($("#restoreModal"));
        // restore
        const restoreTitle = document.querySelector(`[data-set="restore-title"]`);
        const restoreText = document.querySelector(`[data-set="restore-text"]`);
        const restoreIds = document.querySelector(`#restore-id`);
        // delete
        const trashTitle = document.querySelector(`[data-set="trash-title"]`);
        const trashText = document.querySelector(`[data-set="trash-text"]`);
        const trashIds = document.querySelector(`#trash-id`);

        function showTrashPopup(item) {
            $("#trash-id").val(item.id);
            if (item.type == "item") {
                $("#trashForm").attr("action", removeItemURL);
                trashTitle.innerHTML = `remove <br>${item.name}`;
                trashText.innerHTML =
                    `This action will remove item from this register, but still showing in folder item list.`;
            } else {
                $("#trashForm").attr("action", trashHistoryURL);
                trashTitle.innerHTML = `delete <br>${item.name}`;
                trashText.innerHTML =
                    `This action will permanently delete item history.`;
            }
            trashModal.toggle();
        }

        function showRestorePopup(item) {
            restoreTitle.innerHTML = `restore history from <br>${item.name}`;
            restoreText.innerHTML =
                `This will permanetly delete <br>all above historys. This cannot be undone.`;
            $("#restore-id").val(item.id);
            restoreModal.toggle();
        }
    </script>
    <script>
        const tabs = document.querySelectorAll('.tab');
        const indic = document.querySelector(".indicator");
        tabs.forEach((tab, index) => {
            tab.addEventListener("click", function(e) {
                let rect = this.getBoundingClientRect();
                indic.style.width = `${rect.width/2}px`;
                indic.style.left = `${this.offsetLeft}px`;
                // get reviews
                setTimeout(() => {
                    reviewOffset = 0;
                    document.querySelector(`#comment-area`).innerHTML = "";
                    review(function(data) {
                        if (data.length > 0) {
                            lastReviewObserver.observe(
                                document.querySelector(
                                    `#comment-area .comment-wrapper:last-child`)
                            );
                        } else {
                            $("#comment-area").html(`<div style="display:flex; justify-content:center; align-items:center; height:100%; width:100%;">
                                        <center>
                                        <i class="bi bi-chat-left-text not-found-icon" style="color:hsl(0,0%,70%);"></i>
                                        <p>No reviews</p>
                                        </center>
                                     </div>`);
                        }
                    });
                }, 0);
            });
            if (index == 0) tab.click();
        });
        $("#review_box").on("input", function() {
            $("#inputCount").text(`${this.value.length}/255`);
        });

        $(document).on("click", ".resolve-button", function() {
            let resolveContainer = this.closest(".resolve-container");
            let reviewID = this.dataset.reviewId;
            $.ajax({
                type: "post",
                url: "{{ route('org.item.review.resolve.status', compact('subdomain')) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    review_id: reviewID
                },
                beforeSend: function() {
                    $(resolveContainer).removeClass("non-solved-container");
                    $(resolveContainer).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader','size'=>'22px']" />`);
                },
                success: function(response) {
                    if (response.status == 403) {
                        quickAlert("warning", "Unauthorized");
                    }
                    let status = response.resolve;
                    if (status != "SOLVED") {
                        $(resolveContainer).html(`<span class="resolve-container non-solved-container">
                                                    <button type="button" class="resolve-button button btn-secondary border-0 p-1 px-2" data-review-id="${reviewID}">
                                                        Mark as solved
                                                    </button>
                                                </span>`);
                    } else {
                        $(resolveContainer).html(`<span class="resolve-container">
                                                    <button type="button" class="resolve-button button btn-primary p-1 px-2" data-review-id="${reviewID}">
                                                        <i class="bi bi-check-circle-fill text-white"></i> Solved
                                                    </button>
                                                </span>`);
                    }
                }
            });
        });
    </script>
@endsection