@extends('main.layouts.app')
@section('content')

<style>
.br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }
    }

.color-text {
            color: #34395e;
            display: block;
            font-size: 20px;
            font-size: 24px;
            margin-top: 3px;
            color: #34395e;
            font-weight: 700;
        }

        .contact-hg{
            font-size: 24px;
            margin-top: 3px;
            color: #34395e;
        }
        
    /* .btn-primary, .btn-primary.disabled {
    box-shadow: 0 2px 6px #DAA520;
    background-color: #DAA520;
    border-color: #DAA520;
}

.main-sidebar .sidebar-menu li.active a {
    color: #DAA520;
    background-image: linear-gradient(to right, #ffdfb9, #fffbe6);
}
.navbar-bg {
    background-image: linear-gradient(to bottom right, #DAA520, #f3db47);
} */


.countup-timer {
    display: flex;
}

.main-content{
    min-height: 100vh;
	/* overflow-x: hidden; */
	overflow: hidden;
	/* padding: 60px; */
	position: relative;
	width: 100%;
}

.confetti {
/* background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%, rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%, rgba(255,216,99,1) 50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%, rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%); */
	/* border: 1px solid #A57C01; */
	position: absolute;
	display: flex;
	width: 20px;
	height: 55px;
	top: -100px;
    z-index: -1;
	}

.confetti:nth-child(1) {
	animation: fall 2.5s linear infinite;
	left: 10%;
	}

.confetti:nth-child(2) {
	animation: fall 2.3s linear infinite .2s;
	left: 20%;
	}

.confetti:nth-child(3) {
	animation: fall 2.4s linear infinite .4s;
	left: 30%;
	}

.confetti:nth-child(4) {
	animation: fall 2.7s linear infinite .1s;
	left: 40%;
	}

.confetti:nth-child(5) {
	animation: fall 2.6s linear infinite .7s;
	left: 50%;
	}

.confetti:nth-child(6) {
	animation: fall 2.4s linear infinite .2s;
	left: 60%;
	}

.confetti:nth-child(7) {
	animation: fall 2.1s linear infinite .7s;
	left: 70%;
	}

.confetti:nth-child(8) {
	animation: fall 2.4s linear infinite .9s;
	left: 80%;
	}

.confetti:nth-child(9) {
	animation: fall 2.9s linear infinite .9s;
	left: 90%;
	}

.confetti:nth-child(10) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 100%;
	}

.confetti:nth-child(11) {
	animation: fall2 2.5s linear infinite;
	left: 95%;
	}

.confetti:nth-child(12) {
	animation: fall2 2.3s linear infinite 1.1s;
	left: 85%;
	}

.confetti:nth-child(13) {
	animation: fall2 2.4s linear infinite 1.2s;
	left: 75%;
	}

.confetti:nth-child(14) {
	animation: fall2 2.7s linear infinite 1.3s;
	left: 65%;
	}

.confetti:nth-child(15) {
	animation: fall2 2.6s linear infinite 1.4s;
	left: 55%;
	}

.confetti:nth-child(16) {
	animation: fall2 2.4s linear infinite 1.5s;
	left: 45%;
	}

.confetti:nth-child(17) {
	animation: fall2 2.1s linear infinite 1.6s;
	left: 35%;
	}

.confetti:nth-child(18) {
	animation: fall2 2.4s linear infinite 1.7s;
	left: 25%;
	}

.confetti:nth-child(19) {
	animation: fall2 2.9s linear infinite 1.8s;
	left: 15%;
	}

.confetti:nth-child(20) {
	animation: fall2 2.2s linear infinite 1.9s;
	left: 5%;
	}

.confetti:nth-child(21) {
	animation: fall 2.5s linear infinite;
	left: 3%;
	}

.confetti:nth-child(22) {
	animation: fall 2.3s linear infinite 1.3s;
	left: 13%;
	}

.confetti:nth-child(23) {
	animation: fall 2.4s linear infinite 1.4s;
	left: 23%;
	}

.confetti:nth-child(24) {
	animation: fall 2.7s linear infinite 1.5s;
	left: 33%;
	}

.confetti:nth-child(25) {
	animation: fall 2.6s linear infinite 1.6s;
	left: 43%;
	}

.confetti:nth-child(26) {
	animation: fall 2.4s linear infinite 1.2s;
	left: 53%;
	}

.confetti:nth-child(27) {
	animation: fall 2.1s linear infinite 1.7s;
	left: 63%;
	}

.confetti:nth-child(28) {
	animation: fall 2.4s linear infinite 1.8s;
	left: 73%;
	}

.confetti:nth-child(29) {
	animation: fall 2.9s linear infinite 1.9s;
	left: 83%;
	}

.confetti:nth-child(30) {
	animation: fall 2.2s linear infinite 1.1s;
	left: 93%;
	}

.confetti:nth-child(31) {
	animation: fall2 2.2s linear infinite 1.1s;
	left: 7%;
	}

.confetti:nth-child(32) {
	animation: fall2 2.9s linear infinite .9s;
	left: 17%;
	}

.confetti:nth-child(33) {
	animation: fall2 2.4s linear infinite .1s;
	left: 27%;
	}

.confetti:nth-child(34) {
	animation: fall2 2.1s linear infinite .7s;
	left: 37%;
	}

.confetti:nth-child(35) {
	animation: fall2 2.4s linear infinite .2s;
	left: 47%;
	}

.confetti:nth-child(36) {
	animation: fall2 2.6s linear infinite .7s;
	left: 57%;
	}

