@extends('layouts.buddy-screens') @section('content')
<style>
    .tabpanel{padding-top:10px !important;}
</style>

<div class="content-wrapper bgline">
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light color-green">Digi Gold </span>
        <span class="small-black">Gold Price
                @if(!empty($gold_silver_rate) && isset($gold_silver_rate['result']) && isset($gold_silver_rate['result']['data'])) 
                    {{$gold_silver_rate['result']['data']['rates']['gBuy']}}/Gm
                @endif 
                 <img src="{{asset('/images/right-arrow.png')}}" alt="" class="right-arrow">
            </span>
            <span class="small-black">Silver Price
                @if(!empty($gold_silver_rate) && isset($gold_silver_rate['result']) && isset($gold_silver_rate['result']['data'])) 
                    {{$gold_silver_rate['result']['data']['rates']['sBuy']}}/Gm
                @endif
                <img src="{{asset('/images/right-arrow.png')}}" alt="" class="right-arrow">
            </span>
            <a class="btn right-align" href="{{url('digigold-transfer')}}" style="display:none;">Transfer</a>
            <a class="btn right-align" href="{{url('digigold-redeem')}}" style="margin-left: 10px;margin-right: 10px;">Redeem</a>&nbsp;
           
            <a class="btn right-align" href="{{url('digigold-buy-sell')}}">Buy/Sell</a>&nbsp;
        </h4>

        <div style="display:none">
            <span>Gold Price
                @if(!empty($gold_silver_rate) && isset($gold_silver_rate['result']) && isset($gold_silver_rate['result']['data'])) 
                    {{$gold_silver_rate['result']['data']['rates']['gBuy']}}/Gm
                @endif
            </span>
            <br/>
            <span>Silver Price
                @if(!empty($gold_silver_rate) && isset($gold_silver_rate['result']) && isset($gold_silver_rate['result']['data'])) 
                    {{$gold_silver_rate['result']['data']['rates']['sBuy']}}/Gm
                @endif
            </span>
        </div>

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <h4 class="fw-bold"><span class="text-muted fw-light color-green">Redeem Gold</span></h4>
        <div class="row">

            <div class="col-md-8 pt-3">
                <div id="exTab2" class="tabpanel">

                    <!-- <ul class="nav nav-tabs">
			<li class="active">
        <a  href="#1" data-toggle="tab">Buy</a>
			</li>
			<li><a href="#2" data-toggle="tab">Sell</a>
			</li>
			<li><a href="#3" data-toggle="tab">Redeem</a>
			</li>
		</ul> -->

                    <div class="tab-content ">
                        <div class="tab-pane active" id="1">
                            <div class="d-grid">
                                <label for="Select Metal">Redemption Type</label>
                                  <select name="Metal" id="Metal">
                                    <option value="gold">Redemption Gold</option>
                                    <option value="silver">Redemption Silver</option>
                                  </select>
                            </div>
                            <div id="owl-carousel" class="owl-carousel owl-theme sld-gold">
                            @forelse($product_list as $product)
                              @if($product['metalType'] =='gold')
                                  <div class="item {{$product['metalType']}}">
                                    <div class="product-div">
                                        <a id="openModal"  class="openModal">
                                              <img src="{{$product['productImages'][0]['url']}}" class="img-fluid">{{$product['name']}}
                                              <p>Making & Delivery <br> Charges <span class="color-green">₹  {{$product['basePrice']}}</span></p>
                                              <span>Select</span>
                                              <div class="product_detail" style="display:none;">
                                                <h4>Name <span>{{$product['name']}}</span></h4>
                                                <h4>SKU <span>{{$product['sku']}}</span></h4>
                                                <h4>Weight <span>{{$product['productWeight']}} gm</span></h4>
                                                <h4>Metal type <span><b>{{ucfirst($product['metalType'])}}</b></span></h4>
                                                <h4>Purity <span>{{$product['purity']}}</span></h4>
                                                <h4>Jewelry Type <span>{{ucfirst($product['jewelleryType'])}}</span></h4>
                                             
                                                <h4>  <span class="tooltipset">Charges<aside class="more-info">
                        <span class="tooltiptext">Inclusive of Making &<br> Delivery Charges</span>
                      </aside></span><span>₹ {{$product['basePrice']}}</span></h4>

                                                <span class="text-center">
                                                  <form method="post" action="{{ route('digigoldreedemprocess')}}"> @csrf
                                                    <input type="hidden" name="sku" value="{{$product['sku']}}">
                                                    <input type="hidden" name="basePrice" value="{{$product['basePrice']}}">
                                                    <input type="hidden" name="metalType" value="{{$product['metalType']}}">                                                
                                                    <br/>
                                                    Shipping Address<br/>
                                                    <select class="form-control" name="address_id" required>
                                                      @forelse($address_list as $address)
                                                      @if(isset($address['userAddressId']))
                                                      <option value="{{$address['userAddressId']}}">{{$address['name']}}, {{$address['cityName']}}, {{$address['address']}}, {{$address['pincode']}}</option>
                                                      @endif
                                                      @empty  
                                                      <option value="">Address Not Fount</option>
                                                      @endforelse
                                                  </select>
                                                  <span class="new_address btn">Create New Address</span><br/><br/>
                                                    <button type="submit" class="btn close btn-primary">Proceed</button>
                                                  </form>
                                                </span>                         
                                              </div>
                                        </a>
                                      </div>
                                  </div>
                                @endif
                            @empty                            
                            @endforelse                              
                            </div>

                            <div id="owl-carousel" class="owl-carousel owl-theme sld-silver" style="display:none;">
                            @forelse($product_list as $product)
                              @if($product['metalType'] =='silver')
                                  <div class="item {{$product['metalType']}}">
                                    <div class="product-div">
                                        <a id="openModal"  class="openModal">
                                              <img src="{{$product['productImages'][0]['url']}}" class="img-fluid">{{$product['name']}}
                                              <p>Making & Delivery <br> Charges  <span class="color-green">₹  {{$product['basePrice']}}</span></p>
                                              <span>Select</span>
                                              <div class="product_detail" style="display:none;">
                                                <h4>Name <span>{{$product['name']}}</span></h4>
                                                <h4>SKU <span>{{$product['sku']}}</span></h4>
                                                <h4>Weight <span>{{$product['productWeight']}} gm</span></h4>
                                                <h4>Metal type <span><b>{{ucfirst($product['metalType'])}}</b></span></h4>
                                                <h4>Purity <span>{{$product['purity']}}</span></h4>
                                                <h4>Jewelry Type <span>{{ucfirst($product['jewelleryType'])}}</span></h4>
                                                <h4>  <span class="tooltipset">Charges<aside class="more-info">
                        <span class="tooltiptext">Inclusive of Making &<br> Delivery Charges</span>
                      </aside></span><span>₹ {{$product['basePrice']}}</span></h4>
                                                <span class="text-center">
                                                  <form method="post" action="{{ route('digigoldreedemprocess')}}"> @csrf
                                                    <input type="hidden" name="sku" value="{{$product['sku']}}">
                                                    <input type="hidden" name="basePrice" value="{{$product['basePrice']}}">
                                                    <input type="hidden" name="metalType" value="{{$product['metalType']}}">                                                
                                                    <br/>
                                                    Shipping Address<br/>
                                                    <select class="form-control" name="address_id" required>
                                                      @forelse($address_list as $address)
                                                      @if(isset($address['userAddressId']))
                                                      <option value="{{$address['userAddressId']}}">{{$address['name']}}, {{$address['cityName']}}, {{$address['address']}}, {{$address['pincode']}}</option>
                                                      @endif
                                                      @empty  
                                                      <option value="">Address Not Fount</option>
                                                      @endforelse
                                                  </select>
                                                  <span class="new_address btn">Create New Address</span><br/><br/>
                                                    <button type="submit" class="btn close btn-primary">Proceed</button>
                                                  </form>
                                                </span>                         
                                              </div>
                                        </a>
                                      </div>
                                  </div>
                                @endif
                            @empty                            
                            @endforelse                              
                            </div>
                            
                        <p class="text-center" style="display:none;"><a class="btn mt-3">Review</a></p>
                       
                        
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-4  d-flex-justify">

            </div>
        </div>
    </div>
    <div id="modal" class="modal">
      <div class="modal-content">
        
        <div class="modal-text">
        <div class="row">
       
          <div class="col-md-4 mt-3 pt-3 offset-md-4 form-div modal-new-design">
          <span  class="close" data-dismiss="modal" id="closeModal">&times;</span>
          <h3 class="fw-bold"><span class="text-muted fw-light color-green">Review Details</span></h4>
          <div class="amount-detail">
                
            </div>
        </div>
    </div>
        </div>
      </div>
    </div>

    <div id="modal1" class="modal">
    <div class="modal-content">
        
        <div class="modal-text">
        <div class="row">
       
          <div class="col-md-4 mt-3 pt-3 offset-md-4 form-div modal-new-design">
                <span class="close" id="closeModal1">&times;</span>
                    <h4 class="text-center color-green mt-3 mb-3">User Address</h4>
                    <form method="post" action="{{ route('digigoldcreateaddress')}}"> @csrf
                    <div class="col-md-12 mb-3 ">
                        <div class="d-grid">
                            <label for="Select Transfer Type">Full Name</label>
                            <input type="text" id="Name" name="name" required placeholder="Name">

                        </div>
                    </div>

                    <div class="col-md-12 mb-3 ">
                        <div class="d-grid relative">
                            <label for="Metal Type">Mobile Number</label>
                            <input type="text" id="currency" name="mobileNumber" required placeholder="" style="padding-left:40px">
                            <span class="absolute">+91 </span>
                        </div>
                    </div>

                    <div class="col-md-12 mb-3 ">
                        <div class="d-grid">
                            <label for="Available balance for withdrawal">Address</label>
                            <input type="text" id="balance" name="address" required placeholder="Address">
                        </div>
                    </div>
                    <div class="col-md-12 mb-3 ">
                        <div class="d-grid">
                            <label for="Available balance for withdrawal">Pincode</label>
                            <input type="text" id="pincode" required name="pincode" placeholder="Pincode">
                        </div>
                    </div>
                    <div class="col-md-12 mb-2 mt-2 ">
                      <p class="text-center"><button type="submit" class="btn btn-primary">Confirm</button></p>
                    </div>
                  </form>
              </div>
           </div>
       </div>
    </div>
    </div>

    <div id="modal2" class="modal">
      <div class="modal-content">
     
      <div class="modal-text">
        <div class="row">
       
          <div class="col-md-4 mt-3 pt-3 offset-md-4 form-div modal-new-design">
        <span class="close" id="closeModal2">&times;</span>
        <h2 class="color-green">Your redemption request has been processed successfully. Track your order in the ‘<b>My Orders</b>’ section.</h2>
       <p><b>Transaction ID:</b> 123456789</p>
        <p><b>Redeem Amount: </b>  <span class="color-green"><b>1 gm/₹ 82,609.00</b></span></p>
        <p><b>Total Credited: </b> ₹ 81,609.00</p>
        <p><b>Date & Time:  </b> 10-01-2025</p>
        </div>
      </div>
    </div>
    </div>
    </div>

    <div  class="poweredbyaug" style="text-align: center;background: #fff; line-height: 50px;"><a href="{{url('/digigold-termcondition')}}" style="float: left;padding-left:20px;" target="_blank">Terms and Conditions</a> Powered By Augmont</div>

