@extends('layouts.buddy-screens')

@section('content')

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

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <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>
       
        <h4 class="fw-bold"><span class="text-muted fw-light color-green">Transfer </span></h4>
        <form method="post" class="transfer_form" action="{{ route('digigoldusermetaltransfer')}}">
        @csrf
          <div class="col-md-7 mt-3 pt-5 form-div">
          
                <div class="row">
                    <div class="col-md-12 mb-3 ">
                        <div class="d-grid">
                            <label for="Metal Type">Choose Metal Type</label>
                            <select  name="metaltype" id="metaltype">
                                <option value="Gold">Gold</option>
                                <option value="Silver">Silver</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3 ">
                            <div class="d-grid">
                                <label for="Select Transfer Type">Enter Recipient Name</label>
                                <input type="text" id="Name" class="name" name="name" required placeholder="Name">

                            </div>
                        </div>

                        <div class="col-md-6 mb-3 ">
                            <div class="d-grid relative">
                                <label for="Metal Type">Enter Registered Number</label>
                                <input type="text" id="currency" class="phone" name="phone" placeholder="" style="padding-left:40px !important">
                                <span class="absolute">+91 </span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3 ">
                            <div class="d-grid">
                                <label for="Select Transfer Type">Quantity In Grams</label>
                                <input type="number" id="Name" class="quantity" name="quantity" required placeholder="Quantity In Grams">

                            </div>
                        </div>
                        <div class="col-md-6 mb-3 ">
                            <div class="d-grid">
                                <label for="Select Transfer Type">Available Quantity</label>
                                <span class="available_gold_qty"> {{$goldGrms}} Gm</span>
                                <span class="available_silver_qty" style="display:none;"> {{$silverGrms}} Gm</span>

                            </div>
                        </div>

                    <div class="col-md-12 pt-3 mb-3 text-center">
                    <a class="btn confirmation_a">Proceed to Confirmation</a>
                    </div>
                </div>
            
            </div>
            </form>
        </div>
    </div>
</div>

    <div id="modal" class="modal modalbank">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <div class="modal-text">
                <div class="col-md-4 mt-3 pt-3 offset-md-4 form-div modal-new-design">
                    <div class="amount-detail">
                            <h4>Recipient Name <span class="recipient_name">Alex</span></h4>
                            <h4>Contact <span>+91 <span class="recipient_phone">9999 000 000</span></span></h4>
                            <h4>Metal : <span class="transfer_metal"></span></h4>
                            <h4>Gold/Silver Amount <span class="transfer_qty">0.255 gm</span></h4>                          
                            <p><span>All transfers are secured using the latest encryption technology.</span></p>
                            <a class="btn mt-3 trigger confirmtransfer">Confirm &amp; Transfer</a>
                    </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>
      
<link rel="stylesheet" href="{{asset('assets/css/digigold.css')}}" />

<script>
    $("#metaltype").on('change', function () {
        $('.quantity').val('0');
        if($(this).val() =='Gold') {
            $('.available_gold_qty').show();
            $('.available_silver_qty').hide();
        }
        if($(this).val() =='Silver') {
            $('.available_silver_qty').show();
            $('.available_gold_qty').hide();
        }
   }); 

   $(".quantity").on('keyup, change', function () {
        var quantity =  $(".quantity").val();
        var available_quantity = "{{$goldGrms}}";
        if($('#metaltype').val() =='Silver') {
            var available_quantity = "{{$silverGrms}}";
        }
        if(quantity > parseFloat(available_quantity)) {
            $(".quantity").val(available_quantity); 
        }
        if(quantity < 0) {
            $(".quantity").val('0'); 
        }
   });

   $(".confirmation_a").on('click', function () {
    var openModal = document.getElementById("modal");

    $('.recipient_name').text($('.name').val());
    $('.recipient_phone').text($('.phone').val());
    $('.transfer_qty').text($('.quantity').val());
    $('.transfer_metal').text($('#metaltype').val());

    modal.style.display = "block";
   });

   var closeModal = document.getElementById("closeModal");
   closeModal.onclick = function () {
              modal.style.display = "none";
            };


    $(".confirmtransfer").on('click', function () {
        $('.transfer_form').submit();
    });      
</script>
@endsection