{% extends 'base.html.twig' %}

{% block title %}
	{{ parent() }}
	|
	{{ 'view_workflow.title'|trans }}
{% endblock %}

{% block titlesm %}
	{{ 'view_workflow.title'|trans }}
	<i class="fa-solid fa-arrow-right fa-flip arrow-cut-animation fa-solid fa-arrow-right fa-flip"></i>
	{{ workflow.name }}
{% endblock titlesm %}
{% block body %}
<div id="workflows-details">


    <div class="link-help-view text-end mb-4 mx-4">
        <a href="https://myddleware.github.io/myddleware/#/advanced_usage?id=workflows">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
            {{ 'rule.help' | trans }}
        </a>
    </div>

    <div class="workflows-btn">
        <a href="{{ path('workflow_list') }}" class="btn btn-outline-primary m-2">
            {{ 'view_workflow.back'| trans }}</a>
        <a href="{{ path('workflow_edit', {'id': workflow.id}) }}" class="btn btn-outline-success m-2">
            {{ 'view_workflow.edit'| trans }}</a>
        <form method="post" action="{{ path('workflow_delete', {'id': workflow.id}) }}" style="display: inline;">
            <button type="submit"
                    onclick="return confirm('Are you sure you want to delete this workflow ?');"
                    class="btn btn-outline-danger m-2">
                {{ 'view_workflow.delete'| trans }}
            </button>
        </form>
    </div>

    <div>
        {% for message in app.flashes('success') %}
            <div class="alert alert-success" role="alert">{{ message }}</div>
        {% endfor %}
        {% for message in app.flashes('warning_workflow') %}
            <div class="alert alert-warning" role="alert">{{ message }}</div>
        {% endfor %}
    </div>

    {% if workflow is not null %}
        <div class="container text-left pt-3">
            <h4>{{ 'view_workflow.title'| trans | upper }}</h4>
        </div>
        <div class="workflow-details container mt-4">
            <div class="card-header mb-4 card-title-workflow">
            </div>
            <div id="workflow-content" class="collapse show px-3">
                <div class="workflow-row mb-2">
                    <div class="workflow-col mb-2">
                        <strong>{{ 'view_workflow.name'| trans | upper }}</strong>
                        <div>{{ workflow.name }}</div>
                    </div>
                    <div class="workflow-col mb-2">
                        <strong>{{ 'view_workflow.create_by'| trans | upper }}</strong>
                        <div>{{ workflow.createdBy.username }}</div>
                    </div>
                </div>
                <div class="workflow-row mb-2">
                    <div class="workflow-col mb-2">
                        <strong>{{ 'view_workflow.rule'| trans | upper }}</strong>
                        <div>
                            <a href="{{ path('regle_open', {'id': workflow.rule.id}) }}" class="help-link all-link">
                                {{ workflow.rule.name }}
                            </a>
                        </div>
                    </div>
                    <div class="workflow-col mb-2">
                        <strong>{{ 'view_workflow.status'| trans | upper }}</strong>
                        <div class="form-check form-switch text-center">
                            <input class="workflow_status form-check-input workflow-check-input" type="checkbox" id="activeWorkflow_{{ workflow.id }}" data-id="{{ workflow.id }}" data-type="workflow"
                                   {{ workflow.active ? 'checked' : '' }}>
                        </div>
                    </div>
                </div>
                <div class="workflow-row mb-2">
                    <div class="workflow-col mb-2">
                        <strong>{{ 'view_workflow.description'| trans | upper }}</strong>
                        <div>{{ workflow.description }}</div>
                    </div>
                </div>
                <div class="card m-4">
                    <div class="mb-3 px-3 pt-3">
                        <strong>{{ 'list_workflow.th.condition'| trans | upper }}</strong>
                    </div>
                    <div class="px-3 pb-3">
                        <div>{{ workflow.condition }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mt-5 pt-5 text-left">
            <h4>{{ 'view_workflow.actions_list'| trans | upper }}</h4>
        </div>
        <div class="workflow-card-table container workflow-details">
            <div class="card-header card-title-workflow">
                <button class="minus-workflow-actions toggle-button btn btn-outline-secondary btn-sm float-end" data-target="#actions-content" aria-expanded="true" aria-controls="actions-content">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
            <div id="actions-content" class="collapse show">
                {% if workflow.getWorkflowActions|length > 0 %}
                    <div class="table-responsive">
                        <table class="table workflow-table">
                            <thead>
                                <tr>
                                    <th class="text-center">{{ 'view_workflow.name'|trans }}</th>
                                    <th class="text-center">{{ 'view_workflow.action'|trans }}</th>
                                    <th class="text-center">{{ 'view_workflow.description'|trans }}</th>
                                    <th class="text-center">{{ 'view_workflow.order'|trans }}</th>
                                    <th class="text-center">{{ 'view_workflow.arguments'|trans }}</th>
                                    <th class="text-center">{{ 'list_workflow.th.status'|trans }}</th>
                                    <th class="text-center">{{ 'list_workflow.th.option'|trans }}</th>
                                </tr>
                            </thead>
                            <tbody class="workflow-actions-collapse-body">
                                {% for action in workflow.getWorkflowActions %}
                                    <tr>
                                        <td class="fw-semibold">
                                            <a href="{{ path('workflow_action_show', {'id': action.id}) }}"
                                               class="btn btn-sm btn-outline-primary">
                                                {{ action.name }}
                                            </a>
                                        </td>
                                        <td class="text-center">{{ action.action }}</td>
                                        <td class="text-center">{{ action.description }}</td>
                                        <td class="text-center">{{ action.order }}</td>
                                        <td class="text-left">
                                            {% if action.arguments is iterable %}
                                                <ul class="list-unstyled mb-0 text-start d-inline-block">
                                                    {% for key, argument in action.arguments %}
                                                        <li>
                                                            <strong>{{ key }}:</strong>
                                                            {% if argument is iterable %}
                                                                <ul class="list-unstyled ms-3">
                                                                    {% for subKey, subArgument in argument %}
                                                                        <li><strong>{{ subKey }}:</strong> {{ subArgument }}</li>
                                                                    {% endfor %}
                                                                </ul>
                                                            {% else %}
                                                                {{ argument }}
                                                            {% endif %}
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            {% else %}
                                                {{ action.arguments }}
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            <div class="form-check form-switch d-inline-flex justify-content-center">
                                                <input class="form-check-input workflow-check-input workflow-action-list-inside-workflow-show" type="checkbox" id="activeWorkflowAction_{{ action.id }}" data-id="{{ action.id }}" data-type="workflowAction" {{ action.active ? 'checked' : '' }}>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ path('workflow_action_show', {'id': action.id}) }}" title="{{ 'list_rule.btn.view'|trans }}" class="btn btn-sm btn-outline-success rounded-circle me-1">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{{ path('workflow_action_edit', {'id': action.id}) }}"
                                               title="{{ 'list_rule.btn.edit'|trans }}"
                                               class="btn btn-sm btn-outline-primary rounded-circle me-1">
                                                <i class="fa fa-pen"></i>
                                            </a>
                                            <form method="post" action="{{ path('workflow_action_delete', {'id': action.id}) }}" style="display: inline;">
                                                <button type="submit"
                                                        class="delete btn btn-sm btn-outline-danger rounded-circle"
                                                        onclick="return confirm('Are you sure you want to delete this workflow ?');"
                                                        title="{{ 'list_rule.btn.delete'|trans }}">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted text-center">{{ 'view_workflow_action.no_actions'|trans|default('No action') }}</p>
                {% endif %}
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="{{ path('workflow_action_create_with_workflow', {'workflowId': workflow.id}) }}"
               class="btn btn-primary px-4 rounded-pill">
                <i class="fa fa-plus"></i> {{ 'view_workflow.add_action'| trans }}
            </a>
        </div>

        <div class="container mt-5 pt-5 text-left">
            <h4>{{ 'view_workflow.logs'| trans | upper }}</h4>
        </div>

        <div class="workflow-card-table container workflow-details">
            <div class="card-header card-title-workflow">
                <button id="toggle-logs-btn"
                        class="toggle-button btn btn-outline-secondary btn-sm float-end" data-workflow-id="{{ workflow.id }}" data-target="#logs-content" aria-expanded="false" aria-controls="logs-content">
                    <i class="fa fa-plus"></i>
                </button>
            </div>

            <div id="logs-content" class="collapse" style="display: none;">
                <div id="logs-table-container" class="p-3 text-center">
                    <div class="spinner-border spinner-border-sm" role="status" aria-label="Loading"></div>
                    <span class="ms-2">{{ 'view_workflow.loading_logs'|trans|default('Loading…') }}</span>
                </div>
            </div>
        </div>

    {% else %}
        <p class="display-6">{{ 'list_workflow.empty'|trans }}</p>
    {% endif %}


    {% block js %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
    {% endblock %}

    {% block js_workflow_toggle %}
        <script type="text/javascript">
            var pathWorkflowtoggle = "{{ path('workflow_toggle', {'id': workflow.id}) }}";
           
        </script>
    {% endblock %}

    {% block js_logs_lazy_loading %}
        <script type="text/javascript">
            $(function () {
                let logsLoaded = false;

                $('#toggle-logs-btn').on('click', function() {
                    const logsContent = $('#logs-content');
                    const toggleIcon = $(this).find('i');

                    if (logsContent.is(':visible')) {
                        logsContent.hide();
                        toggleIcon.removeClass('fa-minus').addClass('fa-plus');
                        return;
                    }

                    logsContent.show();
                    toggleIcon.removeClass('fa-plus').addClass('fa-minus');

                    if (!logsLoaded) {
                        $.ajax({
                            url: "{{ path('workflow_show_logs', {'id': workflow.id}) }}",
                            type: 'GET',
                            headers: { 'X-Requested-With': 'XMLHttpRequest' },
                            success: function(response) {
                                $('#logs-table-container').html(response.html || response);
                                logsLoaded = true;
                            },
                            error: function(xhr, status, error) {
                                $('#logs-table-container').html(
                                    '<p class="text-danger text-center mb-0">Error loading logs: ' + error + '</p>'
                                );
                            }
                        });
                    }
                });
            });
        </script>
    {% endblock %}
</div>
{% endblock %}