@extends('layouts.master')

@section('content')

<link rel="stylesheet" type="text/css" href="{{ URL::asset('form/css/investmentDetails.min.css')}}">

<div class="wrapper">
    <div class="container-fluid">
        <div class="col-sm-4 col-xs-12 side-drawer">
            <div class="investment-funds-detail">
                <p class="how-like-t hidden-xs">You are investing in:</p>
                <button class="back-btn visible-xs">
                    <img src="https://img.smartspends.com/static/images/etmoneyweb/mf-explore/back.png" alt="ETMONEY"
                        class="img-reponsive">
                </button>
                <div class="investment-fund-logo">
                    <img src="https://static.smartspends.com/static/images/short_providers_logos/icici_prudential_mutual_fund_icici_prudential_mutual_fund.png"
                        alt="AMC logo">
                </div>
                <div class="wrape-fund-tags">
                    <h3>ICICI Prudential Equity &amp; Debt Fund Direct-Growth</h3>
                    <!-- <div class="mf-category-tags">
                        <a href="/mutual-funds/hybrid" class="tag" title="HYBRID"><span>HYBRID</span> </a>
                        <a href="/mutual-funds/hybrid/aggressive-hybrid/68" class="tag" title="AGGRESSIVE HYBRID">
                            <span>AGGRESSIVE HYBRID</span></a>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="col-sm-8 col-xs-12 main-section">
            <!-- <div class="investor-account-menu" id="logoutSection">
                <button class="login-cta" title="Login">Login</button>
                <div class="logged-in hide">
                    <div class="investor-image">
                        <div class="profile-logo">
                            <img src="/static/images/mf-explore/profile-pic.svg" alt="User pics">
                        </div>
                    </div>
                    <ul class="dropdown">
                        <li class="user-email"></li>
                        <li class="user-logout">Logout</li>
                    </ul>
                </div>
            </div> -->
            <div class="mainSection-wrapper lumpsum-selcted">
                <header class="header hidden-xs hidden-sm">
                    <div class="heading-section"><i class="back-icon">
                            <img
                                src="https://img.smartspends.com/static/images/etmoneyweb/mf-explore/order-back-arrow.png"></i>
                    </div>
                </header>
                <p class="how-like-t">How would you like to invest?</p>
                <div class="switch-SIP">
                    <div class="sip-toggle-box">
                      <input type="radio" name="investmentType" id="switch_SIP" value="SIP">
                        <label class="switch" for="switch_SIP">
                            <span>Monthly SIP</span> <span class="slider round"></span></label>
                        <input type="radio" name="investmentType" id="switch_lumpsum" checked="" value="LUMPSUM">
                        <label class="switch" for="switch_lumpsum"><span class="selected-lumpsum">Lumpsum</span></label>
                    </div>
                </div>
                <div class="monthly-SIP">
                    <div class="wrape-date-sip row">
                        <div class="col-lg-6 col-xs-12">
                            <div class="form-group"><label for="instalmentDate" class="investment-amount">Installment
                                    amount</label>
                                <div class="set-limits-field">
                                    <div class="rupee-symbol">₹</div>
                                    <input class="input-field" id="sip-amount" onkeypress="return onlyNumberKey(event)" type="tel"
                                        name="sip-amount" placeholder="" min="100" value="">
                                    <div class="min-max-amount">Minimum SIP amount is ₹ 100</div>
                                    <div class="validation-msg">
                                        <p class="error" style="display:none"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xs-12">
                            <div class="form-group"><label for="instalmentDate">Select monthly installment date</label>
                                <div class="date-input" id="date-picker"><input id="sipDate" class="input-field"
                                        type="number" readonly=""></div>
                                <div class="calender-wrapper" style="display:none">
                                    <h4>Select SIP date</h4>
                                    <ul class="sipdates">
                                        <li class="" value="1">1</li>
                                        <li class="" value="2">2</li>
                                        <li class="" value="3">3</li>
                                        <li class="" value="4">4</li>
                                        <li class="" value="5">5</li>
                                        <li class="" value="6">6</li>
                                        <li class="" value="7">7</li>
                                        <li class="" value="8">8</li>
                                        <li class="" value="9">9</li>
                                        <li class="" value="10">10</li>
                                        <li class="" value="11">11</li>
                                        <li class="" value="12">12</li>
                                        <li class="" value="13">13</li>
                                        <li class="" value="14">14</li>
                                        <li class="" value="15">15</li>
                                        <li class="" value="16">16</li>
                                        <li class="" value="17">17</li>
                                        <li class="" value="18">18</li>
                                        <li class="" value="19">19</li>
                                        <li class="" value="20">20</li>
                                        <li class="" value="21">21</li>
                                        <li class="" value="22">22</li>
                                        <li class="" value="23">23</li>
                                        <li class="" value="24">24</li>
                                        <li class="" value="25">25</li>
                                        <li class="" value="26">26</li>
                                        <li class="" value="27">27</li>
                                        <li class="" value="28">28</li>
                                    </ul>
                                </div>
                                <p class="of-every-month" style="display:none"></p>
                                <div class="validation-msg">
                                    <p class="errorSelect" style="display:none">Please select SIP day</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sip-duration-section">
                        <div class="">
                            <div class="form-group">
                                <p class="duration-label">How long should this SIP run?</p>
                                <div class="change-ym-forms">
                                    <div class="sip-stop-section">
                                        <div class="custom-radio"><input type="radio" class="sip-stop-input"
                                                checked="checked" id="tenure" name="tenure" value="1"> <span
                                                class="checkmark"></span></div>&nbsp;<label for="tenure">Until I
                                            stop</label>
                                    </div>
                                    <div class="sip-tenure-section"><label class="custom-radio"><input type="radio"
                                                name="tenure" class="sip-tenure-radio" value="2"> <span
                                                class="checkmark"></span></label>
                                        <div class="years selectedSip-box">
                                            <input id="tenure" class="input-field sip-tenure-input tenureduration"
                                                type="number" name="years" min="1" max="50" placeholder="Enter tenure">
                                        </div>
                                        <div class="months selectedSip-box" style="display:none"><input
                                                class="input-field sip-tenure-input" type="number" name="months"
                                                min="12" max="600" placeholder="Enter tenure"></div><select
                                            class="form-control" id="SIP" onchange="durationchange(this)">
                                            <option value="years">in years</option>
                                            <option value="months">in months</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="validation-msg">
                                    <p class="errorDurationYears" style="display:none">Please enter number of years
                                        between 1 to 50</p>
                                    <p class="errorDurationMonths" style="display:none">Please enter number of months
                                        between 12 to 600</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lumpsum-investment">
                    <div class="set-limits-field">
                        <div class="rupee-symbol">₹</div><input class="input-field" onkeypress="return onlyNumberKey(event)" type="tel" placeholder=""
                            id="lumpsum-amount" name="lumpsum-amount" min="5000" value="">
                        <div class="min-max-amount">Minimum Lumpsum amount is ₹ 5000</div>
                        <div class="validation-msg">
                            <p class="error" style="display:none"></p>
                        </div>
                    </div>
                </div>
                <div class="wrape-proceeding">
                    <p>By continuing, I agree to the <a target="_blank"
                            href="https://partners.etmoney.com/termsandconditions?tncType=11">Declaration</a> and <a
                            target="_blank"
                            href="https://partners.etmoney.com/termsandconditions?tncType=8">T&amp;Cs.</a></p><button
                        class="btn btn-continue disabled" id="continue_order">Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function onlyNumberKey(evt) {
          // Only ASCII charactar in that range allowed
          var ASCIICode = (evt.which) ? evt.which : evt.keyCode
          if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
              return false;
          return true;
      }
      $('#lumpsum-amount').keyup(function(){
        // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

// format number
$(this).val(function(index, value) {
  return value
  .replace(/\D/g, "")
  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  ;
});
  if ($(this).val().replace(/,/g, '') < 5000){
    $('.min-max-amount').hide();
    $('.validation-msg .error').html("Minimum amount you can invest is ₹5000").show();
    $('#continue_order').addClass('disabled');
    
  }
  else if($(this).val().replace(/,/g, '') % 100 != '0')
  {
    $('.min-max-amount').hide();
    $('.validation-msg .error').html("You can invest in multiples of ₹100").show();
    $('#continue_order').addClass('disabled');
  }
  else if($(this).val().replace(/,/g, '') > 20000000)
  {
    $('.min-max-amount').hide();
    $('.validation-msg .error').html("Maximum amount you can invest is ₹2,00,00,000").show();
    $('#continue_order').addClass('disabled');
  }
  else{
    $('.min-max-amount').show();
    $('.validation-msg .error').html("Minimum amount you can invest is ₹5000").hide();
    
    $('#continue_order').removeClass('disabled');
    

  }
});
$('#sip-amount').keyup(function(){
        // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

// format number
$(this).val(function(index, value) {
  return value
  .replace(/\D/g, "")
  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  ;
});
  if ($(this).val().replace(/,/g, '') < 100){
    $('.min-max-amount').hide();
    $('.validation-msg .error').html("Minimum amount you can invest is ₹100").show();
    $('#continue_order').addClass('disabled');
    
  }
  else if($(this).val().replace(/,/g, '') > 99999)
  {
    $('.min-max-amount').hide();
    $('.validation-msg .error').html("Maximum amount you can invest is ₹99,999").show();
    $('#continue_order').addClass('disabled');
  }
  else{
    $('.min-max-amount').show();
    $('.validation-msg .error').html("Minimum amount you can invest is ₹5000").hide();
   var sipDate = $('#sipDate').val();
    var tenure =$('.tenureduration').val();
    var radioValue = $("input[name='tenure']:checked").val();
    if(radioValue == '2')
    {
        if(tenure != ''){
                $('#continue_order').removeClass('disabled');
            }
            else{
                $('#continue_order').addClass('disabled');
            }

    }
    else{
        if(sipDate != ''){
                $('#continue_order').removeClass('disabled');
            }
            else{
                $('#continue_order').addClass('disabled');
            }

    }

            
    
    

  }
});
$("input[name='tenure']").change(function(){
    var value = $( this ).val(); var sipDate = $('#sipDate').val();
    var tenure =$('.tenureduration').val();
    if(value == '2')
    {
        if(tenure == '')
        {
            $('#continue_order').addClass('disabled');
        }

    }
    else{ if(sipDate != ''){
                $('#continue_order').removeClass('disabled');
            }
            else{
                $('#continue_order').addClass('disabled');
            }

    }
});

