{% extends "base.html.twig" %}
{% block title %}Hello DefaultController!{% endblock %}
{% block style %} <link href="{{asset('css/about.css')}}" rel="stylesheet">{% endblock %}
{% block body %}
<style>
.titreRdv
{
color:#061d32;
font-size:20px
}
.table-condensed
{
width:100%
}
.datepicker
{
width:350px
}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover
{
background:#c1ab92 !important
}
.custom-block-03
{
margin-top:1000px
}
.disponible
{
background:#c1ab92;
margin-bottom:20px
}
@media (min-width: 576px)
{
.modal-dialog {
max-width: 800px;
margin: 5.75rem auto;
}
}
</style>
<div class="Rectangle-1"><a href="{{path('app_default')}}"><img src="{{asset('img/group.svg')}}" ></a></div>
<div class="Rectangle-0"><h2>Prendre rendez-vous</h2>
<div class="row">
<div class="col-lg-4" style="background:#c1ab92">
<label class="titreRdv">Choisir un lieu</label>
<div style="color:red; font-size:20px; display:none" id="erreurLieu">Vous devez choisir un lieu</div>
<select class="form-control" required id="lieu" name="lieu" onchange="selectEtab()">
<option value="">-- Votre lieu</option>
{% for res in lieux %}
<option value="{{res.id}}" {% if lieuGet == res.id %}selected{% endif %}>{{res.libelle}}</option>
{% endfor %}
</select>
<label class="titreRdv">Choisir un avocat</label>
<div style="color:red; font-size:20px; display:none" id="erreurLieu">Vous devez choisir un lieu</div>
<select class="form-control" required id="avocat" name="avocat" onchange="selectAvocat()">
<option value="">-- Votre avocat</option>
{% for res in avocatsListe %}
<option value="{{res.avocats.id}}" {% if avocatGet == res.avocats.id %}selected{% endif %}>{{res.avocats.nom}} {{res.avocats.prenom}}</option>
{% endfor %}
</select>
{% if lieuGet != 'vide' and avocatsListe is not empty and avocat is not empty %}
<label class="titreRdv">Choisir une date</label>
<div style="color:red; font-size:20px; display:none" id="erreurDate">Vous devez choisir une date</div>
<input type="text" name="date" id="dateS" class="form-control datepicker" required>
<br>
<button type="button" class="btn btn-success" onclick="tranchesHoraires()">Voir les disponibilités</button>
{% endif %}
<br><br>
</div>
<div class="col-lg-8"><h2 style="color:#212529; padding-bottom:0">Choisissez un créneau horaire</h2>
<hr>
<div id="horaires">
<div class="alert alert-danger" role="alert" style="font-size:18px">
Vous devez d'abord valider une date souhaitée pour voir afficher les créneaux disponibles
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" style="color:#000">Dernière étape pour confirmer le rendez-vous</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{path('confirmerRdv')}}" method="post">
{% if avocat %}
<input type="hidden" name="avocatInput" value="{{avocat.id}}">
{% endif %}
<input type="hidden" name="dateInput" id="dateInput" value="">
<input type="hidden" name="horaireInput" id="horaireInput" value="">
<input type="hidden" name="lieuInput" id="lieuInput" value="">
<div class="row">
<div class="col-sm-4">
{% if avocat %} <span>Avocat : Maître {{avocat.nom}} {{avocat.prenom}}</span> {% endif %}
</div>
<div class="col-sm-4">
<span>Date : </span><span id="dateSelect"></span>
</div>
<div class="col-sm-4">
<span >Horaire : </span><span id="horaireSelect"></span>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
<label>Votre nom</label>
<input type="text" class="form-control" name="nom" required>
</div>
<div class="col-sm-6">
<label>Votre prénom</label>
<input type="text" class="form-control" name="prenom" required>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<label>Votre téléphone</label>
<div class="row">
<div class="col-4">
<select class="form-control" name="extension">
<option value="+32">+32</value>
<option value="+33">+33</value>
<option value="+352">+352</value>
</select>
</div>
<div class="col-8">
<input type="text" class="form-control" name="tel" required>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Votre email</label>
<input type="email" class="form-control" name="email" required>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<label>Motif de votre demande</label>
<textarea name="motif" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Confirmer le rendez-vous</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
border: 1px solid #061d32;
background: #061d32;
color: #ffffff;
font-weight: bold;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #061d32;
background: #061d32;
font-weight: bold;
color: #fff;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var enableDays = [
{% for res in fermeture %}
"{{res}}",
{% endfor %}
];
function enableAllTheseDays(date) {
var sdate = $.datepicker.formatDate( 'd-m-yy', date)
if($.inArray(sdate, enableDays) != -1) {
return [true];
}
return [false];
}
$( ".datepicker" ).datepicker({
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd-mm-yy',
beforeShowDay: enableAllTheseDays,minDate: 8});
});
</script>
<script>
function tranchesHoraires()
{
var date = document.getElementById('dateS').value
var lieu = document.getElementById('lieu').value
var avocat = document.getElementById('avocat').value
if(lieu == '')
{
document.getElementById("erreurLieu").style.display = "block";
}
else
{
document.getElementById("erreurLieu").style.display = "none";
}
if(date == '')
{
document.getElementById("erreurDate").style.display = "block";
}
else
{
document.getElementById("erreurDate").style.display = "none";
}
if(date != '' && lieu != '')
{
$.ajax({
url: "{{ path('ajaxTranchesHoraires') }}",
type : "post",
data: {'date':date, 'lieu':lieu, 'avocat':avocat},
success:function(retour){
$('#horaires').html(retour)
}
});
}
}
function selectHoraire(date,lieu,tranche)
{
$('#dateSelect').html(date)
$('#horaireSelect').html(tranche)
$('#dateInput').val(date)
$('#horaireInput').val(tranche)
$('#lieuInput').val(lieu)
}
function selectEtab()
{
var id = $('#lieu').val()
window.location.href = "?lieu="+id;
}
function selectAvocat()
{
var id = $('#avocat').val()
var idLieu = $('#lieu').val()
window.location.href = "?lieu="+idLieu+"&avocat="+id;
}
</script>
{% endblock %}