{% extends '@ajax-layout/layout.twig' %}

{% block body %}
	<div class="clearfix">
        <div class="stepper-wrapper">
            <div class="stepper-item 
              {% if (infoFou.ACC_CONF_VALID | boolSql == false and infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE == '') %}
                	active
            	{% elseif (infoFou.ACC_CONF_VALID | boolSql == false and ((infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE != '') or (infoFou.EVE_IMP != '0'  and infoFou.FIC_ACC_CONF_SIGNE == ''))) or infoFou.ACC_CONF_VALID | boolSql   %}
            		completed
            	{% endif %}">
                <div class="step-counter">1</div>
                <div class="step-name">{{ 'Accord envoyé' | trad }} <br/>{% if (infoFou.ACC_CONF_VALID | boolSql == false and ((infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE != '') or (infoFou.EVE_IMP != '0'  and infoFou.FIC_ACC_CONF_SIGNE == ''))) or infoFou.ACC_CONF_VALID | boolSql  %}{{ dateEnvoieAccord | dateTrad }}{% endif %}</div>
            </div>
            <div class="stepper-item
                {% if infoFou.ACC_CONF_VALID | boolSql == false and infoFou.EVE_IMP != '0' and infoFou.FIC_ACC_CONF_SIGNE == '' %}
                	active
            	{% elseif (infoFou.ACC_CONF_VALID | boolSql == false and infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE != '') or infoFou.ACC_CONF_VALID | boolSql  %}
            		completed
            	{% endif %}">
                <div class="step-counter">2</div>
                  <div class="step-name">
                  {% if infoFou.FIC_ACC_CONF_SIGNE != '' %}
                  {{ 'Accord signé ajouté' | trad }} <br/>
                    {{ dateAjoutAccordSigne | dateTrad }} 
                  {% elseif dateAccordRefuse > dateAjoutAccordSigne %}
                    {{ 'Accord signé ajouté, puis refusé' | trad }}
                    <br/>
                    {{  strBuild('Accord signé ajouté le : @1@' | trad, [dateAjoutAccordSigne | dateTrad])  }}
                    <br />
                    {{  strBuild('Accord refusé le : @1@' | trad, [dateAccordRefuse | dateTrad])  }}
                  {% else %}
                    {{ 'Accord signé ajouté' | trad }} <br/>
                  {% endif %}
                  </div>
            </div>
            <div class="stepper-item
                {% if infoFou.ACC_CONF_VALID | boolSql == false and infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE != '' %}
                	active
            	{% elseif infoFou.ACC_CONF_VALID | boolSql %}
            		completed
            	{% endif %}">
                <div class="step-counter">3</div>
                <div class="step-name">{{ 'Accord validé' | trad }} <br/>{% if infoFou.ACC_CONF_VALID | boolSql %}{{ dateAccordValider | dateTrad }}{% endif %}</div>
            </div>
            <div class="stepper-item
                {% if infoFou.ACC_CONF_VALID | boolSql and infoFou.EVE_IMP == '0' and infoFou.FIC_ACC_CONF_SIGNE != '' %}
                	active
            	{% elseif infoFou.ACC_CONF_VALID | boolSql and infoFou.EVE_IMP != '0' and infoFou.FIC_ACC_CONF_SIGNE != '' %}
            		completed
            	{% endif %}">
                <div class="step-counter">4</div>
                <div class="step-name">{{ 'Consultation envoyée' | trad }} <br/>{% if infoFou.ACC_CONF_VALID | boolSql and infoFou.EVE_IMP != '0' and infoFou.FIC_ACC_CONF_SIGNE != '' %} {{ dateEnvoie | dateTrad }} {% endif %}</div>
            </div>
        </div>
        
        <script>
        	$('#modal-title').html('{{ 'Suivi des envois du fournisseur' | trad }} {{ convertLibelleGlobal('FOURNISS', '', idFrs, true) }}');
        </script>
        
        <style>
            .stepper-wrapper {
              margin-top: auto;
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;
            }
            .stepper-item {
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              flex: 1;
            
              @media (max-width: 768px) {
                font-size: 12px;
              }
            }
            
            .stepper-item::before {
              position: absolute;
              content: "";
              border-bottom: 2px solid #ccc;
              width: 100%;
              top: 20px;
              left: -50%;
              z-index: 2;
            }
            
            .stepper-item::after {
              position: absolute;
              content: "";
              border-bottom: 2px solid #ccc;
              width: 100%;
              top: 20px;
              left: 50%;
              z-index: 2;
            }
            
            .stepper-item .step-counter {
              position: relative;
              z-index: 5;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #ccc;
              margin-bottom: 6px;
            }
            
            .stepper-item.active {
              font-weight: bold;
            }
            
            .stepper-item.completed .step-counter {
              background-color: #4bb543;
            }
            
            .stepper-item.completed::after {
              position: absolute;
              content: "";
              border-bottom: 2px solid #4bb543;
              width: 100%;
              top: 20px;
              left: 50%;
              z-index: 3;
            }
            
            .stepper-item:first-child::before {
              content: none;
            }
            .stepper-item:last-child::after {
              content: none;
            }
            
            .step-name {
            	text-align: center;
            }
        </style>
	</div>
{% endblock %}