{% extends "base.html.twig" %}
{% block title %}Stage Dashboard | NIS{% endblock %}
{% block stylesheets %}
{{ parent() }}
	{{encore_entry_link_tags('mainCSS')}}
    {{encore_entry_link_tags('jqueryFilerCSS')}}
     {{encore_entry_link_tags('stageDashboardCSS')}}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
{% endblock %}
{% block body %}
{{ include("mx/nav_menu.twig", {option:'stages-dashboard'} ) }}
<main id="main">
    <div class="row">
        <div class="col-12">
            <div class="title-container">
                <div class="title-content">
                    Stages Dashboard
                </div>
            </div>
            <div class="p-2">
                <a class=" btn-header btn" @click="filterProcessByStatus('cwe')">Completed With errors: [[processCompletedWError.length ]]</a>
                <a class=" btn-header btn" @click="filterProcessByStatus('pu')">Unfinished: [[processUnfinished.length ]]</a>
                <a class=" btn-header btn" @click="filterProcessByStatus('e')">Failed: [[processWError.length ]]</a>
                 <a class=" btn-header btn" @click="filterProcessByStatus('f')">Fixed: [[processFixed.length ]]</a>
                <a class=" btn-header btn" @click="filterProcessByStatus('all')">See all</a>
            </div>
        </div>
    </div>

    <div class="row" id="tableStagesContainer">
        <div class="col-12">
            <div class="content-table-stages"  :class="{ 'table-responsive': isNarrowScreen }" id="errors-table">
                <table class="tableStages w-100" id="tableStages_errors">
                    <thead>
                        <tr>
                            <td width="10%">Tried By</td>
                            <td width="18%">Client Name</td>
                            <td width="20%">Email</td>
                            <td width="10%">Status</td>
                            <td width="15%">Process Date</td>
                            <td width="10%">Reference</td>
                            <td width="22%">Actions</td>
                        </tr>
                    </thead>
                </table>
                <div id="viewStagesModal" class="modal" tabindex="-1" aria-hidden="true" >
                    <div class="modal-dialog modal-bottom">
                        <div class="modal-content p-4">
                            <h4 class="modal-title">Stages Information</h4>
                             <p> <span style="color: #039be5;" class="small-text">[[stageReference]]  </span>  :  ([[Object.keys(viewStagesData).length]] Process)</p>
                            <template v-if="Object.keys(viewStagesData).length > 0">
                                    <div class="accordion" id="accordionExample">
                                        <template v-for="stage in viewStagesData">
                                            <div class="accordion-item" :key="'collapse_' + stage.id_task">
                                                <h2 class="accordion-header" :id="'heading_' + stage.id_task">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#collapse_' + stage.id_task" aria-expanded="false" :aria-controls="'collapse_' + stage.id_task">
                                                        <i v-if="stage.status !== 'completed'" class="material-icons text-danger">report_problem</i>
                                                        <i v-else class="material-icons text-success">check_circle_outline</i>
                                                        [[stage.etapa]]
                                                    </button>
                                                </h2>
                                                <div :id="'collapse_' + stage.id_task" class="accordion-collapse collapse" aria-labelledby="'heading_' + stage.id_task" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        <p>Message: [[stage.message]]</p>
                                                        <p>Process Data:</p>
                                                        <div class="content-process-data row">
                                                            <div class="input-field col-lg-4 col-5" style="margin: 0 !important;">
                                                                <textarea style="margin: 0 !important;" :id="'textarea_' + stage.etapa + stage.id_process" readonly>[[stage.task_data]]</textarea>
                                                            </div>
                                                            <div class="button col-1" style="margin: 0 10px !important;">
                                                                <a class="btn-floating"><i class="fas fa-copy" @click="copyContentTextArea('textarea_' + stage.etapa + stage.id_process)"></i></a>
                                                            </div>
                                                            <div class="button col-2" style="margin: 0 10px !important;" v-if="stage.status !== 'completed'">
                                                                <a class="bg-secondary btn disabled"><i class="fas fa-sync-alt"></i> Execute the process</a>
                                                            </div>
                                                        </div>
                                                        <div v-show="stage.technical_error !== ''">
                                                            <strong>Technical Error:</strong>
                                                            <div class="content-technical-error row">
                                                                <div class="input-field col-lg-4 col-5" style="margin: 0 !important;">
                                                                    <textarea style="margin: 0 !important;" :id="'textarea_error' + stage.etapa + stage.id_process" class="" readonly>[[stage.technical_error]]</textarea>
                                                                </div>
                                                                <div class="button col-5" style="margin: 0 10px !important;">
                                                                    <a class="btn-floating btn-header"><i class="fas fa-copy" @click="copyContentTextArea('textarea_error' + stage.etapa + stage.id_process)"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                            </template>
                        </div>
                        <div class="modal-footer bg-light">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Agree</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block javascripts %}
	 {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
    <script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
    <script src="{{asset('js/complements/jquery.filer.min.js')}}" defer></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
    <script src="{{asset('js/pages/stageDashboard.js')}}" defer></script>
     {# <script type="text/javascript" src="{{ app.asset_path}}/assets/js/complements/SaveProcessDashboard.js?v{{"now"|date("dmYHis")}}"></script> #}

{% endblock %}