</div>
<link rel="stylesheet" href="{{asset('assets/css/digigold.css')}}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
    // Get modal element
    var modal = document.getElementById("modal");
 
    // Get open modal button
    var openModal = document.getElementById("openModal");
    // Get close button
    var closeModal = document.getElementById("closeModal");
    // Listen for open click
   /* openModal.onclick = function () {
      modal.style.display = "block";
    };*/
    $(document).on('click', '.openModal', function(e) {
    var cont = $(this).find('.product_detail').html();
    console.log(cont);
		$('.amount-detail').html(cont);
		 modal.style.display = "block";
});
    // Listen for close click
    closeModal.onclick = function () {
      modal.style.display = "none";
    };
    // Listen for outside click to close modal
    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    };
    // Handle form submission
    document.getElementById("contactForm").onsubmit = function (event) {
      event.preventDefault(); // Prevent page refresh
      alert("Form submitted successfully!");
      modal.style.display = "none"; // Close modal after submission
    };
</script>
<script>
    // Get modal element
    var modal1 = document.getElementById("modal1");
    // Get open modal button
    var openModal1 = document.getElementById("openModal1");
    // Get close button
    var closeModal1 = document.getElementById("closeModal1");
    // Listen for open click
    $(document).on('click', '.new_address ', function(e) {

		 modal1.style.display = "block";
});
    // Listen for close click
    closeModal1.onclick = function () {
      modal1.style.display = "none";
    };
    // Listen for outside click to close modal
    window.onclick = function (event) {
      if (event.target === modal1) {
        modal1.style.display = "none";
      }
    };
    // Handle form submission
   /* document.getElementById("contactForm").onsubmit = function (event) {
      event.preventDefault(); // Prevent page refresh
      alert("Form submitted successfully!");
      modal1.style.display = "none"; // Close modal after submission
    };*/
