@extends('adminlte::page')
@section('css')
<style>
    input[type="file"] {
        display: none;
    }

    .custom-file-upload {
        border: 1px solid #ccc;
        display: block;
        padding: 6px 12px;
        cursor: pointer;
    }

    .auto-search {
        z-index: 999999999999;
    }

    .account-list {
        margin-left: 33px;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid grey;
        border-radius: 3px;
    }

    .account-list li {
        padding: 3px 0px;
        cursor: pointer
    }

    .account-list li:hover {
        background-color: grey;
        color: #ffffff !important;
    }

    .account-list li:hover span {
        font-size: 15px;
        font-weight: bold;
        color: #ffffff
    }
</style>
@stop
@section('content')
@include('administrator.report-funds-transation.form-add-deposit')
<?php Fun::lang() ?>
<div class="title-add">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Manage Agency Wallet</a></li>
            <li><a href="#">List Agency</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h3>List Agency</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box-body table-responsive" id="r-agency-list">
        <table id="datatable_agency_funds" class="table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Profile</th>
                    <th>Account Code</th>
                    <th>Full Name</th>
                    <th>Gender </th>
                    <th>Phone</th>
                    <th>User</th>
                    <th>Balance</th>
                    <th>Created Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
<div class="overlay">
    <div id="loading-img"></div>
</div>
<div class="modal fade bs-modal-lg" id="view_info" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3 class="modal-title">Personal Infomation of Agency</h3>
            </div>
            <div class="modal-body">
                <div class="personal-info">
                    <div class="list">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="row">
                                    <div class="col-sm-12 col-xs-12">
                                        <p id="avatar" align="center"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="personal-info-detail">
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Full Name :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="full_name" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Email :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="email" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Phone Number :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="user_phone" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Gender :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="user_gender" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Date Of Birth :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="user_dob" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Card ID :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="user_cardid" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Reference :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="user_reference" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Address :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="address" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-12">
                                            <strong class="text-center">Bank Information</strong>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Bank Name :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p id="bank_name" class="user-info"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Account Name :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p style="text-transform: uppercase" class="user-info account_name"></p>
                                        </div>
                                    </div>
                                    <div class="list-info">
                                        <div class="col-sm-6 col-xs-6">
                                            <p>Account Number :</p>
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <p class="user-info account_number"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> Close</button>
            </div>
        </div>
    </div>