.confetti:nth-child(37) {
	animation: fall2 2.7s linear infinite .9s;
	left: 67%;
	}

.confetti:nth-child(38) {
	animation: fall2 2.4s linear infinite .4s;
	left: 77%;
	}

.confetti:nth-child(39) {
	animation: fall2 2.3s linear infinite .2s;
	left: 87%;
	}

.confetti:nth-child(40) {
	animation: fall2 2.5s linear infinite .3s;
	left: 97%;
	}

@keyframes fall {
	0% {top:-110px; transform: rotate(0deg) rotateY(-90deg); opacity:1;}
	100% {top:900px; transform: rotate(360deg) rotateY(180deg); opacity:0.7;}
}

@keyframes fall2 {
	0% {top:-110px; transform: rotate(0deg) rotateY(90deg); opacity:1;}
	100% {top:900px; transform: rotate(-360deg) rotateY(-180deg); opacity:0.5;}
}

.digital-mine {
        /* text-align: center;
        font-size: 24px; */

        display: flex;
    justify-content: center;
    height: 100px;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 30px;
    background: #141414;
    box-shadow: rgba(218, 165, 32, 0.5) 0px 50px 100px 35px, rgba(255, 215, 0, 0.1) 0px 30px 60px -1px, rgba(218, 165, 32, 0.5) 0px 3px 6px 5px inset;

    }

    #money-value {
        font-weight: bold;
      color: #cfa020;
    }

    span#rise-money-value-last {
      font-weight: bold;
      color: #cfa020;
      }

    #timer {
        color: blue;
    }



    :root {
  --clr-blk: #000;
  --clr-bkg-clr: #cfa020;
  --clr-txt: #f9e589;
  --clr-txt1: #5c4003;
  --clr-txt-sha: #ffcc00;
  --clr-bord1: #fadc88;
  --clr-bord2: #9c7625;
  --cl-boxsha1: #fafac4;
  --cl-boxsha2: #fdd832;
  --cl-boxsha3: #f7b42f;  
}


    /* button {
  position: relative;
  display: inline-block;
  padding: .625em 1.25em;
  color: var(--clr-txt);
  text-decoration: none;
  text-align: center;
  vertical-align: center;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .125em;
  border: none;
  border-radius: .375em;
  text-shadow: 0 .063em 0.125em var(--clr-blk);
  border-top: .031em solid var(--clr-bord1);
  border-left: .031em solid var(--clr-bord2);
  border-right: .031em solid var(--clr-bord2);
  border-bottom: .031em solid var(--clr-bord2);
  overflow: hidden;
  z-index: 1;
  transition: all 0.2s ease;
  cursor: pointer;   
} */

button .waves {
  position: absolute;
  width: 100%;
  /* height: 6.250em;
  top: -3.75em; */
  height: 200px;
  top: -60px;
  left: 0;
  background-color: var(--clr-bkg-clr);
  box-shadow: inset 0 0 3.125em rgba(0, 0, 0, 0.5);
  z-index: -1;
  transition: .5s;
}


button.waves_button {
    position: relative;
    display: inline-block;
    padding: .625em 1.25em;
    color: var(--clr-txt);
    text-decoration: none;
    text-align: center;
    vertical-align: center;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .125em;
    border: none;
    border-radius: .375em;
    text-shadow: 0 .063em 0.125em var(--clr-blk);
    border-top: .031em solid var(--clr-bord1);
    border-left: .031em solid var(--clr-bord2);
    border-right: .031em solid var(--clr-bord2);
    border-bottom: .031em solid var(--clr-bord2);
    /* outline-color: transparent; */
    overflow: hidden;
    z-index: 1;
    /* width: 310px; */
    transition: all 0.2s ease;
    cursor: pointer;
}

button .waves::after,
button .waves::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%; 
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
}

button .waves::before {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
}

button .waves::after {
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 10s linear infinite;
}

button:hover .waves,
button:focus .waves,
button:active .waves{
  /* top: -7.188em; */
  top: -115px;
}

