{{-- wrapper --}}


<div class="col-6 col-xl-6">
    <form wire:submit='update' class="overview--card case-version mb-5 position-relative">







        {{-- 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" readonly=""
                    value="{{ $task?->creator?->{__('name')} }}" />
            </div>








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




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



                <div class="form-check task--checkbox fs-14">
                    <input wire:model='instance.status' class="form-check-input mx-0 me-2" type="checkbox"
                        id="formCheck-{{ $task->id }}" />
                    <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" type="checkbox" id="formCheck-{{ $task->id }}"
                        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" readonly=""
                    value="{{ $task?->taskHandler?->{__('name')} }}" />
            </div>






            {{-- executionDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Execution Date')}}</label>
                <div class="input--icon ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                        viewBox="0 0 16 16" class="bi bi-calendar4-week">
                        <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" dir='ltr' type="text"
                        value="{{ $task?->executionDate ? date('d / m / Y', strtotime($task?->executionDate)) : '' }}"
                        readonly="" />
                </div>
            </div>








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





            {{-- DueDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Due Date')}}</label>
                <div class="input--icon ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                        viewBox="0 0 16 16" class="bi bi-calendar4-week">
                        <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" dir='ltr' type="text"
                        value="{{ $task?->dueDate ? date('d / m / Y', strtotime($task?->dueDate)) : '' }}"
                        readonly="" />
                </div>
            </div>







            {{-- completionDate --}}
            <div class="col-4">
                <label class="form-label form--label fs-12">{{__('Completion Date')}}</label>
                <div class="input--icon ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                        viewBox="0 0 16 16" class="bi bi-calendar4-week">
                        <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" dir='ltr' type="text"
                        value="{{ $task?->completionDate ? date('d / m / Y', strtotime($task?->completionDate)) : '' }}"
                        readonly="" style="background-color: var(--color-scheme-1); color: white;" />
                </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>


                    <div class="col-12">
                        <input wire:model='instance.informationAr' required class="form-control form--input mb-3"
                            type="text" placeholder="{{ __('Task Description') }}" />
                    </div>

                    <div class="col-12">
                        <input wire:model='instance.information' required class="form-control form--input mb-3"
                            type="text" placeholder="{{ __('Task Description in English') }}" />
                    </div>



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







        </div>
        {{-- endWrap --}}










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









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



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







            {{-- 1: update --}}
            <button wire:loading.attr='disabled' wire:target='update, remove'
                class="btn btn--scheme btn--scheme-3 fs-12 px-1 mx-1 scale--3 px-4" type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"
                    class="bi bi-save fs-6 me-2">
                    <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 wire:click='edit({{ $task->id }})' wire:loading.attr='disabled' wire:target='update, remove'
                class="btn btn--scheme btn--scheme-theme fs-12 px-1 mx-1 scale--3 px-3" type="button"
                data-bs-target="#edit-task" data-bs-toggle="modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"
                    class="bi bi-pencil fs-6 me-2">
                    <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 wire:loading.attr='disabled' wire:target='update, remove' wire:click='remove({{ $task->id }})'
                class="btn btn--scheme btn--remove fs-12 px-1 mx-1 scale--3 px-4" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"
                    class="bi bi-trash fs-6 me-2">
                    <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>
        {{-- endCol --}}








    </form>
</div>

{{-- endWrapper --}}