</div>
@endsection @section('js')
<script type="text/javascript">
    var defaultaction = '';
    $('#datatable_agency_funds').DataTable({
        ordering: false,
        "serverSide": false,
        "lengthMenu": [
            [20, 30, 50, 100, -1],
            [20, 30, 50, 100, "All"]
        ],
        ajax: "{{ route('report_funds_transation') }}",
        columns: [{
            data: 'DT_RowIndex'
        }, {
            data: 'profile'
        }, {
            data: 'user_code'
        }, {
            data: 'account_name'
        }, {
            data: 'user_gender'
        }, {
            data: 'user_phone'
        }, {
            data: 'agencyname'
        }, {
            data: 'balance'
        }, {
            data: 'created_at'
        }, {
            data: 'status'
        }, {
            data: 'action'
        }, ],
        "initComplete": function(settings, json) {
            $('.main-spinner').hide();
        }
    });
    $.fn.dataTable.ext.errMode = 'throw';
    $(document).ready(function() {
        $('.bank_list').on('change', function() {
            var id = $(this).find(':selected').val();
            var agency_id = $('#agency_id').val();
            var route = "{{route('get-agency-bank-acc',':id')}}";
            route = route.replace(':id', id);
            $.ajax({
                type: "GET",
                dataType: "JSON",
                url: route,
                data: {
                    _token: "{{csrf_token()}}",
                    "id": id,
                    "agency_id": agency_id
                },
                success: function(response) {
                    data = response['data'];
                    $('#accountbank_name').val(data.account_name);
                    $('#bank_account').val(data.account_number);
                },
                error: function(request, status, error) {
                    $('#bank_account').val("");
                    $('#accountbank_name').val("");
                }
            });
        });
        $('#amount_deposit').on('keyup', function() {
            var agency_id = $('#agency_id').val();
            var amount = $(this).val();
            $.ajax({
                type: "GET",
                dataType: "JSON",
                url: "{{route('get_agency_fund_balance')}}",
                data: {
                    _token: "{{csrf_token()}}",
                    "agency_id": agency_id,
                    "amount": amount
                },
                success: function(data) {
                    if ((parseFloat(data.balance) < parseFloat(amount)) && (defaultaction == 'withdraw' || defaultaction == 'send')) {
                        $('#span-error').show();
                        $('#span-error').html('Your fund balance not enough please add fund!');
                        $('.btn-withdraw').attr('disabled', true);
                    } else {
                        $('#span-error').hide();
                        $('.btn-withdraw').attr('disabled', false);
                    }
                },
                error: function(err) {
                    console.log(err);
                }
            });
        });
    });
    $(document).on('click', '.btn-allow-block-item', function() {
        var id = $(this).data('id');
        var route = "{{route('users-allowance.block-item',':id')}}";
        route = route.replace(':id', id);
        $('.btn-submit-allowance').attr('href', route);
        $('#block-permission').modal('show');
    });
    $(document).on('click', '.viewPopLink', function() {
        var id = $(this).data('id');
        var status = $(this).data('status');

        $("#status").val(status);
        var url = "realty/super-admin/agencies-list";
        $('#form_update').attr('action', url + '/' + id);
        $('#myModal').modal('show');

    });

    $(document).on('click', '.view_info', function() {
        var id = $(this).data('id');
        $(".main-spinner").show();
        var part = "{{asset('assets/images/resize')}}";
        $.ajax({
            type: 'GET',
            url: 'realty/super-admin/agencies-view/' + id,
            dataType: 'json',
            data: {
                'id': id
            },
            success: function(data) {
                $.each(data, function(index, element) {

                    $('#full_name').empty();
                    $('#email').empty();
                    $('#user_phone').empty();
                    $('#address').empty();

                    $('#user_reference').empty();
                    $('#bank_name').empty();
                    $('#account_name').empty();
                    $('#account_number').empty();
                    $('#avatar').empty();
                    $('#user_cardid').empty();
                    $('#user_gender').empty();
                    $('#user_dob').empty();

                    $('#full_name').append(element.full_name);
                    $('#email').append(element.email);
                    $('#user_phone').append(element.user_phone);
                    $('#address').append(element.address);
                    $('#user_reference').append(element.user_reference);
                    $('#bank_name').append(element.bank_name);
                    $('#account_name').append(element.account_name);
                    $('#account_number').append(element.account_number);
                    $('#user_gender').append(element.user_gender);
                    $('#user_dob').append(element.user_dob);
                    $('#user_cardid').append(element.user_cardid);
                    $('#avatar').append("<img src='" + part + "/" + element.avatar + "'>");

                });

                $('#view_info').modal('show');
                $(".main-spinner").hide();
            },
        });
    });

    function add_deposit(obj) {
        defaultaction = 'deposit';
        var action = "{{route('add-deposit-manually-to-agency')}}";
        var route = "{{route('get-agency-account-fund-info',':id')}}";
        route = route.replace(':id', obj);
        $('.withdrawal-info').css('display', 'none');
        $('.sendfund-info').css('display', 'none');
        $('.reference').css('display','block');
        $.ajax({
            type: "GET",
            dataType: "JSON",
            url: route,
            data: {
                '_token': '{{csrf_token()}}'
            },
            success: function(data) {
                if (data.length == 0) {
                    alert("Agency Does not Have Fund Account, Please Register.....!");
                } else {
                    var account = data['acc_info'];
                    var banklist = data['bank_list'];
                    $('#form-action').attr('action', action);
                    $('#exampleModalLabel').text('Deposit Fund');
                    $('#account_name').val(account.account_name);
                    $('#account_id').val(account.id);
                    $('#account_number').val(account.account_number);
                    $('#bank_id').empty().append('<option value="">Please Select</option>');
                    $.each(banklist, function(i, b) {
                        $('#bank_id').append('<option value="' + b.id + '">' + b.name + '</option>');
                    });
                    $('#amount_deposit').focus();
                    $('#deposit-modal').modal('show');
                }
            }
        });
    }

    function withdraw_fund(obj) {
        defaultaction = 'withdraw';
        var action = "{{route('withdraw-fund-manually-from-agency')}}";
        var route = "{{route('get-agency-account-fund-info',':id')}}";
        route = route.replace(':id', obj);
        $('.reference').css('display', 'none');
        $('#receiptient').css('display', 'none');
        $('.withdrawal-info').css('display', 'block');
        $('.sendfund-info').css('display', 'none');
        $('#agency_id').val(obj);
        $.ajax({
            type: "GET",
            dataType: "JSON",
            url: route,
            data: {
                '_token': '{{csrf_token()}}'
            },
            success: function(data) {
                $('#bank_id').empty();
                if (data.length == 0) {
                    alert("Agency Does not Have Fund Account, Please Register.....!");
                } else {
                    var val = data['acc_info'];
                    $('#account_name').val(val.account_name);
                    $('#account_id').val(val.id);
                    $('#account_number').val(val.account_number);
                    $('#bank_id').append('<option value="">Please Select</option>');
                    $.each(data['bank_list'], function(i, val) {
                        $('#bank_id').append('<option value="' + val.id + '">' + val.name + '</option>');
                    });
                    $('#form-action').attr('action', action);
                    $('#exampleModalLabel').text('Withdraw Fund');
                    $('#amount_deposit').focus();
                    $('#deposit-modal').modal('show');
                }
            }
        });
    }

    function send_fund(id) {
        $('#agency_id').val(id);
        defaultaction = 'send';
        $('.sendfund-info').css('display', 'block');
        $('.withdrawal-info').css('display', 'none');
        $('.reference').css('display','none');
        $('#exampleModalLabel').text('Send Fund To Any Agency');
        var route = "{{route('get-agency-account-fund-info',':id')}}";
        var action = "{{route('send-fund-to-any-agency')}}";
        route = route.replace(':id', id);
        $.ajax({
            type: "GET",
            url: route,
            data: {
                _token: "{{csrf_token()}}"
            },
            success: function(response) {
                $('#form-action').attr('action', action);
                var account = response['acc_info'];
                $('#amount_deposit').focus();
                $('#account_id').val(account.id);
                $('#account_name').val(account.account_name);
                $('#account_number').val(account.account_number);
                $('#deposit-modal').modal('show');
            }
        });
    }

    function previewFile() {
        const preview = document.querySelector('img');
        const file = document.querySelector('input[type=file]').files[0];
        const reader = new FileReader();

        reader.addEventListener("load", function() {
            preview.src = reader.result;
        }, false);

        if (file) {
            reader.readAsDataURL(file);
        }
    }
    $(document).on('keyup', '#toaccount_number', function() {
        var route = "{{route('query-similar-account-number')}}";
        var ul = "<ul style='min-width:200px;max-height:200px;overflow:auto' class='account-list'>";
        if ($(this).val().length == 0) {
            $('#auto-search').hide().empty();
        } else if ($(this).val().length >= 10) {
            var account_name = $(this).val();
            $.ajax({
                type: "POST",
                url: route,
                dataType: "JSON",
                data: {
                    '_token': "{{csrf_token()}}",
                    value: account_name
                },
                success: function(data) {
                    $.each(data, function(i, v) {
                        ul += `<li><span class="result-accountNumber" data-id="${v.account_number}">${v.account_number} | ${v.account_name}</span></li>`;
                    });
                    ul += `</ul>`;
                    $('#auto-search').empty().append(ul).show();
                }
            });
        }
    });

    function submitaction() {
        var type = defaultaction;
        var accountname = $('#account_name').val();
        var accountnumber = $('#account_number').val();
        var bank_id = $('#bank_id').find(':selected').val();
        var bank_account = $('#bank_account').val();
        var to_number = $('#to_account_number').val();
        var to_name = $('#to_account_name').val();
        var amount = $('#amount_deposit').val();
        var remark = $('#remark').val();
        var account_id = $('#account_id').val();
        if (type == 'deposit') {
            var validate = validateelement([accountname, accountnumber, amount]);
            if (validate == true) {
                $('#deposit-modal').modal('hide');
                $('.overlay').show();
                $.ajax({
                    type: "POST",
                    url: "{{route('add-deposit-manually-to-agency')}}",
                    data: {
                        _token: "{{csrf_token()}}",
                        accountid: account_id,
                        accountname: accountname,
                        accountnumber: accountnumber,
                        amount: amount,
                        remark: remark
                    },
                    success: function(response) {
                        $('.overlay').hide();
                        $('#datatable_agency_funds').DataTable().ajax.reload();
                        $.alert(response.msg);
                    },
                    error: function(request, error) {
                        $alert({
                            title:"Error",
                            content:error
                        });
                    }
                });
            }
        } else if (type == 'withdraw') {
            var validate = validateelement([accountname, accountnumber, amount, bank_id]);
            if (validate == true) {
                $('.overlay').show();
                $.ajax({
                    type: "POST",
                    url: "{{route('withdraw-fund-manually-from-agency')}}",
                    data: {
                        _token: "{{csrf_token()}}",
                        accountid: account_id,
                        accountname: accountname,
                        accountnumber: accountnumber,
                        amount: amount,
                        bank_id: bank_id,
                        remark: remark
                    },
                    success: function(response) {
                        $('.overlay').hide();
                        $('#deposit-modal').modal('hide');
                        $.alert(response.msg);
                    },
                    error: function(request, error) {
                        $alert({
                            title:"Error",
                            content:error
                        });
                    }
                });
            }
        } else if (type == 'send') {
            var validate = validateelement([accountname, accountnumber, amount, to_number, to_name]);
            if (validate == true) {
                $('.overlay').show();
                $.ajax({
                    type: "POST",
                    url: "{{route('send-fund-to-any-agency')}}",
                    data: {
                        _token: "{{csrf_token()}}",
                        accountid: account_id,
                        accountname: accountname,
                        accountnumber: accountnumber,
                        amount: amount,
                        bank_id: bank_id,
                        remark: remark,
                        to_number: to_number,
                        to_name: to_name
                    },
                    success: function(response) {
                        $('.overlay').hide();
                        $('#deposit-modal').modal('hide');
                        $.alert(response.msg);
                    },
                    error: function(request, error) {
                        $alert({
                            title:"Error",
                            content:error
                        });
                    }
                });
            }
        }
    }
    $(document).on('click', 'body', function() {
        $('#auto-search').hide().empty();
    });
    $(document).on('keyup', '#to_account_number', function(e) {
        e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1 ').trim();
        var toaccount = $(this).val();
        var route = "{{route('find-account-fund-by-number',':id')}}";
        route = route.replace(':id', toaccount);
        $.ajax({
            type: "GET",
            url: route,
            data: {
                _token: "{{csrf_token()}}"
            },
            success: function(response) {
                var account = response['data'];
                if (account) {
                    $('#to_account_name').val(account.account_name);
                }
            }
        });

    });

    function validateelement(arrayElement) {
        var check = true;
        $.each(arrayElement, function(i, element) {
            if (!element || element == '') {
                check = false;
            }
        });
        if (check == false) {
            $.alert({
                title: "Error",
                content: "Please Fill out required fills"
            });
            return false;
        } else {
            return true;
        }
    }
</script>
@endsection