button:hover,
button:focus,
button:active {
  color: var(--clr-txt1);
  text-shadow: .063em .063em .188em var(--clr-txt-sha);
  border: .5px solid var(--clr-bord1);
  box-shadow: 0 0 .625em var(--cl-boxsha1),
              0 0 2.5em var(--cl-boxsha2),
              0 0 3.75em var(--cl-boxsha3);
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

.countup-timer {
    display: flex;
    justify-content: center;
    height: 100px;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 30px;
    background: #141414;
    box-shadow: rgba(218, 165, 32, 0.5) 0px 50px 100px 35px, rgba(255, 215, 0, 0.1) 0px 30px 60px -1px, rgba(218, 165, 32, 0.5) 0px 3px 6px 5px inset;
}

.countup-timer span{
  display: block;
}

.time_cover {
    margin: 5px;
    border-radius: 10px;
    background: #fff;
    width: 50px;
    padding: 5px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    box-shadow: rgba(218, 165, 32, 0.25) 0px 4px 12px;
}

.money_mine{
  margin: 5px;
  min-width: 205px;
    border-radius: 10px;
    background: #fff;
    /* width: 50px; */
    padding: 5px;
    font-size: 24px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    box-shadow: rgba(218, 165, 32, 0.25) 0px 4px 12px;
}
body {
    background: #141414;
}

a {
    color: #e6bf33;
}

/* .section-body {

  position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
} */

span.date_text{
  font-size:10px;
  font-weight: 800;
}

span.date_number{
  font-weight: 700;
  font-size:19px;
  color: var(--clr-bkg-clr) ;
}

.fieldInput {
  display: block;
  margin: 40px auto;
  max-width: 500px;
  /* height: 35px; */
  height: 50px;
  position: relative;
  background:#fff;
  /* box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.09); */
  border-radius: 35px;
  overflow: hidden;
  box-shadow: rgba(218, 165, 32, 0.9) 0px 4px 12px;
  
}
.fieldInput .form-input {
    /* width: 200px; */
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 12px 20px;
    font-size: 24px;
    color: #cfa020;
    font-weight: 700;
    text-align: center;
}
.fieldInput .form-input:focus {
  outline: none;
}

.fieldInput .form-input::placeholder{
  font-size:15px;
}

.fieldInput .form-submit:hover{
  box-shadow: none;
}
/* .fieldInput .form-submit {
  font-size: 12px;
  color: #6A7C92;
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 35px;
  border-radius: 17px;
  border: none;
  background: none;
  box-shadow: 5px -2px 81px 1px rgba(0, 0, 0, 0.09);
  cursor: pointer;
} */

.fieldInput .form-submit {
    font-size: 12px;
    color: #f9e589;
    position: absolute;
    text-transform: capitalize;
    /* right: 0; */
    right: 10px;
    top: 0;
    font-weight: 400;
    width: 70px;
    height: 50px;
    border-radius: 17px;
    border: none;
    background: none;
    /* box-shadow: 5px -2px 81px 1px rgba(0, 0, 0, 0.09); */
    cursor: pointer;
}


@media (max-width:767px){
    button {
      font-size: 1em;
  }

  .confetti {
    width: 10px;
    height: 25px;
  }

  @keyframes fall {
      0% {top:250px; transform: rotate(0deg) rotateY(-90deg); opacity:1;}
      100% {top:450px; transform: rotate(360deg) rotateY(180deg); opacity:0.7;}
    }

    @keyframes fall2 {
      0% {top:250px; transform: rotate(0deg) rotateY(90deg); opacity:1;}
      100% {top:450px; transform: rotate(-360deg) rotateY(-180deg); opacity:0.5;}
    }

    .countup-timer {
        margin-bottom: 60px;
    }

    button {
        font-size: 1em;
        margin-bottom: 30px;
    }


    
        .confetti:nth-child(1) {
          animation: fall 1.5s linear infinite;
          left: 10%;
          }

        .confetti:nth-child(2) {
          animation: fall 1.3s linear infinite .2s;
          left: 20%;
          }

        .confetti:nth-child(3) {
          animation: fall 1.4s linear infinite .4s;
          left: 30%;
          }

        .confetti:nth-child(4) {
          animation: fall 1.7s linear infinite .1s;
          left: 40%;
          }

        .confetti:nth-child(5) {
          animation: fall 1.6s linear infinite .7s;
          left: 50%;
          }

        .confetti:nth-child(6) {
          animation: fall 1.4s linear infinite .2s;
          left: 60%;
          }

        .confetti:nth-child(7) {
          animation: fall 1.1s linear infinite .7s;
          left: 70%;
          }

        .confetti:nth-child(8) {
          animation: fall 1.4s linear infinite .9s;
          left: 80%;
          }

        .confetti:nth-child(9) {
          animation: fall 1.9s linear infinite .9s;
          left: 90%;
          }

        .confetti:nth-child(10) {
          animation: fall 1.2s linear infinite 1.1s;
          left: 100%;
          }

        .confetti:nth-child(11) {
          animation: fall2 1.5s linear infinite;
          left: 95%;
          }

        .confetti:nth-child(12) {
          animation: fall2 1.3s linear infinite 1.1s;
          left: 85%;
          }

        .confetti:nth-child(13) {
          animation: fall2 1.4s linear infinite 1.2s;
          left: 75%;
          }

        .confetti:nth-child(14) {
          animation: fall2 1.7s linear infinite 1.3s;
          left: 65%;
          }

        .confetti:nth-child(15) {
          animation: fall2 1.6s linear infinite 1.4s;
          left: 55%;
          }

        .confetti:nth-child(16) {
          animation: fall2 1.4s linear infinite 1.5s;
          left: 45%;
          }

        .confetti:nth-child(17) {
          animation: fall2 1.1s linear infinite 1.6s;
          left: 35%;
          }

        .confetti:nth-child(18) {
          animation: fall2 1.4s linear infinite 1.7s;
          left: 25%;
          }

        .confetti:nth-child(19) {
          animation: fall2 1.9s linear infinite 1.8s;
          left: 15%;
          }

        .confetti:nth-child(20) {
          animation: fall2 1.2s linear infinite 1.9s;
          left: 5%;
          }

        .confetti:nth-child(21) {
          animation: fall 1.5s linear infinite;
          left: 3%;
          }

        .confetti:nth-child(22) {
          animation: fall 1.3s linear infinite 1.3s;
          left: 13%;
          }

        .confetti:nth-child(23) {
          animation: fall 2.4s linear infinite 1.4s;
          left: 23%;
          }

        .confetti:nth-child(24) {
          animation: fall 1.7s linear infinite 1.5s;
          left: 33%;
          }

        .confetti:nth-child(25) {
          animation: fall 1.6s linear infinite 1.6s;
          left: 43%;
          }

        .confetti:nth-child(26) {
          animation: fall 1.4s linear infinite 1.2s;
          left: 53%;
          }

        .confetti:nth-child(27) {
          animation: fall 1.1s linear infinite 1.7s;
          left: 63%;
          }
}

.investment-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid #e0e0e0;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    color: #666;
    font-weight: 500;
}

