// calculator-input
$(document).ready(function() {
    $('.btn-minus').click(function () {
      var $input = $(this).parent().find('input');
      var count = parseInt($input.val()) - 1;
      count = count < 1 ? 1 : count;
      $input.val(count);
      $input.change();
      return false;
    });
    $('.btn-plus').click(function () {
      var $input = $(this).parent().find('input');
      $input.val(parseInt($input.val()) + 1);
      $input.change();
      return false;
    });
});

// left-block-data
var data = {
    cores : 4,
    ram : 4,
    storage:512,
    transfer:8
};
var toggle= false;

var totalCost = {};
// total-cost-and-savings
for (let i = 0; i < 100 ; i++) {
    let value = i+1;

    totalCost[value] = {
        total : { monthly : value* 1000, yearly : value*12000},
        serversCost : {
            Hireserver : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            },
            Aws : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            },
            Google : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            },
            Azure : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            },
            Digital : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            },
            Linode : {
                price: { monthly : value*10, yearly : value*100 },
                savings: { monthly : value*10/2, yearly : value*100/2 }
            }
        }
    }
}

var blockValue = 1;
var subscriptionType = "monthly";
// purchase-btn
$("#total-cost").html(totalCost[1].total.monthly);

// calculator-input
$(document).ready(function() {
    // toggleswitch
    $('#block-calculator-toggle-switch').change(function() {
        blockValue = $("#block-input").val();
    
        if(blockValue == 0) return;

        if(this.checked) {
            subscriptionType = "yearly";
            toggle=true;
        }else{
            subscriptionType = "monthly";
            toggle=false;
        }

        changeTotalCost();
    });

    $("#block-input").change(function(){
        let blockInp=$(this).val();
        if(blockInp==0 || blockInp >= 100) return;
    
        data.cores=4*blockInp;
        data.ram =4*blockInp;
        data.storage =512*blockInp;
        data.transfer = 8*blockInp;
    
        addLeftBlockHTML();
    
    })
    $("#btn-plus").click(function () {
        let value = $("#block-input").val();
    
        data.cores *= 2;
        data.ram *= 2;
        data.storage *= 2;
        data.transfer *= 2;
        addLeftBlockHTML();
        
    })
    $("#btn-minus").click(function () {
        let value1 = $("#block-input").val();
        if(value1==1){
            return
        }
        data.cores /= 2;
        data.ram /= 2;
        data.storage /= 2;
        data.transfer /= 2;
        addLeftBlockHTML();
        
    });

    
    
// input
addLeftBlockHTML();
});



// leftblock
function addLeftBlockHTML(){
    let html = `
        <div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
            <div class="content-data ">
                <ul class="list-unstyled">
                <li>  
                <ul class="d-flex align-items-center justify-content-evenly list-unstyled">
                <li><img src="./images/home-page/new-svg/chip-icon.svg"
                class="img-fluid me-4" alt="core-icon"></li>
                <ul class="list-unstyled"><li>
                <p class="card-text mb-0">CPU's</p>
                <p class="sub-card-text">Core AMD EPYC 7003</p>
                </li></ul>
                
                </div>

            <div class="content-value">
                <p >${data.cores} cores</p>
            </div></div>
        <div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
            <div class="content-data d-flex align-items-center">
            <img src="./images/home-page/new-svg/chip-icon.svg"
            class="img-fluid me-4" alt="core-icon">
           <p class="card-text">RAM</p>
               </div>
            <div class="content-value">
                <p>${data.ram}GB</p>
            </div></div>
        <div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
            <div class="content-data ">
            <ul class="d-flex align-items-center justify-content-evenly list-unstyled">
            <li>  <img src="./images/home-page/new-svg/chip-icon.svg"
            class="img-fluid me-4" alt="core-icon"></li>
            <ul class="list-unstyled"><li>
                <p class="card-text mb-0">STORAGE</p>
                <p class="sub-card-text">NVMe SSD</p>
                </li></ul> 
                </ul>  </div>
            <div class="content-value">
                <p>${data.storage}GB</p>
            </div></div>
        <div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
            <div class="content-data ">
            <ul class="d-flex align-items-center justify-content-evenly list-unstyled">
            <li> <img src="./images/home-page/new-svg/chip-icon.svg"
            class="img-fluid me-4" alt="core-icon"></li>
            <li> <p class="card-text">TRANSFER</p></li>
            </ul>
                </div>
            <div class="content-value">
                <p>${data.transfer}TB</p>
            </div></div>
    `
    $("#block-content-main").html(html);
    changeServerPricing();
    changeTotalCost();
}
// total-cost-change-purchase-btn
function changeTotalCost() {
    blockValue = $("#block-input").val();
    if(blockValue == 0) return;

    if(!totalCost[blockValue]) return;

    $("#total-cost").html(totalCost[blockValue].total[subscriptionType]);

    changeServerPricing(blockValue);
}
// right-block
function changeServerPricing () {
    $("#hire-server-cost").html(totalCost[blockValue].serversCost.Hireserver.savings[subscriptionType]);
    $("#hire-server-total-cost").html(totalCost[blockValue].serversCost.Hireserver.price[subscriptionType]);
  
    $("#aws-cost").html(totalCost[blockValue].serversCost.Aws.savings[subscriptionType]);
    $("#aws-total-cost").html(totalCost[blockValue].serversCost.Aws.price[subscriptionType]);
  
    $("#google-cost").html(totalCost[blockValue].serversCost.Google.savings[subscriptionType]);
    $("#google-total-cost").html(totalCost[blockValue].serversCost.Google.price[subscriptionType]);
  
    $("#azure-cost").html(totalCost[blockValue].serversCost.Azure.savings[subscriptionType]);
    $("#azure-total-cost").html(totalCost[blockValue].serversCost.Azure.price[subscriptionType]);
  
    $("#digital-cost").html(totalCost[blockValue].serversCost.Digital.savings[subscriptionType]);
    $("#digital-total-cost").html(totalCost[blockValue].serversCost.Digital.price[subscriptionType]);
  
    $("#linode-cost").html(totalCost[blockValue].serversCost.Linode.savings[subscriptionType]);
    $("#linode-total-cost").html(totalCost[blockValue].serversCost.Linode.price[subscriptionType]);
  
}

// passing values to order-summary
$("#purchase-button").click(function(){
    let subscriptionData = {
        currentBlock : blockValue,
        subscriptionType : subscriptionType,
        blockDetails: data,
        totalCost: totalCost,
        toggleSwitch:toggle
    };

    localStorage.setItem("subscription-data",JSON.stringify(subscriptionData));

    window.location.href="../login-register.html";
})

// export {data};