@extends('layouts.user')

@section('title')
    @lang('Withdraw Money')
@endsection

@section('breadcrumb')
   @lang('Withdraw Money')
@endsection

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

                <form action="" id="form" method="post">
                  @csrf
                    <div class="row">
                        <div class="col-md-6 mt-3">
                            <div class="form-label">Withdraw 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>
                                <option value="registration" data-code="{{$wallets->registration_bonus}}">
                                   Registration Bonus: {{toMoney($wallets->registration_bonus)}}
                                </option>

                            </select>
                        </div>
                        <div class="col-md-6 mt-3">
                            <div class="form-label">@lang('Select Beneficiary')</div>
                            <select class="form-select account shadow-none" name="beneficiary_id">
                                <option value="" selected>@lang('Select')</option>
                                @foreach ($beneficiary as $ben)
                                    <option value="{{$ben->id}}" data-code="{{$ben->beneficiary_name}} - Account: {{$ben->account_number}}
                                    ({{$ben->bank_name}})" >{{$ben->beneficiary_name}} -- Account: {{$ben->account_number}}
                                    ({{$ben->bank_name}})
                                    </option>
                                @endforeach
                            </select>

                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalForm">Add Beneficiary</button>


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


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



                        <div class="col-md-12 my-3 info d-none">
                            <ul class="list-group mt-2">
                                <li class="list-group-item d-flex justify-content-between font-weight-bold">@lang('Withdraw Amount : ')<span class="exAmount"></span></li>

                                <li class="list-group-item d-flex justify-content-between font-weight-bold">@lang('Total Charge : ')<span class="exCharge"></span></li>

                                <li class="list-group-item d-flex justify-content-between font-weight-bold">@lang('Total Amount : ')<span class="total_amount"></span></li>
                            </ul>

                            <div class="mt-4 text-center">
                                <h5 class="text-danger">
                                    @lang('Withdraw instruction')
                                </h5>
                                <p class="instruction mt-2"></p>
                            </div>

                            <div class="mt-3 text-center">
                                <h5 class="text-danger">
                                    @lang('Provide your withdraw account details.')
                                </h5>

                                <textarea name="user_data" id="" class="form-control shadow-none" cols="30" rows="10" required></textarea>
                            </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">
                                <form action="{{route('user.beneficiary.save')}}" class="form-validate is-alter" novalidate="novalidate" method="post">
                                    @csrf
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Confirm Withdraw: </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>

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

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


</div>


    <div class="modal fade" id="modalForm" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" role="document">
            <form action="{{route('user.beneficiary.save')}}" class="form-validate is-alter" novalidate="novalidate" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Account</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="form-group">
                            <label class="form-label" for="account_number">Account Number</label>
                            <div class="form-control-wrap">
                                <input type="text" class="form-control" id="account_number" name="account_number" required="" placeholder="Bank Account">
                                <input type="hidden" class="form-control" id="source" name="source" value="withdraw">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="full-name">Bank</label>
                            <select class="form-select bank shadow-none" name="bank">
                                <option value="" selected>Select Bank</option>
                                @foreach (getAllBank() as $bank)
                                    <option value="{{$bank->bank_code}}"  data-code="{{$bank->bank_code}}">{{$bank->bank_name}}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="form-group">
                            <label class="form-label" for="phone-no">Account Name</label>
                            <div class="form-control-wrap">
                                <input type="text" class="form-control" id="account_name" name="account_name" readonly required>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer bg-light">
                        <div class="form-group">
                            <button type="submit" class="btn btn-lg btn-primary savebtn" disabled>Save Account</button>
                        </div>
                    </div>
                </div>

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

@endsection

@push('script')
   <script>


       'use strict';


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

            var selectedBeneficiary = $('.account option:selected')
            var amount = parseFloat($(".amount").val());

            if($('#amount').val() == ''){
                showAlert('@lang('Please provide the amount first.')','error')
                return false;
            }
            if(selectedBeneficiary.val() == ''){
                showAlert('@lang('Please select the Beneficiary first.')','error')
                return false;
            }
            //console.log(amount.toLocaleString('en-US'));
            $(".withdraw-amount").html('Amount: ₦' +amount.toLocaleString('en-US'));
            $(".withdraw-info").html(selectedBeneficiary.data('code'))
           // 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 selectedBeneficiary = $('.account option:selected')
           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(selectedBeneficiary.val() == ''){
               showAlert('@lang('Please select the Beneficiary first.')','error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if(selectedWallet.val() == ''){
               showAlert('@lang('Please select the Wallet first.')','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.withdraw.confirm')}}',{beneficiary:selectedBeneficiary.val(),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 = "{{route('user.dashboard')}}";

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


   </script>
   <script>



       $('.bank').on('change',function () {
           $("#account_name").val("");
           if($('#account_number').val() == ''){
               toast('error','Please provide account number first')
               $(this).val("");
               return false;
           }

           let cfsToken = '{{ csrf_token() }}';
           $.post('{{route('user.bank.resolveaccount')}}',{bank:$('.bank option:selected').data('code'),account_number: $('#account_number').val(),   _token: cfsToken},function (res) {
               if(res == 'empty'){
                   toast('error','Invalid Account Number Please check your Input')
                   $(this).val("");
                   return false;
               }

               $("#account_name").val(res);
               $('.savebtn').prop('disabled', false);


           })
       })


       $('.confirm').on('click',function () {
           var selectedMethod = $('.method option:selected')
           var selectedWallet = $('.wallet option:selected')


           if($('#amount').val() == ''){
               toast('error','@lang('Please provide the amount first.')')
               return false;
           }
           if(selectedWallet.val() == ''){
               toast('error','@lang('Please select the wallet first.')')
               return false;
           }
           $('#modal-success').modal('show')
       })
   </script>
@endpush