<?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": 2022,
"max": 1990,
"step": 500,
"taeg": false,
"month": 60,
"datas": {
"2022": {
"value": "2022",
"percent": "5"
},
"2021": {
"value": "2021",
"percent": "10"
},
"2020": {
"value": "2020",
"percent": "5"
},
"2019": {
"value": "2019",
"percent": "25"
},
"2018": {
"value": "2018",
"percent": "10"
},
"2017": {
"value": "2017",
"percent": "28"
},
"2016": {
"value": "2016",
"percent": "34"
},
"2015": {
"value": "2015",
"percent": "42"
},
"2014": {
"value": "2014",
"percent": "28"
},
"2013": {
"value": "2013",
"percent": "65"
},
"2012": {
"value": "2012",
"percent": "50"
},
"2011": {
"value": "2011",
"percent": "32"
},
"2010": {
"value": "2010",
"percent": "57"
},
"2009": {
"value": "2009",
"percent": "58"
},
"2008": {
"value": "2008",
"percent": "56"
},
"2007": {
"value": "2007",
"percent": "65"
},
"2006": {
"value": "2006",
"percent": "60"
},
"2005": {
"value": "2005",
"percent": "31"
},
"2004": {
"value": "2004",
"percent": "62"
},
"2003": {
"value": "2003",
"percent": "55"
},
"2002": {
"value": "2002",
"percent": "61"
},
"2001": {
"value": "2001",
"percent": "70"
},
"2000": {
"value": "2000",
"percent": "40"
},
"1999": {
"value": "1999",
"percent": "59"
},
"1998": {
"value": "1998",
"percent": "98"
},
"1997": {
"value": "1997",
"percent": "80"
},
"1996": {
"value": "1996",
"percent": "95"
},
"1995": {
"value": "1995",
"percent": "39"
},
"1994": {
"value": "1994",
"percent": "100"
},
"1993": {
"value": "1993",
"percent": "89"
},
"1992": {
"value": "1992",
"percent": "40"
},
"1991": {
"value": "1991",
"percent": "36"
},
"1990": {
"value": "1990",
"percent": "63"
}
}
}