@php
$addFollowUpPermission = user()->permission('edit_tasks');
$viewFollowUpPermission = user()->permission('view_tasks');
$editFollowUpPermission = user()->permission('edit_tasks');
$deleteFollowUpPermission = user()->permission('edit_tasks');
$taskFollowUps = $taskFollowUps ?? collect();
@endphp

<style>
    .invoice-due-overdue{
        color: #dc3545;
        font-weight: 600;
    }
</style>

<!-- TAB CONTENT START -->
<div class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-email-tab">
    <div class="d-flex p-20">
        @if ($task->boardColumn->slug == 'completed')
            <x-alert type="info" icon="info-circle">@lang('messages.cantAddFollowup')</x-alert>
        @endif
        @if ($task->boardColumn->slug != 'completed' && ($addFollowUpPermission == 'all' || $addFollowUpPermission == 'added' || $addFollowUpPermission == 'owned' || $addFollowUpPermission == 'both'))
            <div class="row">
                <div class="col-md-12">
                    <a class="f-15 f-w-500" href="javascript:;" id="add-task-followup"><i
                            class="icons icon-plus font-weight-bold mr-1"></i>@lang('modules.lead.addFollowUp')</a>
                </div>
            </div>
        @endif
    </div>

    <div class="d-flex flex-wrap p-20" id="task-file-list">
        @if ($viewFollowUpPermission == 'all' || $viewFollowUpPermission == 'added' || $viewFollowUpPermission == 'owned' || $viewFollowUpPermission == 'both')
            <x-table headType="thead-light">
                <x-slot name="thead">
                    <th>@lang('app.createdOn')</th>
                    <th>@lang('modules.lead.nextFollowUp')</th>
                    <th>@lang('app.remark')</th>
                    <th>@lang('app.status')</th>
                    <th class="text-right">@lang('app.action')</th>
                </x-slot>

                @forelse ($taskFollowUps as $followUp)
                    <tr id="row-{{ $followUp->id }}">
                        <td>{{ $followUp->created_at->timezone(company()->timezone)->format(company()->date_format . ' ' . company()->time_format) }}</td>
                        {{-- <td>{{ $followUp->next_follow_up_date->format(company()->date_format . ' ' . company()->time_format) }}</td> --}}
                        <td>
                            @if (!$followUp->next_follow_up_date)
                                --
                            @else
                                @php
                                    $date = \Carbon\Carbon::parse($followUp->next_follow_up_date)
                                        ->timezone(company()->timezone);

                                    $formatted = $date->translatedFormat(company()->date_format)
                                        . '<br>' .
                                        $date->translatedFormat(company()->time_format);

                                    $currentDate = now()->timezone(company()->timezone);

                                    // check for apply invoice-due-overdue
                                    if ($date->toDateString() < $currentDate
                                    && $followUp->status == 'pending'
                                    ) {
                                        // $formatted .= '<br><label class="badge badge-danger">' . __('app.pending') . '</label>';
                                        $formatted = '<span class="invoice-due-overdue">' . $formatted . '</span>';
                                    }

                                    echo $formatted;
                                @endphp
                            @endif
                        </td>
                        <td>{{ $followUp->remark }}</td>
                        <td>
                            @if ($editFollowUpPermission == 'all' || ($editFollowUpPermission == 'both') || ($editFollowUpPermission == 'added' && $followUp->added_by == user()->id))
                                <select class="form-control select-picker statusChange" data-followup-id="{{ $followUp->id }}" data-container="body">
                                    <option value="pending" data-content="<i class='fa fa-circle mr-2 text-warning'></i> @lang('app.pending')" @selected($followUp->status == 'pending')>@lang('app.pending')</option>
                                    <option value="canceled" data-content="<i class='fa fa-circle mr-2 text-red'></i> @lang('app.canceled')" @selected($followUp->status == 'canceled')>@lang('app.canceled')</option>
                                    <option value="completed" data-content="<i class='fa fa-circle mr-2 text-dark-green'></i> @lang('app.completed')" @selected($followUp->status == 'completed')>@lang('app.completed')</option>
                                </select>
                            @else
                                @if ($followUp->status == 'pending')
                                    <i class="fa fa-circle mr-1 text-yellow f-10"></i>
                                @elseif ($followUp->status == 'canceled')
                                    <i class="fa fa-circle mr-1 text-red f-10"></i>
                                @elseif ($followUp->status == 'completed')
                                    <i class="fa fa-circle mr-1 text-dark-green f-10"></i>
                                @endif
                                {{ ucfirst($followUp->status) }}
                            @endif
                        </td>
                        <td class="text-right">
                            <div class="dropdown ml-auto file-action">
                                <button class="btn btn-lg f-14 p-0 text-lightest 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 ($editFollowUpPermission == 'all' || ($editFollowUpPermission == 'both') || ($editFollowUpPermission == 'added' && $followUp->added_by == user()->id))
                                        <a class="cursor-pointer d-block text-dark-grey f-13 py-3 px-3 edit-table-row-task-followup"
                                            href="javascript:;" data-followup-id="{{ $followUp->id }}">
                                            @lang('app.edit')
                                        </a>
                                    @endif
                                    @if ($deleteFollowUpPermission == 'all' || (($deleteFollowUpPermission == 'added' || $deleteFollowUpPermission == 'both')  && user()->id == $followUp->added_by))
                                        <a class="cursor-pointer d-block text-dark-grey f-13 pb-3 px-3 delete-table-row-task-followup"
                                            data-followup-id="{{ $followUp->id }}" href="javascript:;">
                                            @lang('app.delete')
                                        </a>
                                    @endif

                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5">
                            <x-cards.no-record :message="__('messages.noRecordFound')" icon="clock" />
                        </td>
                    </tr>
                @endforelse
            </x-table>
        @endif
    </div>
</div>
<!-- TAB CONTENT END -->

<script>
    $(document).ready(function() {
        if ($('.select-picker').length > 0) {
            $('.select-picker').selectpicker();
        }

        $('#add-task-followup').click(function() {
            var url = '{{ route('tasks.follow_up', [$task->id]) }}';
            $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_LG, url);
        });

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

        $('body').on('click', '.delete-table-row-task-followup', function() {
            var id = $(this).data('followup-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('tasks.follow_up_delete', ':id') }}";
                    url = url.replace(':id', id);

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

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

        $('body').on('change', '.statusChange', function() {
            var status = $(this).val();
            var id = $(this).data('followup-id');
            var url = "{{ route('tasks.change_follow_up_status') }}";
            var token = "{{ csrf_token() }}";

            $.easyAjax({
                type: 'POST',
                url: url,
                data: {
                    '_token': token,
                    'followupId': id,
                    'status': status
                },
                success: function(response) {
                    if (response.status == "success") {
                        window.location.reload();
                    }
                }
            });
        });
    });
</script>