<?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": 5000,
"max": 30000,
"step": 500,
"taeg": false,
"month": 60,
"datas": {
"5000": {
"value": "5000",
"percent": "5"
},
"5500": {
"value": "5500",
"percent": "10"
},
"6000": {
"value": "6000",
"percent": "5"
},
"6500": {
"value": "6500",
"percent": "25"
},
"7000": {
"value": "7000",
"percent": "10"
},
"7500": {
"value": "7500",
"percent": "28"
},
"8000": {
"value": "8000",
"percent": "34"
},
"8500": {
"value": "8500",
"percent": "42"
},
"9000": {
"value": "9000",
"percent": "28"
},
"9500": {
"value": "9500",
"percent": "65"
},
"10000": {
"value": "10000",
"percent": "50"
},
"10500": {
"value": "10500",
"percent": "32"
},
"11000": {
"value": "11000",
"percent": "57"
},
"11500": {
"value": "11500",
"percent": "58"
},
"12000": {
"value": "12000",
"percent": "56"
},
"12500": {
"value": "12500",
"percent": "65"
},
"13000": {
"value": "13000",
"percent": "60"
},
"13500": {
"value": "13500",
"percent": "31"
},
"14000": {
"value": "14000",
"percent": "62"
},
"14500": {
"value": "14500",
"percent": "55"
},
"15000": {
"value": "15000",
"percent": "61"
},
"15500": {
"value": "15500",
"percent": "70"
},
"16000": {
"value": "16000",
"percent": "40"
},
"16500": {
"value": "16500",
"percent": "59"
},
"17000": {
"value": "17000",
"percent": "98"
},
"17500": {
"value": "17500",
"percent": "80"
},
"18000": {
"value": "18000",
"percent": "95"
},
"18500": {
"value": "18500",
"percent": "39"
},
"19000": {
"value": "19000",
"percent": "100"
},
"19500": {
"value": "19500",
"percent": "89"
},
"20000": {
"value": "20000",
"percent": "40"
},
"20500": {
"value": "20500",
"percent": "36"
},
"21000": {
"value": "21000",
"percent": "63"
},
"21500": {
"value": "21500",
"percent": "52"
},
"22000": {
"value": "22000",
"percent": "72"
},
"22500": {
"value": "22500",
"percent": "60"
},
"23000": {
"value": "23000",
"percent": "18"
},
"23500": {
"value": "23500",
"percent": "37"
},
"24000": {
"value": "24000",
"percent": "90"
},
"24500": {
"value": "24500",
"percent": "76"
},
"25000": {
"value": "25000",
"percent": "71"
},
"25500": {
"value": "25500",
"percent": "67"
},
"26000": {
"value": "26000",
"percent": "88"
},
"26500": {
"value": "26500",
"percent": "40"
},
"27000": {
"value": "27000",
"percent": "36"
},
"27500": {
"value": "27500",
"percent": "46"
},
"28000": {
"value": "28000",
"percent": "39"
},
"28500": {
"value": "28500",
"percent": "52"
},
"29000": {
"value": "29000",
"percent": "48"
},
"29500": {
"value": "29500",
"percent": "24"
},
"30000": {
"value": "30000",
"percent": "10"
}
}
}