@extends('include.dashboard')

@section('content')
<script type="text/javascript">
    if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
        location.reload();
    }
</script>
 <div class="nk-content">
                        <div class="container-fluid">                            <div class="nk-content-body">
                                <div class="buysell widse-xs m-aussto">
                                <br><br><br>

                                    <div class="buysell-block">
                                     <div class="buysell-title text-center"><h4 class="title text-primary">Convert Airtime To Cash</h4><small>Your deposit wallet will be credited once transaction is confirmed.</small></div>
                                        <form method="post" autocomplete="off" class="buysell-form" action="{{ route('convertairtimepost') }}">
                                        @csrf
                                        <input autocomplete="false" name="hidden" type="text" style="display:none;">
                                            <div class="buysell-field form-group">
                                                  <div class="invest-field form-group">
                                                    <div class="form-label-group"><label class="form-label">Select Amount</label></div>


                                                     <script type="text/javascript">

                                                        function goDoSomething1(identifier){

                                                  document.getElementById("amount").value = $(identifier).data('amount');
                                                   }

                                                    </script>

                                                    <div class="invest-amount-group g-2">
                                                        
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="1000" name="iv-amount" id="iv-amount-4" /><label class="invest-amount-label" for="iv-amount-4">{{$basic->currency_sym}} 1,000</label>
                                                        </div>
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="1500" name="iv-amount" id="iv-amount-5" /><label class="invest-amount-label" for="iv-amount-5">{{$basic->currency_sym}} 1,500</label>
                                                        </div>
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="2000" name="iv-amount" id="iv-amount-6" /><label class="invest-amount-label" for="iv-amount-6">{{$basic->currency_sym}} 2,000</label>
                                                        </div>
                                                        
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="2500" name="iv-amount" id="iv-amount-7" /><label class="invest-amount-label" for="iv-amount-7">{{$basic->currency_sym}} 2,500</label>
                                                        </div>        
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="3000" name="iv-amount" id="iv-amount-8" /><label class="invest-amount-label" for="iv-amount-8">{{$basic->currency_sym}} 3000</label>
                                                        </div>         
                                                        <div class="invest-amount-item">
                                                            <input type="radio" class="invest-amount-control" onclick="goDoSomething1(this);"  data-amount="5000" name="iv-amount" id="iv-amount-9" /><label class="invest-amount-label" for="iv-amount-9">{{$basic->currency_sym}} 5000</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                            </div><br>

                                            <div class="buysell-field form-group">
                                                <script type="text/javascript">

                                                        function goDoSomethingnet(identifier){

        document.getElementById("network").innerHTML = $(identifier).data('network');
         document.getElementById("name").innerHTML = $(identifier).data('network');
       
       document.getElementById("rate").innerHTML = $(identifier).data('rate')+"%";
        document.getElementById("rate2").innerHTML = $(identifier).data('rate')+"%";
        document.getElementById("number").innerHTML = $(identifier).data('number');
        
         var amount = $('#amount').val() ;
        document.getElementById("toconvert").innerHTML = amount+"{{$basic->currency_sym}}";
        
         document.getElementById("ratecharge").innerHTML = amount*$(identifier).data('rate')/100+"{{$basic->currency_sym}}";
    
        var charge = amount*$(identifier).data('rate')/100;
         document.getElementById("pay").innerHTML = amount - charge +"{{$basic->currency_sym}}";
          }

                                                    </script>
                                                    
                                                     <script>
                                    function myFunction() {
                                    
                                    };
                                    </script>


                                            
                                                <div class="form-label-group"><label class="form-label" for="buysell-amount">Or Enter Amount Directly</label></div>
                                                <div class="form-control-group">
                                                    <input type="number" class="form-control form-control-lg form-control-number" id="amount" onkeyup="goDoSomethingnet(identifier)"   name="amount" placeholder="0.00" />
                                                    <div class="form-dropdown">
                                                        <div class="text">{{$basic->currency_sym}}<span></span></div>

                                                    </div>
                                                </div>
                                      
                                                 
                                            </div>


                                             <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label" for="buysell-amount">Enter Phone Number</label></div>
                                                <div class="form-control-group">
                                                    <input type="number" class="form-control form-control-lg form-control-number"   name="phone" placeholder="08114313795" />
                                                    <small>The phone number you are sending the airtime from</small>

                                                </div>
                                             </div>
                                             
                                             <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label" for="buysell-amount">Confirm Phone Number</label></div>
                                                <div class="form-control-group">
                                                    <input type="number" class="form-control form-control-lg form-control-number"   name="phone2" placeholder="08114313795" />

                                                </div>
                                             </div>
                                            <div class="buysell-field form-group">
                                                <div class="form-label-group"><label class="form-label">Network</label></div>
                                                <div class="form-pm-group">
                                                    <ul class="buysell-pm-list">
                                                    @foreach($network as $data)
                                                        <li class="buysell-pm-item" onclick="goDoSomethingnet(this);" data-network="{{$data->name}}" data-rate="{{$data->rate}}" data-number="{{$data->number}}" >
                                                            <input class="buysell-pm-control"  type="radio" name="network" value="{{$data->code}}" id="pm-paypal{{$data->id}}" />
                                                            <label class="buysell-pm-label" for="pm-paypal{{$data->id}}">
                                                                <span class="pm-name">{{$data->name}}</span><span class="pm-icon"><div class="user-avatar sm"><img src="{{asset($data->image)}} " width="100"
                             alt="Avatar"></div></span>
                                                            </label>
                                                        </li>
                                                    @endforeach
                                                                                                           </ul>
                                                </div>
                                            </div> 
                                             <div class="buysell-field form-action"><a href="#" class="btn btn-lg btn-block btn-primary" data-toggle="modal" data-target="#enterpin2">Proceed</a></div>
 
                                            <div class="form-note text-base text-center">Note: our transaction fee included, <a href="#">see our fees</a>. </div>

                                    </div>
                                </div>
                            </div>
                        </div>
        
         <div class="modal fade" tabindex="-1" id="enterpin2">
            <div class="modal-dialog modal-dialog-centered modal-md">
                <div class="modal-content">
                    <div class="modal-body modal-body-md text-center">
                        <div class="nk-modal">
                            <h4 class="nk-modal-title">Preview Transaction</h4>
                            <div class="nk-modal-text">
                                <p>
                                    You have opted to convert <a id="name">no</a> network airtime. <br>Please transfer the unit amount to <a href="#" id="number">0</a> and proceed by clicking on the button below to log your airtime conversion process.
                                </p>
                            </div>
                            
                            <div class="buysell-overview">
                                <ul class="buysell-overview-list">
                                    <li class="buysell-overview-item">
                                        <span class="pm-title">Network</span><span class="pm-currency"><em class="icon ni ni-signal"></em> <span id="network">Network</span></span>
                                    </li>
                                    
                                    <li class="buysell-overview-item"><span class="pm-title">Network Charge</span><span class="pm-currency" id="rate">0</span></li>
                                    <li class="buysell-overview-item"><span class="pm-title">Amount</span><span class="pm-currency" id="toconvert">0{{$basic->currency_sym}}</span></li>
                                     <li class="buysell-overview-item"><span class="pm-title">Transaction Charge</span><span class="pm-currency" id="ratecharge">0.00{{$basic->currency_sym}}</span> </li>
                                    <li class="buysell-overview-item"><span class="pm-title">Payable</span><span class="pm-currency" id="pay">0.00{{$basic->currency_sym}}</span> </li>
                                   
                                </ul>
                                <div class="sub-text-sm">* Our transaction fee of <a href="#" id="rate2">0.00</a> is removed from the unit amount transfered</div>
                            </div>
                            
                             @if(Auth::user()->setpin == 1)
                            <div class="nk-modal-form">
                                <label>Enter Transaction Pin</label>
                                <div class="form-group"><input type="password" name="pin" class="form-control form-control-password-big text-center" /></div>
                            </div>
                            @endif
                            <div class="nk-modal-action">
                                <button type="submit" class="btn btn-lg btn-mw btn-primary" >Confirm Process</button>
                                <div class="sub-text sub-text-alt mt-3 mb-4">The equivalent of your airtime to be converted will be credited to your deposit wallet balance once approved.</div>
                                <a href="#" class="link link-soft" data-dismiss="modal">Cancel and return</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
 </form>
@endsection
