<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src='js/jquery-3.3.1.min.js'></script>
<script src="js/jquery.redirect.js"></script>
    
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/font-awesome.min.css" >
<script src="js/bootstrap.min.js" ></script>

    
    
</head>
    <center>
 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Ph.Volt.
</button>
   </center>
<!-- 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">Calcul Toiture en Pan </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
    
          <form>
                <div class="row">
    <div class="col">
      
  <div class="form-group ">
    <label for="exampleFormControlInput1">Nbre modules. <labelSurface></labelSurface></label>
    <input  type="number" name="panneaux" min="2" max="40" class="form-control" id="ControlInput1" value="10" placeholder="12">
  </div>
            
               <div class="form-group">
    <label for="exampleFormControlSelect0">Marque et puissance :</label>
    <select id="panneaux" class="custom-select">
  <option data-loss="5" data-lg="1686" data-ht="1016" data-value="335" data-prix="177" selected value="1">LG 335</option>
<option data-loss="47" data-lg="1686" data-ht="1016" data-value="365" data-prix="263" selected value="1">LG 365</option>
  <option data-loss="54" data-lg="1685" data-ht="1000" data-value="315" data-prix="170" value="2">Q cell 315</option>
  <option data-loss="25" data-lg="1559" data-ht="1046" data-value="345" data-prix="279" value="3">Sunpower X21 345W</option>
</select>
  </div>
                 
              
 
              </div>   
                   
                  
                  
                 <div class="col">
  <div class="form-group">
    <label for="exampleFormControlSelect2">Type de compteur électrique</label>
   <select  id="phase" class="custom-select">
  <option data-prix="1" selected value="1">Mono 220</option>
  <option data-prix="2" value="2">Triphasé 220 2 ondul.</option>
  <option data-prix="3" value="3">Triphasé 220 3 ondul.</option>
</select>
  </div>
              <div class="form-group">
    <label for="exampleFormControlSelect2">Difficulté</label>
   <select id="ChantierP" class="custom-select">
   <option data-prix="0" selected value="1">Facile</option>
   <option data-prix="250" value="2">Moyennement facile</option>
   <option data-prix="500" value="3">Acces dificile</option>
   <option data-prix="1000" value="4">Acces très dificile</option>
</select>
  </div>
              
              
              

              </div>
              
              </div>
              
              
      <div class="row">
            <div class="col">
          
           <div class="form-group">
    <label for="exampleFormControlSelect1">Toiture en :</label>
    <select  id="toit" class="custom-select">
  <option data-prix="35"  selected value="1">Tuiles</option>
  <option data-prix="50" value="2">Ardoises</option>
  
</select>
  </div>
          </div>
           <div class="col">
            <div class="form-group">
    <label for="exampleFormControlSelect6">Orient.(incl.35°)</label>
    <select  id="orientation" class="custom-select">
  <option data-pc="100"  selected value="1">Sud</option>
  <option data-pc="95" value="2">Sud-est</option>
  <option data-pc="83" value="2">Est</option>
  <option data-pc="95" value="2">Sud-Ouest</option>
  <option data-pc="82" value="2">Ouest</option>
  
</select>
               </div>
          </div>
           <div class="col">
                         <div class="form-group">
    <label for="exampleFormControlSelect3"><labelPwErr></labelPwErr></label>
   <select id="onduleur" class="custom-select">
  <option data-prix="1020"  data-power="3800" selected value="1">SMA SB 3,6</option>
  <option data-prix="1060" data-power="4400" value="2">SMA SB 4</option>
  <option data-prix="1180" data-power="5500" value="3">SMA SB 5</option>
  <option data-prix="1450" data-power="5500" value="2">SMA 5000 TL-20 </option>
  <option data-prix="1570" data-power="6600" value="3">SMA 6000 TL-20</option>
   <option data-prix="1680" data-power="10000" value="2">SMA 7000 TL-20</option>
  <option data-prix="1780" data-power="10000" value="3">SMA 8000 TL-20</option>
</select>
  </div>
          
              </div></div>
              
              
              
              
              
              <hr>
     <div class="row">
    <div class="col">           
           <div class="form-group ">
    <label for="exampleFormControlInput1">Cables. </label>
    <input  type="number" name="cable" min="250" class="form-control" id="CableInput" value="250" placeholder="250">
  </div>      
         </div>
          <div class="col">           
           <div class="form-group ">
    <label for="exampleFormControlInput1">Reception. </label>
    <input  type="number" name="recption" min="90" class="form-control" id="RecInput" value="125" placeholder="125">
  </div>      
         </div>
          <div class="col">           
           <div class="form-group ">
    <label for="exampleFormControlInput1">M.O. </label>
    <input  type="number" name="MOplacement" min="1500" class="form-control" id="MOInput" value="1500" placeholder="1500" step="100">
  </div>      
         </div>
         
          <div class="col" style="margin-top: auto; margin-bottom: auto;"  >    
       <div class="form-group " style="margin-top: 30px;">
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Détails 
  </button>
