@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section')

    @if (isset($registered_in) && !empty($registered_in))
        <a href="{{ route('org.item.view', ['subdomain' => $subdomain, 'id' => $registered_in]) }}" class="link">Back</a>
    @else
        @if (isset($from) && $from == 'view')
            <a href="{{ route('org.item.view', ['subdomain' => $subdomain, 'id' => encode($item->item_id)]) }}" class="link">Back</a>
        @else
            <a href="{{ route('org.folder.view', ['subdomain' => $subdomain, 'dep_id' => $dep_id, 'project_id' => $project_id, 'id' => $main_id]) }}" class="link">Back</a>
        @endif
    @endif
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(JQUERYUICSS) }}">

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

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

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

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

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

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

        .hide-this {
            display: none;
        }

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

        #previewLink:hover {
            background-color: var(--primaryHover);
        }
    </style>
@endsection
@section('content')
    <script>
        let genUID = 0;
    </script>
    @php
        $genUID = 0;
    @endphp
    {{-- content --}}
    <div class="container-fluid">
        <div class="container">
            <div class="form-wrapper-2 mx-auto box-wrapper">
                <form action="{{ route('org.item.store', compact('subdomain')) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="folder_id" value="{{ !empty($main_id) ? $main_id : '' }}">
                    <input type="hidden" name="is_update" value="{{ !empty($item) ? encode($item->item_id) : '' }}" id="is_update">
                    <input type="hidden" name="project_id" value="{{ $project_id }}">
                    <input type="hidden" name="dep_id" value="{{ $dep_id }}">
                    <input type="hidden" name="registered_in" value="{{ $registered_in }}">
                    <div class="modal-body">
                        <div class="folder-box">
                            <i class="bi bi-box-fill"></i>
                        </div>
                        <label for="" class="flex-fill px-2 mb-1 fw-bold">Item type</label>
                        <div class="px-2 mb-2 d-flex flex-wrap" style="gap:0.4em;">
                            @if ($add_type != 'register')
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="video" data-type="video" id="type_video" aria-label="itemtype" {{ isset($item->type) ? ($item->type == 'VIDEO' ? 'checked' : '') : 'checked' }}>
                                    <label for="type_video" class="button"><i class="bi bi-film me-2"></i>Video</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="image" data-type="image" id="type_image" aria-label="itemtype" {{ ($item->type ?? '') == 'IMAGE' ? 'checked' : '' }}>
                                    <label for="type_image" class="button"><i class="bi bi-image-fill me-2"></i>Image</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="document" data-type="document" id="type_document" aria-label="itemtype" {{ ($item->type ?? '') == 'DOCUMENT' ? 'checked' : '' }}>
                                    <label for="type_document" class="button"><i class="bi bi-file-earmark-medical-fill me-2"></i>Document</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="text" data-type="text" id="type_text" aria-label="itemtype" {{ ($item->type ?? '') == 'TEXT' ? 'checked' : '' }}>
                                    <label for="type_text" class="button"><i class="bi bi-fonts me-2"></i>Text</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="hardware" data-type="hardware" id="type_hardware" aria-label="itemtype" {{ ($item->type ?? '') == 'HARDWARE' ? 'checked' : '' }}>
                                    <label for="type_hardware" class="button"><i class="bi bi-motherboard-fill me-2"></i>Hardware/Asset</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="free_text" data-type="freetext" id="type_freetext" aria-label="itemtype" {{ ($item->type ?? '') == 'FREE_TEXT' ? 'checked' : '' }}>
                                    <label for="type_freetext" class="button"><i class="bi bi-cursor-text me-2"></i>Free
                                        Text
                                        Option</label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="certificate" data-type="certificate" id="type_certificate" aria-label="itemtype"
                                        {{ ($item->type ?? '') == 'CERTIFICATE' ? 'checked' : '' }}>
                                    <label for="type_certificate" class="button"><i class="bi bi-award-fill me-2"></i>Certificate</label>
                                </div>
                            @else
                                <div>
                                    <input type="radio" class="d-none" name="item_type" value="register" data-type="register" id="type_register" aria-label="itemtype" {{ ($item->type ?? '') == 'REGISTER' ? 'checked' : '' }}>
                                    <label for="type_register" class="button"><i class="bi bi-clipboard-check-fill me-2"></i>Register</label>
                                </div>
                            @endif
                        </div>
                        <center>
                            <div class="hr my-4" style="max-width:80%;"></div>
                        </center>

                        <div class="px-2 mb-2">
                            <label for="itemTitle" class="form-label fw-bold">Item Name</label>
                            <input class="form-control" name="name" id="itemTitle" type="text" placeholder="Item name" aria-label="default input example" value="{{ $item->name ?? '' }}">
                        </div>
                        @error('name')
                            <div class="alert alert-danger" data-error="input" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        <div class="px-2 mb-2">
                            <label for="itemDescription" class="form-label fw-bold">Description</label>
                            <textarea class="form-control" name="description" id="itemDescription" type="text" placeholder="Description..." aria-label="default input example">{{ trim($item->description ?? '') }}</textarea>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="itemReference" class="form-label fw-bold">ID/Reference number (<b class="text-success m-0 fw-light">optional</b>)</label>
                            <input class="form-control" name="reference_number" id="itemReference" type="text" placeholder="ID/Reference number" aria-label="default input example" value="{{ $item->reference_number ?? '' }}">
                        </div>
                        {{-- depend inputs --}}
                        <div class="px-2 mb-2" data-input-of="video,image,document">
                            <div class="selectionWrapper">
                                <div>
                                    <input type="radio" class="d-none" value="file" name="upload_type" aria-label="itemtype" checked id="upload_file">
                                    <label for="upload_file" class="button">
                                        <i class="bi bi-upload"></i>
                                    </label>
                                </div>
                                <div>
                                    <input type="radio" class="d-none" value="link" name="upload_type" aria-label="itemtype" id="upload_link">
                                    <label for="upload_link" class="button">
                                        <i class="bi bi-link-45deg"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                        @if (!empty($item->url))
                            <div class="px-2 mb-2">
                                @php
                                    $videoMeta = videoData($item->url);
                                @endphp
                                <a href="{{ $videoMeta->source == 'wistia' && strtolower($item->type ?? '') == 'video' ? $videoMeta->embed : $item->url ?? '#' }}" target="_blank" class="{{ empty($item->url) ? 'd-none' : '' }}"
                                    id="previewLink" title="">
                                    @if (strtolower($item->type ?? '') == 'document')
                                        <i class="bi bi-file-earmark-medical-fill" style="font-size: 28px;" data-preview="document"></i>
                                    @endif
                                    @if (strtolower($item->type ?? '') == 'video')
                                        <i class="bi bi-play-circle-fill" style="font-size: 28px;" data-preview="video"></i>
                                    @endif
                                    @if (strtolower($item->type ?? '') == 'image')
                                        <i class="bi bi-image-fill" style="font-size: 28px;" data-preview="image"></i>
                                    @endif
                                    <p class="m-0">Preview</p>
                                </a>
                            </div>
                        @endif

                        {{-- video --}}
                        <div class="px-2 mb-2 hide-this" data-input-of="video" data-upload-type="link">
                            <label for="itemVideoLink" class="form-label fw-bold">Embed code</label>
                            <input class="form-control" id="itemVideoLink" name="video_link" type="text" placeholder="Embed code" aria-label="default input example"
                                value="{{ isset($item->source_type) && $item->source_type == 'LINK' && $item->type == 'VIDEO' ? $item->url : '' }}">
                        </div>
                        <div class="px-2 mb-2" data-input-of="video" data-upload-type="file">
                            <label for="itemEmbed" class="form-label fw-bold">Upload video</label>
                            <input class="form-control" id="itemEmbed" name="video_file" type="file" placeholder="Embed code" aria-label="default input example">
                        </div>
                        {{-- image --}}
                        <div class="px-2 mb-2 d-none hide-this" data-input-of="image" data-upload-type="link">
                            <label for="itemImageLink" class="form-label fw-bold">Image link</label>
                            <input class="form-control" id="itemImageLink" name="image_link" type="text" placeholder="Image link" aria-label="default input example"
                                value="{{ isset($item->source_type) && $item->source_type == 'LINK' && $item->type == 'IMAGE' ? $item->url : '' }}">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="image" data-upload-type="file">
                            <label for="itemImage" class="form-label fw-bold">Upload Image</label>
                            <input class="form-control" id="itemImage" name="image_file" type="file" placeholder="Image link" aria-label="default input example">
                        </div>
                        {{-- document --}}
                        <div class="px-2 mb-2 d-none hide-this" data-input-of="document" data-upload-type="link">
                            <label for="itemDocumentLink" class="form-label fw-bold">Document link</label>
                            <input class="form-control" id="itemDocumentLink" name="document_link" type="text" placeholder="Document link" aria-label="default input example"
                                value="{{ isset($item->source_type) && $item->source_type == 'LINK' && $item->type == 'DOCUMENT' ? $item->url : '' }}">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="document" data-upload-type="file">
                            <label for="itemDocument" class="form-label fw-bold">Upload document</label>
                            <input class="form-control" id="itemDocument" name="document_file" type="file" placeholder="Document link" aria-label="default input example">
                        </div>
                        @error('document_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="document" data-upload-type="file" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        @error('image_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="image" data-upload-type="file" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        @error('video_file')
                            <div class="alert alert-danger" data-error="file" data-input-of="video" data-upload-type="file" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                        <div class="px-2 mb-2 d-none" data-input-of="text">
                            <label for="itemText" class="form-label fw-bold">Text content</label>
                            <textarea class="form-control" id="itemText" name="text_content" type="text" placeholder="Text content..." aria-label="default input example">{{ $item->text_content ?? '' }}</textarea>
                        </div>
                        <div class="px-2 mb-2" data-input-of="video,image,document,text,freetext,certificate">
                            <label for="itemCreationDate" class="form-label fw-bold">Creation date</label>
                            <input class="form-control datePicker" name="creation_at" id="itemCreationDate" autocomplete="off" type="text" placeholder="Item creation date" aria-label="default input example"
                                value="{{ isset($item->creation_at) && !empty($item->creation_at) ? date('d-m-Y', strtotime($item->creation_at)) : '' }}">
                        </div>
                        <div class="px-2 mb-2 d-none" data-input-of="hardware">
                            <label for="itemPurchase" class="form-label fw-bold">Purchase date</label>
                            <input class="form-control datePicker" id="itemPurchase" name="purchase_at" type="text" autocomplete="off" placeholder="Review Purchase" aria-label="default input example"
                                value="{{ isset($item->purchased_at) && !empty($item->purchased_at) ? date('d-m-Y', strtotime($item->purchased_at)) : '' }}">
                        </div>
                        <div class="px-2 mb-2">
                            <label for="" class="form-label fw-bold">Tags</label>
                            <select name="tags[]" id="" data-is_select2='true' multiple>
                                @foreach ($tags as $tag)
                                    <option value="{{ $tag->id }}" @selected(in_array($tag->id, $selectedTags))>{{ $tag->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="" class="form-label fw-bold">Category Codes</label>
                            <select name="category_codes[]" id="" data-is_select2='true' multiple>
                                @foreach ($categoryCodes as $code)
                                    <option value="{{ $code->code }}" @selected(in_array($code->code, $selectedCategoryCodes))>{{ str_pad($code->code, CODE_PAD, 0, STR_PAD_LEFT) }}: {{ $code->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="px-2 mb-2">
                            <label for="" class="form-label fw-bold">Unique Codes</label>
                            <select name="unique_code" id="" data-is_select2='true'>
                                <option value="">Select Code</option>
                                @foreach ($uniqueCodes as $code)
                                    <option value="{{ $code->code }}" @selected($code->code == $selectedUniqueCode)>
                                        **{{ str_pad($code->code, UCODE_PAD, 0, STR_PAD_LEFT) }}**
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        {{-- end --}}
                        <div class="px-2 mb-2">
                            <label for="itemPeriod" class="form-label fw-bold">Review period</label>
                            <div class="d-flex gap-2">
                                <input class="form-control {{ isset($item->review_period_type) && $item->review_period_type == 'ONCE' ? 'd-none' : '' }}" id="itemPeriod" type="number" name="review_period" placeholder="Review period"
                                    aria-label="default input example" value="{{ $item->review_period ?? '' }}">
                                <select class="form-select d-flex" aria-label="Default select example" name="review_period_type" id="itemPeriodType">
                                    <option value="DAYS" {{ isset($item->review_period_type) ? ($item->review_period_type == 'DAYS' ? 'selected' : '') : 'selected' }}>
                                        Days</option>
                                    <option value="WEEKS" {{ isset($item->review_period_type) ? ($item->review_period_type == 'WEEKS' ? 'selected' : '') : '' }}>
                                        Weeks
                                    </option>
                                    <option value="MONTHS" {{ isset($item->review_period_type) ? ($item->review_period_type == 'MONTHS' ? 'selected' : '') : '' }}>
                                        Months
                                    </option>
                                    <option value="YEARS" {{ isset($item->review_period_type) ? ($item->review_period_type == 'YEARS' ? 'selected' : '') : '' }}>
                                        Years
                                    </option>
                                    <option value="ONCE" {{ isset($item->review_period_type) ? ($item->review_period_type == 'ONCE' ? 'selected' : '') : '' }}>
                                        Once only
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="px-2 mb-2" data-wrapper="notify">
                            <label for="itemReminder" class="form-label fw-bold">Notification</label>
                            @if (count($notifyRef) < 1 || $notifyRef->where('type', 'BEFORE')->count() < 1)
                                <div class="d-flex gap-2 mb-3" data-section="reminderInput">
                                    <input type="hidden" data-type="id" name="notification_before[0][id]" value="">
                                    <select class="form-select d-flex" aria-label="Default select example" id="itemReminder" name="notification_before[0][type]" data-type="select"
                                        onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                        <option value="1-months">1 month before</option>
                                        <option value="1-weeks">1 week before</option>
                                        <option value="1-days" selected>1 day before</option>
                                        <option value="custom">Custom date</option>
                                    </select>
                                    <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none" name="notification_before[0][date]" data-type="date">
                                    <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="addReminder(this,'before')" style="cursor: pointer;">
                                        <i class="bi bi-plus-circle-fill fs-3"></i>
                                    </div>
                                </div>
                            @endif
                            <div class="reminder-area">
                                @if (count($notifyRef) > 0)
                                    @php
                                        $beforeSwitch = false;
                                    @endphp
                                    @foreach ($notifyRef->where('type', 'BEFORE') as $key => $val)
                                        @php
                                            $genUID += 1;
                                        @endphp
                                        <div class="d-flex gap-2 mb-3" data-section="reminderInput" id="reminder_{{ $genUID }}">
                                            <input type="hidden" data-type="id" name="notification_before[{{ $genUID }}][id]" value="{{ encode($val->id) }}">
                                            <select class="form-select d-flex" aria-label="Default select example" id="itemReminder" name="notification_before[{{ $genUID }}][type]" data-type="select"
                                                onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                                <option value="1-months" {{ strtolower($val->num . '-' . $val->num_type) == '1-months' ? 'selected' : '' }}>
                                                    1 month before</option>
                                                <option value="1-weeks" {{ strtolower($val->num . '-' . $val->num_type) == '1-weeks' ? 'selected' : '' }}>
                                                    1 week before</option>
                                                <option value="1-days" {{ strtolower($val->num . '-' . $val->num_type) == '1-days' ? 'selected' : '' }}>
                                                    1 day before</option>
                                                <option value="custom" {{ !empty($val->notify_at) ? 'selected' : '' }}>
                                                    Custom date</option>
                                            </select>
                                            <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none" name="notification_before[{{ $genUID }}][date]" data-type="date"
                                                value="{{ !empty($val->notify_at) ? date('d-m-Y', strtotime($val->notify_at)) : '' }}">
                                            @if (!$beforeSwitch)
                                                @php
                                                    $beforeSwitch = true;
                                                @endphp
                                                <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="addReminder(this,'before')" style="cursor: pointer;">
                                                    <i class="bi bi-plus-circle-fill fs-3"></i>
                                                </div>
                                            @else
                                                <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="removeReminder({{ $genUID }},this)" data-notify-id="{{ $val->id ?? '' }}"
                                                    style="cursor: pointer;">
                                                    <i class="bi bi-dash-circle fs-3"></i>
                                                </div>
                                            @endif
                                        </div>
                                        @if (!empty($val->notify_at))
                                            <script>
                                                setTimeout(() => {
                                                    document.querySelector(`[name="notification_before[{{ $genUID }}][type]"]`).dispatchEvent(
                                                        new Event("change"));
                                                }, 0);
                                            </script>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="px-2 mb-2" data-wrapper="notify">
                            <label for="itemReminder" class="form-label fw-bold">After due date</label>
                            {{-- <div class="d-flex gap-2 mb-3" data-section="reminderInput">
                                <input type="hidden" data-type="id" name="notification_after[0][id]" value="">
                                <select class="form-select d-flex" aria-label="Default select example" id="itemReminder"
                                    name="notification_after[0][type]" data-type="select"
                                    onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                    <option value="1-months">1 month after</option>
                                    <option value="1-weeks">1 week after</option>
                                    <option value="1-days" selected>1 day after</option>
                                    <option value="custom">Custom date</option>
                                </select>
                                <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none"
                                    name="notification_after[0][date]" data-type="date">
                                <div class="reminder-icon-box d-flex align-items-center justify-content-center"
                                    onclick="addReminder(this,'after')" style="cursor: pointer;">
                                    <i class="bi bi-plus-circle-fill fs-3"></i>
                                </div>
                            </div>
                            <div class="reminder-area">

                            </div> --}}

                            @if (count($notifyRef) < 1 || $notifyRef->where('type', 'AFTER')->count() < 1)
                                <div class="d-flex gap-2 mb-3" data-section="reminderInput">
                                    <input type="hidden" data-type="id" name="notification_after[0][id]" value="">
                                    <select class="form-select d-flex" aria-label="Default select example" id="itemReminder" name="notification_after[0][type]" data-type="select"
                                        onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                        <option value="1-months">1 month after</option>
                                        <option value="1-weeks">1 week after</option>
                                        <option value="1-days" selected>1 day after</option>
                                        <option value="custom">Custom date</option>
                                    </select>
                                    <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none" name="notification_after[0][date]" data-type="date">
                                    <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="addReminder(this,'after')" style="cursor: pointer;">
                                        <i class="bi bi-plus-circle-fill fs-3"></i>
                                    </div>
                                </div>
                            @endif
                            <div class="reminder-area">
                                @if (count($notifyRef) > 0)
                                    @php
                                        $afterSwitch = false;
                                    @endphp
                                    @foreach ($notifyRef->where('type', 'AFTER') as $key => $val)
                                        @php
                                            $genUID += 1;
                                        @endphp
                                        <div class="d-flex gap-2 mb-3" data-section="reminderInput" id="reminder_{{ $genUID }}">
                                            <input type="hidden" data-type="id" name="notification_after[{{ $genUID }}][id]" value="{{ encode($val->id) }}">
                                            <select class="form-select d-flex" aria-label="Default select example" id="itemReminder" name="notification_after[{{ $genUID }}][type]" data-type="select"
                                                onchange="(this.value == 'custom') ? this.nextElementSibling.classList.remove('d-none') : this.nextElementSibling.classList.add('d-none') ">
                                                <option value="1-months" {{ strtolower($val->num . '-' . $val->num_type) == '1-months' ? 'selected' : '' }}>
                                                    1 month after</option>
                                                <option value="1-weeks" {{ strtolower($val->num . '-' . $val->num_type) == '1-weeks' ? 'selected' : '' }}>
                                                    1 week after</option>
                                                <option value="1-days" {{ strtolower($val->num . '-' . $val->num_type) == '1-days' ? 'selected' : '' }}>
                                                    1 day after</option>
                                                <option value="custom" {{ !empty($val->notify_at) ? 'selected' : '' }}>
                                                    Custom date</option>
                                            </select>
                                            <input type="text" placeholder="DD-MM-YYYY" class="form-control customDate d-none" name="notification_after[{{ $genUID }}][date]" data-type="date"
                                                value="{{ !empty($val->notify_at) ? date('d-m-Y', strtotime($val->notify_at)) : '' }}">
                                            @if (!$afterSwitch)
                                                @php
                                                    $afterSwitch = true;
                                                @endphp
                                                <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="addReminder(this,'after')" style="cursor: pointer;">
                                                    <i class="bi bi-plus-circle-fill fs-3"></i>
                                                </div>
                                            @else
                                                <div class="reminder-icon-box d-flex align-items-center justify-content-center" onclick="removeReminder({{ $genUID }},this)" data-notify-id="{{ $val->id ?? '' }}"
                                                    style="cursor: pointer;">
                                                    <i class="bi bi-dash-circle fs-3"></i>
                                                </div>
                                            @endif
                                        </div>
                                        @if (!empty($val->notify_at))
                                            <script>
                                                setTimeout(() => {
                                                    document.querySelector(`[name="notification_after[{{ $genUID }}][type]"]`).dispatchEvent(
                                                        new Event("change"));
                                                }, 0);
                                            </script>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="px-2 mb-2" data-input-of="all">
                            <label for="itemEndDate" class="form-label fw-bold">End date (<b class="text-success m-0 fw-light">optional</b>)
                                <i class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="If you do not enter a date, then the item will never expire"></i>
                            </label>
                            <input class="form-control datePicker" name="expired_at" id="itemEndDate" type="text" autocomplete="off" placeholder="Review end date" aria-label="default input example"
                                value="{{ isset($item->expired_at) && !empty($item->expired_at) ? date('d-m-Y', strtotime($item->expired_at)) : '' }}">
                        </div>
                        @error('expired_at')
                            <div class="alert alert-danger" data-error="input" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="p-2 pt-3 d-flex flex-wrap justify-content-center" style="gap:.4em;">
                        <input type="submit" id="itemSubmitbtn" value="{{ $btn ?? 'Add' }} {{ $add_type == 'register' ? 'register' : 'item' }}" class="button btn-primary">
                        {{-- <button type="reset" class="button flex-fill" data-bs-dismiss="modal">Cancel</button> --}}
                    </div>
                </form>
            </div>
            <br>
            <br>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JQUERYUI) }}"></script>
    {{-- <script src="{{ asset(SELECTBOXJS) }}"></script> --}}
    <script src="{{ asset(JSHELPER) }}"></script>
    <script>
        genUID = parseInt("{{ $genUID }}");
        // add item
        $(document).ready(function() {
            $(".datePicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd-mm-yy",
                beforeShow: function(input, inst) {
                    // setDatePickerPosition(input, inst);
                },
                onSelect: function() {
                    $(this).focus();
                    $(this).blur();
                }
            });
            // dynamic assign datepicker
            $('body').on("focus", ".customDate", function(e) {
                $(this).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd-mm-yy",
                    beforeShow: function(input, inst) {
                        // setDatePickerPosition(input, inst);
                    },
                    onSelect: function() {
                        $(this).focus();
                        $(this).blur();
                    }
                });
            });
            $(`#type_register`).click();

            // select2
            $(`[data-is_select2='true']`).select2();
        });

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

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

        itemTypes.forEach(item => {
            item.addEventListener("change", e => {
                inputOf.forEach(input => {
                    if (input.dataset.inputOf == "all") return input.classList.remove("d-none");
                    if (!input.dataset.inputOf.split(",").includes(item.dataset.type))
                        input.classList.add("d-none");
                    else input.classList.remove("d-none");
                });
            });
        });

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

        @if (isset($item->type) && !empty($item->type))
            itemTypes.forEach(itemType => {
                let event = new Event("change");
                itemType.checked = itemType.value == "{{ strtolower($item->type ?? '') }}";
                if (!itemType.checked) itemType.parentElement.classList.add("d-none");
                else itemType.dispatchEvent(event),
                    itemType.parentElement.classList.remove("d-none");
            });
        @endif

        @if (isset($item->source_type))
            $(`input[value="{{ strtolower($item->source_type) }}"]`).prop("checked", true).trigger("change");
        @endif

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

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

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

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

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

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

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

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

        function removeReminder(id, e) {
            if (e?.dataset?.notifyId != undefined) {
                document.querySelector(`[data-wrapper='notify']`).insertAdjacentHTML("afterbegin",
                    `<input type="hidden" name="notify_remove[]" value="${e?.dataset?.notifyId}" >`);
            }
            setTimeout(() => {
                document.querySelector(`#reminder_${id}`).remove();
            }, 0);
        }
        document.addEventListener("wheel", function(e) {
            if (this.activeElement.type === "number") {
                this.activeElement.blur();
            }
        });

        // once select
        $(`#itemPeriodType`).on("change", function() {
            if (this.value == 'ONCE') {
                $(`#itemPeriod`).addClass("d-none");
            } else {
                $(`#itemPeriod`).removeClass("d-none");
            }
        });
    </script>
@endsection