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

<style>
    /* .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);
} */

.label_form_cover {
    display: flex;
    /* border: 2px solid; */
}

.card-input {
    /* margin: 10px; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 00px;
    height: 100%;
    border: 1px solid #d3d3d3;
    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);
}

.card-input:hover {
    cursor: pointer;
}

.card-input-element {
    display: none;
}

.panel-body {
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    /* font-size: 12px; */
    font-size: 20px;
    line-height: 1;
    color: var(--clr-txt);
}


label {
    width: 100%;
    height: 100%;
}

.label-cover{
  width:20%;
}

.card-input-element:checked + .card-input {
     /* border:rgba(99, 99, 99, 0.2); */
     /* box-shadow: rgba(235, 33, 47, 0.6) 0px 2px 8px 0px; */
     /* box-shadow: rgba(235, 33, 47, 0.6) 0px 1px 4px; */
     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);
 }


.countup-timer {
    display: flex;
}

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

.form-plan {
    max-width: 750px;
    margin: auto;
    padding: 20px;
    border: 4px solid #9c7625;
    border-radius: 10px;
    /* background: #cfa020; */
    background: rgba(207,160,32,0.2);
    /* background: beige; */
}

.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.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;
    }

    #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-size: 1.52em;
  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;
  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::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; */
  margin: 20px 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;
  
}

button#buy {
    margin-top: 50px;
}

.fieldInput .form-input {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 25px 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){
  .label_form_cover {
    display: block;
    /* border: 2px solid; */
}

.label-cover {
    width: 45%;
    display: inline-block;
}

}

/* Add these new modal styles */
.modal {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
    z-index: 1040;
}

.modal-dialog {
    z-index: 1050;
}

.modal-content {
    z-index: 1060;
    background: #fff;
}

/* Fix button z-index */
#buy {
    z-index: 1;
    position: relative;
}

/* Ensure confetti doesn't overlap modals */
.confetti {
    z-index: 0;
}

/* Modal fixes */
.modal-backdrop {
    z-index: 9998 !important;
}

.modal {
    z-index: 9999 !important;
}

#myModalselect, #myModalcheckout {
    background: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    margin: 1.75rem auto;
    position: relative;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    background-color: #fff;
    pointer-events: auto;
}

/* Fix main content overflow */
.main-content {
    overflow: visible !important;
}

/* Fix button styles */
.btn-primary {
    z-index: 1;
}

.btn-contact {
    display: inline-block;
    margin: 5px;
    padding: 5px 15px;
    background: #0E194D;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
}

.btn-contact i {
    margin-right: 5px;
}

/* Fix modal scrolling issues */
body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

