@php
    $editTaskPermission = user()->permission('edit_tasks');
    $sendReminderPermission = user()->permission('send_reminder');
    $changeStatusPermission = user()->permission('change_status');
    //dd($task->taskEachUsers);
@endphp

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

    <h3 class="heading-h1 mb-3">{{ 'Job Order' }}</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-12 col-10 text-center">
                            <strong>Technician Work Timings</strong>
                        </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">

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

                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>

                <div class="card-body">
                    @php
                        $tuTotalMint = 0;

                    @endphp
                    @foreach ($task->taskUsers as $tkey => $tu)
                        @php
                            $taskuserArr = App\Models\TaskUser::getTaskUsers($task->id, $tu->service_id);
                            $taskuserNameArr = App\Models\TaskUser::getTaskUserNames($task->id, $tu->service_id);
                            //dd($taskuserArr);


                        @endphp
                        @php
                            $tuActiveTimerMinutes = 0;
                            $tuActiveBreakMinutes = 0;
                        @endphp
                        @if ($tu->activeTimerAll($taskuserArr[0]))
                            @foreach ($tu->activeTimerAll($taskuserArr[0]) as $item)
                                @php
                                    $tuActiveTimerMinutes =
                                        $tuActiveTimerMinutes +
                                        ($item->activeBreak
                                            ? $item->activeBreak->start_time->diffInMinutes($item->start_time)
                                            : now()->diffInMinutes($item->start_time));
                                    $tuActiveBreakMinutes = $tuActiveBreakMinutes + $item->breaks->sum('total_minutes');
                                @endphp
                            @endforeach
                        @endif

                        @php
                            $tuTotalMinutes =
                                $tu->timeLogged($taskuserArr[0])->sum('total_minutes') +
                                $tuActiveTimerMinutes -
                                $breakMinutes -
                                $tuActiveBreakMinutes;
                            $tuTimeLog = \Carbon\CarbonInterval::formatHuman($tuTotalMinutes);
                            $tuTotalMint = $tuTotalMint + $tuTotalMinutes;
                        @endphp

                        <div class="row border">
                            <div class="col-sm-6">
                                <div class="col-12 py-3  d-block d-lg-flex d-md-flex">
                                    <p class="mb-0 text-dark-grey f-14 w-70">
                                        {{ $tu->service_name }} - {{ $tu->category_name }}
                                        - {{ implode(',', $taskuserNameArr) }}
                                        <br />Time Taken: ({{ $tuTimeLog }})
                                    </p>
                                </div>

                            </div>
                            <div class="col-sm-6 task-timer-container">
                                <div class="col-12 col-lg-12 m-3">
                                    @if (
                                        $task->boardColumn->slug != 'completed' &&
                                            $task->boardColumn->slug != 'delivered' &&
                                            $task->boardColumn->slug != 'pending' &&
                                            in_array('timelogs', user_modules()))
                                        @if (is_null($tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()))
                                            <x-forms.button-secondary id="start-task-timer" class="start-task-timer"
                                                data-user-id="{{ $taskuserArr[0] }}"
                                                data-service-id="{{ $tu->service_id }}" icon="play">
                                                @lang('modules.timeLogs.startTimer')
                                            </x-forms.button-secondary>
                                        @elseif (!is_null($tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()))
                                            <span class="border p-2 rounded mr-2 bg-light"><i
                                                    class="fa fa-clock mr-1"></i><span
                                                    id="active-task-timer-{{ $tu->service_id }}"
                                                    class="active-task-timer" data-user-id="{{ $taskuserArr[0] }}"
                                                    data-time-id="{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->id }}">{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->timer }}</span></span>

                                            @if (is_null($tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->activeBreak))
                                                <x-forms.button-secondary icon="pause-circle"
                                                    data-time-id="{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->id }}"
                                                    id="pause-timer-btn2" class="mr-2 pause-timer-btn2"
                                                    data-service-id="{{ $tu->service_id }}"
                                                    data-user-id="{{ $taskuserArr[0] }}">@lang('modules.timeLogs.pauseTimer')</x-forms.button-secondary>

                                                <x-forms.button-secondary
                                                    data-time-id="{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->id }}"
                                                    id="stop-task-timer-{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->id }}"
                                                    class="stop-task-timer" icon="stop-circle"
                                                    data-service-id="{{ $tu->service_id }}"
                                                    data-user-id="{{ $taskuserArr[0] }}">
                                                    @lang('modules.timeLogs.stopTimer')
                                                </x-forms.button-secondary>
                                            @else
                                                <x-forms.button-secondary id="resume-timer-btn2" icon="play-circle"
                                                    class="resume-timer-btn2" data-service-id="{{ $tu->service_id }}"
                                                    data-user-id="{{ $taskuserArr[0] }}"
                                                    data-time-id="{{ $tu->userServiceActiveTimer($taskuserArr,$tu->service_id)->first()->activeBreak->id }}">@lang('modules.timeLogs.resumeTimer')</x-forms.button-secondary>
                                            @endif
                                        @endif
                                    @endif

                                    {{-- @if ($task->boardColumn->slug != 'completed' && $task->boardColumn->slug != 'delivered' && $task->boardColumn->slug != 'pending' && in_array('timelogs', user_modules()))
                                        @if (is_null($tu->userActiveTimer($tu->user_id)->first()))
                                            <x-forms.button-secondary id="start-task-timer"
                                                data-user-id="{{ $tu->user_id }}" class="start-task-timer"
                                                icon="play">
                                                @lang('modules.timeLogs.startTimer')
                                            </x-forms.button-secondary>
                                        @elseif (!is_null($tu->userActiveTimer($tu->user_id)->first()))
                                            <span class="border p-2 rounded mr-2 bg-light"><i
                                                    class="fa fa-clock mr-1"></i><span
                                                    id="active-task-timer-{{ $tu->user_id }}" class="active-task-timer"
                                                    data-user-id="{{ $tu->user_id }}"
                                                    data-time-id="{{ $tu->userActiveTimer($tu->user_id)->first()->id }}">{{ $tu->userActiveTimer($tu->user_id)->first()->timer }}</span></span>

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

                                                <x-forms.button-secondary
                                                    data-time-id="{{ $tu->userActiveTimer($tu->user_id)->first()->id }}"
                                                    id="stop-task-timer-{{ $tu->userActiveTimer($tu->user_id)->first()->id }}"
                                                    class="stop-task-timer" icon="stop-circle"
                                                    data-user-id="{{ $tu->user_id }}">
                                                    @lang('modules.timeLogs.stopTimer')
                                                </x-forms.button-secondary>
                                            @else
                                                <x-forms.button-secondary id="resume-timer-btn2" icon="play-circle"
                                                    class="resume-timer-btn2" data-user-id="{{ $tu->user_id }}"
                                                    data-time-id="{{ $tu->userActiveTimer($tu->user_id)->first()->activeBreak->id }}">@lang('modules.timeLogs.resumeTimer')</x-forms.button-secondary>
                                            @endif
                                        @endif
                                    @endif --}}
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="col-12 px-0 p-3 d-block  text-center">
                        <strong> Job Details</strong>
                    </div>
                    <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('Invoice')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->original_invoice_number }}

                        </p>

                    </div>
                    <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('Client')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            <a href="{{ route('clients.show', $task?->project?->client_id) }}" class="text-dark-grey">
                                {{ $task?->project?->client->name }}</a>

                        </p>

                    </div>
                    <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('Brand')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->brand->name }}

                        </p>

                    </div>
                    <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('Model')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->brand_model->model_name }}

                        </p>

                    </div>
                    {{-- <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('Bracelet')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->bracelet->name }}

                        </p>

                    </div> --}}
                    <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('Car Type')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->size->name }}

                        </p>

                    </div>
                    <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('Color')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder?->color_det?->name }}

                        </p>

                    </div>
                    <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('Vehicle No')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->serial_id }}

                        </p>

                    </div>
                    @foreach ($task?->project?->serviceOrder?->items as $item)
                        <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">
                                {{ $item->itemDetails?->type == 1 ? 'Protection Service' : ($item->itemDetails?->type == 2 ? 'Shading Service' : 'Additional Service') }}
                            </p>
                            <p class="mb-0 text-dark-grey f-14 w-70">

                                {{ $item->itemDetails?->name }}

                            </p>

                        </div>
                    @endforeach
                    {{-- <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('Warranty')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            @if ($task?->project?->serviceOrder?->warranty == 1)
                                1 Months
                            @elseif ($task?->project?->serviceOrder?->warranty == 3)
                                3 Months
                            @elseif ($task?->project?->serviceOrder?->warranty == 6)
                                6 Months
                            @elseif ($task?->project?->serviceOrder?->warranty == 9)
                                9 Months
                            @elseif($task?->project?->serviceOrder?->warranty == 12)
                                1 Year
                            @elseif($task?->project?->serviceOrder?->warranty == 24)
                                2 Year
                            @elseif($task?->project?->serviceOrder?->warranty == '')
                                No Warranty
                            @endif

                            @if (
                                !is_null($task?->project?->serviceOrder->warranty) &&
                                    !is_null($task?->project?->serviceOrder->warranty_from) &&
                                    !is_null($task?->project?->serviceOrder->warranty_to))
                                {{ date('d-m-Y', strtotime($task?->project?->serviceOrder->warranty_from)) }} To
                                {{ date('d-m-Y', strtotime($task?->project?->serviceOrder->warranty_to)) }}
                            @else
                            @endif

                        </p>

                    </div> --}}
                    @if (!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('Service Charge')
                            </p>
                            <p class="mb-0 text-dark-grey f-14 w-70">

                                {{ $task?->project?->serviceOrder->total }}
                                {{ user_setting()->country->currency_iso3 }}

                            </p>

                        </div>
                        <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('Payment Method')
                            </p>
                            <p class="mb-0 text-dark-grey f-14 w-70">

                                {{ ucwords($task?->project?->serviceOrder?->gateway) }}

                            </p>

                        </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('Received By')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->addedBy->name }}

                        </p>

                    </div>
                    <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('Notes')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->note }}

                        </p>

                    </div>
                    <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('New Design Note')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->new_design }}

                        </p>

                    </div>

                </div>

                <div class="row">
                    {{-- <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('Free Travel Case')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->is_free_travelcase == 'on' ? 'Yes' : 'No' }}

                        </p>

                    </div> --}}
                    {{-- <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('From Old System')</p>
                        <p class="mb-0 text-dark-grey f-14 w-70">

                            {{ $task?->project?->serviceOrder->from_old_system == 'on' ? 'Yes' : 'No' }}

                        </p>

                    </div> --}}

                    @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('Technician')</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="{{ mb_ucwords($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

                    {{-- Custom fields data --}}
                    {{-- @if (($taskSettings->custom_fields == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                            <x-forms.custom-field-show :fields="$fields" :model="$task"></x-forms.custom-field-show>
                        @endif --}}

                </div>
            </div>

            <!-- TASK TABS START -->
            <div class="bg-additional-grey rounded my-3">

                <div class="s-b-inner s-b-notifications bg-white b-shadow-4 rounded">

                    <x-tab-section class="task-tabs">

                        @if (
                            $taskSettings->files == 'yes' ||
                                in_array('admin', user_roles()) ||
                                in_array('employee', user_roles()) ||
                                in_array('supervisor', user_roles()) ||
                                in_array('accountant', user_roles()) ||
                                in_array('receptionist', user_roles()))
                            <x-tab-item class="ajax-tab" :active="(request('view') === 'file' || !request('view'))"
                                :link="route('tasks.show', $task->id) . '?view=file'">@lang('app.file')</x-tab-item>
                        @endif

                        {{-- @if ((($taskSettings->time_logs == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles())) && in_array('timelogs', user_modules()))
                            <x-tab-item class="ajax-tab" :active="(request('view') === 'time_logs')"
                                :link="route('tasks.show', $task->id).'?view=time_logs'">
                                @lang('app.menu.timeLogs')
                                @if ($task->active_timer_all_count > 0)
                                    <i class="fa fa-clock text-primary f-12 ml-1"></i>
                                @endif
                            </x-tab-item>
                        @endif --}}

                        <x-tab-item class="ajax-tab" :active="(request('view') === 'notes')" :link="route('tasks.show', $task->id) . '?view=notes'">@lang('app.notes')</x-tab-item>

                        {{--
                        @if (($taskSettings->history == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                            <x-tab-item class="ajax-tab" :active="(request('view') === 'history')"
                                :link="route('tasks.show', $task->id).'?view=history'">@lang('modules.tasks.history')
                            </x-tab-item>
                        @endif --}}
                    </x-tab-section>

                    <div class="s-b-n-content">
                        <div class="tab-content" id="nav-tabContent">
                            @include($tab)
                        </div>
                    </div>
                </div>

            </div>
            <!-- TASK TABS END -->

        </div>

        <div class="col-sm-3">
            <x-cards.data>
                @if ($taskSettings->status == 'yes')
                    <p class="f-w-500"><i class="fa fa-circle mr-1 text-yellow"
                            style="color: {{ $task->boardColumn->label_color }}"></i>{{ $task->boardColumn->column_name }}
                    </p>
                @endif

                @if ($taskSettings->start_date == 'yes')
                    <div class="col-12 px-0 pb-3 d-lg-flex d-block">
                        <p class="mb-0 text-lightest w-50 f-14 text-capitalize">{{ __('app.startDate') }}
                        </p>
                        <p class="mb-0 text-dark-grey w-50 f-14">
                            @if (isset($task?->taskusers[0]))
                                {{ $task->taskUsers[0]->created_at->translatedFormat(company()->date_format) }}
                            @else
                                --
                            @endif
                        </p>
                    </div>
                @endif

                @if ($taskSettings->due_date == 'yes')
                    <div class="col-12 px-0 pb-3 d-lg-flex d-block">
                        <p class="mb-0 text-lightest w-50 f-14 text-capitalize">{{ __('app.dueDate') }}
                        </p>
                        <p class="mb-0 text-dark-grey w-50 f-14">
                            @if (!is_null($task->due_date))
                                {{ $task->due_date->translatedFormat(company()->date_format) }}
                            @else
                                --
                            @endif
                        </p>
                    </div>
                @endif

                @if ($taskSettings->due_date == 'yes')
                    <div class="col-12 px-0 pb-3 d-lg-flex d-block">
                        <p class="mb-0 text-lightest w-50 f-14 text-capitalize">{{ __('Finish Date') }}
                        </p>
                        <p class="mb-0 text-dark-grey w-50 f-14">
                            @if (!is_null($task->completed_on))
                                {{ $task->completed_on->translatedFormat(company()->date_format) }}
                            @else
                                --
                            @endif
                        </p>
                    </div>
                @endif

                {{-- @if (($taskSettings->time_estimate == 'yes' && in_array('client', user_roles())) || in_array('admin', user_roles()) || in_array('employee', user_roles()))
                    @if ($task->estimate_hours > 0 || $task->estimate_minutes > 0)
                        <div class="col-12 px-0 pb-3 d-lg-flex d-block">
                            <p class="mb-0 text-lightest w-50 f-14 text-capitalize">
                                {{ __('modules.tasks.setTimeEstimate') }}
                            </p>
                            <p class="mb-0 text-dark-grey w-50 f-14">{{ $task->estimate_hours }} @lang('app.hrs') {{ $task->estimate_minutes }} @lang('app.mins')</p>
                        </div>
                    @endif
                @endif --}}

                @php
                    $activeTimerMinutes = 0;
                    $activeBreakMinutes = 0;
                @endphp
                @if ($task->activeTimerAll)
                    @foreach ($task->activeTimerAll as $item)
                        @php
                            $activeTimerMinutes =
                                $activeTimerMinutes +
                                ($item->activeBreak
                                    ? $item->activeBreak->start_time->diffInMinutes($item->start_time)
                                    : now()->diffInMinutes($item->start_time));
                            $activeBreakMinutes = $activeBreakMinutes + $item->breaks->sum('total_minutes');
                        @endphp
                    @endforeach
                @endif

                @php
                    $totalMinutes =
                        $task->timeLogged->sum('total_minutes') +
                        $activeTimerMinutes -
                        $breakMinutes -
                        $activeBreakMinutes;

                    $timeLog = \Carbon\CarbonInterval::formatHuman($tuTotalMint);
                @endphp

                <div class="col-12 px-0 pb-3 d-lg-flex d-block">
                    <p class="mb-0 text-lightest w-50 f-14 text-capitalize">
                        {{ __('Time Taken To Complete') }}
                    </p>
                    <p class="mb-0 text-dark-grey w-50 f-14">{{ $timeLog }}</p>
                </div>

                {{-- @php

                    if ($task->boardColumn->slug == 'delivered') {
                        $status =
                            '<span class="p-2"><i class="fa fa-circle mr-1 text-yellow"
                    style="color: ' .
                            $task->boardColumn->label_color .
                            '"></i>' .
                            $task->boardColumn->column_name .
                            '</span>';
                    } else {
                        $status =
                            '<select class="form-control select-picker change-status" data-task-id="' .
                            $task->id .
                            '">';

                        foreach ($taskBoardColumns as $item) {
                            if (
                                in_array($item->slug, ['delivered', 'completed']) &&
                                (in_array('admin', user_roles()) ||
                                    in_array('manager', user_roles()) ||
                                    in_array('supervisor', user_roles()))
                            ) {
                                if ($task->boardColumn->slug != 'completed') {
                                    $status =
                                        '<span class="p-2"><i class="fa fa-circle mr-1 text-yellow"
                                        style="color: ' .
                                        $task->boardColumn->label_color .
                                        '"></i>' .
                                        $task->boardColumn->column_name .
                                        '</span>';
                                    break;
                                } else {
                                    $status .= '<option ';
                                    if ($item->id == $task->board_column_id) {
                                        $status .= 'selected';
                                    }
                                    $status .=
                                        '  data-content="<i class=\'fa fa-circle mr-2\' style=\'color: ' .
                                        $item->label_color .
                                        '\'></i> ' .
                                        $item->column_name .
                                        '" value="' .
                                        $item->slug .
                                        '">' .
                                        $item->column_name .
                                        '</option>';
                                }
                            }
                            //  elseif (
                            //     in_array($item->slug, ['workingonit', 'paused', 'completed']) &&
                            //     in_array('employee', user_roles())
                            // ) {
                            //     $status .= '<option ';
                            //     if ($item->id == $task->board_column_id) {
                            //         $status .= 'selected';
                            //     }
                            //     $status .=
                            //         '  data-content="<i class=\'fa fa-circle mr-2\' style=\'color: ' .
                            //         $item->label_color .
                            //         '\'></i> ' .
                            //         $item->column_name .
                            //         '" value="' .
                            //         $item->slug .
                            //         '">' .
                            //         $item->column_name .
                            //         '</option>';
                            // }
                        }

                        $status .= '</select>';
                    }
                @endphp --}}
                @php
                    if (
                        $task->boardColumn->slug == 'delivered' &&
                        (user_roles()[0] == 'admin' ||
                            user_roles()[0] == 'supervisor' ||
                            user_roles()[0] == 'accountant')
                    ) {
                        $status =
                            '<span class="p-2"><i class="fa fa-circle mr-1 text-yellow"
                    style="color: ' .
                            $task->boardColumn->label_color .
                            '"></i>' .
                            $task->boardColumn->column_name .
                            '</span>';
                    }
                    //$row->boardColumn->slug == 'pending' &&
                    elseif (
                        user_roles()[0] == 'admin' ||
                        user_roles()[0] == 'supervisor' ||
                        user_roles()[0] == 'accountant'
                    ) {
                        $status =
                            '<select class="form-control select-picker change-status" data-task-id="' .
                            $task->id .
                            '">';

                        foreach ($taskBoardColumns as $item) {
                            $statArr = [
                                'pending',
                                'workingonit',
                                'paused',
                                'completed',
                                'delivered',
                                'completed',
                                'cancelled',
                            ];
                            if (in_array($item->slug, $statArr)) {
                                $status .= '<option ';

                                if ($item->id == $task->board_column_id) {
                                    $status .= 'selected';
                                }

                                $status .=
                                    '  data-content="<i class=\'fa fa-circle mr-2\' style=\'color: ' .
                                    $item->label_color .
                                    '\'></i> ' .
                                    $item->column_name .
                                    '" value="' .
                                    $item->slug .
                                    '">' .
                                    $item->column_name .
                                    '</option>';
                            }
                        }

                        $status .= '</select>';
                    } else {
                        $status =
                            '<select class="form-control select-picker change-status" data-task-id="' .
                            $task->id .
                            '">';

                        foreach ($taskBoardColumns as $item) {
                            if (
                                user_roles()[0] == 'admin' ||
                                user_roles()[0] == 'supervisor' ||
                                user_roles()[0] == 'accountant'
                            ) {
                                $statArr = ['delivered', 'completed'];
                            } elseif (user_roles()[0] == 'employee') {
                                $statArr = ['workingonit', 'completed', 'paused'];
                            }
                            if (in_array($item->slug, $statArr)) {
                                $status .= '<option ';

                                if ($item->id == $task->board_column_id) {
                                    $status .= 'selected';
                                }

                                $status .=
                                    '  data-content="<i class=\'fa fa-circle mr-2\' style=\'color: ' .
                                    $item->label_color .
                                    '\'></i> ' .
                                    $item->column_name .
                                    '" value="' .
                                    $item->slug .
                                    '">' .
                                    $item->column_name .
                                    '</option>';
                            }
                        }

                        $status .= '</select>';
                    }
                @endphp

                <div class="col-12 px-0 pb-3 d-lg-flex d-block ">
                    <p class="mb-0 text-lightest w-50 f-14 text-capitalize">
                        {{ __('Status') }}
                    </p>
                    {{-- in_array($task->boardColumn->slug, ['workingonit', 'completed']) && --}}
                    @if (in_array('admin', user_roles()) || in_array('manager', user_roles()) || in_array('supervisor', user_roles()))
                        @php echo $status; @endphp
                    @else
                        @php echo '<span class="p-2"><i class="fa fa-circle mr-1 text-yellow" style="color: ' .$task->boardColumn->label_color .'"></i>' .$task->boardColumn->column_name . '</span>'; @endphp
                    @endif

                </div>
                <div class="col-12 px-0 d-lg-flex d-block justify-content-center ">
                    <input type="hidden" name="client_watch_count" id="client_watch_count"
                        value="{{ $clientWatchCount }}" />

                    @if (in_array($task->boardColumn->slug, ['completed']))

                        @if ($task->project?->serviceOrder?->message_sent_status == 0)
                            @if (in_array('employee', user_roles()) || in_array('supervisor', user_roles()))
                                <x-forms.button-primary icon="check" data-status="completed"
                                    class="send-ready-message mr-2 mb-2 mb-lg-0 mb-md-0">
                                    @lang('Send Message to Client')
                                </x-forms.button-primary>
                            @else
                                <button type="button" class="btn-danger rounded f-14 p-2 mr-2 mb-2 mb-lg-0 mb-md-0">
                                    <svg class="svg-inline--fa fa-check fa-w-16 mr-1" aria-hidden="true"
                                        focusable="false" data-prefix="fa" data-icon="check" role="img"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                        <path fill="currentColor"
                                            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z">
                                        </path>
                                    </svg><!-- <i class="fa fa-check mr-1"></i> Font Awesome fontawesome.com -->
                                    Message Not Triggered & Not Sent
                                </button>
                            @endif
                        @else
                            <button type="button" class="btn-success rounded f-14 p-2 mr-2 mb-2 mb-lg-0 mb-md-0">
                                <svg class="svg-inline--fa fa-check fa-w-16 mr-1" aria-hidden="true"
                                    focusable="false" data-prefix="fa" data-icon="check" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                    <path fill="currentColor"
                                        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z">
                                    </path>
                                </svg>
                                <!-- <i class="fa fa-check mr-1"></i> Font Awesome fontawesome.com -->
                                Message Sent
                            </button>
                        @endif
                    @elseif (in_array($task->boardColumn->slug, ['delivered']))
                        @if (
                            $task->project?->serviceOrder?->message_sent_status == 0 &&
                                $task->project?->serviceOrder?->mes_sent_status_code == null)
                            <button type="button" class="btn-danger rounded f-14 p-2 mr-2 mb-2 mb-lg-0 mb-md-0">
                                <svg class="svg-inline--fa fa-check fa-w-16 mr-1" aria-hidden="true"
                                    focusable="false" data-prefix="fa" data-icon="check" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                    <path fill="currentColor"
                                        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z">
                                    </path>
                                </svg><!-- <i class="fa fa-check mr-1"></i> Font Awesome fontawesome.com -->
                                Message Not Triggered & Not Sent
                            </button>
                        @elseif (
                            $task->project?->serviceOrder?->message_sent_status == 0 &&
                                $task->project?->serviceOrder?->mes_sent_status_code != null)
                            <button type="button" class="btn-danger rounded f-14 p-2 mr-2 mb-2 mb-lg-0 mb-md-0">
                                <svg class="svg-inline--fa fa-check fa-w-16 mr-1" aria-hidden="true"
                                    focusable="false" data-prefix="fa" data-icon="check" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                    <path fill="currentColor"
                                        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z">
                                    </path>
                                </svg><!-- <i class="fa fa-check mr-1"></i> Font Awesome fontawesome.com -->
                                Message Triggered but not sent
                            </button>
                        @elseif (
                            $task->project?->serviceOrder?->message_sent_status == 1 &&
                                $task->project?->serviceOrder?->mes_sent_status_code == '00')
                            <button type="button" class="btn-danger rounded f-14 p-2 mr-2 mb-2 mb-lg-0 mb-md-0">
                                <svg class="svg-inline--fa fa-check fa-w-16 mr-1" aria-hidden="true"
                                    focusable="false" data-prefix="fa" data-icon="check" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                    <path fill="currentColor"
                                        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z">
                                    </path>
                                </svg><!-- <i class="fa fa-check mr-1"></i> Font Awesome fontawesome.com -->
                                Message Triggered & Sent
                            </button>
                        @endif
                    @endif
                </div>

                <div class="col-12 px-0 d-lg-flex d-block justify-content-center ">
                    @if (
                        $task->project?->serviceOrder?->mes_sent_status_code != '00' &&
                            $task->project?->serviceOrder?->mes_sent_status_code != null)
                        <span style="color: red;">Message Triggered, but not successfully sent (Reason-
                            {{ $task->project?->serviceOrder?->mes_sent_status_code }} -
                            {{ $task->project?->serviceOrder?->mes_sent_response }})</span>
                    @endif
                </div>

            </x-cards.data>

        </div>

    </div>

    <script src="{{ asset('vendor/jquery/clipboard.min.js') }}"></script>
    <script>
        var clipboard = new ClipboardJS('.btn-copy');

        clipboard.on('success', function(e) {
            Swal.fire({
                icon: 'success',
                text: '@lang('app.copied')',
                toast: true,
                position: 'top-end',
                timer: 3000,
                timerProgressBar: true,
                showConfirmButton: false,
                customClass: {
                    confirmButton: 'btn btn-primary',
                },
                showClass: {
                    popup: 'swal2-noanimation',
                    backdrop: 'swal2-noanimation'
                },
            })
        });
    </script>

    <script>
        $(document).ready(function() {



            // var $worked = $("#active-task-timer");

            // function updateTimer() {
            //     var myTime = $worked.html();
            //     var ss = myTime.split(":");

            //     var hours = ss[0];
            //     var mins = ss[1];
            //     var secs = ss[2];
            //     secs = parseInt(secs) + 1;

            //     if (secs > 59) {
            //         secs = '00';
            //         mins = parseInt(mins) + 1;
            //     }

            //     if (mins > 59) {
            //         secs = '00';
            //         mins = '00';
            //         hours = parseInt(hours) + 1;
            //     }

            //     if (hours.toString().length < 2) {
            //         hours = '0' + hours;
            //     }
            //     if (mins.toString().length < 2) {
            //         mins = '0' + mins;
            //     }
            //     if (secs.toString().length < 2) {
            //         secs = '0' + secs;
            //     }
            //     var ts = hours + ':' + mins + ':' + secs;

            //     $worked.html(ts);
            //     setTimeout(updateTimer, 1000);
            // }


            // if ($('#stop-task-timer').length) {
            //     setTimeout(updateTimer, 1000);
            // }

            // Function to initialize and update individual timers
            function updateTimers() {
                $(".active-task-timer").each(function() {
                    var $this = $(this);

                    // Check if the corresponding stop-task-timer is NOT present
                    if ($this.closest(".task-timer-container").find(".stop-task-timer").length > 0) {
                        var currentTime = $this.html().trim();
                        var timeParts = currentTime.split(":");

                        // Parse hours, minutes, and seconds
                        var hours = parseInt(timeParts[0], 10);
                        var minutes = parseInt(timeParts[1], 10);
                        var seconds = parseInt(timeParts[2], 10);

                        // Increment seconds
                        seconds += 1;

                        // Handle overflow for seconds and minutes
                        if (seconds > 59) {
                            seconds = 0;
                            minutes += 1;
                        }
                        if (minutes > 59) {
                            minutes = 0;
                            hours += 1;
                        }

                        // Format time as HH:MM:SS
                        var formattedTime = [
                            hours.toString().padStart(2, '0'),
                            minutes.toString().padStart(2, '0'),
                            seconds.toString().padStart(2, '0')
                        ].join(":");

                        // Update the HTML content with the new time
                        $this.html(formattedTime);
                    }
                });

                // Repeat the function every second
                setTimeout(updateTimers, 1000);
            }
            // Start updating timers
            $(document).ready(function() {
                if ($(".active-task-timer").length > 0) {
                    updateTimers();
                }
            });


            function excecuteTimerOnStatusChange(status) {

                if (status == 'workingonit') {
                    if ($('#start-task-timer')) {
                        $('#start-task-timer').click(); //Start the timer
                    }
                    if ($('#resume-timer-btn2')) {
                        $('#resume-timer-btn2').click(); //resume the timer
                    }

                } else if (status == 'completed') {

                    $('#stop-task-timer').click(); //stope the timer
                } else if (status == 'paused') {

                    $('#pause-timer-btn2').click(); //pause the timer
                }


            }
            $('body').on('change', '.change-status', function() {

                var url = "{{ route('tasks.change_status') }}";
                var token = "{{ csrf_token() }}";
                var id = '{{ $task->id }}'; //$(this).data('task-id');
                var status = $(this).val();
                //console.log(status);

                //excecuteTimerOnStatusChange(status);

                if (status == 'workingonit') {
                    if ($('#start-task-timer').length) {
                        $('#start-task-timer').click(); //Start the timer
                        console.log('started');
                        //return true;
                    }
                    if ($('#resume-timer-btn2').length) {
                        $('#resume-timer-btn2').click(); //resume the timer
                        console.log('resume');
                        //return true;
                    }

                } else if (status == 'completed') {
                    if ($('#stop-task-timer').length) {
                        $('#stop-task-timer').click(); //stope the timer
                    }
                    console.log('stoped');
                } else if (status == 'paused') {

                    $('#pause-timer-btn2').click(); //pause the timer
                    console.log('paused');
                }

                if (id != "" && status != "") {
                    console.log(status + ' status changing');
                    $.easyAjax({
                        url: url,
                        type: "POST",
                        container: '.content-wrapper',
                        blockUI: true,
                        data: {
                            '_token': token,
                            taskId: id,
                            status: status,
                            sortBy: 'id'
                        },
                        success: function(response) {
                            location.reload();
                            //$('#timer-clock').html(response.clockHtml);
                            //window.LaravelDataTables["allTasks-table"].draw(false);
                        }
                    });

                }
            });

            $('body').on('click', '.send-ready-message', function() {
                var status = $(this).data('status');
                var token = "{{ csrf_token() }}";
                var id = '{{ $task->id }}';
                var clientWatchCount = {{ $clientWatchCount }};

                if (clientWatchCount > 0) {
                    alert_text = 'This client has a total of ' + clientWatchCount +
                        ' watches that are not completed yet. Are you sure to send this work\'s completion sms to the client?';
                } else {
                    alert_text = 'Are you sure to send this work\'s completion sms to the client?';
                }

                Swal.fire({
                    title: "Are you sure ?",
                    text: alert_text,
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('Yes, please send')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var checkUrl = "{{ route('tasks.send-ready-message', ':id') }}";
                        checkUrl = checkUrl.replace(':id', id);

                        $.easyAjax({
                            type: 'POST',
                            url: checkUrl,
                            container: '.content-wrapper',
                            blockUI: true,
                            data: {
                                '_token': token,
                                'status': status,
                                'id': id
                            },
                            success: function(response) {
                                if (response.status == "success") {
                                    window.location.reload();
                                }
                            }
                        });
                    }
                });

            });



            //    change task status
            $('body').on('change', '.change-task-status', function() {
                var status = $(this).val(); //$(this).data('status');

                var id = '{{ $task->id }}';
                //console.log(status); return false;
                if (status == 'completed') {
                    var checkUrl = "{{ route('tasks.check_task', ':id') }}";
                    checkUrl = checkUrl.replace(':id', id);
                    var token = "{{ csrf_token() }}";

                    $.easyAjax({
                        url: checkUrl,
                        type: "POST",
                        blockUI: true,
                        container: '#task-detail-section',
                        data: {
                            '_token': token,

                        },
                        success: function(data) {
                            if (data.taskCount > 0) {
                                Swal.fire({
                                    title: "@lang('messages.sweetAlertTitle')",
                                    text: "@lang('messages.markCompleteTask')",
                                    icon: 'warning',
                                    showCancelButton: true,
                                    focusConfirm: false,
                                    confirmButtonText: "@lang('messages.completeIt')",
                                    cancelButtonText: "@lang('app.cancel')",
                                    customClass: {
                                        confirmButton: 'btn btn-primary mr-3',
                                        cancelButton: 'btn btn-secondary'
                                    },
                                    showClass: {
                                        popup: 'swal2-noanimation',
                                        backdrop: 'swal2-noanimation'
                                    },
                                    buttonsStyling: false
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        updateTask(id, status);
                                    }
                                });

                            } else {
                                updateTask(id, status)
                            }

                        }
                    });
                } else {
                    console.log(status);
                    updateTask(id, status)
                }


            });
            // Update Task
            function updateTask(id, status) {
                var url = "{{ route('tasks.change_status') }}";
                var token = "{{ csrf_token() }}";
                console.log(status);
                $.easyAjax({
                    url: url,
                    type: "POST",
                    async: false,
                    data: {
                        '_token': token,
                        taskId: id,
                        status: status,
                        sortBy: 'id'
                    },
                    success: function(data) {
                        //window.location.reload();
                    }
                })
            }

            $('body').on('click', '#pinnedItem', function() {
                var type = $('#pinnedItem').attr('data-pinned');
                var id = '{{ $task->id }}';
                var pinType = 'task';

                var dataPin = type.trim(type);
                if (dataPin == 'pinned') {
                    Swal.fire({
                        title: "@lang('messages.sweetAlertTitle')",
                        icon: 'warning',
                        showCancelButton: true,
                        focusConfirm: false,
                        confirmButtonText: "@lang('messages.confirmUnpin')",
                        cancelButtonText: "@lang('app.cancel')",
                        customClass: {
                            confirmButton: 'btn btn-primary mr-3',
                            cancelButton: 'btn btn-secondary'
                        },
                        showClass: {
                            popup: 'swal2-noanimation',
                            backdrop: 'swal2-noanimation'
                        },
                        buttonsStyling: false
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var url = "{{ route('tasks.destroy_pin', ':id') }}";
                            url = url.replace(':id', id);

                            var token = "{{ csrf_token() }}";
                            $.easyAjax({
                                type: 'POST',
                                url: url,
                                data: {
                                    '_token': token,
                                    'type': pinType
                                },
                                success: function(response) {
                                    if (response.status == "success") {
                                        window.location.reload();
                                    }
                                }
                            })
                        }
                    });

                } else {
                    Swal.fire({
                        title: "@lang('messages.sweetAlertTitle')",
                        icon: 'warning',
                        showCancelButton: true,
                        focusConfirm: false,
                        confirmButtonText: "@lang('messages.confirmPin')",
                        cancelButtonText: "@lang('app.cancel')",
                        customClass: {
                            confirmButton: 'btn btn-primary mr-3',
                            cancelButton: 'btn btn-secondary'
                        },
                        showClass: {
                            popup: 'swal2-noanimation',
                            backdrop: 'swal2-noanimation'
                        },
                        buttonsStyling: false
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var url = "{{ route('tasks.store_pin') }}?type=" + pinType;

                            var token = "{{ csrf_token() }}";
                            $.easyAjax({
                                type: 'POST',
                                url: url,
                                data: {
                                    '_token': token,
                                    'task_id': id
                                },
                                success: function(response) {
                                    if (response.status == "success") {
                                        window.location.reload();
                                    }
                                }
                            });
                        }
                    });
                }
            });

            $(".ajax-tab").click(function(event) {
                event.preventDefault();

                $('.task-tabs .ajax-tab').removeClass('active');
                $(this).addClass('active');

                const requestUrl = this.href;

                $.easyAjax({
                    url: requestUrl,
                    blockUI: true,
                    container: "#nav-tabContent",
                    historyPush: ($(RIGHT_MODAL).hasClass('in') ? false : true),
                    data: {
                        'json': true
                    },
                    success: function(response) {
                        if (response.status == "success") {
                            $('#nav-tabContent').html(response.html);
                        }
                    }
                });
            });




            $('body').on('click', '.delete-comment', function() {
                var id = $(this).data('row-id');
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.recoverRecord')",
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('messages.confirmDelete')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = "{{ route('taskComment.destroy', ':id') }}";
                        url = url.replace(':id', id);

                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            url: url,
                            data: {
                                '_token': token,
                                '_method': 'DELETE'
                            },
                            success: function(response) {
                                if (response.status == "success") {
                                    $('#comment-list').html(response.view);
                                }
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.edit-comment', function() {
                var id = $(this).data('row-id');
                var url = "{{ route('taskComment.edit', ':id') }}";
                url = url.replace(':id', id);
                $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
                $.ajaxModal(MODAL_LG, url);
            });

            $('body').on('click', '.delete-subtask', function() {
                var id = $(this).data('row-id');
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.recoverRecord')",
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('messages.confirmDelete')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = "{{ route('sub-tasks.destroy', ':id') }}";
                        url = url.replace(':id', id);

                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            url: url,
                            data: {
                                '_token': token,
                                '_method': 'DELETE'
                            },
                            success: function(response) {
                                if (response.status == "success") {
                                    $('#sub-task-list').html(response.view);
                                }
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.edit-subtask', function() {
                var id = $(this).data('row-id');
                var url = "{{ route('sub-tasks.edit', ':id') }}";
                url = url.replace(':id', id);
                $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
                $.ajaxModal(MODAL_LG, url);
            });

            $('body').on('change', '.task-check', function() {
                if ($(this).is(':checked')) {
                    var status = 'complete';
                } else {
                    var status = 'incomplete';
                }

                var id = $(this).data('sub-task-id');
                var url = "{{ route('sub_tasks.change_status') }}";
                var token = "{{ csrf_token() }}";

                $.easyAjax({
                    url: url,
                    type: "POST",
                    data: {
                        '_token': token,
                        subTaskId: id,
                        status: status
                    },
                    success: function(response) {
                        if (response.status == "success") {

                            $('#sub-task-list').html(response.view);

                        }
                    }
                })
            });


            $('body').on('click', '.delete-file', function() {
                var id = $(this).data('row-id');
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.recoverRecord')",
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('messages.confirmDelete')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = "{{ route('task-files.destroy', ':id') }}";
                        url = url.replace(':id', id);

                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            url: url,
                            data: {
                                '_token': token,
                                '_method': 'DELETE'
                            },
                            success: function(response) {
                                if (response.status == "success") {
                                    $('#task-file-list').html(response.view);
                                }
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.delete-note', function() {
                var id = $(this).data('row-id');
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.recoverRecord')",
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('messages.confirmDelete')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = "{{ route('task-note.destroy', ':id') }}";
                        url = url.replace(':id', id);

                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            url: url,
                            data: {
                                '_token': token,
                                '_method': 'DELETE'
                            },
                            success: function(response) {
                                if (response.status == "success") {
                                    $('#note-list').html(response.view);
                                }
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.edit-note', function() {
                var id = $(this).data('row-id');
                var url = "{{ route('task-note.edit', ':id') }}";
                url = url.replace(':id', id);
                $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
                $.ajaxModal(MODAL_LG, url);
            });

            $('.start-task-timer').click(function() {
                console.log('started');
                var task_id = "{{ $task->id }}";
                var project_id = "{{ $task->project_id }}";
                var user_id = $(this).data('user-id'); //"{{ user()->id }}";
                var service_id = $(this).data('service-id');
                console.log(user_id);
                var memo = "{{ $task->heading }}";
                var token = "{{ csrf_token() }}";

                $.easyAjax({
                    url: "{{ route('timelogs.start_timer') }}",
                    blockUI: true,
                    type: "POST",
                    data: {
                        task_id: task_id,
                        project_id: project_id,
                        memo: memo,
                        '_token': token,
                        user_id: user_id,
                        service_id: service_id
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            //window.location.reload();
                            var redir_url = "{{ route('tasks.show', ':id') }}";
                            redir_url = redir_url.replace(':id', task_id);
                            window.location.href = redir_url;
                        }
                    }
                })
            });

            $('.stop-task-timer').click(function() {
                var id = $(this).data('time-id');
                var service_id = $(this).data('service-id');
                var url = "{{ route('timelogs.stop_timer', ':id') }}";
                url = url.replace(':id', id);
                var taskId = "{{ $task->id }}";
                var token = '{{ csrf_token() }}';
                $.easyAjax({
                    url: url,
                    blockUI: true,
                    type: "POST",
                    data: {
                        timeId: id,
                        taskId: taskId,
                        serviceId: service_id,
                        _token: token
                    },
                    success: function(data) {
                        window.location.reload();
                    }
                })
            });

            //start-task-timer
            var st = '{{ request()->st }}';

            if (st == 1) {
                $('#start-task-timer').click();
            }

            $('body').on('click', '.pause-timer-btn2', function() {
                var id = $(this).data('time-id');
                var service_id = $(this).data('service-id');
                var taskId = "{{ $task->id }}";
                var url = "{{ route('timelogs.pause_timer', ':id') }}";
                url = url.replace(':id', id);
                var token = '{{ csrf_token() }}';
                //console.log(id);return false;
                $.easyAjax({
                    url: url,
                    blockUI: true,
                    type: "POST",
                    disableButton: true,
                    buttonSelector: "#pause-timer-btn2",
                    data: {
                        timeId: id,
                        taskId: taskId,
                        serviceId: service_id,
                        _token: token
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            if (response.activeTimerCount > 0) {
                                $('#show-active-timer .active-timer-count').html(response
                                    .activeTimerCount);
                            } else {
                                $('#show-active-timer .active-timer-count').addClass('d-none');
                            }

                            // $('.change-status').val('paused');
                            // $('.change-status').trigger("change");

                            // if ($('#allTasks-table').length) {
                            //     window.LaravelDataTables["allTasks-table"].draw(false);
                            // }

                            if (response.reload === 'yes') {
                                window.location.reload();
                            } else {
                                $('#timer-clock').html(response.clockHtml);
                                runTimeClock = false;
                            }
                        }
                    }
                })
            });

            $('body').on('click', '.resume-timer-btn2, .resume-active-timer', function() {
                const id = $(this).data('time-id');
                var service_id = $(this).data('service-id');
                var taskId = "{{ $task->id }}";
                let url = "{{ route('timelogs.resume_timer', ':id') }}";
                url = url.replace(':id', id);
                const token = '{{ csrf_token() }}';
                $.easyAjax({
                    url: url,
                    blockUI: true,
                    type: "POST",
                    disableButton: true,
                    buttonSelector: "#resume-timer-btn",
                    data: {
                        timeId: id,
                        taskId: taskId,
                        serviceId: service_id,
                        _token: token
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            if ($('#myActiveTimer').length > 0) {
                                $(MODAL_XL + ' .modal-content').html(response.html);
                            }

                            $('#timer-clock').html(response.clockHtml);
                            if ($('#allTasks-table').length) {
                                window.LaravelDataTables["allTasks-table"].draw(false);
                            }

                            if (response.reload === 'yes') {
                                window.location.reload();
                            }
                            //$('.change-status').val('workingonit');
                            //$('.change-status').trigger("change");
                        }
                    }
                })
            });


            $('body').on('click', '#reminderButton', function() {
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.sendReminder')",
                    icon: 'warning',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText: "@lang('messages.confirmSend')",
                    cancelButtonText: "@lang('app.cancel')",
                    customClass: {
                        confirmButton: 'btn btn-primary mr-3',
                        cancelButton: 'btn btn-secondary'
                    },
                    showClass: {
                        popup: 'swal2-noanimation',
                        backdrop: 'swal2-noanimation'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        var url = "{{ route('tasks.reminder') }}";
                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            blockUI: true,
                            url: url,
                            data: {
                                'id': "{{ $task->id }}",
                                '_token': token
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.comment-like', function() {
                var commentId = $(this).data('comment-id');
                var emojiName = $(this).data('emoji');
                var token = '{{ csrf_token() }}';
                const url = "{{ route('taskComment.save_comment_like') }}";

                $.easyAjax({
                    url: url,
                    type: "POST",
                    container: '#comment-list',
                    disableButton: true,
                    blockUI: true,
                    data: {
                        '_token': token,
                        'commentId': commentId,
                        'emojiName': emojiName
                    },
                    success: function(response) {
                        if (response.status == "success") {
                            $("#emoji-" + commentId).html(response.view);
                        }

                    }
                });
            })


            init(RIGHT_MODAL);
        });
    </script>
</div>