function durationchange(tenure)
{
   //alert(tenure.value);
    changetenure(tenure.value);

}
function changetenure(tenure)
{
    var m= $('.tenureduration').val();
    var sipDate = $('#sipDate').val();
    var tenure =$('.tenureduration').val();var value = $("input[name='tenure']:checked").val();
    if(value == '2')
    {
        if(tenure == '')
        {
            $('#continue_order').addClass('disabled');
        }

    }
    else{ if(sipDate != ''){
                $('#continue_order').removeClass('disabled');
            }
            else{
                $('#continue_order').addClass('disabled');
            }

    }
    if("years" == tenure){
        if(m >=1 && m<=50)
        {
            console.log(m);
$('.errorDurationYears').hide();
$('.errorDurationMonths').hide();
        }
        else{
            $('.errorDurationYears').show();
            $('.errorDurationMonths').hide();
        }

    }
    else{
        if(m>=12&&m<=600)
        {
$('.errorDurationMonths').hide();$('.errorDurationYears').hide();
        }
        else{
            $('.errorDurationMonths').show();$('.errorDurationYears').hide();
        }
    }
   
}
//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 300;  //time in ms, 5 second for example
var $input = $('.sip-tenure-input');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
  var tenure = $('#SIP').find(":selected").val();
  changetenure(tenure);
}

