@foreach ($items as $itemIndex => $item)
    @php
        $completed = $item->status == 'completed' && !$item->complete_temporarily ? true : false;
        $settings = unserialize($item->settings);

    @endphp

    <div id="checklist-{{ $item->id }}" class="w-full h-auto rounded-lg {{ $item->completable ? 'bg-custom-green-50' : 'bg-custom-grey-50' }} border border-custom-grey-200 px-2 py-1 checklist-item-parent">
        <div class="flex items-center justify-between gap-2">
            <div class="flex items-center">
                <input class="checklist hidden" id="checklist-{{ $item->id }}" type="radio"
                    {{ is_null($item->completable) ? 'checked' : '' }} {{ $completed ? 'disabled' : '' }}
                    name="items[{{ $item->id }}][completable]" data-id="{{ $item->id }}"
                    data-task_id="{{ $checklist->id }}" value="" />
                <label for="checklist-{{ $item->id }}"
                    class="text-lg-regular text-custom-grey-600 mb-0 checklist-item">{!! nl2br(e($item->title)) !!}</label>
            </div>

            <div class="flex items-center justify-between gap-1">
                <div class="flex items-center justify-start gap-1">
                    @if (isset($settings['title_yes']) && $settings['title_yes'] != '')
                        <label
                            class="inline-flex btn-secondary-sm cursor-pointer {{ $completed ? 'completed' : '' }} {{ $item->completable == 1 ? 'bg-custom-orange-400 text-base-white hover:bg-custom-orange-400' : '' }} mb-0">
                            <input class="checklist hidden" type="radio"
                                {{ $item->completable == 1 ? 'checked' : '' }}
                                {{ $completed ? 'disabled' : '' }} name="items[{{ $item->id }}][completable]"
                                data-id="{{ $item->id }}" data-task_id="{{ $checklist->id }}"
                                data-reason="{{ isset($settings['reason_yes']) && $settings['reason_yes'] ? 1 : 0 }}"
                                value="1" />
                            {{ strtolower($settings['title_yes']) == 'yes' ? __('forms.lbl_yes') : $settings['title_yes'] }}
                        </label>
                    @endif

                    @if (isset($settings['title_no']) && $settings['title_no'] != '')
                        <label
                            class="inline-flex btn-secondary-sm cursor-pointer {{ $completed ? 'completed' : '' }} {{ !is_null($item->completable) && !$item->completable ? 'bg-custom-orange-400 text-base-white hover:bg-custom-orange-400' : '' }}  mb-0">
                            <input class="checklist hidden" type="radio"
                                {{ !is_null($item->completable) && !$item->completable ? 'checked' : '' }}
                                {{ $completed ? 'disabled' : '' }} name="items[{{ $item->id }}][completable]"
                                data-id="{{ $item->id }}" data-task_id="{{ $checklist->id }}"
                                data-reason="{{ isset($settings['reason_no']) && $settings['reason_no'] ? 1 : 0 }}"
                                value="0" />
                            {{ strtolower($settings['title_no']) == 'no' ? __('forms.lbl_no') : $settings['title_no'] }}
                        </label>
                    @endif

                    @if (isset($settings['title_irrelavent']) && $settings['title_irrelavent'] != '')
                        <label
                            class="inline-flex btn-secondary-sm cursor-pointer {{ $item->completable == 2 ? 'bg-custom-orange-400 text-base-white hover:bg-custom-orange-400' : '' }} mb-0">
                            <input class="checklist hidden" type="radio"
                                {{ $item->completable == 2 ? 'checked' : '' }}
                                {{ $completed ? 'disabled' : '' }} name="items[{{ $item->id }}][completable]"
                                data-id="{{ $item->id }}" data-task_id="{{ $checklist->id }}"
                                data-reason="{{ isset($settings['reason_irrelavent']) && $settings['reason_irrelavent'] ? 1 : 0 }}"
                                value="2" />
                            {{ strtolower($settings['title_irrelavent']) == 'n.v.t' ? __('forms.lbl_irrelevant') : $settings['title_irrelavent'] }}
                        </label>
                    @endif
                </div>
                <div class="flex items-center justify-end gap-1">

                    <a data-id="{{ $item->id }}" class="toggle-comment-box leading-none" href='javascript:;'>

                        <i class="mdi mdi-wechat icon-md text-muted"></i>

                    </a>
                    <a data-id="{{ $item->id }}" class="toggle-attachment-box leading-none" href='javascript:;'>

                        <i class="mdi mdi-paperclip icon-md text-muted"></i>

                    </a>

                    @if ($item->completedby)
                        @if (request()->user()->can('view', $item->completedby->id))
                            <a data-toggle='tooltip' data-placement='top' title='{{ $item->completedby->name }}'
                                href='{{ route('users.profile.show', $item->completedby->id) }}'>

                                <img src='{{ getMediaUrl($item->completedby, 'photograph') }}'
                                    class='w-6 h-6 rounded-full'>

                            </a>
                        @else
                            <img src='{{ getMediaUrl($item->completedby, 'photograph') }}'
                                class='w-6 h-6 rounded-full'>
                        @endif
                    @endif
                </div>

            </div>
        </div>

        <div class="flex flex-col gap-2">

            <div class="flex flex-col gap-2 reason-box mt-2 {{ isReasonAllowed($settings, $item) ? '' : 'hidden' }}"
                id="reason-box-{{ $item->id }}">
                <textarea data-id="{{ $item->id }}" name="items[{{ $item->id }}][reason]"
                    placeholder="{{ __('forms.lbl_write_your_reason_here') }}" rows="2" class="w-full form-input"
                    {{ $completed || !isReasonAllowed($settings, $item) ? 'disabled' : '' }} required>{{ !is_null($item->reason) && $item->reason != '' ? $item->reason : '' }}</textarea>
            </div>

            @include('comments.index', ['item' => $item, 'joinDiscussion' => $joinDiscussion])

            <div class="attachment-box hidden" id="attachment-box-{{ $item->id }}">
                <div class="flex flex-col gap-2 mt-2" >
                    @php $assets = $item->getMedia('files');@endphp
                    @if ($assets->count() > 0)
                    <div class="faq-accordion-item border border-custom-grey-200 bg-base-white">
                        <div class="my-4 no-print">
                            <div class="flex flex-row flex-wrap gap-3 no-scrollbar light-gallery lightGallery readers">
                                @foreach ($assets as $asset)
                                    <div class="flex justify-center flex-col items-center">
                                        <div class='flex justify-center items-center h-[80px] w-[121.75px] px-[36.87px] py-4 bg-custom-blue-25 rounded-lg reader'>
                                            {!! get_formatted_asset($asset, true) !!}
                                        </div>
            
                                        <a class="mt-4" href="{{ route('media.download', $asset->id) }}">
                                            <x-svg-icon icon="icon-download" />
                                        </a>
                                    </div>
            
                                @endforeach
            
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="file-upload-wrapper flex flex-row gap-2">
                        <div id="fileuploader-{{ $item->id }}"
                            data-category="{{$itemIndex}}"
                            data-types="jpg,jpeg,png,gif,pdf,docx,ppt,pptx,doc,xlsx,xls,mp4,mpeg,m4p,m4v,mov,avi"
                            data-accepted="image/png,image/jpg,image/jpeg,image/gif,.doc,.docx,video/*,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf"
                            data-assets="" class="fileuploader">
                            {{ trans('onboarding.upload_button') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach