@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" disabled
                name="items[{{ $item->id }}][status]" 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' : '' }} disabled
                            name="items[{{ $item->id }}][status]" 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' : '' }} disabled
                            name="items[{{ $item->id }}][status]" 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' : '' }} disabled
                            name="items[{{ $item->id }}][status]" 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">
                @if ($joinDiscussion)
                    <a data-id="{{ $item->id }}" class="toggle-comment-box leading-none" href='javascript:;'>

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

                    </a>
                @endif

                @if( $user->can('delete',  Checklist::class) )
                    <button type="button" class="btn-delete"
                        data-uri="{{(isset($item) && isset($item->id)? url('settings/checklists/'.$checklist->id.'/items/'.$item->id) : '')}}"
                        data-id="{{$item->id}}"
                        data-future="{{ $checklist->repeat }}"
                        data-target-parent="#checklist-{{ $item->id }}">
                        <x-svg-icon icon="icon-delete" />
                    </button>
                @endif

                @if ($completed)
                    @if ($supervisors->contains($user->id))
                        @if ($item->approved)
                            <button type="button" data-id="{{ $item->id }}" disabled>
                                <x-svg-icon class="text-custom-green-500" width="24" height="24"
                                    icon="icon-check" />
                            </button>
                        @else
                            <button type="button" data-id="{{ $item->id }}"
                                data-checklist-id="{{ $checklist->id }}" class="btn-checklist-approved">

                                <x-svg-icon class="text-custom-blue-500" width="24" height="24"
                                    icon="icon-check" />

                            </button>
                        @endif
                    @endif
                @endif

                @if ($item->completedby)
                    @if (request()->user()->can('view', $item->completedby->id))
                        <a data-toggle='tooltip' data-placement='top' title='{{ $item->completedby->display_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>

</div>