Pour un crédit de : €, soit € sur 60 mois TAEG fixe 4.89 %. Montant total dû : €.
Pour un crédit de : €, soit € sur 60 mois TAEG fixe 4.89 %. Montant total dû : €.
<?php
$currentDirectory = __DIR__;
$fakeDatasFile = __DIR__ . "/datas/fake-datas.json";
if (!empty($_GET['page'])):
$fakeDatas = "../" . $_GET['directory'] . "/" . $fakeDatasFile;
endif;
if(!empty($_GET['datas'])):
$fakeDatasFile = './template/datas/' . $_GET['datas'] . '-datas.json';
endif;
$fakeDatas = json_decode(file_get_contents($fakeDatasFile), true);
$nbItems = count($fakeDatas['datas']);
?>
<div class="px-7.5"
x-data="rangeSliderBars(<?= $fakeDatas['min'] ?>, <?= $fakeDatas['max'] ?>, <?= $fakeDatas['min'] ?>, <?= $fakeDatas['max'] ?>, <?= (int)$fakeDatas['taeg'] ?>, <?= $fakeDatas['month'] ?>)"
>
<div class="relative" @mousemove.window="move()" @mouseup.window="dragEnd">
<div x-ref="bars" data-number="<?= $nbItems ?>" class="flex h-20 items-end justify-center">
<?php foreach ($fakeDatas['datas'] as $key => $data): ?>
<div id="bar_<?= $key ?>" class="bar border-white border-l border-r bg-primary-light rounded-tl-[3px] rounded-tr-[3px]" data-value="<?= $data['value'] ?>" style="height: <?= $data['percent'] ?>%; width: calc(100% / 26)"></div>
<?php endforeach; ?>
</div>
<div class="relative z-10 h-0.75">
<div x-ref="rangeBar" class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3] after:bg-[#C2C6D3] after:h-0.75 after:absolute after:w-7 after:right-0 after:translate-x-full before:bg-[#C2C6D3] before:h-0.75 before:absolute before:w-7 before:left-0 before:-translate-x-full"></div>
<button x-ref="controllerLeft"
class="controller-left absolute z-30 w-9 h-9 top-0 left-0 bg-white border border-[#C2C6D3] rounded-full -mt-4 -translate-x-1/2 flex gap-1.5 justify-center items-center"
@mousedown="triggerMin"
id="controllerLeft"
>
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
</button>
<button x-ref="controllerRight" class="controller-right absolute z-30 w-9 h-9 top-0 bg-white border border-[#C2C6D3] rounded-full -mt-4 translate-x-1/2 flex gap-1.5 justify-center items-center"
@mousedown="triggerMax">
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
<span class="h-3.5 w-px bg-[#C2C6D3] block"></span>
</button>
</div>
</div>
<div class="flex justify-between items-start py-5 mt-2.5 -mx-7.5 gap-2.5">
<div class="max-w-1/2">
<div class="form-element text">
<input x-ref="minInput"
name="Budget min"
class="form-input form-input--blue w-40 max-w-full"
id="budget_min"
type="text"
title="Budget min"
placeholder=" "
pattern="\S+"
maxlength="5"
@keydown.enter="triggerInputMin"
@keydown.esc="triggerInputMin; $el.blur()"
x-model="minSelected"
>
<label class="label" for="budget_min">
<span>Prix mini</span>
</label>
</div>
<?php if($fakeDatas['taeg']): ?>
<div class="mt-5 text-xs md:text-base">
Pour un crédit de : <span x-ref="baseMinCredit"></span> €, soit <span x-ref="minCredit"></span> € sur 60 mois TAEG fixe <?= $fakeDatas['taeg'] ?> %. Montant total dû : <span x-ref="totalMinCredit"></span> €.
</div>
<?php endif; ?>
</div>
<div class="max-w-1/2">
<div class="form-element text">
<input x-ref="maxInput"
name="Budget min"
class="form-input form-input--blue w-40 max-w-full"
id="budget_max"
type="text"
title="Budget min"
placeholder=" "
pattern="\S+" maxlength="5"
@keydown.enter="triggerInputMax"
@keydown.esc="triggerInputMax; $el.blur()"
x-model="maxSelected"
>
<label class="label" for="budget_min">
<span>Prix mini</span>
</label>
</div>
<?php if($fakeDatas['taeg']): ?>
<div class="mt-5 text-xs md:text-base">
Pour un crédit de : <span x-ref="baseMaxCredit"></span> €, soit <span x-ref="maxCredit"></span> € sur 60 mois TAEG fixe <?= $fakeDatas['taeg'] ?> %. Montant total dû : <span x-ref="totalMaxCredit"></span> €.
</div>
<?php endif; ?>
</div>
</div>
</div>{
"min": 210,
"max": 930,
"step": 10,
"taeg": 4.89,
"month": 60,
"datas": {
"210": {
"value": "210",
"percent": "5"
},
"220": {
"value": "220",
"percent": "10"
},
"230": {
"value": "230",
"percent": "5"
},
"240": {
"value": "240",
"percent": "25"
},
"250": {
"value": "250",
"percent": "10"
},
"260": {
"value": "260",
"percent": "28"
},
"270": {
"value": "270",
"percent": "34"
},
"280": {
"value": "280",
"percent": "42"
},
"290": {
"value": "290",
"percent": "28"
},
"300": {
"value": "300",
"percent": "65"
},
"310": {
"value": "310",
"percent": "50"
},
"320": {
"value": "320",
"percent": "32"
},
"330": {
"value": "330",
"percent": "57"
},
"340": {
"value": "340",
"percent": "58"
},
"350": {
"value": "350",
"percent": "56"
},
"360": {
"value": "360",
"percent": "65"
},
"370": {
"value": "370",
"percent": "60"
},
"380": {
"value": "380",
"percent": "31"
},
"390": {
"value": "390",
"percent": "62"
},
"400": {
"value": "400",
"percent": "55"
},
"410": {
"value": "410",
"percent": "61"
},
"420": {
"value": "420",
"percent": "70"
},
"430": {
"value": "430",
"percent": "40"
},
"440": {
"value": "440",
"percent": "59"
},
"450": {
"value": "450",
"percent": "98"
},
"460": {
"value": "460",
"percent": "80"
},
"470": {
"value": "470",
"percent": "95"
},
"480": {
"value": "480",
"percent": "39"
},
"490": {
"value": "490",
"percent": "100"
},
"500": {
"value": "500",
"percent": "89"
},
"510": {
"value": "510",
"percent": "40"
},
"520": {
"value": "520",
"percent": "36"
},
"530": {
"value": "530",
"percent": "63"
},
"540": {
"value": "540",
"percent": "52"
},
"550": {
"value": "550",
"percent": "72"
},
"560": {
"value": "560",
"percent": "60"
},
"570": {
"value": "570",
"percent": "18"
},
"580": {
"value": "580",
"percent": "37"
},
"590": {
"value": "590",
"percent": "90"
},
"600": {
"value": "600",
"percent": "76"
},
"610": {
"value": "610",
"percent": "71"
},
"620": {
"value": "620",
"percent": "67"
},
"630": {
"value": "630",
"percent": "88"
},
"640": {
"value": "640",
"percent": "40"
},
"650": {
"value": "650",
"percent": "36"
},
"660": {
"value": "660",
"percent": "46"
},
"670": {
"value": "670",
"percent": "39"
},
"680": {
"value": "680",
"percent": "52"
},
"690": {
"value": "690",
"percent": "48"
},
"700": {
"value": "700",
"percent": "24"
},
"710": {
"value": "710",
"percent": "10"
},
"720": {
"value": "720",
"percent": "89"
},
"730": {
"value": "730",
"percent": "40"
},
"740": {
"value": "740",
"percent": "36"
},
"750": {
"value": "750",
"percent": "63"
},
"760": {
"value": "760",
"percent": "52"
},
"770": {
"value": "770",
"percent": "72"
},
"780": {
"value": "780",
"percent": "60"
},
"790": {
"value": "790",
"percent": "18"
},
"800": {
"value": "800",
"percent": "37"
},
"810": {
"value": "810",
"percent": "90"
},
"820": {
"value": "820",
"percent": "76"
},
"830": {
"value": "830",
"percent": "71"
},
"840": {
"value": "840",
"percent": "67"
},
"850": {
"value": "850",
"percent": "88"
},
"860": {
"value": "860",
"percent": "40"
},
"870": {
"value": "870",
"percent": "36"
},
"880": {
"value": "880",
"percent": "46"
},
"890": {
"value": "890",
"percent": "39"
},
"900": {
"value": "900",
"percent": "52"
},
"910": {
"value": "910",
"percent": "48"
},
"920": {
"value": "920",
"percent": "24"
},
"930": {
"value": "930",
"percent": "10"
}
}
}