@extends('layouts.app')

@section('form-title') {{ __('Tasks - To do list') }} @endsection
@section('form-sub-title') {{ __('Click a task for more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item">{{ __('Tasks - To do list') }} </li> 
@endsection

@section('content')

<style>
  .pagination-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.page-size-selector a {
    padding: 2px 6px;
    text-decoration: none;
}

.page-size-selector a.active {
    font-weight: bold;
    color: #0d6efd;
}

.page-info {
    font-size: 0.9rem;
    color: #666;
}

/* Mobile */
@media (max-width: 768px) {

    .pagination-toolbar {
        flex-direction: column;
        text-align: center;
    }

}
#tasks_table thead th:first-child {
    cursor: default !important;
}
.checkbox-lg {
    transform: scale(1.25);
}
.sortable-placeholder {
    height: 80px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
}
</style>

<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>{{ __('To do list') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="row">
                            @if(getAuthUser()->can('view tasks of other organizations'))
                            <div class="col-sm-3">
                                {!! organisations(
                                  'filter_organisation', 
                                  null,
                                  'single',
                                  'All organisations'
                                ) !!}
                            </div>
                            <div class="col-sm-3" id="div-users">
                                {!! authUserPullDown(
                                  'filter_user',
                                  null,
                                  getAuthUser()->id,
                                  'single',
                                  'Select user'
                                ); !!}
                            </div>
                            @else
                            <input type="hidden" id="filter_organisation" value="{{ getAuthUser()->organisation ? getAuthUser()->organisation->id : null }}">
                            <div class="col-sm-3" id="div-users">
                                {!! authUserPullDown(
                                  'filter_user',
                                  getAuthUser()->organisation ? getAuthUser()->organisation->id : null,
                                  getAuthUser()->id,
                                  'single',
                                  'Select user'
                                ); !!}
                            </div>
                            @endif

                            

                            <div class="col-sm-6">
                              <div class="input-group">
                                <div class="d-flex gap-2 justify-content-end w-100">
                                    @if(canViewUpdate('add tasks of own organization') || canViewUpdate('add tasks of other organizations'))
                                    <a class="btn btn-primary ms-2 mt-1" href="{{ route('tasks.create') }}"> 
                                      {{ __('New task') }} 
                                    </a>
                                    @endif

                                    <button class="btn btn-primary ms-2 mt-1 owner"> 
                                      {{ __('Tasks (task owner)') }}
                                    </button>

                                    <a href="{{ route('all.tasks') }}" class="btn btn-primary ms-2 mt-1 all-tasks" data-owner="all"> 
                                      {{ __('All tasks') }} 
                                    </a>
                                </div>
                              </div>
                            </div>
                        </div>

                        <div class="row mb-3 mt-3">
                            {{-- status filters --}}
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <span>{{ __('Status:') }}</span>    
                                    </div>
                                    <div class="col-sm-10">
                                        <div class="checkbox-zoom zoom-primary">
                                            <label class="form-label">
                                                <input type="checkbox" class="single-selection" name="task_statuses[]" value="open">
                                                <span class="cr">
                                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                </span>
                                                <span class="task-open">{{ __('Open') }}</span>
                                            </label>
                                        </div>
                                        <div class="checkbox-zoom zoom-primary">
                                            <label class="form-label">
                                                <input type="checkbox" class="single-selection" name="task_statuses[]" value="done">
                                                <span class="cr">
                                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                </span>
                                                <span class="task-done">{{ __('Done') }}</span>
                                            </label>
                                        </div>
                                        <div class="checkbox-zoom zoom-primary">
                                            <label class="form-label">
                                                <input type="checkbox" class="single-selection" name="task_statuses[]" value="closed">
                                                <span class="cr">
                                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                </span>
                                                <span class="task-closed">{{ __('Closed') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Action filters --}}
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <span>{{ __('Action') }}:</span>    
                                    </div>
                                    <div class="col-sm-10">
                                        <div class="checkbox-zoom zoom-primary">
                                            <label class="form-label">
                                                <input type="checkbox" class="single-selection" name="actions[]" value="todo">
                                                <span class="cr">
                                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                </span>
                                                <span class="task-open">{{ __('To do') }}</span>
                                            </label>
                                        </div>
                                        <div class="checkbox-zoom zoom-primary">
                                            <label class="form-label">
                                                <input type="checkbox" class="single-selection" name="actions[]" value="waiting">
                                                <span class="cr">
                                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                </span>
                                                <span class="task-waiting">{{ __('Waiting') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-striped data-table" id="tasks_table">
                                    <thead>
                                        <tr>
                                        <th width="5%">
                                            <div class="d-flex align-items-center justify-content-between gap-2">
                                                <input id="checkall" type="checkbox" class="border-checkbox pointer checkbox-lg" style="margin-top:2px">
                                                <i class="fa-light fa-lock pointer change-selected" data-action="close" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ __('Close selected tasks') }}"></i>
                                                <i class="fa-light fa-trash text-danger pointer change-selected" data-action="delete" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ __('Delete selected tasks') }}"></i>
                                            </div>
                                        </th>
                                        <th width="30%">{{ __('Task') }}</th>
                                        <th width="25%">{{ __('Executor / Receiver') }}</th>
                                        <th width="25%">{{ __('Sent by') }}</th>
                                        <th width="10%">{{ __('Status') }}</th>
                                        <th width="10%">{{ __('Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row mt-3">
                          <div class="d-flex align-items-center gap-3 mt-3">
                            <div>{{ __('With selected') }}:</div>
                            <div>{!! taskStatus('task_status') !!}</div>
                            <button type="button" class="btn btn-primary apply disabled">{{ __("Apply") }}</button>
                          </div>
                        </div>
                        <div class="row mt-3">
                          <div class="col-sm-12">
                              <div class="pagination-toolbar">
                                <div class="page-size-selector">
                                    <span class="me-2">{{ __('Show') }}:</span>
                                    <a href="#" class="page-size" data-size="10">10</a>
                                    <a href="#" class="page-size active" data-size="20">20</a>
                                    <a href="#" class="page-size" data-size="40">40</a>
                                    <a href="#" class="page-size" data-size="80">80</a>
                                </div>
                                <div class="page-info"></div>
                                <div class="dtpagination"></div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>

let tasksTable = null;
const csrfToken = "{{ csrf_token() }}";

const defaultBulkMessages = {
    title: "{{ __('Are you sure you want to update the status of these tasks?') }}",
    button_title: "{{ __('Yes, update') }}",
    success_message: "{{ __('Tasks status updated successfully') }}"
};

const extraFilters = {};

const savedStatuses = localStorage.getItem(loggedInUserId + '_todoTaskStatusFilters');
const savedActions = localStorage.getItem(loggedInUserId + '_taskActionsFilters');

$(document).ready(function () {
    $(".single, .multiple").select2();

    // status filters - restore from localStorage or set default
    if (savedStatuses) {
        $("input[name='task_statuses[]']").prop('checked', false);
        JSON.parse(savedStatuses).forEach(status => {
            $(`input[name='task_statuses[]'][value='${status}']`).prop('checked', true);
        });
    } else {
        // Default: check 'open' if nothing saved
        $("input[name='task_statuses[]'][value='open']").prop('checked', true);
    }

    // action filters - restore from localStorage or set default
    if (savedActions) {
        $("input[name='actions[]']").prop('checked', false);
        JSON.parse(savedActions).forEach(status => {
            $(`input[name='actions[]'][value='${status}']`).prop('checked', true);
        });
    } else {
        // Default: check 'all' if nothing saved
        $("input[name='actions[]']").prop('checked', true);
    }

    initTasksTable();

    // Save task status filters to localStorage on change
    $('input[name="task_statuses[]"]').on('change', function () {
        const checkedStatuses = $('input[name="task_statuses[]"]:checked')
            .map(function () { return this.value; })
            .get();
        localStorage.setItem(loggedInUserId + '_todoTaskStatusFilters', JSON.stringify(checkedStatuses));
        reloadFilteredResults();
    });

    // Save actions filters to localStorage on change
    $('input[name="actions[]"]').on('change', function () {
        const checkedActions = $('input[name="actions[]"]:checked')
            .map(function () { return this.value; })
            .get();
        localStorage.setItem(loggedInUserId + '_taskActionsFilters', JSON.stringify(checkedActions));
        reloadFilteredResults();
    });
    
    $('#filter_organisation').on('change', function () {
        getOrganisationUsers($(this).val());
    });

    $(document).on('change', '#filter_user', function () {
        reloadFilteredResults();
    });

    // pagination click
    $(document).on('click', '.dtpagination .page-link', function (e) {
        e.preventDefault();

        const page = $(this).data('page');

        if (page !== undefined && tasksTable) {
            tasksTable.page(page).draw(false);
        }
    });

    $(document).on('click', '.page-size', function(e){
        e.preventDefault();

        $('.page-size').removeClass('active');
        $(this).addClass('active');

        const size = parseInt($(this).data('size'));

        tasksTable.page.len(size).draw();
    });

    $(document).on('change', "#checkall", function () {
        $(".task-checkbox").prop('checked', $(this).prop("checked"));
        toggleApplyButton();
    });

    $(document).on('change', '.task-checkbox, #task_status', function(){
        toggleApplyButton();
    });

    $(document).on('click', '.apply', function() {
      let selected_tasks = $('.task-checkbox:checked').map(function() {
        return $(this).val();
      }).get().join(',');

      let task_status = $('#task_status').val();

      resetDefaultBulkMessages();

      if (selected_tasks !== '' && task_status !== '') {
        bulkStatusUpdate(selected_tasks, task_status);
      }
    });

    $(document).on('click', '.change-selected', function() {
      let selected_tasks = $('.task-checkbox:checked').map(function() {
        return $(this).val();
      }).get().join(',');

      let action = $(this).data('action');

      if(action === 'delete'){
        defaultBulkMessages.title = "{{ __('Are you sure you want to delete these tasks?') }}";
        defaultBulkMessages.button_title = "{{ __('Yes, delete') }}";
        defaultBulkMessages.success_message = "{{ __('Tasks deleted successfully') }}";
      } else if(action === 'close'){
        defaultBulkMessages.title = "{{ __('Are you sure you want to close these tasks?') }}";
        defaultBulkMessages.button_title = "{{ __('Yes, close') }}";
        defaultBulkMessages.success_message = "{{ __('Tasks closed successfully') }}";
      }

      if (selected_tasks !== '' && action !== '') {
        bulkStatusUpdate(selected_tasks, action);
      }
    });

    $(document).on('click', '.myself', function() {
      let selected_tasks = $(this).data('task');
      let action = $(this).data('action');

      if(action === 'delete'){
        defaultBulkMessages.title = "{{ __('Are you sure you want to delete this task?') }}";
        defaultBulkMessages.button_title = "{{ __('Yes, delete') }}";
        defaultBulkMessages.success_message = "{{ __('Task deleted successfully') }}";
      } else if(action === 'close'){
        defaultBulkMessages.title = "{{ __('Are you sure you want to close this task?') }}";
        defaultBulkMessages.button_title = "{{ __('Yes, close') }}";
        defaultBulkMessages.success_message = "{{ __('Task closed successfully') }}";
      }

      if (selected_tasks !== '' && action !== '') {
        bulkStatusUpdate(selected_tasks, action);
      }
    });

    // task owner filter
    $('.owner').on('click', function(){
        const ownerId = $('#filter_user').val() || null;

        if(ownerId){
            extraFilters.owner = ownerId;
            reloadFilteredResults(true);
        }
    });
});

function getOrganisationUsers(organisation_id){
    $.ajax({
        type: 'POST',
        url: "{{ route('organisation.users') }}",
        data: {organisation_id: organisation_id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            $('#div-users').html(resp);
            $(".single, .multiple").select2();

            reloadFilteredResults();
        }
    });
}

function resetDefaultBulkMessages(){
    defaultBulkMessages.title = "{{ __('Are you sure you want to update the status of these tasks?') }}";
    defaultBulkMessages.button_title = "{{ __('Yes, update') }}";
    defaultBulkMessages.success_message = "{{ __('Tasks status updated successfully') }}";
}

function bulkStatusUpdate(selected_tasks, task_status) {
  swal({
    title: defaultBulkMessages.title,
    text: "",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: defaultBulkMessages.button_title,
    closeOnConfirm: false
  }, function() {
    $.ajax({
      type: 'POST',
      url: "{{ route('tasks.bulk.status.update') }}",
      data: {task_ids: selected_tasks, status: task_status},
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(resp) {
          if(resp.success){
            swal.close();
            reloadFilteredResults();
            toastr["success"](defaultBulkMessages.success_message);
          }
      }
    });
  });
}

function toggleApplyButton(){
    const checkedTasks = $('.task-checkbox:checked').length > 0;
    const statusSelected = $('#task_status').val() !== '';

    if(checkedTasks && statusSelected){
        $('.apply').prop('disabled', false);
        $('.apply').removeClass('disabled');
    }else{
        $('.apply').prop('disabled', true);
        $('.apply').addClass('disabled');
    }
}


function initTasksTable() {

    tasksTable = $('#tasks_table').DataTable({

        processing: true,
        serverSide: true,
        searching: false,
        ordering: true,
        paging: true,
        lengthChange: false,
        pageLength: 20,

        dom: 'rt', // hide default pagination

        ajax: {
            url: "{{ route('todo.tasks') }}",
            type: "POST",
            data: function (d) {
                d._token = csrfToken;
                d.organisation = $('#filter_organisation').val();
                d.user = $('#filter_user').val();
                d.statses = $('input[name="task_statuses[]"]:checked')
                    .map(function () {
                        return this.value;
                    })
                    .get();
                d.actions = $('input[name="actions[]"]:checked')
                    .map(function () {
                        return this.value;
                    })
                    .get();

                Object.assign(d, extraFilters);
            }
        },
        columnDefs: [
          {
              targets: 0,
              orderable: false,
              searchable: false
          }
        ],
        columns: [
            { data: 'icons', orderable: false, className: 'align-middle'},
            { data: 'task_title' },
            { data: 'executor' },
            { data: 'sent_by' },
            { data: 'status' },
            { data: 'action' }
        ],
        createdRow: function(row, data, dataIndex){
            if(data.status === 'open'){
                $(row).addClass('task-open');
            }

            if(data.status === 'done'){
                $(row).addClass('task-done');
            }

            if(data.status === 'closed'){
                $(row).addClass('task-closed');
            }

            $(row).attr('data-id', data.id);
            $(row).attr('data-order', data.task_order);
        },
        drawCallback: function(){
            makeRowsSortable();
            renderPagination(this.api());
        }
    });
}

function makeRowsSortable() {
    $("#tasks_table tbody").sortable({
        handle: ".drag-handle",
        helper: fixWidthHelper,
        placeholder: "sortable-placeholder",

        update: function(event, ui){

            let currentRow = ui.item;

            let prevRow = currentRow.prev();
            let nextRow = currentRow.next();

            let prevOrder = prevRow.length ? parseFloat(prevRow.data('order')) : null;
            let nextOrder = nextRow.length ? parseFloat(nextRow.data('order')) : null;

            let taskId = currentRow.data('id');

            saveNewOrder(taskId, prevOrder, nextOrder);
        }
    }).disableSelection();
}

function fixWidthHelper(e, tr) {
    let $originals = tr.children();
    let $helper = tr.clone();

    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width());
    });

    return $helper;
}

function saveNewOrder(taskId, prevOrder, nextOrder) {
    $.ajax({
        url: "{{ route('update.task.sort.order') }}",
        type: "POST",
        data: {
            _token: csrfToken,
            task_id: taskId,
            prev_order: prevOrder,
            next_order: nextOrder
        },
        success: function(){
            toastr.success("Order updated");

            // reload to sync UI
            //reloadFilteredResults();
        }
    });
}

/**
 * CUSTOM PAGINATION
 */
function renderPagination(api) {

    const info = api.page.info();

    const current = info.page;
    const pages   = info.pages;
    const total   = info.recordsDisplay;

    const $container = $('.dtpagination');

    if(pages <= 1){
        $container.html('');
        $('.page-info').html('');
        return;
    }

    let html = '<ul class="pagination mb-0">';

    html += current > 0
        ? `<li class="page-item"><a class="page-link" href="#" data-page="0">«</a></li>`
        : `<li class="page-item disabled"><span class="page-link">«</span></li>`;

    html += current > 0
        ? `<li class="page-item"><a class="page-link" href="#" data-page="${current-1}">‹</a></li>`
        : `<li class="page-item disabled"><span class="page-link">‹</span></li>`;

    let start = Math.max(0, current - 2);
    let end   = Math.min(pages - 1, current + 2);

    for(let i=start;i<=end;i++){

        html += `
        <li class="page-item ${i === current ? 'active':''}">
            <a class="page-link" href="#" data-page="${i}">
                ${i+1}
            </a>
        </li>`;
    }

    html += current < pages-1
        ? `<li class="page-item"><a class="page-link" href="#" data-page="${current+1}">›</a></li>`
        : `<li class="page-item disabled"><span class="page-link">›</span></li>`;

    html += current < pages-1
        ? `<li class="page-item"><a class="page-link" href="#" data-page="${pages-1}">»</a></li>`
        : `<li class="page-item disabled"><span class="page-link">»</span></li>`;

    html += '</ul>';

    $container.html(html);

    $('.page-info').html(`Page ${current+1} of ${pages} (${total} records)`);

}

function reloadFilteredResults(hasExtraFilters = false) {
    if (tasksTable) {
        let organisation = $('#filter_organisation').val();
        let user = $('#filter_user').val();

        if(!hasExtraFilters){
            delete extraFilters.owner;
        }

        if(organisation && user){
            tasksTable.ajax.reload(null, true);
        }else{
            tasksTable.clear().draw();
        }
    }
}
</script>
@endpush