@php
$editTaskPermission = user()->permission('edit_tasks');
$sendReminderPermission = user()->permission('send_reminder');
$changeStatusPermission = user()->permission('change_status');
$viewProjectPermission = user()->permission('view_projects');

@endphp
<div id="task-detail-section">

    <h3 class="heading-h1 mb-3">{{ $task->heading }}</h3>
    <div class="row">
        <div class="col-sm-9">
            <div class="card bg-white border-0 b-shadow-4">
                <div class="card-header bg-white  border-bottom-grey text-capitalize justify-content-between p-20">
                    <div class="row">
                        <div class="col-lg-8 col-10">
                            @if ($changeStatusPermission == 'all'
                            || ($changeStatusPermission == 'added' && $task->added_by == user()->id)
                            || ($changeStatusPermission == 'owned' && in_array(user()->id, $taskUsers))
                            || ($changeStatusPermission == 'both' && (in_array(user()->id, $taskUsers) || $task->added_by == user()->id))
                            || ($task->project && $task->project->project_admin == user()->id)
                            )
                                @if ($task->boardColumn->slug != 'completed')
                                    <x-forms.button-primary icon="check" data-status="completed"
                                        class="change-task-status mr-2 mb-2 mb-lg-0 mb-md-0">
                                        @lang('modules.tasks.markComplete')
                                    </x-forms.button-primary>
                                @else
                                    <x-forms.button-secondary icon="times" data-status="incomplete"
                                        class="change-task-status mr-3">
                                        @lang('modules.tasks.markIncomplete')
                                    </x-forms.button-secondary>
                                @endif
                            @endif

                            @if ($task->boardColumn->slug != 'completed' && !is_null($task->is_task_user) && in_array('timelogs', user_modules()))
                                @if (is_null($task->userActiveTimer))
                                    <x-forms.button-secondary id="start-task-timer" icon="play">
                                        @lang('modules.timeLogs.startTimer')
                                    </x-forms.button-secondary>
                                @elseif (!is_null($task->userActiveTimer))

                                    <span class="border p-2 rounded mr-2 bg-light"><i class="fa fa-clock mr-1"></i><span id="active-task-timer">{{ $task->userActiveTimer->timer }}</span></span>

                                    @if (is_null($task->userActiveTimer->activeBreak))
                                        <x-forms.button-secondary icon="pause-circle" data-time-id="{{ $task->userActiveTimer->id }}" id="pause-timer-btn" class="mr-2" data-url="{{ url()->current() }}">@lang('modules.timeLogs.pauseTimer')</x-forms.button-secondary>

                                        <x-forms.button-secondary data-time-id="{{ $task->userActiveTimer->id }}"
                                            id="stop-task-timer" icon="stop-circle" data-url="{{ url()->current() }}">
                                            @lang('modules.timeLogs.stopTimer')
                                        </x-forms.button-secondary>
                                    @else
                                        <x-forms.button-secondary id="resume-timer-btn" icon="play-circle" data-url="{{ url()->current() }}"
                                        data-time-id="{{ $task->userActiveTimer->activeBreak->id }}">@lang('modules.timeLogs.resumeTimer')</x-forms.button-secondary>
                                    @endif

                                @endif
                            @endif
                        </div>
                        <div class="col-lg-4 col-2 text-right">
                            <div class="dropdown">
                                <button
                                    class="btn btn-lg f-14 px-2 py-1 text-dark-grey text-capitalize rounded  dropdown-toggle"
                                    type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-h"></i>
                                </button>

                                <div class="dropdown-menu dropdown-menu-right border-grey rounded b-shadow-4 p-0"
                                    aria-labelledby="dropdownMenuLink" tabindex="0">

                                    @if ($sendReminderPermission == 'all' && $task->boardColumn->slug != 'completed')
                                        <a class="dropdown-item" id="reminderButton"
                                            href="javascript:;">@lang('modules.tasks.reminder')</a>
                                    @endif

                                    @if ($editTaskPermission == 'all' || ($editTaskPermission == 'added' && $task->added_by == user()->id) || ($task->project && $task->project->project_admin == user()->id))
                                        <a class="dropdown-item openRightModal"
                                            href="{{ route('tasks.edit', $task->id) }}">@lang('app.edit')
                                            @lang('app.task')</a>

                                        <hr class="my-1">
                                    @endif

                                    @php $pin = $task->pinned() @endphp

                                    @if ($pin)
                                        <a class="dropdown-item" href="javascript:;" id="pinnedItem"
                                            data-pinned="pinned">@lang('app.unpin')
                                            @lang('app.task')</a>
                                    @else
                                        <a class="dropdown-item" href="javascript:;" id="pinnedItem"
                                            data-pinned="unpinned">@lang('app.pin')
                                            @lang('app.task')</a>
                                    @endif

                                    @if (($taskSettings->copy_task_link == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                                        <a class="dropdown-item btn-copy" href="javascript:;"
                                        data-clipboard-text="{{ route('front.task_detail', $task->hash) }}">@lang('modules.tasks.copyTaskLink')</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    @if (($taskSettings->project == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                        <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                            <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">@lang('app.project')</p>
                            <p class="mb-0 text-dark-grey f-14 w-70">
                                @if ($task->project_id)
                                    @if ($task->project->status == 'in progress')
                                        <i class="fa fa-circle mr-1 text-blue f-10"></i>
                                    @elseif ($task->project->status == 'on hold')
                                        <i class="fa fa-circle mr-1 text-yellow f-10"></i>
                                    @elseif ($task->project->status == 'not started')
                                        <i class="fa fa-circle mr-1 text-yellow f-10"></i>
                                    @elseif ($task->project->status == 'canceled')
                                        <i class="fa fa-circle mr-1 text-red f-10"></i>
                                    @elseif ($task->project->status == 'finished')
                                        <i class="fa fa-circle mr-1 text-dark-green f-10"></i>
                                    @endif
                                    @if ($viewProjectPermission == 'all'
                                    || ($viewProjectPermission == 'added' && $task->project->added_by == user()->id)
                                    || ($viewProjectPermission == 'owned' && user()->id == $task->project->client_id && in_array('client', user_roles()))
                                    || ($viewProjectPermission == 'both' && (user()->id == $task->project->client_id || user()->id == $task->added_by))
                                    )
                                    <a href="{{ route('projects.show', $task->project_id) }}" class="text-dark-grey">
                                        {{ $task->project->project_name }}</a>
                                    @else
                                    {{ $task->project->project_name }}
                                    @endif
                                @else
                                    --
                                @endif
                            </p>

                        </div>
                    @endif

                    @if (($taskSettings->priority == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()) )
                        <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                            <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                                @lang('modules.tasks.priority')</p>
                                <p class="mb-0 text-dark-grey f-14 w-70">
                                    @if ($task->priority == 'high')
                                    <i class="fa fa-circle mr-1 text-red f-10"></i>
                                    @elseif ($task->priority == 'medium')
                                    <i class="fa fa-circle mr-1 text-yellow f-10"></i>
                                    @else
                                    <i class="fa fa-circle mr-1 text-dark-green f-10"></i>
                                    @endif
                                    @lang('app.'.$task->priority)
                                </p>
                        </div>
                    @endif

                    @if (($taskSettings->assigned_to == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                        <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                            <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                                @lang('modules.tasks.assignTo')</p>
                                @if (count($task->users) > 0)
                                    @if (count($task->users) > 1)
                                        @foreach ($task->users as $item)
                                            <div class="taskEmployeeImg rounded-circle mr-1">
                                                <a href="{{ route('employees.show', $item->id) }}">
                                                    <img data-toggle="tooltip" data-original-title="{{ $item->name }}"
                                                        src="{{ $item->image_url }}">
                                                </a>
                                            </div>
                                        @endforeach
                                    @else
                                        @foreach ($task->users as $item)
                                            <x-employee :user="$item" />
                                        @endforeach
                                    @endif
                                @else
                                --
                            @endif
                        </div>
                    @endif

                    <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                        <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">@lang('modules.taskShortCode')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">
                           {{ ($task->task_short_code) ? $task->task_short_code : '--' }}
                        </p>
                    </div>

                    <x-cards.data-row :label="__('modules.projects.milestones')" :value="$task->milestone->milestone_title ?? '--'" />

                    @if (($taskSettings->assigned_by == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                        @if ($task->created_by)
                            <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                                <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                                    @lang('modules.tasks.assignBy')</p>
                                {{-- <p class="mb-0 text-dark-grey f-14 w-70"> --}}
                                <x-employee :user="$task->createBy" />
                                {{-- </p> --}}
                            </div>
                        @endif
                    @endif

                    @if (($taskSettings->label == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                        <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                            <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                                @lang('app.label')</p>
                            <p class="mb-0 text-dark-grey f-14 w-70">
                                @forelse ($task->labels as $key => $label)
                                    <span class='badge badge-secondary'
                                        style='background-color: {{ $label->label_color }}'>{{ $label->label_name }} </span>
                                        @if ($label->description)
                                            <i class="fa fa-question-circle" data-toggle="popover" data-placement="top" data-content="{{ $label->description }}" data-html="true" data-trigger="hover"></i>
                                        @endif
                                @empty
                                    --
                                @endforelse
                            </p>
                        </div>
                    @endif

                    @if (in_array('gitlab', user_modules()) && isset($gitlabIssue))
                        <div class="col-12 px-0 pb-3 d-block d-lg-flex d-md-flex">
                            <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                                GitLab</p>
                            <div class="mb-0 w-70">
                                <div class='card border'>
                                    <div class="card-body bg-white d-flex justify-content-between p-2 align-items-center rounded">
                                        <h4 class="f-13 f-w-500 mb-0">
                                            <img src="{{ asset('img/gitlab-icon-rgb.png') }}" class="height-35">
                                            <a href="{{ $gitlabIssue['web_url'] }}" class="text-darkest-grey f-w-500" target="_blank">#{{ $gitlabIssue['iid'] }} {{ $gitlabIssue['title'] }} <i class="fa fa-external-link-alt"></i></a>
                                        </h4>
                                        <div>
                                            <span class="badge badge-{{ $gitlabIssue['state'] == 'opened' ? 'danger' : 'success' }}">{{ $gitlabIssue['state'] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                        @if($survey && $surveySection)
                        <x-cards.data :title="__('Survey Info')" class=" mt-4">
                            <x-cards.data-row :label="__('Survey Name')"
                                              :value=" ($survey ? (App::getLocale() == 'en' ? $survey->name_en : $survey->name_ar) : '--')" />

                            <x-cards.data-row :label="__('Survey Section')"
                                              :value=" ($surveySection ? (App::getLocale() == 'en' ? $surveySection->name_en : $surveySection->name_ar) : '--')"/>

                            <x-cards.data-row :label="__('Survey Open Date')"
                                              :value=" ($survey ? ($survey->open_date == 1 ? 'YES' : 'NO' ) : '--')"  />

                            <x-cards.data-row :label="__('Survey Start Date')"
                                              :value=" ($survey ? ($survey->open_date == 0 ? ($survey->start_date ?? '--') : '--'  ) : '--') " />

                            <x-cards.data-row :label="__('Survey End Date')"
                                              :value=" ($survey ? ($survey->open_date == 0 ? ($survey->end_date ?? '--' ) : '--'  ) : '--') " />
                        </x-cards.data>
                        @endif
                        @if($testDriveAppointment)
                        <x-cards.data :title="__('Test Drive Info')" class=" mt-4">
                            <x-cards.data-row :label="__('Customer Name')"
                                              :value="( ($testDriveAppointment->customer == 'client' ? $userDetails->name : $userDetails->client_name)??'--')" />
                            <x-cards.data-row :label="__('Customer Email')"
                                              :value="( ($testDriveAppointment->customer == 'client' ? $userDetails->email : $userDetails->client_email) ?? '--')" />
                            <x-cards.data-row :label="__('Customer Type')"
                                              :value="($testDriveAppointment->customer ?? '--')" />

                            <x-cards.data-row :label="__('Test Drive Date')"
                                              :value="($testDriveAppointment->date ?? '--')" />
                            <x-cards.data-row :label="__('Test Drive Time')"
                                              :value="($testDriveAppointment->time ?? '--')"/>