@extends('layouts.user')

@section('title')
    @lang('Buy Airtime')
@endsection

@section('breadcrumb')
   @lang('Buy Airtime')
@endsection

@section('content')
    @include('user.partials.breadcrumb',['btitle'=>'Buy Airtime'])
<div class="container-xl">
    <div class="row row-deck row-cards mb-5">
        <div class="col-12">
            <div class="card">
            <div class="card-body">


                  @csrf
                    <div class="row">
                        <div class="col-md-6 mt-3">
                            <div class="form-label">Buy Airtime From</div>
                            <select class="form-select wallet shadow-none" name="wallet_id">
                                <option value="" selected>@lang('Select Wallet')</option>

                                <option value="balance" data-code="{{$wallets->balance}}">
                                  MainBalance:  {{toMoney($wallets->balance)}}
                                </option>
                                <option value="bonus" data-code="{{$wallets->refer_bonus_balance}}">
                                   Referrer Bonus Balance: {{toMoney($wallets->refer_bonus_balance)}}
                                </option>

                            </select>
                        </div>
                        <div class="col-md-6 mt-3">

                            <div class="form-label">@lang('Phone No.')</div>
                            <input type="hidden" name="dial_code">
                            <div class="input-group">
                                <span class="input-group-text d_code">+234</span>
                                <input type="text" name="phone_number"  class="form-control form--control bg--section phone_number" placeholder="@lang('Phone No.')" required value="{{old('phone')}}">
                            </div>

                        </div>


                    </div>
                    <div class="row">

                        <div class="col-md-6 mt-3">
                            <div class="form-label ">@lang('Amount : ')  </div>
                            <input type="text" name="amount" id="amount" placeholder="1000" class="form-control shadow-none mb-2 amount"  required>
                            <small class="text-danger charge"></small>
                        </div>





                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-label">&nbsp;</div>
                            <a href="#" class="btn btn-primary w-100 confirm">
                                @lang('Confirm')
                            </a>
                        </div>
                    </div>



                        <div class="modal fade" id="modal-confirm" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog" role="document">

                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Confirm Airtime Purchase: </h5>
                                            <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                                                <em class="icon ni ni-cross"></em>
                                            </a>
                                        </div>
                                        <div class="modal-body">
                                            <div class="alert alert-primary alert-icon">
                                                <em class="icon ni ni-arrow-from-right"></em>
                                                <h5 class="withdraw-amount"></h5>
                                                <h5>To: </h5>
                                                <h5 class="withdraw-info"></h5>
                                            </div>

                                            <div class="form-group">
                                                <label class="form-label" for="account_number">Enter Your Password</label>
                                                <div class="form-control-wrap">
                                                    <input type="password" class="form-control withdraw-password" id="password" name="password" required="" placeholder="Password">
                                                </div>
                                            </div>




                                        </div>
                                        <div class="modal-footer bg-light">
                                            <div class="form-group">
                                                <button class="btn btn-primary" type="button" id="loading-btn" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>

                                                <button type="submit" class="btn btn-lg btn-primary confirm-withdraw">Confirm</button>

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


                            </div>
                        </div>


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


</div>

@endsection

@push('script')
   <script>


       'use strict';


        $('.confirm').on('click',function () {

            var phoneNumber = $(".phone_number").val();
            var amount = parseFloat($(".amount").val());
            var selectedWallet = $('.wallet option:selected')

            if($('.phone_number').val() == ''){
                showAlert('@lang('Please provide the phone number.')','error')
                return false;
            }
            if($('#amount').val() == ''){
                showAlert('@lang('Please provide the amount first.')','error')
                return false;
            }
            if(selectedWallet.val() == ''){
                showAlert('@lang('Please select the Wallet.')','error')
                return false;
            }
            //console.log(amount.toLocaleString('en-US'));
            $(".withdraw-amount").html('Amount: ₦' +amount.toLocaleString('en-US'));
            $(".withdraw-info").html(phoneNumber)
           // console.log(selectedBeneficiary.data('code'));
            $('#modal-confirm').modal('show')
            //fun();
        })

       $('.confirm-withdraw').on('click', function(){

          var loadingBtn = $('#loading-btn');
          var saveBtn = $(this);

         loadingBtn.show();
           saveBtn.hide();
           var phoneNumber = $(".phone_number").val();
           var selectedWallet = $('.wallet option:selected')
           var amount = parseFloat($(".amount").val());
           var password = $(".withdraw-password").val();

           if($('#amount').val() == ''){
               showAlert('@lang('Please provide the amount first.')', 'error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if($('.phone_number').val() == ''){
               showAlert('@lang('Please provide the Phone number.')', 'error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }

           if(selectedWallet.val() == ''){
               showAlert('@lang('Please select the Wallet.')','error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if(password==''){
               showAlert('@lang('Please input your password')','error');
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           let cfsToken = '{{ csrf_token() }}';

           $.post('{{route('user.airtime.confirm')}}',{phone_number:phoneNumber,amount: amount,   _token: cfsToken, password: password, wallet: selectedWallet.val()},function (res) {
               showAlert(res.message,'success');

              // $("#account_name").val(res);
               $('.savebtn').prop('disabled', false);
               loadingBtn.hide();
               saveBtn.show();
               $('#modal-confirm').modal('hide');
              // location.href = "/user/";
               location.href = "{{route('user.dashboard')}}";

           })
               .fail(function(xhr, status, error) {
                   // request failed
                //   console.log('iget here');
                   loadingBtn.hide();
                   saveBtn.show();
                  showAlert(xhr.responseJSON.message,'error');
               });
       })


   </script>
@endpush