</div>
       </div>
      
              </div>
              
              
              
              
<div class="collapse" id="collapseExample">
  <div class="card card-body">
        <labelDetails></labelDetails>
        
        <labelPwErr></labelPwErr>
      
      
       <button class="btn btn-link btn-sm" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
    <labelCalc></labelCalc>
  </button>
      <div class="collapse" id="collapseExample2">
  <div class="card card-body">
         
        <labelPw></labelPw>
 
      
  </div>
</div>  
      
      
      
  </div>
</div>      
             
              
</form>
          
    <script>
        
        	function formatnombre(valeur,decimal) {
	valeur=valeur.replace(',','.');	
	valeur=valeur.replace(' ','');		
	valeurnb=parseFloat(valeur);
	valeurnb=format((parseFloat(valeurnb)),decimal);
    valeur=valeurnb.toString();
	valeur=valeur.replace('.',',');		
	if (parseFloat(valeurnb)<0) {valeur=""+valeur;}
     if (parseFloat(valeurnb)==0) {valeur="0";}
		//alert(valeur);
	return valeur;
}
			
	
		function format(valeur,decimal) {
	separateur=" " ;
// formate un chiffre avec 'decimal' chiffres après la virgule et un separateur
	var deci=Math.round( Math.pow(10,decimal)*(Math.abs(valeur)-Math.floor(Math.abs(valeur)))) ; 
	var val=Math.floor(Math.abs(valeur));
	if ((decimal==0)||(deci==Math.pow(10,decimal))) {val=Math.floor(Math.abs(valeur)); deci=0;}
	var val_format=val+"";
	var nb=val_format.length;
	for (var i=1;i<4;i++) {
		if (val>=Math.pow(10,(3*i))) {
			val_format=val_format.substring(0,nb-(3*i))+separateur+val_format.substring(nb-(3*i));
		}
	}
	if (decimal>0) {
		var decim=""; 
		for (var j=0;j<(decimal-deci.toString().length);j++) {decim+="0";}
		deci=decim+deci.toString();
		val_format=val_format+"."+deci;
	}
	if (parseFloat(valeur)<0) {val_format="-"+val_format;}
	return val_format;
}
        
        
         // Routine calcul 
        function CalcPrix(MOch) {
            
            var sum = 0; 
            $('#panneaux').find(":selected").each(function(){
		      sum = sum +  parseInt($(this).val());
                //alert(sum);
              });
            var valeur = parseInt( $('#ControlInput1').val());
            var RecValeur = parseInt( $('#RecInput').val());
            var CableValeur = parseInt( $('#CableInput').val());
            var powerpannel = parseInt( $('#panneaux').find(':selected').data('value'));
            var Orienpannel = parseInt( $('#orientation').find(':selected').data('pc'));
             powerpannel = (powerpannel * Orienpannel)/100;
            var lgpannel = parseInt( $('#panneaux').find(':selected').data('lg'));
            var htpannel = parseInt( $('#panneaux').find(':selected').data('ht'));
            var prix=parseInt( $('#panneaux').find(':selected').data('prix'));
            var prixtoit=parseInt( $('#toit').find(':selected').data('prix'));
            var prixondul=parseInt( $('#onduleur').find(':selected').data('prix'));
            var powerondul=parseInt( $('#onduleur').find(':selected').data('power'));
            var phase=parseInt( $('#phase').find(':selected').data('prix'));
            var MEC=parseInt( $('#ChantierP').find(':selected').data('prix'));
            
            // calcul main d'oeuvre
            
            var MO=parseInt( $('#MOInput').val());
            
            var TauxHoraire=45;
            if (MOch === 0 ) { 
            if (valeur > 7) { MO=2000; }
             if (valeur > 13) { MO=2300; }
             if (valeur > 15) { MO=2350; }
             if (valeur > 17) { MO=2500; }
             if (valeur > 21) { MO=2750; }
             if (valeur > 23) { MO=3000; }
             if (valeur > 25) { MO=3250; }
             if (valeur > 29) { MO=3500; }
             if (valeur > 35) { MO=3750; }
             if (valeur > 36) { MO=4000; }
          }

            var totprix=(valeur*prix)+(valeur*prixtoit)+(prixondul*phase)+MO+MEC+RecValeur+CableValeur;
            sum = (powerpannel * valeur) ;
            var surfacepanneaux=lgpannel*htpannel*valeur;
           surfacepanneaux=surfacepanneaux/1000000;
           // alert(format(surfacepanneaux,2));
            $('labelSurface').html(format(surfacepanneaux,2)+' M2');
            // $('labelPwErr').last().html(' Onduleur OK '); 
       
        $('labelPwErr').last().html('  '); 
        $('labelPwErr').first().html('Onduleur'); 
            
       
            if (sum > (powerondul*phase)) {  $('labelPwErr').html('<div style="color:red;"> Onduleur sous puissant !! </div>'); }
            
            
           // alert(valeur) ;
          //     $('labelPw').last().html('Prix placé HTVA : '+totprix+' € ');
            
            
            
            // rentabilité 
            // cout KW/H 0,25€ avec augmenation de 5% par an
            var taux=0.05;
            var prixKw=0.25;
            var rendementdec=0.0025;
            rendementdec=parseInt( $('#panneaux').find(':selected').data('loss'));
            rendementdec=rendementdec/10000;
            var renta=25;
            var seuil = totprix/renta;
            var tempexp=(1+taux);
            var anneeseuil=1;
            
        //    seuil = (Math.pow(tempexp,anneeseuil)*prixKw)*(anneeseuil*sum);
            renta = Math.pow(tempexp,anneeseuil)*prixKw;
            renta=25;
            var totprod=0;
            var totprodold=0;
            var totargent=0;
            var totargentold=0;
            var totstring=' <div class="row" style="font-size:11px;"><div class="col">Année</div> <div class="col"> Production Cumul.</div> <div class="col">Montant Cumul.</div></div>';
            var trueannee=0;
            for (anneeseuil = 0; anneeseuil < 25; anneeseuil++) { 
                totprod+=sum/Math.pow(1+rendementdec,(anneeseuil)) ;
                totargentold=totargent;
                totargent+=(Math.pow(tempexp,anneeseuil)*prixKw)*(totprod-totprodold);
                totprodold=totprod;
                trueannee=anneeseuil+1;
                totstring+= ' <div class="row" style="font-size:11px;"><div class="col">'+ trueannee+'</div> <div class="col"> '+format(totprod,0)+'W</div> <div class="col"> '+format(totargent,0)+'€</div></div>';
                 $('labelPw').html(totstring);
                seuil=totargent;
             
                if (seuil > totprix) { renta=anneeseuil; break;}
                }           
            //renta++;
             $('labelDetails').html('<div class="row" style="font-size:13px;"><div class="col">Prix placé HTVA : '+totprix+' € <br>Puissance : '+sum + ' W </div> <div class="col">Achat panneaux : '+ (valeur*prix)+' €<br>Prix onduleur : '+(prixondul*phase)+' € </div></div><p style="font-size:13px;"> Revenus cumulés : '+format(seuil,2)+' €'+' soit rentabilté à '+renta+' an. et '+ (Math.ceil(((totprix-totargentold)/((totargent-totargentold)/12))))+' mo. </p>' );
             $('labelCalc').html('<p style="font-size:10px;">Cout achat kW = '+prixKw+' aug. 5%/an et perte production '+rendementdec*100+'%/an </p>' );
            
              if (MOch === 0 ) {   $('#MOInput').val(MO);  }
            
            
            
            
            
            }
        // Routine calcul END
        
        
        
            $('select').change(function(){
               CalcPrix(0);
            });
        
            $('#ControlInput1').on('input', function() {
                  CalcPrix(0);
               } );
         $('#CableInput').on('input', function() {
                  CalcPrix(0);
               } );
         $('#RecInput').on('input', function() {
                  CalcPrix(0);
               } );
    
             $('#MOInput').on('input', function() {
                  var x =  CalcPrix(1);
                          } );
            $( document ).ready(function() {
                 CalcPrix(0);
            });         
 
        

        
          </script>   
          
         
          
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" id="sauve">OK</button>
          
          <script>        // sauve 
              
 $("#sauve").click( function()
           {
    
    //alert('ok');
   
    $('#exampleModal').modal('hide');
           }
      );
          
          </script>
          
      </div>
    </div>
  </div>
</div>
        
        
     
<body>
</body>
</html>