.summary-value {
    color: #0E194D;
    font-weight: 600;
}

.summary-highlight {
    color: #cfa020;
}
</style>
<input type="hidden" name="authtoken" value={{$token}}>
    <div class="main-content position-relative ">
        <section class="section">
          <!-- <div class="section-header justify-content-between ">
                <h1><i class="fa fa-fw fa-users"></i> GoldPlan  </h1>
                <button class="btn btn-primary mb-0" data-toggle="modal" data-target="#withdrawalModal">Withdrawal</button>
            </div> -->

            <div class="section-header d-block bg_blue_color">
              <div class="row">
                  <div class="col-12">
                      <div class="d-flex align-items-center justify-content-between">
                          <div>
                              {{-- <div class="dash-cover pr-3">
                                      <img src="img/wallet_circle.png" alt="wallet-circle" class="dash-img">
                                  </div> --}}
                              <div class="dash-text">
                                  <h5 class="text-white depo mb-0">
                                      <a href="/"><img src="img/homepage.png" alt="image"> </a> 
                                      StockPlan
                                  </h5>
                              </div>
                          </div>
                          <div>
                          <a class="btn btn-primary waves_button mb-0 mr-1" href="/unlock-principal-amount">UNLOCK PRINCIPAL AMOUNT</a>
                              <a href="/gold-transaction-log">
                                  <img src="img/transaction_logo.png" alt="">
                              </a>
                              {{-- <button class="btn btn-primary p-0" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal" style="background: #0e194d;border: none;">
                                  <img src="img/download_btn.png" alt="download">
                              </button> --}}
  
                          </div>
  
                      </div>
  
                  </div>
  
              </div>
  
          </div>

            <div class="section-body text-center">

              <div class="row ">
                <div class="col-lg-12">
                  {{-- <h5 class="mainTitle text-white">Start small, earn big! Invest a minimum lakh and enjoy daily returns! </h5> --}}
  
                  <div class="formContainer">
  
                      <fieldset class="fieldInput">
                        <input class="form-input" id="amount_id" type="text" oninput="validateInput()" placeholder="Enter the Amount" value="" readonly>
                        {{-- <button class="form-submit" onclick="getamount()" >Submit</button> --}}
                      </fieldset>

                    <span class="text-white" id="amount-validation"></span>
                  </div>
                </div>
              </div>


              <div class="row justify-content-center">
                <div class="col-lg-6">
                  <div class="countup-timer">
                    <div class="time_cover"><span class="date_text">Days</span><span class="date_number" id="timer_days">0</span></div>
                    <div class="time_cover"><span class="date_text">Hours</span><span class="date_number" id="timer_hours">0</span></div>
                    <div class="time_cover"><span class="date_text">Minutes</span><span class="date_number" id="timer_minutes">0</span></div>
                    <div class="time_cover"><span class="date_text">Seconds</span><span class="date_number" id="timer_seconds">0</span></div>
                </div>
            </div>
                <div class="col-lg-6">
                  <div class="digital-mine">
                    <div class="money_mine">  
                     <span><i class="fa fa-inr" aria-hidden="true"></i></span><span id="money-value"></span>
                    </div>   
                   </div>
                </div>


                <div class="col-lg-6">
                  <div class="digital-mine">
                    <div class="money_mine">  
                     <span><i class="fa fa-inr" aria-hidden="true"></i></span>
                     <span id="rise-money-value-last"></span>
                    </div>   
                   </div>
                </div>

              </div>
                <button id="buy" onclick="buyplan()" class="waves_button">Invest More<span class="waves"></span></button>
            </div>

            <!-- <div class="row w-100 justify-content-center">
              <div class="col-md-4">
                <button id="buy" onclick="buyplan()" class="waves_button">Invest More<span class="waves"></span></button>
              </div>
              <div class="col-md-4">
              <button id="buy" onclick="withdrawalamount()" class="waves_button">Payout<span class="waves"></span></button>
              </div>
            </div> -->

            {{-- golden  --}}

            <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>

            <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>
              <div class="confetti">
                <img src="img/gold_coin.png" style="width:100px" alt="">
              </div>

    
        </section>
    </div>


    <!-- Button trigger modal -->
{{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button> --}}

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Invest More</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="investmore">Invest Amount <span class="text-danger">*</span></label>
          <input type="number" class="form-control" id="investmore" placeholder="Invest Amount...">
          <span id="error_investmore" class="error_message"></span>
        </div>

        <!-- Add new investment plan select -->
        <div class="form-group">
          <div class="mt-3">
            <label for="investment_plan">Select Investment Plan <span class="text-danger">*</span></label>
            <select name="investment_plan" id="investment_plan" class="form-control">
              <option value="">Select Investment Plan</option>
              <option value="weekly">Weekly</option>
              <option value="monthly">Monthly</option>
              <option value="quarterly">Quarterly</option>
              <option value="half_yearly">Half Yearly</option>
              <option value="yearly">Yearly</option>
            </select>
            <span class="error_message" id="error_investment_plan"></span>
          </div>
        </div>

        <div class="form-group">
          <div class="mt-3">
            <label for="Select">Select Payment Method <span class="text-danger">*</span></label>
            <select name="selectmethod" id="selectmethod" class="form-control">
                <option value="">Select Payment Method</option>
                <option value="withdrawalwallet">Withdrawal Wallet</option>
                <option value="payrequest">Pay Request</option>
                <option value="upi">UPI</option>
            </select>
              <span class="error_message" id="selectmethoderror"></span>
        </div>
        </div>

        <div class="d-none text-center" id="crownmember">
          <div>
            <h5 class="contact-hg">Contact your Crown member </h5>
        </div>
        <div>
          Request Pay to this Number Before clicking the Submit <span class="color-text">+91 73040 85171</span>
        </div>
      </div>

      <!-- Replace the existing investment summary section with this simplified version -->
      <div class="investment-summary d-none" id="investmentSummary">
        <h6 class="mb-3">Investment Summary</h6>
        <div class="summary-item">
            <span class="summary-label">Weekly Payout</span>
            <span class="summary-value">₹<span id="weeklyPayout">0.00</span></span>
        </div>
        <div class="summary-item">
            <span class="summary-label">Lock-in Period</span>
            <span class="summary-value" id="lockInWeeks">-</span>
        </div>
        <div class="summary-item">
            <span class="summary-label">Total Interest</span>
            <span class="summary-value summary-highlight">₹<span id="totalInterest">0.00</span></span>
        </div>
    </div>

      </div>
      <div class="modal-footer justify-content-center pt-0">
        {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
        <button type="button" id="subinvest" class="btn btn-primary" onclick="subinvest()">Submit</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
{{-- <div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Invest More</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <span class="" id="error_investmore" class="error_message"></span>
          <div class="text-center mt-3">
            <div>
              <h5 class="contact-hg">Contact your Crown member </h5>
          </div>
          <div>
            Request  Pay to this Number Before clicking the Submit <span class="color-text">+91 73040 85171</span>
          </div>
          <div class="mt-2">
            <a href="tel:+919594763911" class="btn-contact"><i class="fa fa-phone"></i>Contact</a>
            <a href="https://wa.me/9594763911?text=Hello%20Sir" class="btn-contact"><i class="fab fa-whatsapp" aria-hidden="true"></i>whatsaap</a>
        </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-center pt-0">
        <button type="button" id="subinvest" class="btn btn-primary" onclick="subinvest()">Request Pay</button>
      </div>
    </div>
  </div>
</div> --}}

{{-- Withdraw Modal --}}
<div class="modal fade" id="withdrawalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Payout Amount</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      <div class="form-group">
          <!-- <label for="investmore">Withdraw Amount <span class="text-danger">*</span></label> -->
          <h3>Invested Amount : <i class="fa fa-rupee"></i>1000</h3>
        </div>

        <div class="form-group">
          <label for="investmore">Withdraw Amount <span class="text-danger">*</span></label>
          <input type="number" class="form-control" id="withdrawamount" placeholder="Withdraw Amount...">
          <span class="" id="error_withdraw"></span>

        </div>
      </div>
      <div class="modal-footer justify-content-around pt-0">
        <button type="button" class="btn btn-primary" onclick="withdraw()">Submit</button>
      </div>
    </div>
  </div>
</div>

{{-- pay-Now Modal --}}
<div class="modal fade" id="thankyouModal" role="dialog" aria-labelledby="...">
  {{-- <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> --}}
  <div class="modal-dialog  modal-dialog-centered" role="document">

      <div class="modal-content">
          <div class="modal-header">
              {{-- <h5 class="modal-title" id="exampleModalLabel">New message</h5> --}}
              <button type="button" class="close" data-dismiss="modal"><span
                      aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body text-center">
            <div>
              <img src="{{asset('assets/image/green_tick.gif')}}" alt="img" style="margin-left:33px;">
            </div>
              <div>
                  <h5 class="contact-hg">Thank you for Investing more in Goldplan. The amount get update soon! </h5>
              </div>
          </div>
      </div>
  </div>
</div>


{{-- pay-Now Modal --}}
<div class="modal fade" id="myModalcheckout" role="dialog" aria-labelledby="...">
  <div class="modal-dialog  modal-dialog-centered" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span
                      aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body text-center">
              <div>
                  <h5 class="contact-hg">Contact your Crown member </h5>
              </div>
              <div>
                 Request Pay to this Number Before clicking the Pay Request <span class="color-text">+91 73040 85171</span>
              </div>
          </div>
          <div class="modal-footer justify-content-center">
              <button type="button" id="pay_now" class="btn btn-primary">Pay Request</button>
            </div>
      </div>
  </div>
</div>

    {{-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> --}}

    <script>
      // Add a global variable to store user data
      let userData = null;

      $(document).ready(function() {
          $.ajax({
              url: '/get-plan-data',
              type: 'get',
              success: function(response) {
                  if (response && response.created_at) {
                      userData = response; // Store the response data
                      $('#amount_id').val(response.amount);
                      document.getElementById("rise-money-value-last").textContent = response.total_increment;
                      // growmoney(response.amount);
                        // let startingDate = new Date(response.created_at).getTime();
                        let startingDateUTC = Date.parse(response.updated_at); // Parse the ISO string to UTC time
                        let startingDate = new Date(startingDateUTC).getTime() + (new Date().getTimezoneOffset() * 60000);
      
                        
                        // Convert 'created_at' to milliseconds
                      let currentdatatext = new Date().getTime();
      
                      let elapseddataTime = currentdatatext - startingDate  ;
                      let growthdays = Math.floor(elapseddataTime / (1000 * 60 * 60 * 24)) % 30;
                    let growthhours = Math.floor(elapseddataTime / (1000 * 60 * 60)) % 24;
                    let growthminutes = Math.floor(elapseddataTime / (1000 * 60)) % 60;
                    let growthseconds = Math.floor(elapseddataTime / 1000) % 60;
                    let growseconds = (growthdays*86400) + (growthhours*3600) + (growthminutes*60) + (growthseconds);
                      let growamount = response.amount
                      var growth = (15 / 100) * growamount; // 15% increment
                       var incrementgrowth = growth / (365 * 24 * 60 * 60);
                       incrementgrowth = incrementgrowth*growseconds;
                       console.log(incrementgrowth,'grownamount');
                       let growrisemoney = response.risemoney;
                       console.log(growrisemoney,'growrisemoney:');
                       growmoney(response.amount,incrementgrowth,growrisemoney);
                        
                       function updateTime() {
            let currentDate = new Date().getTime();
    
            let elapsedTime = currentDate - startingDate;
    
    
            // console.log('Current date:', new Date(currentDate));
            // console.log('Starting date:', new Date(startingDate));
            // console.log('Elapsed time:', elapsedTime);
            // let months = Math.floor(elapsedTime / (1000 * 60 * 60 * 24 * 30)); // Approximate months
            let days = Math.floor(elapsedTime / (1000 * 60 * 60 * 24)) % 30;
            let hours = Math.floor(elapsedTime / (1000 * 60 * 60)) % 24;
            let minutes = Math.floor(elapsedTime / (1000 * 60)) % 60;
            let seconds = Math.floor(elapsedTime / 1000) % 60;
    
            // Update the timer elements with the calculated values
            // document.getElementById("timer_months").textContent = months;
            document.getElementById("timer_days").textContent = days;
            document.getElementById("timer_hours").textContent = hours;
            document.getElementById("timer_minutes").textContent = minutes;
            document.getElementById("timer_seconds").textContent = seconds;
        }
    
        // Update time immediately after page load
        updateTime();
    
        // Update time every second
        setInterval(updateTime, 1000);
                        
                    }  else {
                        console.error('Invalid response format or missing data');
                    }
                },
                error: function(xhr, status, error) {
                    // Handle any errors that occur during the AJAX request
                    console.error('AJAX error:', status, error);
                }
            });
        });
    </script>
    

    {{-- <script>
$(document).ready(function() {
    $.ajax({
        url: '/get-plan-data',
        type: 'get',
        success: function(response) {
            if (response && response.amount) {
                $('#amount_id').val(response.amount);
            }

            // You can perform further actions based on the response
        },
        error: function(xhr, status, error) {
            // Handle any errors that occur during the AJAX request
            console.error('AJAX error:', status, error);
        }
    });
});

    </script> --}}

    <script>
      function validateInput() {
        var inputElement = document.getElementById('amount_id');
        // Replace any non-numeric characters with an empty string
        inputElement.value = inputElement.value.replace(/\D/g, '');
        // Trigger the getamount() function
        getamount();
    }
    </script>
    <script>
      var intervalId; // Variable to store the interval ID
      var intervaTime;
      function getamount() {
          var inputElement = document.getElementById('amount_id');
          value = "";
          var value = inputElement.value;
          if (value > 99999) {
              clearInterval(intervalId); // Clear previous interval
              clearInterval(intervaTime); // Clear previous interval
              growmoney(value);
              // timerup();
          }
      }
  
      function growmoney(principalamount,increasedamount,growrisemoney) {
        document.getElementById('money-value').textContent = "";
          var money = principalamount;
          var growth = (15 / 100) * money; // 15% increment
          var increment = growth / (365 * 24 * 60 * 60);
          console.warn(growrisemoney,'growrisemoneyafter:');
          if(growrisemoney != null){
            money = +money + increasedamount;
          }else{
            money = +money + increasedamount + growrisemoney;
          }
          function updateMoney() {
              money = +money + increment; // Increase money value
              money = money.toFixed(8);
              document.getElementById('money-value').textContent = money;
          }
  
          updateMoney(); // Update immediately when called
          intervalId = setInterval(updateMoney, 1000); // Update every second and store interval ID
      }
  
      // Call the growmoney function initially with the default value
      window.onload = function () {
          // growmoney(100000);
          // timerup();
      };


function timerup(){
            let startingDate = new Date().getTime();
            document.getElementById("timer_days").textContent = 0;
            document.getElementById("timer_hours").textContent = 0;
            document.getElementById("timer_minutes").textContent = 0;
            document.getElementById("timer_seconds").textContent = 0;


            function updateTime() {
              let newDate = new Date().getTime();
                let finalDate = newDate - startingDate;

                 days = Math.floor(finalDate / (1000 * 60 * 60 * 24));
                 hours = Math.floor((finalDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                 minutes = Math.floor((finalDate % (1000 * 60 *60)) / (1000 * 60));
                 seconds = Math.floor((finalDate % (1000 * 60)) / 1000);

                 document.getElementById("timer_days").textContent = days;
                 document.getElementById("timer_hours").textContent = hours;
                 document.getElementById("timer_minutes").textContent = minutes;
                 document.getElementById("timer_seconds").textContent = seconds;
            }
            intervaTime = setInterval(updateTime, 1000);
    }
        
    </script>


    <script>
      function buyplan(){

        $('#exampleModalLong').modal('show');

        // var amount = $('#amount_id').val();
        // if(amount > 99999){
        //       var url = "/buy-goldplan?amount=" + amount;
        //       window.location.href = url;
        // }else{
        //   $('#amount-validation').html('Minimum amount should be 1 Lakh');
        // }

      }
    </script>


<script>

$( document ).ready(function() {
  $("#selectmethod").change(function(){
    let selectmethod = $('#selectmethod').val();
    if(selectmethod === 'payrequest'){
      $('#selectmethoderror').html('');
        $('#crownmember').removeClass('d-none');
    }else{
      $('#selectmethoderror').html('');
      $('#crownmember').addClass('d-none');
    }
});
});

function subinvest() {

    let investmore = $('#investmore').val();
    investmore = parseInt(investmore);
    let investment_plan = $('#investment_plan').val();
    let selectmethod = $('#selectmethod').val();
    let amount_id = $('#amount_id').val();
    amount_id = parseInt(amount_id);

    // Clear previous errors
    $("#error_investmore").html('');
    $("#error_investment_plan").html('');
    $("#selectmethoderror").html('');

    // Validation checks
    if (!investmore || investmore <= 0) {
        $("#error_investmore").html('(Please Enter a Valid Amount)');
        return false;
    }
    if (!investment_plan) {
        $("#error_investment_plan").html('(Please Select an Investment Plan)');
        return false;
    }
    if (!selectmethod) {
        $("#selectmethoderror").html('(Please Select the Payment Method)');
        return false;
    }

    const moneyValueElement = $('#money-value');
    let moneyValue = moneyValueElement.text();
    let number = parseFloat(moneyValue);
    let risemoney = number - amount_id;
    let csrfToken = $('meta[name="csrf-token"]').attr('content');
    let authToken = $('input[name="authtoken"]').val(); 
    // If UPI is selected, handle payment differently

    if (!userData || !userData.user_id ) {
            $('#selectmethoderror').html('(Authentication data missing. Please refresh the page)');
            return;
        }

        const paymentData = JSON.stringify({
            investmore: investmore,
            risemoney: 0,
            selectmethod: selectmethod,
            investment_period: investment_plan
        });

        $('#subinvest').prop('disabled', true).html('Processing...');


    if (selectmethod === 'upi') {
        $.ajax({
            // url: "https://www.mywealthfree.com/api/invest-more-in-gold",
            url: "/api/invest-more-in-gold",
            type: "POST",
            data: paymentData,
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken,
                "Accept": "application/json",
            },
            // beforeSend: function(xhr) {
            //     console.log('Request headers:', xhr.getAllResponseHeaders());
            // },
            success: function(response) {
                console.log('Success response:', response);
                if (response.success && response.data && response.data.payment_link) {
                    window.location.href = response.data.payment_link;
                } else {
                    $('#selectmethoderror').html('(Payment initialization failed: ' + JSON.stringify(response) + ')');
                }
                $('#subinvest').prop('disabled', false).html('Submit');
            },
            error: function(xhr, status, error) {
                console.log('Full error details:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    responseText: xhr.responseText,
                    error: error
                });
                let errorMsg = xhr.responseText ? JSON.parse(xhr.responseText).message : error;
                $('#selectmethoderror').html('(Error: ' + errorMsg + ')');
                $('#subinvest').prop('disabled', false).html('Submit');
            }
        });
        
    }else if(selectmethod === 'withdrawalwallet'){
      $.ajax({
            // url: "https://www.mywealthfree.com/api/invest-more-in-gold",
            url: "/api/invest-more-in-gold",
            type: "POST",
            data: paymentData,
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken,
                "Accept": "application/json",
            },
            // beforeSend: function(xhr) {
            //     console.log('Request headers:', xhr.getAllResponseHeaders());
            // },
            success: function(response) {
                if (!response.success) {
                      $('#selectmethoderror').html('(Insufficient wallet balance)');
                  } else {
                      window.location.href = 'thankyou';
                  }
            },
            error: function(xhr, status, error) {
                console.log('Full error details:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    responseText: xhr.responseText,
                    error: error
                });
                let errorMsg = xhr.responseText ? JSON.parse(xhr.responseText).message : error;
                $('#selectmethoderror').html('(Error: ' + errorMsg + ')');
                $('#subinvest').prop('disabled', false).html('Submit');
            }
        });
    }  else if(selectmethod === 'payrequest'){
      $.ajax({
            // url: "https://www.mywealthfree.com/api/invest-more-in-gold",
            url: "/api/invest-more-in-gold",
            type: "POST",
            data: paymentData,
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken,
                "Accept": "application/json",
            },
            // beforeSend: function(xhr) {
            //     console.log('Request headers:', xhr.getAllResponseHeaders());
            // },
            success: function(response) {
                window.location.href = 'thankyou';
            },
            error: function(xhr, status, error) {
                console.log('Full error details:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    responseText: xhr.responseText,
                    error: error
                });
                let errorMsg = xhr.responseText ? JSON.parse(xhr.responseText).message : error;
                $('#selectmethoderror').html('(Error: ' + errorMsg + ')');
                $('#subinvest').prop('disabled', false).html('Submit');
            }
        });
    }

    // ... rest of existing code ...
}
</script>


