{{-- wrapperCol --}}
<div class="col-6 col-xl-6" key='single-task-{{ $task->id }}'>
    <form class="overview--card case-version mb-5 position-relative" wire:submit='update'>


        {{-- empty --}}
        <div class="d-flex align-items-center justify-content-center mb-3">
        </div>






        {{-- row --}}
        <div class="row">






            {{-- createdBy --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Created By')}}</label>
                <input class="form-control form--input readonly fs-12 mb-4" type="text"
                    value="{{ $task?->creator?->{__('name')} }}" readonly="" />
            </div>






            {{-- --------------------------- --}}
            {{-- --------------------------- --}}






            {{-- status --}}
            <div class="col-4 mb-4 position-relative">






                {{-- 1: pending --}}
                @if ($task->status == 'Pending')


                <div class="form-check task--checkbox fs-14">
                    <input class="form-check-input mx-0 me-2" id="formCheck-{{ $task->id }}" type="checkbox"
                        wire:model.live='instance.status' />
                    <label class="form-check-label pointer" for="formCheck-{{ $task->id }}">{{__('Processing')}}</label>
                </div>







                {{-- 2: completed --}}
                @else


                <div class="form-check task--checkbox fs-14 success no-events">
                    <input class="form-check-input mx-0 me-2" id="formCheck-{{ $task->id }}" type="checkbox"
                        checked="" />
                    <label class="form-check-label" for="formCheck-{{ $task->id }}">{{__('Completed')}}</label>
                </div>



                @endif
                {{-- end if --}}




            </div>
            {{-- endCol --}}








            {{-- ---------------------------------- --}}
            {{-- ---------------------------------- --}}







            {{-- assignedTo --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Assigned To')}}</label>
                <input class="form-control form--input readonly fs-12 mb-4" type="text"
                    value="{{ $task->taskHandler?->{__('name')} }}" readonly="" />
            </div>







            {{-- assignDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Assign Date')}}</label>
                <div class="input--icon ">
                    <svg class="bi bi-calendar4-week" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16">
                        <path
                            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z">
                        </path>
                        <path
                            d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z">
                        </path>
                    </svg>
                    <input class="form-control form--input mb-4 input--bg readonly fs-12" type="date"
                        value="{{ $task->assignDate }}" readonly="" />
                </div>
            </div>







            {{-- executionDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Execution Date')}}</label>
                <div class="input--icon ">
                    <svg class="bi bi-calendar4-week" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16">
                        <path
                            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z">
                        </path>
                        <path
                            d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z">
                        </path>
                    </svg>
                    <input class="form-control form--input mb-4 input--bg readonly fs-12" type="date"
                        value="{{ $task->executionDate }}" readonly="" />
                </div>
            </div>





            {{-- -------------------------------- --}}
            {{-- -------------------------------- --}}







            {{-- completionDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Completion Date')}}</label>
                <div class="input--icon ">
                    <svg class="bi bi-calendar4-week" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16">
                        <path
                            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z">
                        </path>
                        <path
                            d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z">
                        </path>
                    </svg>
                    <input class="form-control form--input mb-4 input--bg readonly fs-12" type="date"
                        value="{{ $task->completionDate }}"
                        style="background-color: var(--color-scheme-1); color: white;" readonly="" />
                </div>
            </div>








            {{-- -------------------------------- --}}
            {{-- -------------------------------- --}}







            {{-- section --}}
            <div class="col-12 mt-3 mb-4">
                <div class="row row--section extra-padding mx-0">


                    {{-- sectionTitle --}}
                    <div class="col-12">
                        <h6 class='row--section-title small'>{{ __('Task Description') }}</h6>
                    </div>




                    {{-- information --}}
                    <div class="col-12">
                        <input class="form-control form--input mb-3" type="text" wire:model='instance.informationAr'
                            required />
                    </div>


                    <div class="col-12">
                        <input class="form-control form--input mb-3" type="text" wire:model='instance.information'
                            required />
                    </div>




                </div>
            </div>
            {{-- endSection --}}








        </div>
        {{-- endWrapper --}}











        {{-- -------------------------------- --}}
        {{-- -------------------------------- --}}








        {{-- actionButtons --}}
        <div class="d-flex align-items-center justify-content-center mb-1 position-relative">




            {{-- spinner --}}
            <span class="spinner-border spinner-border-sm text-success spinner--float-right" role="status" wire:loading
                wire:target='update, remove'></span>




            {{-- 1: update --}}
            <button class="btn btn--scheme btn--scheme-3 fs-12 px-1 mx-1 scale--3 px-4" type="submit"
                wire:loading.attr='disabled' wire:target='update, remove'>
                <svg class="bi bi-save fs-6 me-2" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z">
                    </path>
                </svg>{{__('Update')}}
            </button>







            {{-- 2: edit --}}
            <button class="btn btn--scheme btn--scheme-theme fs-12 px-1 mx-1 scale--3 px-3" data-bs-target="#edit-task"
                data-bs-toggle="modal" type="button" wire:click='edit({{ $task->id }})' wire:loading.attr='disabled'
                wire:target='update, remove'>
                <svg class="bi bi-pencil fs-6 me-2" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z">
                    </path>
                </svg>{{__('Edit')}}
            </button>







            {{-- 3: remove --}}
            <button class="btn btn--scheme btn--remove fs-12 px-1 mx-1 scale--3 px-4" type="button"
                wire:loading.attr='disabled' wire:target='update, remove' wire:click='remove({{ $task->id }})'>
                <svg class="bi bi-trash fs-6 me-2" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z">
                    </path>
                    <path fill-rule="evenodd"
                        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z">
                    </path>
                </svg>{{__('Remove')}}
            </button>



        </div>
    </form>
</div>
{{-- endCol --}}