.modal {
    overflow-y: auto !important;
    background: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

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

/* Fix confetti z-index and overflow */
.confetti {
    position: fixed;
    z-index: 0;
}

/* Update modal styles */
#myModalselect, #myModalcheckout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Fix form positioning */
.form-plan {
    position: relative;
    z-index: 1;
}

</style>
<input type="hidden" name="authtoken" value={{$token}}>
    <div class="main-content position-relative ">
        <section class="section">
            <div class="section-header">
                <h1><i class="fa fa-fw fa-users"></i> StockPlan  </h1>
            </div>

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

              <div  class="form-plan">
                <div class="label_form_cover my-5">
        
                  <div class="label-cover">
                    <label>
                      <input type="radio" name="board" class="card-input-element"  value="100"/>
                        <div class="panel panel-default card-input">
                          <div class="panel-body">
                            <i class="fa fa-inr" aria-hidden="true"></i> 100
                          </div>
                        </div>
                    </label>
                  </div>
                  <div class="label-cover">
                    <label>
                      <input type="radio" name="board" class="card-input-element" value="500" />
                        <div class="panel panel-default card-input">
                          <div class="panel-body">
                            <i class="fa fa-inr" aria-hidden="true"></i> 500
                          </div>
                        </div>
                    </label>
                  </div>
                  <div class="label-cover">
                    <label>
                      <input type="radio" name="board" class="card-input-element" value="1000"/>
                        <div class="panel panel-default card-input">
                          <div class="panel-body">
                            <i class="fa fa-inr" aria-hidden="true"></i> 1000
                          </div>
                        </div>
                    </label>
                  </div>
                  <div class="label-cover">
                    <label>
                      <input type="radio" name="board" class="card-input-element" value="5000"/>
                        <div class="panel panel-default card-input">
                          <div class="panel-body">
                            <i class="fa fa-inr" aria-hidden="true"></i> 5000  
                          </div>
                        </div>
                    </label>
                  </div>
                  <div class="label-cover">
                    <label>
                      <input type="radio" name="board" class="card-input-element" value="100000"/>
                        <div class="panel panel-default card-input">
                          <div class="panel-body">
                            <i class="fa fa-inr" aria-hidden="true"></i> 100000  
                          </div>
                        </div>
                    </label>
                  </div>
              </div>
              
              <div>
                <fieldset class="fieldInput">
                  <div>
                    <input class="form-input" id="amount_id" type="text"  placeholder="Enter the Amount" value="">
                  </div>
                </fieldset>
                <span id="error_amount" class="text-white"></span>
              </div>

                  <button id="buy">Pay Now<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>

    </div> <!-- main-content div closure -->

    <!-- Payment Selection Modal -->
    <div class="modal fade" id="myModalselect" tabindex="-1" role="dialog" aria-labelledby="paymentSelectModal" aria-hidden="true">
        <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">Select Your Payment Method</h5>
                    </div>
                    <div class="mt-3">
                        <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="modal-footer justify-content-center">
                    <button type="button" id="pay_submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="myModalcheckout" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
        <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 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 class="modal-footer justify-content-center">
                    <button type="button" id="pay_now" class="btn btn-primary">Pay Request</button>
                </div>
            </div>
        </div>
    </div>

<script>
$(document).ready(function() {
    // Ensure proper modal initialization
    $('#myModalselect, #myModalcheckout').modal({
        backdrop: 'static',
        keyboard: false,
        show: false
    });

    // Clear modal state on hide
    $('#myModalselect, #myModalcheckout').on('hidden.bs.modal', function () {
        $('#selectmethod').val('');
        $('#selectmethoderror').html('');
    });

    // Radio button handler remains the same
    $('.card-input-element').change(function() {
        var selectedValue = $(this).val();
        $('#amount_id').val(selectedValue);
    });

    // Remove onclick from button HTML and handle it here
    $('#buy').click(function(e) {
        e.preventDefault();
        var amount_id = $('#amount_id').val();
        if(amount_id == "") {
            $('#error_amount').html('Please Choose the amount or insert atleast 100 Rupees');
            return;
        } else if(amount_id < 100) {
            $('#error_amount').html('The amount should be more than 100 Rupees');
            return;
        }
        
        // Clear any previous error messages
        $('#selectmethoderror').html('');
        $('#selectmethod').val('');
        
        // Properly show modal
        $('#myModalselect').modal('show');
    });

    // Handle payment method selection
    $('#pay_submit').click(function() {
        const selectmethod = $('#selectmethod').val();
        const amount_id = $('#amount_id').val();

        if(selectmethod == '') {
            $('#selectmethoderror').html('(Please Choose the Method)');
            return false;
        }
        let authToken = $('input[name="authtoken"]').val(); 
            // Retrieve user details from Laravel blade
          let name = "{{ Auth::user()->name ?? '' }}";
          let email = "{{ Auth::user()->email ?? '' }}";
          let address = "{{ Auth::user()->user_personal_detail->address ?? '' }}";
          let city = "{{ Auth::user()->user_personal_detail->city ?? '' }}";
          let province = "{{ Auth::user()->user_personal_detail->state ?? '' }}";
          let postalcode = "{{ Auth::user()->user_personal_detail->pincode ?? '' }}";
          let phone = "{{ Auth::user()->user_personal_detail->phone ?? '' }}";

          // Check if any field is empty
          if (!name || !email || !address || !city || !province || !postalcode || !phone) {
              // $('#profileModal').modal('show'); // Show modal popup
              $('#myModalselect').modal('hide');
              alert('Complete your profile')
              return false;
          }


        const paymentData = {
            billing_subtotal: amount_id,
            name: name,
            email: email,
            address: address,
            city: city,
            province: province,
            postalcode: postalcode,
            phone: phone,
            flag: 'gold',
            selectmethod: selectmethod
        };

        if(selectmethod === 'withdrawalwallet') {
            $.ajax({
                type: 'POST',
                url: '/api/checkout-goldplan',
                data: JSON.stringify(paymentData),
                contentType: "application/json",
                headers: {
                  "Authorization": "Bearer " + authToken  
                },
                success: function(response) {
                    if(!response.success) {
                        $('#selectmethoderror').html('(Insufficient wallet balance)');
                    } else {
                        window.location.href = 'thankyou?flag=gold';
                    }
                }
            });
        } else if(selectmethod === 'upi') {

            $.ajax({
                type: 'POST',
                url: '/api/checkout-goldplan',
                data: JSON.stringify(paymentData),
                contentType: "application/json",
                headers: {
                  "Authorization": "Bearer " + authToken  
                },
                success: function(response) {
                    if(response.success && response.data && response.data.payment_link) {
                        window.location.href = response.data.payment_link;
                    } else {
                        $('#selectmethoderror').html('(Error processing UPI payment)');
                    }
                }
            });
        } else if(selectmethod === 'payrequest') {
            $('#myModalselect').modal('hide');
            setTimeout(function() {
                $('#myModalcheckout').modal('show');
            }, 500);
        }
    });

    // Handle final payment request
    $('#pay_now').click(function() {
        const amount_id = $('#amount_id').val();
        // const paymentData = {
        //     billing_subtotal: amount_id,
        //     name: "{{ Auth::user()->name }}",
        //     flag: 'gold',
        //     selectmethod: 'payrequest'
        // };

        let authToken = $('input[name="authtoken"]').val(); 
        let name = "{{ Auth::user()->name ?? '' }}";
          let email = "{{ Auth::user()->email ?? '' }}";
          let address = "{{ Auth::user()->user_personal_detail->address ?? '' }}";
          let city = "{{ Auth::user()->user_personal_detail->city ?? '' }}";
          let province = "{{ Auth::user()->user_personal_detail->state ?? '' }}";
          let postalcode = "{{ Auth::user()->user_personal_detail->pincode ?? '' }}";
          let phone = "{{ Auth::user()->user_personal_detail->phone ?? '' }}";

          // Check if any field is empty
          if (!name || !email || !address || !city || !province || !postalcode || !phone) {
              // $('#profileModal').modal('show'); // Show modal popup
              $('#myModalselect').modal('hide');
              alert('Complete your profile')
              return false;
          }


        const paymentData = {
            billing_subtotal: amount_id,
            name: name,
            email: email,
            address: address,
            city: city,
            province: province,
            postalcode: postalcode,
            phone: phone,
            flag: 'gold',
            selectmethod: 'payrequest'
        };


        

        $.ajax({
            type: 'POST',
            url: '/api/checkout-goldplan',
            data: JSON.stringify(paymentData),
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken  
            },
            success: function(response) {
                window.location.href = 'thankyou?flag=gold';
            }
        });
    });

    // Handle modal close buttons properly
    $('.modal .close').click(function() {
        $(this).closest('.modal').modal('hide');
    });

    // Add this to handle modal show/hide properly
    $('#myModalselect, #myModalcheckout').on('show.bs.modal', function () {
        $('body').addClass('modal-open');
    }).on('hidden.bs.modal', function () {
        $('body').removeClass('modal-open');
        // Reset any scroll position
        $(window).scrollTop($(window).scrollTop());
    });
});

// Remove the separate buyplan() function as it's now handled directly in the click handler
</script>

<!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

@endsection