{% extends 'base.html.twig' %}
{% block title %}Questionnaire{% endblock %}
{% block stylesheets %}
<link href="{{ asset('plugins/barrating/themes/bars-movie.css') }}" rel="stylesheet"/>
<style>
.newQuestion {
margin: 0 2%;
}
.btn {
margin : 1% 0;
}
.div-table {
overflow-x: auto;
}
input[type="radio"][disabled] {
color: red;
}
.divRes {
border: 1px solid black;
border-radius: 5px;
background-color: darkgreen;
margin: 2%;
}
@media all and (max-width: 450px){
.rowquestions {
width: 100%;
padding-left: 15px;
}
.divnote{
padding-top: 0!important;
}
}
.divnote{
padding-top: 50px;
}
span.required {
color: red;
}
label.error{
color:red;
font-weight: bold;
}
input.error {
border-color : red;
}
.etoile {
color:red;
}
.progress-bar {
color: black;
}
.table {
width: 100%;
margin-bottom: 1rem;
border: 1px solid black;
}
.table thead th {
vertical-align: bottom;
border-bottom: 1px solid black;
}
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid black;
}
tr {
text-align: center;
}
</style>
{% endblock %}
{% block navBar %}{{ questionnaire.titre }}{% endblock %}
{% block body %}
<div class="col-xl-12 col-md-12">
<div class="row mb-4">
<div class="col-xl-10 offset-xl-1 col-md-10 offset-md-1">
<div class="card">
<form action="{{ path('afficher_questionnaire') }}" method="post" name="question">
<div class="card-header">
<div class="row">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
{% for cat in categories %}
<li class="nav-item">
<a class="nav-link {% if loop.first and resultat == false %}active{% endif %}" id="pills-{{ cat.classe }}-tab" data-toggle="pill" href="#pills-{{ cat.classe }}"
role="tab"
aria-controls="pills-{{ cat.classe }}" aria-selected="false">{{ cat.libelle }}</a>
</li>
{% endfor %}
{% if resultat == true %}
<li class="nav-item">
<a class="nav-link active" id="pills-res-tab" data-toggle="pill" href="#pills-res"
role="tab"
aria-controls="pills-res" aria-selected="false">Résultat</a>
</li>
<li class="nav-item">
<a class="nav-link " id="pills-exploitation-tab" data-toggle="pill" href="#pills-exploitation"
role="tab"
aria-controls="pills-exploitation" aria-selected="false">Exploitation</a>
</li>
{% endif %}
</ul>
</div>
</div>
<div class="card-block">
<div class="tab-content tab-validate" id="pills-tabContent">
{% for cat in categories %}
<div class="tab-pane fade {% if loop.first and resultat == false %}show active in{% endif %}" id="pills-{{ cat.classe }}" role="tabpanel" aria-labelledby="pills-{{ cat.classe }}-tab">
{% if cat.id == 1 %}
{{ include('questionnaire/questionnaireEconomiqueTab.html.twig') }}
{% elseif cat.id == 2 %}
{{ include('questionnaire/questionnaireStrategiqueTab.html.twig') }}
{% elseif cat.id == 3 %}
{{ include('questionnaire/questionnaireTechniqueTab.html.twig') }}
{% endif %}
{% if loop.last %}
<div class="row justify-content-around">
<div class="col-xl-4 col-sm-12 mb-3">
<label for="departement"><b>Votre département</b> <i class="text-danger">*</i></label>
<select class="form-control" name="departement" id="departement" required {% if resultat == true %} disabled {% endif %}>
<option value="" selected>Liste des départements français</option>
{% for dep in departements %}
<option {% if exploitation is not null and dep.id == exploitation.departement.id %} selected {% endif %} value="{{ dep.id }}">{{ dep.codeDepartement }} - {{ dep.nomDepartement }}</option>
{% endfor %}
</select>
</div>
<div class="col-xl-4 col-sm-12 mb-3">
<label for="exp_systeme"><b>Système de production principal</b> <i class="text-danger">*</i></label>
<select class="form-control" name="exp_systeme" id="exp_systeme" required {% if resultat == true %} disabled {% endif %}>
<option value="" selected>Liste des systèmes de production</option>
{% for sys in systemes %}
<option {% if exploitation is not null and sys.id == exploitation.systemeProduction.id %} selected {% endif %} value="{{ sys.id }}">{{ sys.libelle }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="d-flex justify-content-center pt-2">
<span><i class="text-danger">*</i> les champs marqués d'un astérisque sont obligatoires</span>
</div>
{% if resultat == false and loop.last %}
<div class="d-flex justify-content-around">
<input type="submit" name="valider" value="Valider" class="btn btnColor">
</div>
{% endif %}
<div class="d-flex justify-content-{% if loop.first %}end{% elseif loop.last %}start{% else %}between{% endif %} pl-5 pr-5">
{% if not loop.first %}<button type="button"class="prevtab btn text-white" style="background: #76bd22">Précédent</button>{% endif %}
{% if not loop.last %}<button type="button" class="nexttab btn text-white" style="background: #76bd22">Suivant</button>{% endif %}
</div>
</div>
{% endfor %}
{% if resultat == true %}
<div class="tab-pane fade show active in" id="pills-res" role="tabpanel" aria-labelledby="pills-res-tab">
<div class="row mb-4">
{% for cat in categories %}
<div class="col-xl-6 col-md-6">
<div class="card mb-3" style="height: auto">
<div class="card-header" style="height: 50px">
<h4 class="text-white text-center" style="font-size: 21px">{{ resultatCategorie[cat.id]['libelle'] }}</h4>
</div>
<div class="card-block">
{% if cat.id == 1 %}
<div class="row pt-4">
<div class="col-xl-5 offset-xl-1">
<p>EBE / Produit</p>
</div>
<div class="col-xl-4 offset-xl-1">
<div class="progress">
<div style=" {% if ebe_produit >= 0 and ebe_produit <= 20 %} background: red {% elseif ebe_produit >= 20 and ebe_produit <= 40 %} background: orange {% elseif ebe_produit >= 40 and ebe_produit <= 60 %} background: yellow {% elseif ebe_produit >= 60 and ebe_produit <= 80 %} background: yellowgreen {% elseif ebe_produit >= 80 %} background : green {% endif %}; width: {{ ebe_produit }}%; {% if ebe_produit >= 80 %} color : white!important {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ ebe_produit }}" aria-valuemin="0" aria-valuemax="100">{{ ebe_produit }}%</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5 offset-xl-1">
<p>Annuités / EBE</p>
</div>
<div class="col-xl-4 offset-xl-1">
<div class="progress">
<div style="width: {{ annuites_ebe }}%; {% if annuites_ebe >= 0 and annuites_ebe <= 20 %} background: green {% elseif annuites_ebe >= 20 and annuites_ebe <= 40 %} background: yellowgreen {% elseif annuites_ebe >= 40 and annuites_ebe <= 60 %} background: yellow {% elseif annuites_ebe >= 60 and annuites_ebe <= 80 %} background: orange {% elseif annuites_ebe >= 80 %} background : red {% endif %}; {% if annuites_ebe >= 80 %} color : white!important {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ annuites_ebe }}" aria-valuemin="0" aria-valuemax="100">{{ annuites_ebe|raw }}%</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5 offset-xl-1">
<p>Aides PAC / EBE</p>
</div>
<div class="col-xl-4 offset-xl-1">
<div class="progress">
<div style=" {% if aides_ebe >= 0 and aides_ebe <= 20 %} color : white!important; {% endif %}; width: {{ aides_ebe }}%; {% if aides_ebe >= 0 and aides_ebe <= 20 %} background: green {% elseif aides_ebe >= 20 and aides_ebe <= 40 %} background: yellowgreen {% elseif aides_ebe >= 40 and aides_ebe <= 60 %} background: yellow {% elseif aides_ebe >= 60 and aides_ebe <= 80 %} background: orange {% elseif aides_ebe >= 80 %} background : red {% endif %}; {% if aides_ebe >= 80 %} color : white!important {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ aides_ebe }}" aria-valuemin="0" aria-valuemax="100">{{ aides_ebe }}%</div>
</div>
</div>
</div>
{% if dettes != "" %}
<div class="row">
<div class="col-xl-5 offset-xl-1">
<p>Dettes fournisseurs</p>
</div>
<div class="col-xl-4 offset-xl-1">
{% set dettes = dettes * 10 %}
<div class="progress">
<div style="width: {{ dettes }}%; {% if dettes >= 0 and dettes <= 20 %} background: red {% elseif dettes >= 20 and dettes <= 40 %} background: orange {% elseif dettes >= 40 and dettes <= 60 %} background: yellow {% elseif dettes >= 60 and dettes <= 80 %} background: yellowgreen {% elseif dettes >= 80 %} background : green {% endif %}; {% if dettes <= 20 %} color : white!important; {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ dettes }}" aria-valuemin="0" aria-valuemax="100">{{ dettes }}%</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
<div class="row pt-4">
<div class="col-xl-5 offset-xl-1">
<h5>Note : </h5>
</div>
<div class="col-xl-4 offset-xl-1">
<div class="progress">
<div style="width: {{ resultatCategorie[cat.id]['note'] }}%; {% if resultatCategorie[cat.id]['note'] >= 0 and resultatCategorie[cat.id]['note'] <= 20 %} background: red {% elseif resultatCategorie[cat.id]['note'] >= 20 and resultatCategorie[cat.id]['note'] <= 40 %} background: orange {% elseif resultatCategorie[cat.id]['note'] >= 40 and resultatCategorie[cat.id]['note'] <= 60 %} background: yellow {% elseif resultatCategorie[cat.id]['note'] >= 60 and resultatCategorie[cat.id]['note'] <= 80 %} background: yellowgreen {% elseif resultatCategorie[cat.id]['note'] >= 80 and resultatCategorie[cat.id]['note'] <= 100 %} background : green {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ resultatCategorie[cat.id]['note'] }}" aria-valuemin="0" aria-valuemax="100">{{ resultatCategorie[cat.id]['note'] }}%</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<textarea readonly class="form-control mb-3">{% if cat.id == 1 %}{{ commentaire_ebe_produit }}{{ commentaire_annuites_ebe }}{{ commentaire_aides_ebe }}{{ commentaire_dettes }}{% endif %}{{ resultatCategorie[cat.id]['commentaire'] }}</textarea>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="col-xl-6 col-md-6">
<div class="card" style="height: auto">
<div class="card-header" style="height: 50px">
<h4 class="text-white text-center" style="font-size: 21px;">Synthèse globale</h4>
</div>
<div class="card-block">
<div class="row pt-4">
<div class="col-xl-5 offset-xl-1">
<h5>Note totale :</h5>
</div>
<div class="col-xl-4 offset-xl-1">
<div class="progress">
<div style="width: {{ noteTotale }}%; {% if noteTotale >= 0 and noteTotale <= 20 %} background: red {% elseif noteTotale >= 20 and noteTotale <= 40 %} background: orange {% elseif noteTotale >= 40 and noteTotale <= 60 %} background: yellow {% elseif noteTotale >= 60 and noteTotale <= 80 %} background: yellowgreen {% elseif noteTotale >= 80 and noteTotale <= 100 %} background : green {% endif %}" class="progress-bar" role="progressbar" aria-valuenow="{{ noteTotale }}" aria-valuemin="0" aria-valuemax="100">{{ noteTotale }}%</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<textarea readonly class="form-control">{{ commentaireGlobal }}</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center flex-column p-4" style="background: #76BD22;">
<p class="text-white text-center" style="font-size: 20px">
Souhaitez vous améliorer votre situation et être contacté(e) sans engagement par un conseiller ?
</p>
<div class="d-flex justify-content-center">
<button id="btnExp2" type="button" style="margin: 0" class="btn btnColor float-right">Je souhaite être contacté(e) par un conseiller</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-exploitation" role="tabpanel" aria-labelledby="pills-exploitation-tab">
<input type="hidden" name="exploitationId" value="{{ exploitation.id }}">
<div class="d-flex justify-content-center pb-3 pt-4">
<h2 class="h3 text-center" style="color: #76bd22">Renseignez les informations concernant votre exploitation</h2>
</div>
<div class="row pt-3">
<div class="col-xl-6 offset-xl-3 mb-3">
<label for="exp_nomExp">Nom de l'exploitation <i class="text-danger">*</i></label>
<input type="text" maxlength="255" class="form-control form-control-sm" name="exp_nomExp" id="exp_nomExp" required>
</div>
</div>
<div class="row">
<div class="col-xl-6 offset-xl-3 mb-3">
<label for="exp_nomResp">Nom - Prénom <i class="text-danger">*</i></label>
<input type="text" maxlength="255" class="form-control form-control-sm" name="exp_nomResp" id="exp_nomResp" required>
</div>
</div>
<div class="row">
<div class="col-xl-6 offset-xl-3 mb-3">
<label for="exp_adresse">Adresse <i class="text-danger">*</i></label>
<input type="text" maxlength="255" class="form-control form-control-sm" name="exp_adresse" id="exp_adresse" required>
</div>
</div>
<div class="row">
<div class="col-xl-2 offset-xl-3 mb-3">
<label for="exp_cp">Code postal <i class="text-danger">*</i></label>
<input type="text" minlength="5" maxlength="5" class="form-control form-control-sm" name="exp_cp" id="exp_cp" required>
</div>
<div class="col-xl-4 offset-xl-0 mb-3">
<label for="exp_ville">Ville <i class="text-danger">*</i></label>
<input type="text" maxlength="100" class="form-control form-control-sm" name="exp_ville" id="exp_ville" required>
</div>
</div>
<div class="row">
<div class="col-xl-3 offset-xl-3 mb-3">
<label for="exp_mail">Adresse mail <i class="text-danger">*</i></label>
<input type="email" maxlength="255" class="form-control form-control-sm" name="exp_mail" id="exp_mail" required>
</div>
<div class="col-xl-3 offset-xl-0 mb-3">
<label for="exp_tel">Numéro de téléphone <i class="text-danger">*</i></label>
<input type="tel" minlength="10" maxlength="10" placeholder="ex: 0612345678" class="form-control form-control-sm" name="exp_tel" id="exp_tel" required>
</div>
</div>
<div class="row">
<div class="col-xl-6 offset-xl-3 mb-3">
<label for="exp_adresse">Précisez vos attentes</label>
<textarea maxlength="255" class="form-control form-control-sm" name="exp_message" id="exp_message" ></textarea>
</div>
</div>
<div class="d-flex justify-content-center flex-column p-4">
<p class="text-dark text-center" style="font-size: 15px">
{{ mentionsLegales.texte|raw }}
</p>
<div class="form-check text-center">
<input class="form-check-input" id="mentions" name="acceptermentions" type="checkbox" required>
<label class="form-check-label" for="mentions">J'accepte les mentions légales<i class="text-danger">*</i></label>
</div>
</div>
<div class="d-flex justify-content-center">
<input type="submit" class="btn" style="background: #76bd22; color: white" name="validerExploitation" value="Valider">
</div>
</div>
{% endif %}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('plugins/validate/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/validate/additional-methods.min.js') }}"></script>
<script src="{{ asset('plugins/validate/messages_fr.js') }}"></script>
<script src="{{ asset('plugins/barrating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('js/autosize.min.js') }}"></script>
<script>
function myFunction(element, id) {
var dataValue = $(element).data("value");
var dataId = $(element).data("id");
$("#libelle_"+id).text(dataId+' - '+dataValue);
}
$(document).ready( function () {
autosize($('textarea'));
$('#btnExp').on('click', function (e) {
e.preventDefault();
$('#pills-tab a[href="#pills-exploitation"]').tab('show');
});
$('#btnExp2').on('click', function (e) {
e.preventDefault();
$('#pills-tab a[href="#pills-exploitation"]').tab('show');
});
var i, items = $('.nav-link'), pane = $('.tab-pane');
// next
$('.nexttab').on('click',function(){
$(window).scrollTop(0);
for(i = 0; i < items.length; i++){
if($(items[i]).hasClass('active') ==true){
break;
}
}
if(i < items.length - 1){
// for tab
$(items[i]).removeClass('active');
$(items[i+1]).addClass('active');
// for pane
$(pane[i]).removeClass('show active');
$(pane[i+1]).addClass('show active');
}
});
// Prev
$('.prevtab').on('click',function(){
$(window).scrollTop(0);
for(i = 0; i < items.length; i++){
if($(items[i]).hasClass('active') ==true){
break;
}
}
if(i != 0){
// for tab
$(items[i]).removeClass('active');
$(items[i-1]).addClass('active');
// for pane
$(pane[i]).removeClass('show active');
$(pane[i-1]).addClass('show active');
}
});
});
$(function () {
$('form[name=question]').validate({
ignore: [],
invalidHandler: function () {
setTimeout(function () {
$('.nav-pills a span.required').remove();
// $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function () {
// var id = $(this).attr('id');
// $('.nav-pills').find('a[href^="#' + id + '"]').append(' <span class="required">***</span>');
// });
$('.tab-content.tab-validate .tab-pane:has(select.error) , .tab-content.tab-validate .tab-pane:has(input.error)').each(function () {
var id = $(this).attr('id');
$('.nav-pills').find('a[href^="#' + id + '"]').append(' <span class="required">***</span>');
});
});
},
errorPlacement: function (error,element) {
if(element.attr("type") == "radio"){
let id = element.attr("id");
id = id.split('_')[1];
error.insertAfter('#error_reponse_' + id);
}
else if(element.attr("name") == "produit"){
error.insertAfter('#error_produit');
}
else if(element.attr("name") == "EBE"){
error.insertAfter('#error_EBE');
}
else if(element.attr("name") == "annuites"){
error.insertAfter('#error_annuites');
}
else if(element.attr("name") == "pac"){
error.insertAfter('#error_pac');
}
else{
error.insertAfter(element);
}
}
});
});
</script>
{% endblock %}