@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="" value={{Auth::user()->id ?? ''}}";> -->
<input type="hidden" name="authId" id="authId" value="{{ Auth::user()->id ?? '' }}">

<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> 
                                      UNLOCK PRINCIPAL AMOUNT
                                  </h5>
                              </div>
                          </div>
                          <div>
            
                              <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 unlockcard">
                                  <div class="col-lg-6">

                            

                                  </div>
                                </div>
                     






              </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>


<div class="modal fade" id="unlockModal" tabindex="-1" role="dialog" aria-labelledby="unlockModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="unlockModalLabel">confirm Unlock</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
            <p>Are you sure want to unlock  this investment?</p>
             <input type="hidden" id="modalId">
              <p><strong>Amount:</strong> ₹<span id="modalAmount"></span></p>
              <p><strong>Unlock Date:</strong> <span id="modalEndDate"></span></p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="button" id="confirmUnlock" class="btn btn-primary">Yes, Unlock</button>
          </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="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
  $(document).ready(function () {
      let authToken = $('input[name="authtoken"]').val(); 
      const userId = $("#authId").val();
      const apiUrl = `/api/get/user/gold-investment?user_id=${userId}`;

      $.ajax({
          url: apiUrl,
          type: "GET",
          dataType: "json",
          headers: {
              "Authorization": "Bearer " + authToken,
              "Accept": "application/json",
          },
          success: function (response) {
              if (response.success && response.data.length > 0) {
                  updateInvestmentUI(response.data);
              }
          },
          error: function (error) {
              console.error("Error fetching data:", error);
          }
      });

      function updateInvestmentUI(investments) {
          $(".unlockcard").empty(); // Clear previous content

          investments.forEach((investment) => {
              const { id, amount, interest_earned, investment_period, created_at, end_date } = investment;

              // Calculate Unlock Date
              const unlockDate = calculateUnlockDate(created_at, investment_period);

              // Generate a unique ID for the timer
              const timerId = `timer-${id}`;

              // Update HTML dynamically
              const investmentSummaryHtml = `
              <div class='col-lg-6'>
                  <div class="investment-summary card mb-3 p-3">
                      <div class="summary-item">
                          <span class="summary-label"><i class="fa-solid fa-sack-dollar mr-1"></i> Amount</span>
                          <span class="summary-value">₹${amount}</span>
                      </div>
                      <div class="summary-item">
                          <span class="summary-label"><i class="fa fa-percent mr-1"></i> Interest Earned</span>
                          <span class="summary-value summary-highlight">₹${interest_earned}</span>
                      </div>
                      <div class="summary-item">
                          <span class="summary-label"><i class="fa fa-lock mr-1"></i> Lock-in Period</span>
                          <span class="summary-value">${investment_period}</span>
                      </div>
                      <div class="summary-item">
                          <span class="summary-label"><i class="fa fa-calendar mr-1"></i> Created At</span>
                          <span class="summary-value">${created_at}</span>
                      </div>
                      <div class="summary-item">
                          <span class="summary-label"><i class="far fa-clock mr-1"></i> Time Remaining</span>
                          <span id="${timerId}" class="summary-value"></span>
                      </div>
                  </div>
              </div>
              `;

              $(".unlockcard").append(investmentSummaryHtml);

              // Start countdown timer for each investment
              startCountdown(unlockDate, timerId, id, amount, end_date);
          });
      }

      function calculateUnlockDate(createdAt, period) {
          const createdDate = new Date(createdAt);
          if (period === "weekly") createdDate.setDate(createdDate.getDate() + 7);
          else if (period === "yearly") createdDate.setFullYear(createdDate.getFullYear() + 1);
          else if (period === "quarterly") createdDate.setMonth(createdDate.getMonth() + 3);
          return createdDate;
      }

      function startCountdown(unlockDate, timerId, id, amount, endDate) {
          function updateTimer() {
              const now = new Date();
              const timeDiff = unlockDate - now;

              if (timeDiff <= 0) {
                  $(`#${timerId}`).html(`
                      <button class="btn btn-success unlock-btn" 
                              data-id="${id}" 
                              data-amount="${amount}" 
                              data-enddate="${endDate}"
                              data-toggle="modal" 
                              data-target="#unlockModal">
                          ✔ Unlock Available
                      </button>
                  `);
                  return;
              }

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

              $(`#${timerId}`).text(`${days} Days, ${hours}Hrs, ${minutes}min, ${seconds}sec`);
          }

          updateTimer();
          setInterval(updateTimer, 1000);
      }

      // Handle Unlock Modal
      $(document).on("click", ".unlock-btn", function () {
          let investmentId = $(this).data("id");
          let amount = $(this).data("amount");
          let endDate = new Date($(this).data("enddate")).toLocaleString();

          $("#modalId").val(investmentId);
          $("#modalAmount").text(amount);
          $("#modalEndDate").text(endDate);

          $("#confirmUnlock").data("id", investmentId);
      });

      // Handle Unlock API Call
      $("#confirmUnlock").on("click", function () {
    let investment_id = $(this).data("id");
    $.ajax({
        url: `/api/withdrawl-gold-investment`,
        type: "POST",
        data: JSON.stringify({ investment_id: investment_id }),  // Convert to JSON format
        contentType: "application/json",  // Set content type to JSON
        headers: {
            "Authorization": "Bearer " + $('input[name="authtoken"]').val(),
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            "Accept": "application/json"
        },
        success: function () {
            alert("Investment Unlocked Successfully!");
            $("#unlockModal").modal("hide");
            location.reload();
        },
        error: function (error) {
            alert("Failed to unlock investment.");
            console.error(error);
        }
    });
});

  });
  </script>






@endsection