@extends('layouts.user')
@section('title')
    @lang('Trade Gift Card')
@endsection
@section('breadcrumb')
    @lang('Sell Giftcard')
@endsection
@section('content')

<div class="nk-content-body">

            @include('user.partials.breadcrumb',['btitle'=>'Beneficiaries'])

    <div class="nk-block">
        <div class="card card-bordered card-stretch">
            <div class="card-inner-group">
                <div class="card-inner position-relative card-tools-toggle">
                    <div class="card-title-group">
                        <div class="card-tools">
                            <div class="form-inline flex-nowrap gx-3">
                                <div class="form-wrap">
                                 <h5>All Beneficiaries</h5>
                                </div>

                            </div><!-- .form-inline -->
                        </div><!-- .card-tools -->
                        <div class="card-tools me-n1">
                            <ul class="btn-toolbar gx-1">
                                <li>
                                    <a href="#" class="btn btn-icon search-toggle toggle-search" data-target="search"><em class="icon ni ni-search"></em></a>
                                </li><!-- li -->
                                <li class="btn-toolbar-sep"></li>
                                <li>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForm">Add New Account</button>

                                </li><!-- li -->

                            </ul><!-- .btn-toolbar -->
                        </div><!-- .card-tools -->
                    </div><!-- .card-title-group -->
                    <div class="card-search search-wrap" data-search="search">
                        <div class="card-body">
                            <div class="search-content">
                                <a href="#" class="search-back btn btn-icon toggle-search" data-target="search"><em class="icon ni ni-arrow-left"></em></a>
                                <input type="text" class="form-control border-transparent form-focus-none" placeholder="Search by Name">
                                <button class="search-submit btn btn-icon"><em class="icon ni ni-search"></em></button>
                            </div>
                        </div>
                    </div><!-- .card-search -->
                </div><!-- .card-inner -->
                <div class="card-inner p-0">
                    <div class="nk-tb-list nk-tb-ulist">
                        <div class="nk-tb-item nk-tb-head">

                            <div class="nk-tb-col"><span class="sub-text">#</span></div>
                            <div class="nk-tb-col"><span class="sub-text">Account</span></div>



                        </div><!-- .nk-tb-item -->
                        @foreach($beneficiaries as $k=>$beneficiary)

                        <div class="nk-tb-item">
                            <div class="nk-tb-col nk-tb-col-check">
                                <div class="custom-control custom-control-sm custom-checkbox notext">
                                    {{$k=$k+1}}
                                </div>
                            </div>
                            <div class="nk-tb-col">
                                <a href="html/user-details-regular.html">
                                    <div class="user-card">
                                        <div class="user-avatar bg-primary">
                                            <span>{{getAlias($beneficiary->beneficiary_name)}}</span>
                                        </div>
                                        <div class="user-info">
                                            <span class="tb-lead">{{$beneficiary->beneficiary_name}} <span class="dot dot-success d-md-none ms-1"></span></span>
                                            <span>{{$beneficiary->account_number}}</span>
                                            <span class="tb-amount">{{$beneficiary->bank_name}}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>


                            <div class="nk-tb-col nk-tb-col-tools">
                                <ul class="nk-tb-actions gx-1">
                                    <li class="nk-tb-action-hidden">
                                        <a href="#" class="btn btn-trigger btn-icon" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Transactions" data-bs-original-title="Transactions">
                                            <em class="icon ni ni-repeat"></em>
                                        </a>
                                    </li>
                                    <li class="nk-tb-action-hidden">
                                        <a href="#" class="btn btn-trigger btn-icon" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Delete Account" data-bs-original-title="Delete Account">
                                            <em class="icon ni ni-trash"></em>
                                        </a>
                                    </li>

                                    <li>
                                        <div class="drodown">
                                            <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <ul class="link-list-opt no-bdr">

                                                    <li><a href="#"><em class="icon ni ni-repeat"></em><span>Transaction</span></a></li>
                                                    <li><a href="#"><em class="icon ni ni-na"></em><span>Delete Account</span></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- .nk-tb-item -->

                        @endforeach


                    </div><!-- .nk-tb-list -->
                </div><!-- .card-inner -->
                <div class="card-inner">
                    <div class="nk-block-between-md g-3">
                        <div class="g">
                            @if ($beneficiaries->hasPages())
                                <div class="card-inner">
                                    {{$beneficiaries->links()}}
                                </div>
                            @endif
                        </div>

                    </div><!-- .nk-block-between -->
                </div><!-- .card-inner -->
            </div><!-- .card-inner-group -->
        </div><!-- .card -->
    </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">

                        </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>



        $('.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