{% extends 'base.html.twig' %}
{% block title %}Gestion Fiches RDV{% endblock %}
{% block body %}
{% include 'breadcrumb.html.twig' with {level1: 'Salon', level2: 'Liste'} %}
<div class="page-header">
<h1>Gestion Fiches RDV (vue coiffeur)</h1>
</div>
<button id="createRdv" class="btn btn-success" data-toggle="modal" data-target="#create">Création d'un RDV</button>
{{ form_start(formFilter) }}
<div style="display: flex;padding-top: 20px;align-items: center">
{{ form_row(formFilter.site) }}
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BO') or is_granted('ROLE_ADMINISTRATIVE') %}
{{ form_row(formFilter.intervenant) }}
{% endif %}
{{ form_row(formFilter.client) }}
<!-- motifs -->
{{ form_row(formFilter.start) }}
{{ form_row(formFilter.end) }}
{{ form_row(formFilter.status) }}
{{ form_row(formFilter.salon) }}
{#{{ form_row(formFilter.cancelReason) }}#}
<button type="submit" class="btn btn-success">Valider</button>
</div>
{{ form_end(formFilter) }}
<div class="row">
<div class="col-md-12">
<table class="table" data-sortable style="font-size:18px">
<thead>
<tr >
<th><input class="mass-checkbox-select-all" type="checkbox" name=""></th>
<th>Client</th>
<th style="font-weight: normal;">Chambre</th>
<th style="font-weight: normal;">Début</th>
<th style="font-weight: normal;">Périodicité</th>
<th style="font-weight: normal;">Prestations</th>
<th>HT <span class="totalht"></span> € <br/> TTC <span class="totalttc"></span> €</th>
<th>Paiement </th>
<th>N° Facture </th>
<th style="font-weight: normal;">Statut</th>
</tr>
</thead>
<tbody>
{% for session in sessions %}
<tr {% if session.status == 'cancel' %}style="background:grey"{% endif %}{% if session.status == 'validated' or session.status == 'billing' %}style="background:#39CCCC"{% endif %}>
<td><input class="mass-checkbox" type="checkbox" name=""
data-id="{{ session.id }}" data-client="{{ session.client }}"
data-date="{{ session.start|date('d/m/Y') }}"
data-ttc={{ session.ttc }}
></td>
<td style="font-weight: bold">
{% if session.comment %}
🚨
{% endif %}
{%if session.paid is defined%}
{%if session.paid > 30 %}
<span style="color:red">{{ session.lastname }} {{ session.firstname }}</span>
{%else%}
<span>{{ session.lastname }} {{ session.firstname }}</span>
{%endif%}
{%else%}
<span>{{ session.lastname }} {{ session.firstname }}</span>
{%endif%} </td>
<td>{{ session.roomNumber is defined ? session.roomNumber : 'Pas de client associé' }}</td>
<td>{{ session.start|date('d/m/Y H:i') }}</td>
{% if session.nbSemaine is not null %}
<td>{{ session.nbSemaine }}</td>
{% else %}
<td>--</td>
{% endif %}
<td>{% for product in session.products %}{{ product.ui }}, {% endfor %}</td>
<td>
{{ session.ttc }} €
</td>
<td>
{% if session.qrlink %}
<a href="{{ session.qrlink }}" class="btn btn-success">
Payer
</a>
{% endif %}
{% if session.qrimage is defined and session.qrimage %}
<img width="150" src="data:image/png;base64,{{ session.qrimage }}" alt="QR Code" />
{% endif %}
</td>
<td>{%if session.codeBilling is defined%}{{session.codeBilling}}{%endif%}</td>
<td>{{ session.label }}</td>
<td>{%if session.client %}<div style="background: {%if session.client.solde <= 0 %}green{%else%}red{%endif%};padding:5px;color:white">Solde : {{ session.client.solde }}</div>{%endif%}</td>
{#<td>{{ session.end|date }}</td>#}
<td>{%if session.paid is defined%}{{session.paid}}{%endif%}</td>
<td>
<a href="{{ path('app_planning_edit', {'id': session.id}) }}" target="_blank">Edition</a>
</td>
</tr>
{% else %}
{% include 'noFoundRecords.html.twig' %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<style>
.form-group {
padding-right: 10px;
}
</style>
{% include 'planning/rdv_popup.html.twig' with {'form' : form} %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
$('#filter_start').flatpickr({
'dateFormat' : 'Y-m-d',
"locale": "fr"
});
$('#filter_end').flatpickr({
'dateFormat' : 'Y-m-d',
"locale": "fr"
});
$('#replanning_end').flatpickr({
'dateFormat' : 'Y-m-d',
"locale": "fr"
});
$('#replanning_start').flatpickr({
'dateFormat' : 'Y-m-d',
"locale": "fr"
});
$('#filter_intervenant').select2({ width: '100%' });
$('#filter_site').select2({ width: '100%' });
$('#filter_status').select2({ width: '250px' });
$('#filter_salon').select2({ width: '250px' });
$('.mass-checkbox').on('change', function () {
$('.liste-mass').html('');
$('#replanning_rdvSelected').val();
let total = 0;
$('.mass-checkbox:checkbox:checked').each(function () {
const client = $(this).data('client');
const date = $(this).data('date');
$('.liste-mass').append('<div>' + date + ' Client ' + client + '</div>');
allAttributes = $('.mass-checkbox:checkbox:checked').map(function () {
return $(this).data('id');
}).get();
const ttc = $(this).data('ttc');
total+=ttc;
});
$('.totalttc').html(total);
$('.totalht').html((total / 1.2).toFixed(2));
$('#replanning_rdvSelected').val(allAttributes);
});
$('.mass-checkbox-select-all').on('change', function () {
$('#replanning_rdvSelected').val();
var check = $('.mass-checkbox-select-all').is(":checked");
$('.mass-checkbox').each(function () {
$(this).prop('checked', check);
});
$('.liste-mass').html('');
let total = 0;
$('.mass-checkbox:checkbox:checked').each(function () {
const client = $(this).data('client');
const date = $(this).data('date');
const ttc = $(this).data('ttc');
$('.liste-mass').append('<div>' + date + ' Client ' + client + '</div>');
allAttributes = $('.mass-checkbox:checkbox:checked').map(function () {
return $(this).data('id');
}).get();
total+=ttc;
});
$('.totalttc').html(total.toFixed(2));
$('.totalht').html((total / 1.2).toFixed(2));
$('#replanning_rdvSelected').val(allAttributes);
});
// pop up
$('#rdv_client').select2({ width: '100%' });
$('#rdv_intervenant').select2({ width: '100%' });
$('#rdv_products').select2({ width: '100%' });
$('#rdv_client').on('change', function (e) {
const val = $('#rdv_client').val();
var url = '{{ path("app_planning_ajaxgetsalons", {'id': 'client_id'}) }}';
url = url.replace("client_id", val);
$('#form_add_rdv').find('.btn-primary').addClass('disabled');
$.ajax({
url: url,
type: 'get',
success: function(data) {
$('#rdv_salon').empty();
console.log(data);
for(var i = 0; i < data.length; i++) {
var item = data[i];
if(i === 0)
{
$('#rdv_salon').append('<option selected value="' + item.id + '">'+ item.name + '</option>');
}
else {
$('#rdv_salon').append('<option value="' + item.id + '">'+ item.name + '</option>');
}
}
$('#rdv_salon').trigger('change');
$('#form_add_rdv').find('.btn-primary').removeClass('disabled');
}
});
});
$('#rdv_salon').on('change', function (e) {
console.log('salon changed');
const val = $('#rdv_salon').val();
var url = '{{ path("app_planning_ajaxgetproducts", {'id': 'salon_id'}) }}';
url = url.replace("salon_id", val);
{#var urlIntervenant = '{{ path("app_planning_ajaxgetintervenants", {'id': 'salon_id'}) }}';#}
{#urlIntervenant = urlIntervenant.replace("salon_id", val);#}
$.ajax({
url: url,
type: 'get',
success: function(data) {
console.log(data);
$('#rdv_products').empty();
for(var i = 0; i < data.length; i++) {
var item = data[i];
if(i === 0)
{
// $('#rdv_products').append('<option selected value="' + item.id + '">'+ item.name + '</option>');
}
else {
$('#rdv_products').append('<option value="' + item.id + '">'+ item.name + '</option>');
}
}
}
});
// $.ajax({
// url: urlIntervenant,
// type: 'get',
// success: function(data) {
//
// console.log('intervenants',data);
// $('#rdv_intervenant').empty();
//
// for(var i = 0; i < data.length; i++) {
//
// var item = data[i];
// console.log(item.fullname);
// if(i === 0)
// {
// $('#rdv_intervenant').append('<option selected value="' + item.id + '">'+ item.fullname + '</option>');
//
// }
// else {
// $('#rdv_intervenant').append('<option value="' + item.id + '">'+ item.fullname + '</option>');
//
// }
// }
//
// $('#rdv_intervenant').trigger('change.select2');
//
//
//
// }
// });
});
$('#rdv_start').on('change', function (e) {
console.log('salon changed');
const val = $('#rdv_salon').val();
const date = $('#rdv_start').val();
var url = '{{ path("app_planning_ajaxgetproducts", {'id': 'salon_id'}) }}';
url = url.replace("salon_id", val);
var urlIntervenant = '{{ path("app_planning_ajaxgetintervenants", {'id': 'salon_id','date' : 'date_id'}) }}';
urlIntervenant = urlIntervenant.replace("salon_id", val);
urlIntervenant = urlIntervenant.replace("date_id", date);
$.ajax({
url: urlIntervenant,
type: 'get',
success: function(data) {
console.log('intervenants',data);
$('#rdv_intervenant').empty();
for(var i = 0; i < data.length; i++) {
var item = data[i];
console.log(item.fullname);
if(i === 0)
{
$('#rdv_intervenant').append('<option selected value="' + item.id + '">'+ item.fullname + '</option>');
}
else {
$('#rdv_intervenant').append('<option value="' + item.id + '">'+ item.fullname + '</option>');
}
}
$('#rdv_intervenant').trigger('change.select2');
}
});
});
$('#createRdv').on('click', function (e) {
$('#rdv').modal({});
});
$('#form_add_rdv').on('submit', function (e) {
e.preventDefault();
const path = "{{ path('app_planning_addrdvajax') }}";
$.ajax({
url: path,
data: $(this).serialize(),
type: 'post',
success: function(data) {
$('#rdv').modal('hide');
window.location.reload();
}
});
});
</script>
{% endblock %}