<?php
session_start();
require '../config.php';
require '../layouts/header.php';
?>
<div class="wrapper pt-4">
    <br>
    <style>.slidecontainer {width: 100%;}.slider {-webkit-appearance: none;width: 100%;height: 25px;background-color: #B19973 !important;outline: none;opacity: 0.7;-webkit-transition: .2s;transition: opacity .2s;border-radius: 12px;}.slider:hover {opacity: 1;}.slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 25px;height: 25px;background: white;cursor: pointer;border-radius: 12px;}.slider::-moz-range-thumb {width: 25px;height: 25px;background: #000000;cursor: pointer;}</style>
    <div class="container">
        <div class="row my-5">
        <div class="col-sm-5 col-12 mb-5">
            <img src="<?= opt_get('aWNvbi13ZWI=') ?>" class="mlImg" alt="<?= config('web','title');?>" width="200" height="200">
            <h5 class="text-white mt-3 mb-1">Kalkulator Zodiac</h5>
            <small class="text-white">Kalkulator Zodiac ini berfungsi untuk mengetahui total maksimal diamond yang kamu butuhkan untuk mendapatkan skin Zodiac.<br></small></div>
            <div class="col-sm-7 col-12">
                <form method="post" target="">
                <div class="row">
                    <h5 class="mb-2 text-white">Geser Sesuai Point Zodiac Anda</h5>
                    <div class="col-12 col-lg-8 mb-5">
                        <div class="slidecontainer">
                            <p>&nbsp;</p>
                            <span><span color="white">Star Point Anda : </span></span>
                            <span id="f" style="font-weight:bold;color:#30cdf8">50</span><br><input type="range" min="0" max="99" value="50" name="sld6" class="slider" id="myRange" onchange="show_value2(this.value)">
                            <span color="white">Membutuhkan Maksimal : </span>
                            <span id="slider_value2" style="color:white;font-weight:bold;"></span>
                            <i class="fas fa-gem" style="color: #00c8c8"></i><br>
                        </div>
                        <br>
                        <a href="<?= base_url('id/product/mobile-legends');?>" class="btn btn-primary d-block w-100">Klik Untuk Membeli Diamond</a>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
<script>
        function show_value2(x) {

            if (x < 90) {
                yz = Math.ceil((2000 - x * 20) * 850 / 1000);
            }

            if (x > 89) {
                yz = Math.ceil((2000 - x * 20));
            }

            document.getElementById("slider_value2").innerHTML = yz;

        }
    </script>
<script>
        var slideCol = document.getElementById("myRange");
        var y = document.getElementById("f");
        y.innerHTML = slideCol.value;

        slideCol.oninput = function() {
            y.innerHTML = this.value;
        }
    </script>
</div>
<?php require '../layouts/footer.php';?>