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

{% block headerTitle 'Deal Stages' %}

{% block actions %}
    {% if canEditSettings %}
        {% set actionReturnUrl = path('mautic_dealflow_stage_index', {'pipelineId': selectedPipeline.getId()}) %}
        <a
            class="btn btn-primary"
            href="{{ path('mautic_dealflow_stage_new', {'pipelineId': selectedPipeline.getId(), 'returnUrl': actionReturnUrl}) }}"
            data-toggle="ajaxmodal"
            data-target="#MauticSharedModal"
            data-header="New Deal Stage"
            data-href="{{ path('mautic_dealflow_stage_new', {'pipelineId': selectedPipeline.getId(), 'modal': 1, 'contentOnly': 1, 'returnUrl': actionReturnUrl}) }}"
        >
            <i class="ri-add-line"></i>
            New Stage
        </a>
    {% endif %}
{% endblock %}

{% block content %}
    {{ include('@DealFlow/_styles.html.twig') }}

    {% if pipelines|length > 1 %}
        <form class="form-inline mb-lg" method="get">
            <div class="form-group">
                <label class="mr-sm" for="dealflow_stage_pipeline">Pipeline</label>
                <select class="form-control" id="dealflow_stage_pipeline" name="pipelineId" onchange="this.form.submit()">
                    {% for pipeline in pipelines %}
                        <option value="{{ pipeline.getId() }}" {% if selectedPipeline and pipeline.getId() == selectedPipeline.getId() %}selected{% endif %}>
                            {{ pipeline.getName() }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </form>
    {% endif %}

    <table class="table table-hover dealflow-admin-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Slug</th>
            <th>Type</th>
            <th>Probability</th>
            <th>Sort</th>
            <th>Active</th>
            <th>Order</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        {% for item in items %}
            <tr>
                <td>{{ item.getName() }}</td>
                <td>{{ item.getSlug() }}</td>
                <td>{{ item.getStageType() }}</td>
                <td>{{ item.getProbability() }}%</td>
                <td>{{ item.getSortOrder() }}</td>
                <td>{{ item.isPublished() ? 'Yes' : 'No' }}</td>
                <td>
                    {% if canEditSettings %}
                        <div class="btn-group btn-group-xs">
                            <button class="btn btn-default" type="button"
                                {% if loop.first %}disabled{% endif %}
                                data-dealflow-stage-move="{{ path('mautic_dealflow_stage_move', {'objectId': item.getId(), 'direction': 'up', 'pipelineId': selectedPipeline.getId()}) }}"
                                data-dealflow-stage-token="{{ csrf_token('dealflow_stage_move_' ~ item.getId() ~ '_up') }}"
                                data-dealflow-pipeline-id="{{ selectedPipeline.getId() }}">Up</button>
                            <button class="btn btn-default" type="button"
                                {% if loop.last %}disabled{% endif %}
                                data-dealflow-stage-move="{{ path('mautic_dealflow_stage_move', {'objectId': item.getId(), 'direction': 'down', 'pipelineId': selectedPipeline.getId()}) }}"
                                data-dealflow-stage-token="{{ csrf_token('dealflow_stage_move_' ~ item.getId() ~ '_down') }}"
                                data-dealflow-pipeline-id="{{ selectedPipeline.getId() }}">Down</button>
                        </div>
                    {% endif %}
                </td>
                <td>
                    {% if canEditSettings %}
                        <a href="{{ path('mautic_dealflow_stage_edit', {'objectId': item.getId(), 'pipelineId': selectedPipeline.getId()}) }}">Edit</a>
                        <span class="text-muted">|</span>
                        <a href="{{ path('mautic_dealflow_stage_delete', {'objectId': item.getId(), 'pipelineId': selectedPipeline.getId()}) }}" onclick="return confirm('Are you sure you want to delete this item? This action cannot be undone.')">Delete</a>
                    {% endif %}
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="8" class="text-muted">No stages configured.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <script>
        (function () {
            document.querySelectorAll('[data-dealflow-stage-move]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var url = btn.getAttribute('data-dealflow-stage-move');
                    var token = btn.getAttribute('data-dealflow-stage-token');
                    var pipelineId = btn.getAttribute('data-dealflow-pipeline-id');

                    if (!url || btn.disabled) {
                        return;
                    }

                    btn.disabled = true;

                    var formData = new FormData();
                    formData.append('_token', token);

                    fetch(url, {
                        method: 'POST',
                        body: formData,
                        headers: {'X-Requested-With': 'XMLHttpRequest'}
                    }).then(function () {
                        var listUrl = mauticBasePath + '/s/deal-flow/settings/stages';
                        if (pipelineId) {
                            listUrl += '?pipelineId=' + encodeURIComponent(pipelineId);
                        }
                        Mautic.loadContent(listUrl);
                    }).catch(function () {
                        btn.disabled = false;
                    });
                });
            });
        }());
    </script>
{% endblock %}
