<?php
 if(basename(__FILE__) == basename($_SERVER['PHP_SELF'])){exit();}
 global $config;

 $did=0;
 if (!empty($_GET['dtp']) && in_array($_GET['dtp'], array(1,2,4,8))) {
 $dtp=$_GET['dtp'];
 if (!empty($_GET['did']) && filter_var($_GET['did'], FILTER_VALIDATE_INT)!==false) $did=$_GET['did'];
 } else $dtp=0;
?>

<?php $_shouldextend[1]=1; ?>


<?php $this->startSection('wisra_basic_content'); ?>
 @parentXYZABC

<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
 <div class="container">
 <div class="d-flex justify-content-between align-items-center">
 <h2>Doléances et réclamations</h2>
 </div>
 </div>
</section>

<section id="schedule">
 <div class="container">
 <div class="section-title aos-init aos-animate" data-aos="fade-left">
 <h2 id="title-bloko">e-Doléances</h2>
 <p>
 Ce registre de doléances électronique recueille vos réclamations et voeux et permettra d'éviter certains conflits.<br/>
 Afin de nous permettre la prise en charge de votre doléance, l'introduction de vos coordonnées exactes est nécessaire.
 </p>
 </div>
 <div class="row">
 <div class="col-lg-2"></div>
 <div class="col-lg-8">
 <hr/>
 <div class="form-steps">
 <div class="step-box small now" id="step-box-1">
 <div class="sign-step"><div class="step-circle"><img src="sources/image/svg/tick-g.svg" /></div></div>
 <div class="step-text">Etape 1</div>
 </div>
 <div class="step-box small" id="step-box-2">
 <div class="sign-step"><div class="step-circle"><img src="sources/image/svg/tick-g.svg" /></div></div>
 <div class="step-text">Etape 2</div>
 </div>
 <div class="step-box small" id="step-box-3">
 <div class="sign-step"><div class="step-circle"><img src="sources/image/svg/tick-g.svg" /></div></div>
 <div class="step-text">Etape 3</div>
 </div>
 <div class="step-box small" id="step-box-4">
 <div class="sign-step"><div class="step-circle"><img src="sources/image/svg/tick-g.svg" /></div></div>
 <div class="step-text">Etape 4</div>
 </div>
 </div>
 <hr/>

 <input type="hidden" id="doleance-zz-dtp" value="<?php echo $dtp;?>" />
 <input type="hidden" id="doleance-zz-did" value="<?php echo $did;?>" />
 <input type="hidden" id="doleance-aa-typ" value="0" />
 <div class="form" id="form-1">
 <div class="row">
 <div class="col-lg-4">
 <a href="javascript:changeTyp(1);" class="doleance-icon">
 <img src="sources/image/artiles/doleances-agence.webp" alt="doleance" /><br/>
 <p class="text-center">Agence</p>
 </a>
 </div>
 <div class="col-lg-4">
 <a href="javascript:changeTyp(2);" class="doleance-icon">
 <img src="sources/image/artiles/doleances-telephone.webp" alt="doleance" /><br/>
 <p class="text-center">Par téléphone</p>
 </a>
 </div>
 <div class="col-lg-4">
 <a href="javascript:changeTyp(3);" class="doleance-icon">
 <img src="sources/image/artiles/doleances-chantier.webp" alt="doleance" /><br/>
 <p class="text-center">Sur Chantier</p>
 </a>
 </div>
 <div class="col-lg-4">
 <a href="javascript:changeTyp(4);" class="doleance-icon">
 <img src="sources/image/artiles/doleances-document.webp" alt="doleance" /><br/>
 <p class="text-center">Document</p>
 </a>
 </div>
 <div class="col-lg-4">
 <a href="javascript:changeTyp(5);" class="doleance-icon">
 <img src="sources/image/artiles/doleances-autre.webp" alt="doleance" /><br/>
 <p class="text-center">Autre</p>
 </a>
 </div>
 </div>
 </div>

 <div class="form hidden" id="form-2">
 <div class="form-group showhide agence">
 <select class="form-control input-text" id="unity" placeholder="Unité" data-rule="minlen:4" data-msg="Veuillez choisir l'unité !" required>
 <option value="0">Unité</option>
 <option value="1">Alger</option>
 <option value="2">Béjaia</option>
 </select>
 <div class="validation">Veuillez choisir l'unité !</div>
 </div>

 <div class="form-group showhide chantier">
 <input type="text" name="endroit" class="form-control input-text" id="endroit" placeholder="Localisation du chantier" data-rule="minlen:4" data-msg="Veuillez saisir où se trouve le chantier !" required>
 <div class="validation">Veuillez saisir votre nom !</div>
 </div>

 <div class="form-group showhide document">
 <select class="form-control input-text" id="document" placeholder="Document" data-rule="minlen:4" data-msg="Veuillez choisir l'unité !" required>
 <option value="0">Document</option>
 <option value="1">Devis</option>
 <option value="2">Facture</option>
 <option value="8">Situation</option>
 <option value="4">Bon de Livraison</option>
 </select>
 <div class="validation">Veuillez choisir l'unité !</div>
 </div>

 <div class="form-group showhide agence chantier">
 <input type="text" name="agent" class="form-control input-text" id="agent" placeholder="Description de l'agent" data-rule="minlen:4" data-msg="Veuillez saisir un petite description de l'agent !" required>
 <div class="validation">Veuillez saisir un petite description de l'agent !</div>
 </div>

 <div class="form-group showhide telephone">
 <input type="text" name="numprob" class="form-control input-text" id="numprob" placeholder="Numéro de téléphone" data-rule="minlen:4" data-msg="Veuillez saisir le numéro de téléphone !" required>
 <div class="validation">Veuillez saisir le numéro de téléphone !</div>
 </div>

 <div class="form-group showhide document">
 <input type="text" name="numdoc" class="form-control input-text" id="numdoc" placeholder="Numéro du document" data-rule="minlen:4" data-msg="Veuillez saisir le numéro du document !" required>
 <div class="validation">Veuillez saisir le numéro du document !</div>
 </div>

 <div class="row">
 <div class="col-lg-12">
 <div id="errormessage-1" class="errormessage hidden"></div><br/><br/>
 <div class="text-center">
 <button type="button" class="input-btn" id="send-a-1">Suivant</button>
 </div>
 </div>
 </div>
 </div>

 <div class="form hidden" id="form-3">
 <form action="" method="post" role="form" class="contactForm">
 <div class="form-group">
 <input type="text" name="name" class="form-control input-text" id="name" placeholder="Nom complet" data-rule="minlen:4" data-msg="Veuillez saisir votre nom !" required>
 <div class="validation">Veuillez saisir votre nom !</div>
 </div>
 <div class="form-group">
 <input type="email" class="form-control input-text" name="email" id="email" placeholder="Adresse E-mail" data-rule="email" data-msg="Veuillez saisir votre adresse email !" required>
 <div class="validation"></div>
 </div>
 <div class="form-group">
 <input type="tel" name="tel" id="tel" class="form-control input-text" placeholder="Numéro de téléphone" data-msg="Veuillez saisir votre numéro de téléphone !" required>
 <div class="validation"></div>
 </div>
 </form>
 <div class="row">
 <div class="col-lg-12">
 <div id="errormessage-2" class="errormessage hidden"></div>
 <div class="text-center">
 <button type="button" class="input-btn" id="send-a-2">Suivant</button>
 </div>
 </div>
 </div>
 </div>

 <div class="form hidden" id="form-4">
 <div id="sendmessage" class="hidden"></div>
 <div id="errormessage" class="hidden"></div>
 <div id="infomessage" class="hidden"></div>
 <form action="" method="post" role="form" class="contactForm">
 <div class="form-group">
 <input type="text" class="form-control input-text" name="subject" id="subject" placeholder="Objet de votre message" data-rule="minlen:4" data-msg="Veuillez saisir l'objet de votre message !">
 <div class="validation"></div>
 </div>
 <div class="form-group">
 <textarea class="form-control input-text text-area" name="message" id="message" rows="5" data-rule="required" data-msg="Merci d'ecrire votre message" placeholder="Votre message"></textarea>
 <div class="validation"></div>
 </div>
 <div class="form-group">
 <div class="text-center">
 <img src="<?php echo $config['app_url'] ?>www/captcha.php" width="200" height="50" id="refresh-pic" />
 <a href="javascript:reloadcapt();">
 <img src="<?php echo $config['app_url'] ?>sources/image/svg/refresh-outline.svg" width="20" />
 <input type="hidden" id="refresh-origin" value="<?php echo $config['app_url'] ?>/www/captcha.php">
 </a>
 <br/><br/>
 </div>
 <input type="text" class="form-control input-text" name="code" id="code" placeholder="Texte de l'image" data-rule="minlen:4" data-msg="Veuillez saisir le code ecrit sur l'image !">
 <div class="validation"></div>
 </div>
 <div class="text-center">
 <button type="button" class="input-btn" id="send-a">ENVOYER</button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>