$('#sipDate').click(function(event) {
    event.stopPropagation();
    $('.calender-wrapper').toggle();
   
   
  });
  $(document).click( function(){
    $('.calender-wrapper').hide();
});
  $('ul.sipdates li').click(function() {
      var selectedsip = $(this).val();
      $('ul.sipdates li').removeClass('selected');
      $(this).addClass('selected');
      $('#sipDate').val(selectedsip);
      $('.of-every-month').show().html(selectedsip+" th of every month.");
    //   var value = $('#sipDate').val();
    var value = $("input[name='tenure']:checked").val();
    var tenure =$('#tenure').val();
    var sip_amount = $('#sip-amount ').val();
    if(value == '2')
    {
        if(tenure == '')
        {
            $('#continue_order').addClass('disabled');
        }

    }
    else if((sip_amount == '') || (value == ''))
    { 
        $('#continue_order').addClass('disabled');

    }
    else{ 
        $('#continue_order').removeClass('disabled');
    }
   // alert($(this).val());
  });
$(document).ready(function() {
  $("#switch_SIP").click(function(){
//  alert("test");
  $(".mainSection-wrapper").removeClass("lumpsum-selcted"),document.querySelector("input[name=sip-amount]").value?I(document.querySelector("input[name=sip-amount]")):''
  });
  $("#switch_lumpsum").click(function(){
    // alert("test33");
    $(".mainSection-wrapper").addClass("lumpsum-selcted"),document.querySelector("input[name=lumpsum-amount]").value?I(document.querySelector("input[name=lumpsum-amount]")):''});
   var i=$(".change-ym-forms select");a=$("input[name=years]"),u=$("input[name=months]");
   //var t=n.getAttribute("min");
   if("years"==i.val()){
       var m=+a.val();m>=1&&m<=50?(t.hide(),totalInstallments=12*m):'';
       }
       else if("months"==i.val()){var r=+u.val();r>=12&&r<=600?(o.hide(),totalInstallments=r):(o.show())}
   
});
</script>

