311 lines
18 KiB
PHP
311 lines
18 KiB
PHP
<form class="load_simulator" method="post" action="<?= get_site_url() ?>/credit-step1">
|
|
<!-- <h3 class="simulator_title">Simulez votre crédit en ligne</h3> -->
|
|
<section class="simu_steps">
|
|
<div class="first-col col-sim">
|
|
<h4 class="simulator_subtitle"><span class="simu_step">1</span> Choisisez votre crédit</h4>
|
|
|
|
<div class="form-group row loan_type_radio">
|
|
<?= $select_radio; ?>
|
|
</div>
|
|
|
|
<?php
|
|
if($is_credit_auto) {
|
|
?>
|
|
<!-- <div class="form_group row loan_type_radio sub_auto sub_radio_sel">
|
|
<?= $select_subradio_auto; ?>
|
|
</div> -->
|
|
<?php
|
|
} else if(!$is_credit_hypothecaire) {
|
|
?>
|
|
<!-- <div id="select_subradio_auto" class="form_group row loan_type_radio sub_auto sub_radio_sel">
|
|
<?php echo $select_subradio_auto; ?>
|
|
</div> -->
|
|
<?php
|
|
}
|
|
?>
|
|
</div>
|
|
<div class="second-col col-sim stimulated-results">
|
|
<h4 class="simulator_subtitle"><span class="simu_step">2</span> Détail de votre crédit</h4>
|
|
|
|
<div class="range_selector selected_capital">
|
|
<!-- <label for="selected_capital">Capital choisi</label> -->
|
|
<h5>Capital choisi</h5>
|
|
<input class=" widget-input-text" type="number" min="1300" max="" name="selected_capital"
|
|
id="selected_capital" />
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<!-- <?php
|
|
if($is_credit_hypothecaire) {
|
|
?>
|
|
<div class="but_credit_immo hidden">
|
|
<label for="IDestateloantype">But du prêt hypotécaire</label>
|
|
<select name="estateloantype" id="IDestateloantype" class="form-control" required>
|
|
<option value="">Veuillez sélectionner votre type de prêt</option>
|
|
|
|
<?php foreach ($houseCreditTypes as $value => $label): ?>
|
|
<option value="<?php echo $value ?>"><?php echo $label['label'] ?></option>
|
|
<?php endforeach ?>
|
|
</select>
|
|
</div>
|
|
<?php
|
|
}
|
|
?> -->
|
|
<div class="range_selector selected_capital">
|
|
<!-- <label class="col-lg-4" for="selected_capital">Capital choisi</label>
|
|
<input class="col-lg-8 widget-input-text" type="text" name="selected_capital" id="selected_capital"/>
|
|
<div class="clearfix"></div> -->
|
|
<div class="hide-on-mobile">
|
|
<div class="outside_slider_capital_box-wrapper outside_box_wrapper">
|
|
<input type="button" value="-" class="stimulator-slider-control capital-minus">
|
|
<span class="outside_slider_capital_box outside_box">1300</span>
|
|
<input type="button" value="+" class="stimulator-slider-control capital-plus">
|
|
</div>
|
|
<div class="slider-count-wrapper slider_capital_wrapper">
|
|
<div id="selected_capital_range"></div>
|
|
<span class="after_bar"></span>
|
|
</div>
|
|
<!-- <input type="button" value="+" class="stimulator-slider-control capital-plus"> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="range_selector selected_months">
|
|
<!-- <label for="selected_months"><span class="simu_step">1</span> Durée choisie (nombre de mensualités)</label> -->
|
|
<h5 class="simulator_subtitle">Exemple de durée standard</h5>
|
|
<div class="clearfix"></div>
|
|
<div>
|
|
<!-- <div id="duree_slider">
|
|
<input type="button" value="-" class="stimulator-slider-control duree-minus">
|
|
<div class="slider-count-wrapper">
|
|
<div id="selected_months_range"></div>
|
|
</div>
|
|
<input type="button" value="+" class="stimulator-slider-control duree-plus">
|
|
</div> -->
|
|
|
|
<!-- <div class="form-check" style="margin: 20px 0;">
|
|
<input type="checkbox" class="form-check-input" id="switch_duration_type" name="switch_duration_type">
|
|
<label class="form-check-label" for="switch_duration_type" style="font-size: 0.9em;">
|
|
Je souhaite choisir ma durée de remboursement
|
|
</label>
|
|
</div> -->
|
|
|
|
<section class="duree_holder determined_choices">
|
|
<?php
|
|
if($is_credit_hypothecaire) {
|
|
?>
|
|
<ul id="date-range-selector" class="date-range-buttons">
|
|
<li data-duree="10" class="duree-btn months-active selected">10 ans<span
|
|
class="mensualite 10_ans"></span></li>
|
|
<li data-duree="15" class="duree-btn months-active selected">15 ans<span
|
|
class="mensualite 15_ans"></span></li>
|
|
<li data-duree="20" class="duree-btn months-active selected">20 ans<span
|
|
class="mensualite 20_ans"></span></li>
|
|
<li data-duree="25" class="duree-btn months-active selected">25 ans<span
|
|
class="mensualite 25_ans"></span></li>
|
|
<li data-duree="30" class="duree-btn months-active selected">30 ans<span
|
|
class="mensualite 30_ans"></span></li>
|
|
</ul>
|
|
<?php
|
|
} else {
|
|
?>
|
|
<ul id="date-range-selector" class="date-range-buttons">
|
|
<li data-duree="24" class="duree-btn months-active selected">24<span
|
|
class="mensualite mens_24"></span></li>
|
|
<li data-duree="30" class="duree-btn months-inactive">30<span
|
|
class="mensualite mens_30"></span></li>
|
|
<li data-duree="36" class="duree-btn months-inactive">36<span
|
|
class="mensualite mens_36"></span></li>
|
|
<li data-duree="42" class="duree-btn months-inactive">42<span
|
|
class="mensualite mens_42"></span></li>
|
|
<li data-duree="48" class="duree-btn months-inactive">48<span
|
|
class="mensualite mens_48"></span></li>
|
|
<li data-duree="60" class="duree-btn months-inactive">60<span
|
|
class="mensualite mens_60"></span></li>
|
|
<li data-duree="72" class="duree-btn months-inactive">72<span
|
|
class="mensualite mens_72"></span></li>
|
|
<li data-duree="84" class="duree-btn months-inactive">84<span
|
|
class="mensualite mens_84"></span></li>
|
|
<li data-duree="96" class="duree-btn months-inactive">96<span
|
|
class="mensualite mens_96"></span></li>
|
|
<li data-duree="108" class="duree-btn months-inactive">108<span
|
|
class="mensualite mens_108"></span></li>
|
|
<li data-duree="120" class="duree-btn months-inactive">120<span
|
|
class="mensualite mens_120"></span></li>
|
|
</ul>
|
|
<?php
|
|
}
|
|
?>
|
|
</section>
|
|
|
|
<section class="duree_holder free_choice">
|
|
<!-- <div class="slider-duree-wrapper">
|
|
<div id="selected_duree_range"></div>
|
|
<span class="after_bar"></span>
|
|
</div> -->
|
|
<div id="duree_slider">
|
|
<!-- -->
|
|
|
|
<div class="duree_infos">
|
|
<h5 class="simulator_subtitle">Votre durée</h5>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="col-md-12">
|
|
<div class="input-group">
|
|
<input type="text" id="selected_months" name="selected_months"
|
|
class="form-control" value="24" />
|
|
<div class="input-group-append">
|
|
<span
|
|
class="input-group-text"><?= $is_credit_hypothecaire ? 'Ans' : 'Mois' ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hide-on-mobile selected_duree">
|
|
<div class="outside_slider_duree_box-wrapper outside_box_wrapper">
|
|
<input type="button" value="-" class="stimulator-slider-control duree-minus">
|
|
<span class="outside_slider_duree_box outside_box">24</span>
|
|
<input type="button" value="+" class="stimulator-slider-control duree-plus">
|
|
</div>
|
|
<div class="slider-count-wrapper slider_duree_wrapper">
|
|
<div id="selected_months_range"></div>
|
|
<span class="after_bar_month"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <input type="button" value="+" class="stimulator-slider-control duree-plus"> -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="third-col col-sim stimulated-results">
|
|
<h4 class="simulator_subtitle"><span class="simu_step">3</span>Résultat de votre simulation</h4>
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="ls_result_label">Montant emprunté : </div>
|
|
<div class="ls_result_value"><span class="montant_value">1300</span> €</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="ls_result_label">Durée : </div>
|
|
<div class="ls_result_value"><span class="duree_value">24</span></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="ls_result_label">Mensualité : </div>
|
|
<div class="ls_result_value"><span class="montant_total_value">61.63</span> €</div>
|
|
</div>
|
|
<?php
|
|
if($is_credit_hypothecaire) {
|
|
?>
|
|
<div class="col-md-12"><div class="ls_result_label">Taux débiteur : </div><div class="ls_result_value"><span class="taux_debiteur_fixe_value">0</span></div></div>
|
|
<div class="col-md-12"><div class="ls_result_label">TAEG* : </div><div class="ls_result_value"><span class="taeg_value">0</span></div></div>
|
|
<?php } else { ?>
|
|
<div class="col-md-12"><div class="ls_result_label">Taux débiteur : </div><div class="ls_result_value"><span class="taux_debiteur_fixe_value">0</span></div></div>
|
|
<div class="col-md-12"><div class="ls_result_label">TAEG : </div><div class="ls_result_value"><span class="taeg_value">0</span></div></div>
|
|
<?php } ?>
|
|
<div class="col-md-12">
|
|
<div class="ls_result_label final">Coût total : </div>
|
|
<div class="ls_result_value"><span class="cout_total_value final">0</span> €</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="pat_plus75000 hidden">
|
|
<div class="notice-info"
|
|
style="background-color: rgba(247, 102, 34, 0.15); padding: 15px; border-radius: 8px; margin: 15px 0; float: left;">
|
|
<p style="font-size: 0.9em; margin: 0; color: #192c4a;">
|
|
<strong>Information importante :</strong><br>
|
|
Pour les prêts supérieurs à 75.000€ :
|
|
<ul style="margin: 10px 0 0 20px; padding: 0; color: #192c4a;">
|
|
<li>Réservé aux propriétaires immobiliers</li>
|
|
<li>Possibilité de garantie hypothécaire sur le bien immobilier</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-check" style="margin: 20px 0;">
|
|
<input type="checkbox" class="form-check-input accept_credit" id="acceptConditions"
|
|
name="acceptConditions">
|
|
<label class="form-check-label" for="acceptConditions" style="font-size: 0.9em;">
|
|
Je comprends et souhaite continuer
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="credit_infos hidden">
|
|
<div class="notice-info" id="credit_infos"
|
|
style="background-color: rgba(247, 102, 34, 0.15); padding: 15px; border-radius: 8px; margin: 15px 0; float: left; color: #192c4a;">
|
|
</div>
|
|
|
|
<div class="col-md-12 disclaimer_infos">
|
|
<div class="form-check" style="margin: 20px 0;">
|
|
<input type="checkbox" class="form-check-input accept_credit" id="acceptConditions_infos"
|
|
name="acceptConditions_infos">
|
|
<label class="form-check-label" for="acceptConditions_infos" style="font-size: 0.9em;">
|
|
Je comprends et souhaite continuer
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <section class="credit-incentive">
|
|
<h4 class="simulator_subtitle">En un simple clic et sans engagement, demander votre crédit</h4>
|
|
</section> -->
|
|
|
|
<section class="btn_holder">
|
|
<section class="credit-incentive">
|
|
<h4 class="simulator_subtitle">En un simple clic et sans engagement, demander votre crédit</h4>
|
|
</section>
|
|
<button type="submit" class="btn btn-warning stimulator_result_btn">Introduire votre demande</button>
|
|
<div class="col-md-12 advice-text">Attention, emprunter de l'argent coûte aussi de l'argent.</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<div class="row">
|
|
|
|
<!-- <div class="col-md-6 col-sm-12 padding-right">
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Montant emprunté : </div><div class="stimulator_value"><span class="montant_value">1300</span> €</div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Durée : </div><div class="stimulator_value"><span class="duree_value">24</span></div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Mensualité : </div><div class="stimulator_value"><span class="montant_total_value">61.63</span> €</div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">TAEG : </div><div class="stimulator_value"><span class="taeg_value">0</span> %</div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Taux débiteur : </div><div class="stimulator_value"><span class="taux_debiteur_fixe_value">0</span> %</div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Coût total : </div><div class="stimulator_value"><span class="cout_total_value">0</span> %</div></div>
|
|
<input type="hidden" id="hidden_montant_total_value" name="hidden_montant_total_value">
|
|
</div> -->
|
|
|
|
<!-- <div class="col-md-6 col-sm-12 padding-left">
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Coût total : </div><div class="stimulator_value"><span id="cout_total_value">31200</span> €</div></div>
|
|
<input type="hidden" id="hidden_cout_total_value" name="hidden_cout_total_value">
|
|
<div id="stimulator_label_tdf_1" style="display:none;">
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">TAEG* : </div><div class="stimulator_value"><span id="taeg_value">13.5</span></div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Taux débiteur fixe : </div><div class="stimulator_value"><span id="taux_debiteur_fixe_value">13.5</span></div></div>
|
|
<input type="hidden" id="hidden_taeg_value" name="hidden_taeg_value">
|
|
</div>
|
|
<div id="stimulator_label_tdf_2" style="display:none;">
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Taux nominal annuel* : </div><div class="stimulator_value"><span id="taeg_value_2">13.5</span></div></div>
|
|
<div class="col-sm-12 stimulator_info_block"><div class="stimulator_label">Taux nominal annuel = taux réel qui correspond à la mensualité</div></div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div style="clear: both"></div>
|
|
|
|
<div class="col-md-12 disclaimer hide-on-mobile"></div>
|
|
|
|
<div class="col-md-12" id="additional_messages"></div>
|
|
|
|
</div>
|
|
<input type="hidden" id="hidden_taeg_value" name="hidden_taeg_value">
|
|
<input type="hidden" id="hidden_cout_total_value" name="hidden_cout_total_value">
|
|
<input type="hidden" id="hidden_montant_total_value" name="hidden_montant_total_value">
|
|
<?php
|
|
if($is_credit_hypothecaire) {
|
|
?>
|
|
<input type="hidden" id="estateloantype" name="estateloantype">
|
|
<?php
|
|
}
|
|
?>
|
|
<input type="hidden" name="loan_type" id="loan_type" value="<?= $cd_default_loan_stimulator ?>">
|
|
</form>
|