</script>
<script>
    // Get modal element
    var modal2 = document.getElementById("modal2");
    // Get open modal button
    var openModal2 = document.getElementById("openModal2");
    // Get close button
    var closeModal2 = document.getElementById("closeModal2");
    // Listen for open click
    openModal2.onclick = function () {
      modal2.style.display = "block";
    };
    // Listen for close click
    closeModal2.onclick = function () {
      modal2.style.display = "none";
    };
    // Listen for outside click to close modal
    window.onclick = function (event) {
      if (event.target === modal2) {
        modal2.style.display = "none";
      }
    };
    // Handle form submission
    document.getElementById("contactForm").onsubmit = function (event) {
      event.preventDefault(); // Prevent page refresh
      alert("Form submitted successfully!");
      modal2.style.display = "none"; // Close modal after submission
    };
</script>
<script>
    $('.sld-gold, .sld-silver').owlCarousel({
        loop: true,
        autoplay: true,
        margin: 10,
        dots: false,
        nav: true,
        items: 4,
        responsive:{
                0:{
                    items: 1
                },                
                728:{
                    items:2
                },
                960:{
                    items:3
                },
                1300:{
                    items:4

                }
            }
    });

    $("#Metal").on('change', function () {
       $('.sld-gold, .sld-silver').hide();
       if($("#Metal").val() =='gold') {
        $('.sld-gold').show();
       }
       if($("#Metal").val() =='silver') {
        $('.sld-silver').show();
       }
   }); 
