@extends('layouts.user')

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

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

@section('content')
    @include('user.partials.breadcrumb',['btitle'=>'Buy Data'])
<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 Data 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">Network</div>

                            <select class="form-select select_network shadow-none" name="network">
                                <option value="" selected>@lang('Select Network')</option>

                                <option value="MTN" >
                                    MTN
                                </option>
                                <option value="GLO" >
                                    GLO
                                </option>
                                <option value="AIRTEL" >
                                    AIRTEL
                                </option>
                                <option value="9MOBILE" >
                                    ETISALAT (9MOBILE)
                                </option>


                            </select>
                        </div>

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

                        <div class="col-md-6 mt-3">
                            <div class="form-label">Data Bundle</div>
                            <select class="form-select  shadow-none" id="select_bundle" name="data_bundle" disabled>
                                <option value="" selected>@lang('Select Data Bundle')</option>




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

                            <div class="form-label">@lang('Phone No.')</div>
                            <div class="input-group">

                                <input type="number" 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-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 Data Bundle 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';

       $('.select_network').change(function(){

           var selectedNetwork = $(this).find('option:selected').val();

           var selectElement = $("#select_bundle"); // Replace "mySelect" with the actual ID or selector of your select element

           let cfsToken = '{{ csrf_token() }}';
           //console.log(selectedCrypto.val());
           selectElement.prop("disabled", true);
           selectElement.html('<option value="" selected>Select Data Plan</option>'
           );
           $.ajax({
               url:"{{route('user.get-databundle')}}",
               type:'POST',
               data: {network: selectedNetwork,   _token: cfsToken},

               success: function(response){


                   var plans = JSON.parse(response.data);  // Parse the JSON string
                   console.log(plans);

                   $.each(plans, function(index, option) {
                       var price = option.price;
                       var optionElement = $("<option>")
                           .val(option.datacode)
                           .text(option.pname + " - ₦" + price.toLocaleString());
                       selectElement.append(optionElement);
                   });
                   selectElement.prop("disabled", false);

               },
               error: function(xhr, status, error){

               }
           });

       })

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

            var phoneNumber = $(".phone_number").val();

            var selectedNetwork = $('.select_network option:selected')
            var selectedBundle = $('#select_bundle option:selected')
            var selectedWallet = $('.wallet option:selected')

            if($('.phone_number').val() == ''){
                showAlert('@lang('Please provide the phone number.')','error')
                return false;
            }

            if(selectedNetwork.val() == ''){
                showAlert('@lang('Please select the network.')','error')
                return false;
            }
            if(selectedWallet.val() == ''){
                showAlert('@lang('Please select Wallet.')','error')
                return false;
            }
            if(selectedBundle.val() == ''){
                showAlert('@lang('Please select the Data Bundle.')','error')
                return false;
            }
            //console.log(amount.toLocaleString('en-US'));
            $(".withdraw-amount").html('Data Plan: ' +selectedBundle.text());
            $(".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 selectedNetwork = $('.select_network option:selected')
           var selectedWallet = $('.wallet option:selected')
           var selectedbundle = $('#select_bundle option:selected')
           var password = $(".withdraw-password").val();


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

           if(selectedbundle.val() == ''){
               showAlert('@lang('Please select the Data Bundle.')','error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if(selectedWallet.val() == ''){
               showAlert('@lang('Please select Wallet.')','error')
               return false;
           }
           if(selectedNetwork.val() == ''){
               showAlert('@lang('Please select the Network.')','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.data.confirm')}}',{phone_number:phoneNumber,data_plan: selectedbundle.val(),   _token: cfsToken, password: password, network: selectedNetwork.val(), 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.reload(true);
               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