Simple Product Calculator

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.simple-product-calculator {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background: var(--theme-colour);
    position: relative;

    h2 {
        margin-bottom: 2.75rem;
    }
    footer {
        padding-top: 3.125rem;
        position: relative;
        z-index: 3;

        @include media-breakpoint-down(md) {
            padding-top: 0;
        }
        button {
            margin: 0 auto;
        }
        p {
            padding-top: 1rem;
        }
    }
    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4rem;
        width: 100%;
        background: var(--theme-colour);
        z-index: 2;
    }
    &:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-1rem) rotate(45deg);
        height: 2rem;
        width: 2rem;
        background: var(--theme-colour);
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }
    &.results-open {
        &:before {
            transform: translateX(-50%) translateY(1rem) rotate(45deg);
        }
    }
}

.simple-product-calculator-results {
    display: none;
    padding-top: 3.75rem;
    padding-bottom: 3.125rem;

    h3 {
        margin-bottom: 3rem;
    }
    .calc-results {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        max-width: 40rem;
        margin: 0 auto 2.5rem auto;

        @include media-breakpoint-down(sm) {
            flex-direction: column;
            align-items: center;
        }
    }
    p {
        margin: 0;
    }
    .result-wrap {
        color: $red;
        flex-grow: 1;
        flex-basis: 0;

        p {
            font-weight: normal;
        }
    }
    .result {
        font-weight: bold;
        font-size: 3.125rem; // 50px

        @include media-breakpoint-down(md) {
            font-size: 1.5rem;
        }
    }
    .or {
        flex-grow: 1;
        flex-basis: 0;
        padding-bottom: 0.5rem;

        @include media-breakpoint-down(sm) {
            padding: 1rem 0;
        }
    }
    footer {
        margin: 0 auto;
        max-width: 32rem;

        p {
            margin-bottom: 2rem;
        }
    }
}

.range-slider {
    max-width: 18rem;
    margin: 0 auto;

    @include media-breakpoint-down(md) {
        margin-bottom: 3rem;
    }
    .value {
        font-weight: bold;
        margin-bottom: 0.5rem;
        font-size: 2.5rem; // 40px
    
        @include media-breakpoint-down(md) {
            font-size: 1.75rem;
        }
    }

    // resets for the range input
    input[type=range] {
        -webkit-appearance: none; // Hides the slider so that custom slider can be made
        width: 100%; // Specific width is required for Firefox.
        background: #fff; // Otherwise white in Chrome

        background-image: linear-gradient($red, $red);
        background-size: 50% 100%;
        background-repeat: no-repeat;
    }
      
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }
      
    input[type=range]:focus {
        outline: none; // Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though.
    }
      
    input[type=range]::-ms-track {
        width: 100%;
        cursor: pointer;
      
        // Hides the slider so custom styles can be added
        background: transparent; 
        border-color: transparent;
        color: transparent;
    }

    // Styling the Thumb
    // Special styling for WebKit/Blink
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 3px solid $red;
        height: 31px;
        width: 31px;
        border-radius: 100%;
        background: #ffffff;
        cursor: pointer;
        margin-top: -14px; // You need to specify a margin in Chrome, but in Firefox and IE it is automatic
    }
    
    // All the same stuff for Firefox
    input[type=range]::-moz-range-thumb {
        border: 3px solid $red;
        height: 31px;
        width: 31px;
        border-radius: 100%;
        background: #ffffff;
        cursor: pointer;
    }
    
    // All the same stuff for IE
    input[type=range]::-ms-thumb {
        border: 3px solid $red;
        height: 31px;
        width: 31px;
        border-radius: 100%;
        background: #ffffff;
        cursor: pointer;
    }

    // Styling the Track
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: transparent;
    }
    
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: transparent;
    }
      
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: transparent;
    }
      
    input[type=range]::-ms-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: #2a6495;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: #fff;
    }
    input[type=range]::-ms-fill-upper {
        background: #fff;
    }
    input[type=range]:focus::-ms-fill-upper {
        background: #fff;
    }
}

jQuery(function($){

    $(document).on('input', '.range-slider .range-number', function() {
        $(this).parents('.range-slider').find('.value').html( $(this).val() );
    });

    $(document).on('input', '.range-slider .range-time', function() {
        var time;
        if($(this).val() == 1 ) {
            var time = 'week';
        }
        if($(this).val() == 2 ) {
            var time = 'month';
        }
        if($(this).val() == 3 ) {
            var time = 'quarter';
        }

        $(this).parents('.range-slider').find('.value').html( time );
    });

    $('.js-simple-calc').click(function(e) {
        e.preventDefault();
        $('.simple-product-calculator-results').slideDown();
        $('.simple-product-calculator').addClass('results-open');

        calculateProducts();
    });

    function calculateProducts() {
        
        $('html,body').animate({
            scrollTop: $(".simple-product-calculator-results").offset().top - 150
        });

        var washrooms = $('.js-input-washrooms').val();
        var people = $('.js-input-people').val();
        var freq = $('.js-input-freq').val();

        // calculate number of tampons
        var tampons;
        // times tampons by 2 per cycle (month)
        if( freq == '1' ) {
            // weekly
            tampons = people;
        }
        if( freq == '2' ) { 
            // monthly
            tampons = people * 2;
        }
        if( freq == '3' ) { 
            // quarterly
            tampons = people * 6;
        }

        // now add small percentage based on number of washrooms
        // 5% if less than 5 washrooms
        if( washrooms <= '5' ) {
            tampons = tampons * 1.05;
        }
        // 10% between 5 and 9 washrooms
        if( washrooms >= '5' && washrooms < '10' ) {
            tampons = tampons * 1.1;
        }
        // 15% between 10 and 14 washroom
        if( washrooms >= '10' && washrooms < '15' ) {
            tampons = tampons * 1.15;
        }
        // 20% over 15 washrooms
        if( washrooms >= '15' ) {
            tampons = tampons * 1.2;
        }

        $('.js-tampons-result').html( Math.round(tampons) );

        // calculate number of pads
        var pads;
        // times tampons by 2 per cycle (month)
        if( freq == '1' ) {
            // weekly
            pads = people;
        }
        if( freq == '2' ) { 
            // monthly
            pads = people * 2;
        }
        if( freq == '3' ) { 
            // quarterly
            pads = people * 6;
        }

        // now add small percentage based on number of washrooms
        // 5% if less than 5 washrooms
        if( washrooms <= '5' ) {
            pads = pads * 1.05;
        }
        // 10% between 5 and 9 washrooms
        if( washrooms >= '5' && washrooms < '10' ) {
            pads = pads * 1.1;
        }
        // 15% between 10 and 14 washroom
        if( washrooms >= '10' && washrooms < '15' ) {
            pads = pads * 1.15;
        }
        // 20% over 15 washrooms
        if( washrooms >= '15' ) {
            pads = pads * 1.2;
        }

        $('.js-pads-result').html( Math.round(pads) );
    }

});

const rangeInputs = document.querySelectorAll('input[type="range"]')

function handleInputChange(e) {
  let target = e.target
  if (e.target.type !== 'range') {
    target = document.getElementById('range')
  } 
  const min = target.min
  const max = target.max
  const val = target.value
  
  target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
}

rangeInputs.forEach(input => {
  input.addEventListener('input', handleInputChange)
})