</script>


<style>
  .more-info {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding-left: 0.25em;
  padding-right: 0.25em;
  vertical-align: top;
  overflow: visible;
  white-space: nowrap;    margin-left: 5px;
}

.more-info:before {
  display: block;
  width: 2em;
  height: 2em;
  position: relative;
  top: 1px;
  color: #000;
  background: #fff;
  border-radius: 50%;
  content: "?";
  border: 1px solid #9A9A9A;
  line-height: 2em;
  /*Increase font-size to increase button size*/
  font-size: 0.6em;
  vertical-align: middle;
  text-align: center;
  font-family: Times New Roman;
}
.more-info .tooltiptext {
    text-align: center !important;
    position: absolute;
    top: -4em;
    left: 1em;
    z-index: 999;
    padding: 0.5em;
    width: 122px !important;
    white-space: normal;
    display: none;
    background: white;
    outline: 1px solid #9A9A9A;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(85, 98, 112, 0.15);
    -moz-box-shadow: 0px 1px 4px 0px rgba(85, 98, 112, 0.15);
    box-shadow: 0px 1px 4px 0px rgba(85, 98, 112, 0.15);
    font-weight: 300;
    font-size: 0.75em;
    line-height: 1.6em;
}
span.tooltipset {
    color: #000 !important;
    font-weight: 400;
    float: left;
    width: 100%;
}
/* Show the tooltip text when you mouse over the tooltip container */

.more-info:hover .tooltiptext {
  display: block;
}
</style>
@endsection