@extends('layouts.user')

@section('title')
    @lang('Pay For Electricity')
@endsection

@section('breadcrumb')
   @lang('Pay for Electricity')
@endsection

@section('content')
    @include('user.partials.breadcrumb',['btitle'=>'Pay Electricity Bill'])
<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">Pay Electricity Bill 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">Electricity Provider</div>

                            <select class="form-select select_network shadow-none" name="network">
                                <option value="" selected>@lang('Select Electricity Provider')</option>
@foreach($providers as $pro)
                                <option value="{{$pro['disconame']}}" >
                                    {{$pro['value']}}
                                </option>
                                @endforeach



                            </select>
                        </div>

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


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

                            <div class="form-label">Meter No</div>
                            <div class="input-group">

                                <input type="text" name="meter_no"  class="form-control form--control bg--section meter_no" placeholder="Meter No" required value="{{old('meter_no')}}">
                            </div>

                        </div>

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

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

                                <input type="number" name="amount"  class="form-control form--control bg--section amount" placeholder="Amount" required value="{{old('amount')}}">
                            </div>

                        </div>





                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-label">&nbsp;</div>
                            <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">Confirm</button>

                        </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 Electricity Bill Payment: </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="icuDetails"></h5>
                                                <h5 class="withdraw-amount"></h5>
                                                <h5>Pay to Meter No: </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-btnw" 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 loadingBtn = $('#loading-btn');
            var saveBtn = $(this);

            var meterNo = $(".meter_no").val();
            var amount = $(".amount").val();

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

            if(meterNo == ''){
                showAlert('@lang('Please provide the Meter No.')','error')
                return false;
            }

            if(selectedNetwork.val() == ''){
                showAlert('@lang('Please select Electricity Provider.')','error')
                return false;
            }
            if(selectedWallet.val() == ''){
                showAlert('@lang('Please select Wallet.')','error')
                return false;
            }
            if(amount == ''){
                showAlert('Please Specify Amount','error')
                return false;
            }

            loadingBtn.show();
            saveBtn.hide();
            let cfsToken = '{{ csrf_token() }}';
            //console.log(amount.toLocaleString('en-US'));
            //verify ICU NO
           // console.log("stated");
            $.post('{{route('user.electricity.verify-meterno')}}',{meter_no:meterNo,  _token: cfsToken, provider: selectedNetwork.val()},function (res) {
                //showAlert(res.message,'success');
/*if(res.custname==undefined){
    showAlert('Invalid IUC Please Try again','error');
    loadingBtn.hide();
    saveBtn.show();
    return;
}*/
                // $("#account_name").val(res);
                $('.savebtn').prop('disabled', false);
                loadingBtn.hide();
                saveBtn.show();

                $(".withdraw-amount").html('Pay Electricity Bill of '+amount);
                $(".icuDetails").html('Meter No: '+meterNo+'<br/>Name: '+res.name+'<br/>VendType:'+res.vendtype+'<br/>Address:'+res.address);
                $(".withdraw-info").html(meterNo)
                // console.log(selectedBeneficiary.data('code'));
                $('#modal-confirm').modal('show')

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

            //fun();
        })

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

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

         loadingBtn.show();
           saveBtn.hide();
           var amount = $(".amount").val();
           var meter_no = $(".meter_no").val();
           var provider = $('.select_network option:selected')
           var selectedWallet = $('.wallet option:selected')
           var password = $(".withdraw-password").val();


           if($('.amount').val() == ''){
               showAlert('@lang('Please provide Amount.')', 'error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
   if($('.meter_no').val() == ''){
               showAlert('@lang('Please provide Meter No.')', '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 Electricity Provider.')','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.electricity.confirm')}}',{meter_no:meter_no,   _token: cfsToken, password: password, provider: selectedNetwork.val(),amount:amount, 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