<!-- <script>var investmentMode,amount,sipDayOfMonth,currentSchemeId=schemeDirectDTOList[0].mfSchemeDTO.sId,totalInstallments=-1,schemeName=schemeDirectDTOList[0].mfSchemeDTO.name,profilePic="/static/images/mf-explore/profile-pic.svg",productType=1;function openInNewTab(e){var n;if(showLoggedInView(e),cookieManager.setCookie("prodType",PRODUCT.MUTUAL_FUND.id,{setRootDomain:!0}),cookieManager.setCookie("etmReferrerUrl",location.href,{setRootDomain:!0}),/investment-details\/[0-9]{1,5}/.test(location.pathname)&&currentSchemeId){n="https://partners.etmoney.com/investment?schemeId="+currentSchemeId+"&investmentMode="+investmentMode+"&amount="+amount,1==investmentMode&&(n=n+"&sipDayOfMonth="+$("#sipDate").val(),-1!=totalInstallments&&(n+="&totalInstallments="+totalInstallments)),location.search.substring(1)&&(n=n+"&"+location.search.substring(1)),window.location.href=n}}function showLoggedInView(e){e&&(document.querySelector(".user-email").innerText=e.email,e.userPic?document.querySelector(".profile-logo img").setAttribute("src",e.userPic):document.querySelector(".profile-logo img").setAttribute("src",profilePic),document.querySelector(".login-cta").classList.add("hide"),document.querySelector(".logged-in").classList.remove("hide"))}function showLoginBtn(){document.querySelector(".profile-logo img").setAttribute("src",profilePic),document.querySelector(".logged-in").classList.add("hide"),document.querySelector(".login-cta").classList.remove("hide")}window.addEventListener("load",(function(){setTimeout((function(){LoginService.checkUserLogin(showLoggedInView,showLoginBtn)}),200),document.querySelector("#logoutSection .user-logout").addEventListener("click",(function(){LoginService.userLogout((function(e){e&&e.result&&e.result.success&&showLoginBtn()}))})),document.querySelector(".login-cta").addEventListener("click",(function(){LoginService.checkUserLogin(showLoggedInView,(function(){initLogin(showLoggedInView,LOGIN_THEME.GLOBAL_LOGIN,null,"GLOBAL_LOGIN")}))})),$(window).width()<640&&($(".monthly-SIP .input-field, .monthly-SIP .sip-stop-input, .monthly-SIP .sip-tenure-input").focus((function(){return $("html, body").animate({scrollTop:$(".monthly-SIP").offset().top},500),!1})),$("lumpsum-investment .input-field").focus((function(){return $("html, body").animate({scrollTop:$(".lumpsum-investment").offset().top},500),!1}))),$(".sip-tenure-input").focus((function(){$(".sip-tenure-section .sip-tenure-radio").prop("checked",!0),$("#SIP").show()})),$(".sip-stop-input").click((function(){$(this).is(":checked")&&($(".sip-tenure-section .sip-tenure-input").val(""),$("#SIP").hide())}));var e=$("#continue_order"),n=$(".error"),t=$(".errorDurationYears"),o=$(".errorDurationMonths"),i=$(".change-ym-forms select"),a=$("input[name=years]"),u=$("input[name=months]"),m=$(".min-max-amount"),s=$("#sipDate"),r=$(".errorSelect"),c="Lumpsum";function l(){m.hide(),n.show()}function p(){n.hide(),m.show()}function d(){var e={"Product Type":"Mutual Funds","Product Name":schemeName,Label:"Lumpsum",Amount:amount};1==investmentMode&&(e.Label="SIP",e.Date=$("#sipDate").val()),webengageCustomEvent("SA_Order Confirmation",e),LoginService.checkUserLogin(openInNewTab,(function(){initLogin(openInNewTab,LOGIN_THEME.TRANSACTIONAL_SIGNIN,1,schemeName)}))}"SIP"==$("input[name=investmentType]:checked").val()&&($(".mainSection-wrapper").removeClass("lumpsum-selcted"),c="SIP"),webengageCustomEvent("SV_Order Confirmation",{"Product Type":"Mutual Funds","Product Name":schemeDirectDTOList[0].mfSchemeDTO.name,Label:c}),document.querySelector("input[name=lumpsum-amount]").value?I(document.querySelector("input[name=lumpsum-amount]")):document.querySelector("input[name=sip-amount]").value&&I(document.querySelector("input[name=sip-amount]")),2==$("input[name='tenure']:checked").val()?$("#SIP").show():(a.val(""),u.val("")),e.click((function(){var e=$("input[name=investmentType]:checked").val();"SIP"==e?(s.val()||r.show(),g()&&(investmentMode=1,d())):"LUMPSUM"==e&&(amount=+$("input[name=lumpsum-amount]").val().replace(/,/g,""),v(schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumAmount,schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumIncrementalAmount,2e7)&&(investmentMode=2,d())),customGaEvents("Order Confirmation","Order Confirmation - Continue Click","MF"),customGaEvents("Order Confirmation","Order Confirmation - Scheme - MF",schemeName),customGaEvents("Order Confirmation","Order Confirmation - Mode - MF",e),customGaEvents("Order Confirmation","Order Confirmation - Amount - MF",amount)})),$("#switch_lumpsum").click((function(){$(".mainSection-wrapper").addClass("lumpsum-selcted"),document.querySelector("input[name=lumpsum-amount]").value?I(document.querySelector("input[name=lumpsum-amount]")):(e.addClass("disabled"),p())})),$("#switch_SIP").click((function(){$(".mainSection-wrapper").removeClass("lumpsum-selcted"),document.querySelector("input[name=sip-amount]").value?I(document.querySelector("input[name=sip-amount]")):(e.addClass("disabled"),p())}));var h=$(".of-every-month span"),f=$(".calender-wrapper");function v(e,t,o){var i=!0;return amount<e?(n.html("Minimum amount you can invest is &#8377;"+e),l(),i=!1):amount%(t||1)!=0?(n.html("You can invest in multiples of &#8377;"+(t||1)),l(),i=!1):amount>o?(n.html("Maximum amount you can invest is &#8377;"+StringUtility.commaSeparatorCurrency(o)),l(),i=!1):p(),i}function g(){var n=!0;if(amount=+$("input[name=sip-amount]").val().replace(/,/g,""),n=v(schemeTransactionInfoDTO.sipInfoDTO.minSipAmount,schemeTransactionInfoDTO.sipInfoDTO.minSipIncrementalAmount,99999),s.val()||(n=!1),2==$("input[name='tenure']:checked").val()){
    if("years"==i.val()){var m=+a.val();m>=1&&m<=50?(t.hide(),totalInstallments=12*m):(t.show(),n=!1)}else if("months"==i.val()){var r=+u.val();r>=12&&r<=600?(o.hide(),totalInstallments=r):(o.show(),n=!1)}}else totalInstallments=-1;return n?e.removeClass("disabled"):e.addClass("disabled"),n}function I(n){$(n).val($(n).val().replace(/[^0-9]/g,""));var t=n.getAttribute("min");(amount=+n.value.replace(/,/g,""))&&(n.value=StringUtility.commaSeparatorCurrency(amount)),amount>=+t?(p(),("sip-amount"==n.name&&g()||"lumpsum-amount"==n.name&&v(schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumAmount,schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumIncrementalAmount,2e7))&&e.removeClass("disabled")):e.addClass("disabled")}$("#date-picker input").click((function(e){f.show(),e.stopPropagation()})),$(".calender-wrapper ul li").click((function(e){var n=$(this).attr("value");$("#date-picker input").val(n),h.text(formatDigit(n)),r.hide(),$(".of-every-month").show(),f.hide(),g(),e.stopPropagation()})),$(document).click((function(e){f.is(":visible")&&f.hide()})),$(".calender-wrapper ul li").click((function(){$(".calender-wrapper ul li.selected").removeClass("selected"),$(this).closest("li").addClass("selected")})),$(".heading-section .back-icon, .back-btn").click((function(){history.back()})),$("input[name=sip-amount], input[name=lumpsum-amount]").on("input",(function(e){e.target.value.length>12&&(e.preventDefault(),e.target.value=e.target.value.substring(0,12)),I(e.target)})),$("input[name=sip-amount], input[name=lumpsum-amount]").on("blur",(function(e){amount=+e.target.value.replace(/,/g,""),"sip-amount"==e.target.name?v(schemeTransactionInfoDTO.sipInfoDTO.minSipAmount,schemeTransactionInfoDTO.sipInfoDTO.minSipIncrementalAmount,99999):v(schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumAmount,schemeTransactionInfoDTO.lumpsumInfoDTO.minLumpsumIncrementalAmount,2e7)})),$("input[name=years], input[name=months]").on("input",(function(e){e.target.value.length>3&&(e.preventDefault(),e.target.value=e.target.value.substring(0,3)),g()})),$("select#SIP").change((function(){$(this).find("option:selected").each((function(){var e=$(this).attr("value");e?($(".selectedSip-box").not("."+e).hide(),$("."+e).show()):$(".selectedSip-box").hide(),g(),o.hide(),t.hide()}))})),$("input[name='tenure']").click((function(){2==$("input[name='tenure']:checked").val()&&$("#SIP").show(),g(),t.hide(),o.hide()}))}))</script> -->
@stop