<?php
$section1 = get_field('section_1');
$section2 = get_field('section_2');
?>

<?php /* Template Name: Kredyty */ ?>

<?php get_header() ?>

<section class="page loans loans1">
    <div class="page__row">
        <div class="page__left">
            <img src="<?php echo $section1['image'] ?>" />
        </div>
        <div class="page__right">
            <div class="page__titles">
                <h1><?php echo $section1['title'] ?></h1>
                <div class="page__title"><?php echo $section1['subtitle'] ?></div>
            </div>

            <div class="page__desc description">
                <?php echo $section1['description'] ?>
            </div>

            <div class="page__button">
                <?php $button = $section1['button'] ?>
                <a href="<?php echo $button['link'] ?>" class="button"><?php echo $button['name'] ?></a>
            </div>
        </div>
    </div>
</section>

<section class="page loans loans2">
    <div class="page__row">
        <div class="page__left">
            <img src="<?php echo $section2['image'] ?>" />
        </div>
        <div class="page__right">
            <div class="page__titles">
                <h1><?php echo $section2['title'] ?></h1>
                <div class="page__title"><?php echo $section2['subtitle'] ?></div>
            </div>

            <div class="page__desc description">
                <?php echo $section2['description'] ?>
            </div>
        </div>
    </div>
    <div class="calculator">
        <div class="calculator__block">
            <div class="calculator__name">Cena nieruchomości</div>
            <div class="calculator__info calculator__info2">Ustal kwotę kredytu</div>

            <div class="calculator__field calculator__price">
                <input type="text" value="626532" id="apartment_price" />
                <div class="calculator__label">PLN</div>
            </div>
        </div>

        <div class="calculator__block">
            <div class="calculator__row">
                <div class="calculator__name">Wkład własny</div>
                <div class="calculator__info">(20% ceny nieruchomości to minimum wymagane przez banki)</div>
            </div>

            <div class="slider-container">
                <div class="calculator__label2">10%</div>
                <input type="range" id="slider" min="10" max="90" step="1" value="20">
                <div class="calculator__label2">90%</div>
            </div>

            <div class="calculator__field calculator__percent">
                <input type="text" id="ownContribution" value="20" />
                <div class="calculator__label">%</div>
            </div>

            <div class="calculator__field calculator__price2">
                <input type="text" id="price2" readonly />
                <div class="calculator__label">PLN</div>
            </div>
        </div>

        <div class="calculator__block">
            <div class="calculator__row">
                <div class="calculator__name">Okres spłaty</div>
                <div class="calculator__info">(Im krótszy okres, tym wyższa rata miesięczna.)</div>
            </div>

            <div class="slider-container">
                <div class="calculator__label2">5 l.</div>
                <input type="range" id="slider2" min="5" max="35" step="5" value="30">
                <div class="calculator__label2">35 l.</div>
            </div>

            <div class="calculator__field calculator__year">
                <input type="text" value="30" id="years" />
                <div class="calculator__label">LAT</div>
            </div>
        </div>

        <div class="calculator__result">
            <div class="calculator__resultinfo">Szacowana rata miesięczna:</div>
            <div class="calculator__value"><span id="calculator__value"></span> zł</div>
        </div>
    </div>
</section>

<?php get_footer() ?>

<script>
    var price = calculateMonthlyPayment(100000, 0.10, 25);

    //alert(price);

    // Pobieranie elementów
    const slider = document.getElementById("slider");
    const ownContribution = document.getElementById("ownContribution");

    // Aktualizacja pola input na zmianę suwaka
    slider.addEventListener("input", () => {
        ownContribution.value = slider.value;

        var apartment_price = $("#apartment_price").val();
        var years = $("#years").val();

        var price = calculateMonthlyPayment(apartment_price, (slider.value / 100), years);
        $("#calculator__value").html(price);
    });

    // Aktualizacja suwaka na zmianę pola input
    ownContribution.addEventListener("input", () => {
        let value = parseInt(ownContribution.value);
        if (!isNaN(value) && value >= slider.min && value <= slider.max) {
            slider.value = value;

            var apartment_price = $("#apartment_price").val();
            var years = $("#years").val();

            var price = calculateMonthlyPayment(apartment_price, (slider.value / 100), years);
            $("#calculator__value").html(price);
        }
    });

    const slider2 = document.getElementById("slider2");
    const years = document.getElementById("years");

    slider2.addEventListener("input", () => {
        years.value = slider2.value;

        var apartment_price = $("#apartment_price").val();
        var ownContribution = $("#ownContribution").val();

        var price = calculateMonthlyPayment(apartment_price, (ownContribution / 100), slider2.value);
        $("#calculator__value").html(price);
    });

    years.addEventListener("input", () => {
        let value = parseInt(years.value);
        if (!isNaN(value) && value >= slider2.min && value <= slider2.max) {
            slider2.value = value;

            var apartment_price = $("#apartment_price").val();
            var ownContribution = $("#ownContribution").val();

            var price = calculateMonthlyPayment(apartment_price, (ownContribution / 100), slider2.value);
            $("#calculator__value").html(price);
        }
    });


    apartment_price.addEventListener("input", () => {
        let value = parseInt(apartment_price.value);
        if (!isNaN(value)) {
            var years = $("#years").val();
            var ownContribution = $("#ownContribution").val();

            var own_Contribution = ownContribution / 100;

            var price = calculateMonthlyPayment(value, own_Contribution, years);

            $("#calculator__value").html(price);
        }
    });

    document.getElementById("ownContribution").addEventListener("change", function() {
        let v = parseInt(this.value);
        if (v < 10) this.value = 10;
        if (v > 90) this.value = 90;
    });

    document.getElementById("years").addEventListener("change", function() {
        let v = parseInt(this.value);
        if (v < 5) this.value = 5;
        if (v > 35) this.value = 35;
    });

    $(document).ready(function() {
        var apartment_price = $("#apartment_price").val();
        var years = $("#years").val();
        var ownContribution = $("#ownContribution").val();

        var own_Contribution = ownContribution / 100;

        var price = calculateMonthlyPayment(apartment_price, own_Contribution, years);

        $("#calculator__value").html(price);
    });
</script>