<script>
  function withdraw(){
    let withdraw  = $('#withdrawamount').val();
    withdraw = parseInt(withdraw);
    const moneyValueElement = $('#money-value');
    let moneyValue = moneyValueElement.text();
    console.log(moneyValue,'moneyValue:');
    var withdrawnumber = parseFloat(moneyValue);
    let remainingamount = withdrawnumber - withdraw;
    
    if (isNaN(withdraw)) {
        $("#error_withdraw").html('(Please Enter the Amount)');
      } else if(remainingamount <= 100){
        $("#error_withdraw").html('(Amount should be more than 100)');
      }else{
        $("#error_withdraw").html('');
      }

      if (isNaN(withdraw) || remainingamount <= 100) {
            return false;
          } else {
            let csrfToken = $('meta[name="csrf-token"]').attr('content');
            var moneydata = {
              Amount:withdraw,
              remainingAmount:remainingamount,
            }

            $.ajax({
							url: "withdraw-amount",
							type: "POST",
              data:moneydata,
							headers: {
								"X-CSRF-TOKEN": csrfToken
							},
							success: function(response) {
                location.reload();
              }
            })
          }

  }
</script>

<script>
$(document).ready(function() {
    // Calculate investment details when amount or plan changes
    $('#investmore, #investment_plan').on('change', function() {
        calculateInvestmentSummary();
    });

    // function calculateInvestmentSummary() {
    //     const amount = parseFloat($('#investmore').val()) || 0;
    //     const plan = $('#investment_plan').val();
        
    //     if (amount > 0 && plan) {
    //         const today = new Date();
    //         const planDetails = {
    //             weekly: {
    //                 days: 7,
    //                 interestRate: 0.90, // 0.90% per week
    //                 label: 'Weekly'
    //             },
    //             monthly: {
    //                 days: 30,
    //                 interestRate: 1.00,
    //                 label: 'Monthly'
    //             },
    //             quarterly: {
    //                 days: 90,
    //                 interestRate: 1.05,
    //                 label: 'Quarterly'
    //             },
    //             half_yearly: {
    //                 days: 180,
    //                 interestRate: 1.10,
    //                 label: 'Half Yearly'
    //             },
    //             yearly: {
    //                 days: 365,
    //                 interestRate: 1.25,
    //                 label: 'Yearly'
    //             }
    //         };

    //         const selectedPlan = planDetails[plan];
            
    //         // Calculate end date
    //         const endDate = new Date(today);
    //         endDate.setDate(endDate.getDate() + selectedPlan.days);
            
    //         // Calculate weekly interest
    //         const weeklyInterest = amount * (selectedPlan.interestRate / 100);
            
    //         // Calculate total interest for the period
    //         const totalInterest = weeklyInterest * (selectedPlan.days / 7);
            
    //         // Format dates nicely
    //         const dateOptions = { 
    //             year: 'numeric', 
    //             month: 'long', 
    //             day: 'numeric' 
    //         };

    //         // Update the simplified investment summary
    //         $('#weeklyPayout').text(weeklyInterest.toFixed(2));
    //         $('#lockInWeeks').text(`Until ${endDate.toLocaleDateString(undefined, dateOptions)}`);
    //         $('#totalInterest').text(totalInterest.toFixed(2));
            
    //         // Update header text
    //         $('#investmentSummary h6').text(`${selectedPlan.label} Investment Plan Summary`);
            
    //         $('#investmentSummary').removeClass('d-none');
    //     } else {
    //         $('#investmentSummary').addClass('d-none');
    //     }
    // }


    function calculateInvestmentSummary() {
    const amount = parseFloat($('#investmore').val()) || 0;
    const plan = $('#investment_plan').val();
    
    if (amount > 0 && plan) {
        const today = new Date();
        const planDetails = {
            weekly: {
                days: 7,
                annualInterestRate: 9, // 9% per year
                label: 'Weekly'
            },
            monthly: {
                days: 30,
                annualInterestRate: 10, 
                label: 'Monthly'
            },
            quarterly: {
                days: 90,
                annualInterestRate: 10.5, 
                label: 'Quarterly'
            },
            half_yearly: {
                days: 180,
                annualInterestRate: 11, 
                label: 'Half Yearly'
            },
            yearly: {
                days: 365,
                annualInterestRate: 12.5, 
                label: 'Yearly'
            }
        };

        const selectedPlan = planDetails[plan];

        // Calculate end date
        const endDate = new Date(today);
        endDate.setDate(endDate.getDate() + selectedPlan.days);

        // **Calculate Weekly Payout Correctly**
        const weeklyRate = selectedPlan.annualInterestRate / 52; // Convert annual interest rate to weekly
        const weeklyInterest = (amount * weeklyRate) / 100; // Apply rate to investment

        // **Corrected Total Interest Calculation**
        let totalInterest = (amount * selectedPlan.annualInterestRate) / 100; // Total annual interest

        // Format date
        const dateOptions = { 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        };

        // Update investment summary
        $('#weeklyPayout').text(weeklyInterest.toFixed(2)); // Weekly payout = 90/52
        $('#lockInWeeks').text(`Until ${endDate.toLocaleDateString(undefined, dateOptions)}`);
        $('#totalInterest').text(totalInterest.toFixed(2)); // Correct total interest (₹90 for ₹1000 in weekly plan)

        // Update header text
        $('#investmentSummary h6').text(`${selectedPlan.label} Investment Plan Summary`);

        $('#investmentSummary').removeClass('d-none');
    } else {
        $('#investmentSummary').addClass('d-none');
    }
}



});
</script>

<script>
  function withdrawalamount() {
    alert('hello');
  }
</script>

@endsection