</section>

<?php $this->stopSection(); ?>

<?php /*-------------------------- Slider --------------------------*/ ?>
<?php $this->startSection('wisra_slider_content'); ?>
<?php $this->stopSection(); ?>

<?php /*-------------------------- Put here your additional CSS files for this page --------------------------*/ ?>
<?php $this->startSection('wisra_css_content'); ?>
<style>.errormessage {color: #cd0039}</style>
<?php $this->stopSection(); ?>


<?php /*-------------------------- Put here your additional JS files  for this page --------------------------*/ ?>
<?php $this->startSection('wisra_js_content'); ?>
<script>
 // do not hide header
 var headwhite=1;

 //-> Change page
 function changePage(p) {
 var np=p-1;
 $('#form-'+p).removeClass('hidden');
 $('#form-'+np).removeClass('hidden').addClass('hidden');
 
 $('#step-box-'+p).removeClass('now').addClass('now');
 $('#step-box-'+np).removeClass('active').addClass('active');
 if (p==2) {
 var t=parseInt($('#doleance-aa-typ').val());
 $('.showhide').removeClass('hidden').addClass('hidden');
 if (t==1) $('.showhide.agence').removeClass('hidden');
 if (t==2) $('.showhide.telephone').removeClass('hidden');
 if (t==3) $('.showhide.chantier').removeClass('hidden');
 if (t==4) $('.showhide.document').removeClass('hidden');
 if (t==5) changePage(3);
 }
 }

 //-> First page
 function changeTyp(t) {
 $('#doleance-aa-typ').val(t);
 changePage(2);
 }

 //-> pic
 function reloadcapt() {
 var myImg = new Image(), src=$('#refresh-origin').val();
 myImg.onload = function() {
 $('#refresh-pic').attr('src', src);
 $('#code').val('');
 };
 myImg.src = src;
 }

 function send() {
 $('#send-a').unbind('click');
 $('#sendmessage, #errormessage, #infomessage').removeClass('hidden').addClass('hidden');

 var dtp = $('#doleance-zz-dtp').val(), 
 did = $('#doleance-zz-did').val(), 
 typ = $('#doleance-aa-typ').val(), 
 unity = $('#unity').val(), 
 endroit = $('#endroit').val(), 
 docum = $('#document').val(), 
 agent = $('#agent').val(), 
 numprob = $('#numprob').val(), 
 numdoc = $('#numdoc').val(), 
 name = $('#name').val(), 
 email = $('#email').val(), 
 tel = $('#tel').val(), 
 subject = $('#subject').val(), 
 message = $('#message').val(), 
 code = $('#code').val(), 
 error=0, el_id='';

 $('#name, #email, #tel, #subject, #message, #code').removeClass('is-invalid');

 // code
 if (code.length!=4) {error++;el_id='#code';}
 // message
 if (message.length<5) {error++;el_id='#message';}
 // subject
 if (subject.length<5) {error++;el_id='#subject';}

 if (error==0) {
 $('#sendmessage, #errormessage, #infomessage').removeClass('hidden').addClass('hidden');
 $('#infomessage').html( 'Message en cours d\'envoi...' );
 $('#infomessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-2}, 100);

 $.post("<?php echo $config['app_url'] ?>sources/ajax/code.verif.php", {code:code}, function(r){
 if (r.ok==1) {

 $.post("https://egitel.net/ws/doleance.form.php", {
 dtp:dtp, did:did, typ:typ, unity:unity, endroit:endroit, docum:docum, agent:agent, 
 numprob:numprob, numdoc:numdoc, name:name, email:email, tel:tel, subject:subject, 
 message:message
 }, 
 function(r){
 $('#sendmessage, #errormessage, #infomessage').removeClass('hidden').addClass('hidden');
 if (r.ok==1) {
 $('#infomessage').addClass('hidden');
 $('#sendmessage').html( 'Votre message a bien été envoyé.' );
 $('#sendmessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-2}, 100);
 $('#send-a').unbind('click').click(function(){send()});
 } else if (r.ok==5) el_id='#subject';
 else if (r.ok==6) el_id='#message';
 else if (r.ok==7) el_id='#code';

 if (r.ok>1 && r.ok<8) {
 $(el_id).removeClass('is-invalid').addClass('is-invalid');
 $('#errormessage').html( $(el_id).attr('data-msg') );
 $('#errormessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-80}, 300);
 $('#send-a').unbind('click').click(function(){send()});
 reloadcapt()
 }
 if (r.ok==8) {
 $('#errormessage').html( 'Erreur inconnue ! message non envoyé, veuillez réessayer plus tard.' );
 $('#errormessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-80}, 300);
 $('#send-a').unbind('click').click(function(){send()});
 reloadcapt()
 }
 }, 'json');
 } else {
 el_id='#code';
 $('#infomessage').removeClass('hidden').addClass('hidden');
 $(el_id).removeClass('is-invalid').addClass('is-invalid');
 $('#errormessage').html( $(el_id).attr('data-msg') );
 $('#errormessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-80}, 300);
 $('#send-a').unbind('click').click(function(){send()});
 reloadcapt()
 }
 }, 'json');
 } else {
 $(el_id).removeClass('is-invalid').addClass('is-invalid');
 $('#errormessage').html( $(el_id).attr('data-msg') );
 $('#errormessage').removeClass('hidden');
 $('html, body').animate({scrollTop: $('#title-bloko').offset().top-80}, 300);
 $('#send-a').unbind('click').click(function(){send()});
 reloadcapt()
 }
 }

 $('#send-a-1').click(function(){
 $('#errormessage-1').removeClass('hidden').addClass('hidden');
 var t=parseInt($('#doleance-aa-typ').val()), error=0;
 if (t==1) {
 var unity=$('#unity').val(), 
 agent=$('#agent').val();
 if (agent.length<3) {$('#errormessage-1').html('Vous devez nous donner ue petite description de l\'agent !');error++;}
 if (unity==0) {$('#errormessage-1').html('Vous devez choisir l\'unité.');error++;}
 }
 if (t==2) {
 var numprob=$('#numprob').val();
 if (numprob.length<3) {$('#errormessage-1').html('Vous devez saisir le numéro de téléphone !');error++;}
 }
 if (t==3) {
 var endroit=$('#endroit').val(), 
 agent=$('#agent').val();
 if (endroit.length<3) {$('#errormessage-1').html('Vous devez saisir l\'endroit ou se trouve le chantier (entreprise) !');error++;}
 if (agent.length<3) {$('#errormessage-1').html('Vous devez nous donner ue petite description de l\'agent !');error++;}
 }
 if (t==4) {
 var docum=$('#document').val(), 
 numdoc=$('#numdoc').val();
 if (numdoc.length<3) {$('#errormessage-1').html('Vous devez saisir le numéro du document !');error++;}
 if (docum==0) {$('#errormessage-1').html('Vous devez choisir le document.');error++;}
 }
 //
 if (error==0) changePage(3); else $('#errormessage-1').removeClass('hidden');
 });
 $('#send-a-2').click(function(){
 $('#errormessage-2').removeClass('hidden').addClass('hidden');
 var error=0;
 var name=$('#name').val(), 
 email=$('#email').val(), 
 tel=$('#tel').val();

 const tel_regex = /^(?:[0-9] ?){6,14}[0-9]$/;
 const mail_regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

 if (tel.length<3 || (!tel_regex.test(tel))) {$('#errormessage-2').html('Vous devez saisir votre numéro de téléphone pour qu\'on puisse vous contacter !');error++;}
 if (email.length<3 || (!mail_regex.test(email))) {$('#errormessage-2').html('Vous devez saisir votre adresse e-mail !');error++;}
 if (name.length<3) {$('#errormessage-2').html('Vous devez saisir votre nom !');error++;}

 if (error==0) changePage(4); else $('#errormessage-2').removeClass('hidden');
 });
 $('#send-a').click(function(){send()});
</script>
<?php $this->stopSection(); ?>
<?php if (@$_shouldextend[1]) { echo $this->runChild('layout', ['page_data' => array(
 'title' => 'Doléances et réclamations | Egitel', 
 'description' => "Envoyez vos doléances et réclamations à la sarl Egitel, la satisfaction de nos clients est notre priorité", 
 'keywords' => array("Egitel", "Egitel Entreprise", "installation réseaux", "réseaux informatiques", "réseaux télécommunication", "services et equipements", "certifié Alcatel-Lucent", "Alcatel-Lucent", "Alcatel Algerie"), 
 'headwhite' => 1
)]); } ?>