{% extends '@MauticCore/Default/content.html.twig' %}

{% block headerTitle focusOnly ? 'Task Focus' : 'Tasks' %}

{% block actions %}
    {% if canCreateTask %}
        {% set actionReturnUrl = path('mautic_dealflow_task_queue', {
            'pipelineId': selectedPipeline.getId(),
            'focus': focusOnly ? 1 : null,
            'mine': mineOnly ? 1 : null,
            'ownerId': ownerFilterId and not mineOnly ? ownerFilterId : null,
        }) %}
        <a
            class="btn btn-primary"
            href="{{ path('mautic_dealflow_task_new', {'pipelineId': selectedPipeline.getId(), 'returnUrl': actionReturnUrl}) }}"
            data-toggle="ajaxmodal"
            data-target="#MauticSharedModal"
            data-header="New Task"
            data-href="{{ path('mautic_dealflow_task_new', {'pipelineId': selectedPipeline.getId(), 'modal': 1, 'contentOnly': 1, 'returnUrl': actionReturnUrl}) }}"
        >
            <i class="ri-add-line"></i>
            New Task
        </a>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="row mb-lg">
        <div class="col-md-3">
            <div class="panel panel-default mb-0">
                <div class="panel-body">
                    <div class="text-muted small">Open Tasks</div>
                    <div class="h2 mb-0">{{ metrics.open }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default mb-0">
                <div class="panel-body">
                    <div class="text-muted small">High Priority</div>
                    <div class="h2 mb-0">{{ metrics.urgent }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default mb-0">
                <div class="panel-body">
                    <div class="text-muted small">Overdue</div>
                    <div class="h2 mb-0">{{ metrics.overdue }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default mb-0">
                <div class="panel-body">
                    <div class="text-muted small">Reminders Due</div>
                    <div class="h2 mb-0">{{ metrics.remindersDue }}</div>
                </div>
            </div>
        </div>
    </div>

    <form id="dealflow_task_queue_filters" class="form-inline mb-lg" method="get">
        <div class="form-group mr-md">
            <label class="mr-sm" for="dealflow_task_queue_pipeline">Pipeline</label>
            <select class="form-control" id="dealflow_task_queue_pipeline" name="pipelineId" onchange="this.form.requestSubmit()">
                {% for pipeline in pipelines %}
                    <option value="{{ pipeline.getId() }}" {% if selectedPipeline and pipeline.getId() == selectedPipeline.getId() %}selected{% endif %}>
                        {{ pipeline.getName() }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group mr-md">
            <label class="mr-sm" for="dealflow_task_queue_owner">Owner</label>
            <select class="form-control" id="dealflow_task_queue_owner" name="ownerId" onchange="this.form.requestSubmit()">
                <option value="">All owners</option>
                {% for label, ownerId in ownerChoices %}
                    <option value="{{ ownerId }}" {% if ownerFilterId and ownerFilterId == ownerId and not mineOnly %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        {% if currentUserId %}
            <label class="checkbox-inline mr-md">
                <input type="checkbox" name="mine" value="1" {% if mineOnly %}checked{% endif %} onchange="this.form.requestSubmit()">
                Assigned to me
            </label>
        {% endif %}
        <label class="checkbox-inline" title="Shows only overdue and high-priority tasks">
            <input type="checkbox" name="focus" value="1" {% if focusOnly %}checked{% endif %} onchange="this.form.requestSubmit()">
            Focus mode
        </label>
    </form>
    <script>
        (function () {
            var form = document.getElementById('dealflow_task_queue_filters');
            if (!form) { return; }
            // Strip empty params (e.g. ownerId= when "All owners" is selected) from the
            // GET query at serialization time. Operating on the entry list — instead of
            // disabling DOM controls — leaves no state behind if the navigation is
            // cancelled or the page is restored from the back/forward cache.
            form.addEventListener('formdata', function (event) {
                var emptyKeys = [];
                event.formData.forEach(function (value, key) {
                    if ('' === value) { emptyKeys.push(key); }
                });
                emptyKeys.forEach(function (key) { event.formData.delete(key); });
            });
        })();
    </script>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>Task</th>
            <th>Deal</th>
            <th>Company</th>
            <th>Priority</th>
            <th>Owner</th>
            <th>Reminder</th>
            <th>Due</th>
        </tr>
        </thead>
        <tbody>
        {% for item in items %}
            {% set deal = item.getDeal() %}
            {% set context = deal and deal.getId() ? (dealContexts[deal.getId()] ?? {'companyName': null}) : {'companyName': null} %}
            <tr>
                <td>
                    <strong>{{ item.getTitle() }}</strong>
                    {% if item.getDescription() %}
                        <div class="small text-muted">{{ item.getDescription()|striptags }}</div>
                    {% endif %}
                </td>
                <td>
                    {% if deal %}
                        <a href="{{ path('mautic_dealflow_view', {'objectId': deal.getId()}) }}">{{ deal.getTitle() }}</a>
                        <div class="small text-muted">{{ deal.getStage() ? deal.getStage().getName() : 'No stage' }}</div>
                    {% else %}
                        <span class="text-muted">Unavailable</span>
                    {% endif %}
                </td>
                <td>{{ context.companyName ?: 'Unassigned' }}</td>
                <td>
                    <span class="label label-{{ item.getPriority() in ['urgent', 'high'] ? 'danger' : (item.getPriority() == 'low' ? 'default' : 'info') }}">
                        {{ item.getPriority()|upper }}
                    </span>
                </td>
                <td>{{ item.getOwnerId() ? (taskOwners[item.getOwnerId()] ?? ('User #' ~ item.getOwnerId())) : 'Unassigned' }}</td>
                <td>{{ item.getReminderAt() ? item.getReminderAt().format('Y-m-d H:i') : 'None' }}</td>
                <td>{{ item.getDueAt() ? item.getDueAt().format('Y-m-d H:i') : 'No due date' }}</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="7" class="text-muted">{{ focusOnly ? 'No tasks need focus right now.' : 'No open tasks found.' }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    {% if totalPages is defined and totalPages > 1 %}
        <nav class="text-center">
            <ul class="pagination">
                {% if page > 1 %}
                    <li><a href="{{ path('mautic_dealflow_task_queue', {pipelineId: selectedPipeline.getId(), focus: focusOnly ? 1 : null, mine: mineOnly ? 1 : null, ownerId: ownerFilterId and not mineOnly ? ownerFilterId : null, page: page - 1}) }}" data-toggle="ajax">&laquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                {% endif %}
                {% for p in 1..totalPages %}
                    <li class="{{ p == page ? 'active' : '' }}"><a href="{{ path('mautic_dealflow_task_queue', {pipelineId: selectedPipeline.getId(), focus: focusOnly ? 1 : null, mine: mineOnly ? 1 : null, ownerId: ownerFilterId and not mineOnly ? ownerFilterId : null, page: p}) }}" data-toggle="ajax">{{ p }}</a></li>
                {% endfor %}
                {% if page < totalPages %}
                    <li><a href="{{ path('mautic_dealflow_task_queue', {pipelineId: selectedPipeline.getId(), focus: focusOnly ? 1 : null, mine: mineOnly ? 1 : null, ownerId: ownerFilterId and not mineOnly ? ownerFilterId : null, page: page + 1}) }}" data-toggle="ajax">&raquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% endblock %}
