@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('/elite/bower_components/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('elite/tables/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('banking.bank_transfer') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('banking.home') }}</a></li>
            <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('banking.finance_home') }}</a></li>
            <li class="active"><i class="fa fa-bank"></i> {{ __('banking.new_bank_transfer') }}</li>
        </ol>
    </div>
</div>
@php
$balance = 0;
@endphp

@include('flash::message')
<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-body">
                {{ Form::open(['route' => 'banking.process_transfer', 'data-toggle' => 'validator', 'id'=>'bank_transfer_form']) }}

                <h2 class="text-center"><strong>{{ __('banking.transfer_funds') }}</strong></h2>

                <div class="row">
                    <div class="col-md-4">

                        <div class="form-group">
                            <label>{{ __('banking.transfer_from') }}</label>
                            <select class="form-control compulsory required" name="transfer_from" id="transfer_from" required>
                                <option value="">{{ __('banking.select') }}</option>
                                @foreach($banks as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label>{{ __('banking.transfer_to') }}</label>
                            <select class="form-control compulsory required" name="transfer_to" id="transfer_to" required>
                                <option value="">{{ __('banking.select') }}</option>
                                @foreach($banks as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label>{{ __('banking.date') }} :</label>
                            <div class="input-group">
                                <input class="center form-control" id="transfer_date" readonly style="padding: 2px;border: 1px solid #ddd;" name="transfer_date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>{{ __('banking.account_balance_from_account') }}</label>
                            <div class="input-group">
                                <input class="center form-control" id="from_account_balance" type="number" value="0" readonly style="padding: 2px;border: 1px solid #ddd;" name="from_account_balance">
                                <span class="input-group-addon">{{ __('banking.ugx') }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>{{ __('banking.account_balance_to_account') }}</label>
                            <div class="input-group">
                                <input class="center form-control" id="to_account_balance" value="0" type="number" readonly style="padding: 2px;border: 1px solid #ddd;" name="to_account_balance">
                                <span class="input-group-addon">{{ __('banking.ugx') }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>{{ __('banking.amount') }} :</label>
                            <div class="input-group">
                                <input class="center form-control compulsory" required id="transfer_amount" type="number" style="padding: 2px;border: 1px solid #ddd;" name="transfer_amount">
                                <span class="input-group-addon">{{ __('banking.ugx') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>{{ __('banking.memo') }} :</label>
                            <div class="input-group">
                                {{ Form::textarea('transfer_memo', '', ['class'=>'form-control compulsory required', 'id'=>'transfer_memo']) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-10"></div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success btn-block btn-rounded float-right" style="display: none;" id="confirm_deposit">{{ __('banking.transfer') }}</button>
                    </div>
                </div>

                {{ Form::close() }}

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Date Picker Plugin JavaScript -->
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

<script>
    $('#dates').change(function(e) {

        if ($(this).val() === "custom_date") {

            $("#eDate").hide();
            $("#sDate").show();

        } else if ($(this).val() === "custom_date_range") {

            $("#sDate").show();
            $("#eDate").show();
        } else {

            $("#eDate").hide();
            $("#sDate").hide();
        }
    });



    function bank_deposit(cashier_income_id, amount) {
        $('#deposit_amount').val(amount);
        $('#cashier_income_id').val(cashier_income_id);
        $('#banking_modal').modal('show');
    }

    $('#transfer_date').on('change', function() {

        var transfer_to = $('#transfer_to').val();
        var transfer_from = $('#transfer_from').val();
        var transfer_date = this.value;
        console.log(transfer_date)

        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();
        var today_formatted = dd + '-' + mm + '-' + yyyy;

        $.ajax({
            method: 'POST',
            url: '/banking/get_latest_bank_balance',
            data: {
                'to': transfer_to,
                'from': transfer_from,
                'date': today_formatted, // transfer_date,
            },

            success: function(response) {
                $('#to_account_balance').val(parseInt(response[0]));
                $('#from_account_balance').val(parseInt(response[1]));
            },
            error: function(error) {
                console.log(error);
            }
        });
    });

    // $('#transfer_from').on('change', function () {
    //     var account = this.value;
    //     if(account != ""){
    //         $.ajax({
    //             method: 'POST',
    //             url: '/banking/get_current_account_balance',
    //             data: {'bank_id' : account},
    //
    //             success: function(response){ console.log(response);
    //                 var acc_bal = response['account_balance'];
    //                 $('#from_account_balance').val(acc_bal);
    //             },
    //             error: function (error) {
    //                 console.log(error);
    //             }
    //         });
    //     }else{
    //         alert('Please an account that you wish to transfer funds from..!');
    //         $('#from_account_balance').val(0);
    //     }
    // });
    //
    // $('#transfer_to').on('change', function () {
    //     var account = this.value;
    //     if(account != ""){
    //         $.ajax({
    //             method: 'POST',
    //             url: '/banking/get_current_account_balance',
    //             data: {'bank_id' : account},
    //
    //             success: function(response){ console.log(response)
    //                 var acc_bal = response['account_balance'];
    //                 $('#to_account_balance').val(acc_bal);
    //             },
    //             error: function (error) {
    //                 console.log(error);
    //             }
    //         });
    //     }else{
    //         alert('Please an account that you wish to transfer funds To..!');
    //         $('#from_account_balance').val(0);
    //     }
    // });

    $('#transfer_amount').on('change', function() {
        var amount = parseInt(this.value);
        var from_account_balance = $('#from_account_balance').val();
        var from_account = $('#transfer_from').val();
        var to_account = $('#transfer_to').val();

        if (from_account != "" && to_account != "") {
            if (amount <= from_account_balance) {
                $.ajax({
                    method: 'POST',
                    url: '/banking/transfer/compute_transfer',
                    data: {
                        'amount': amount,
                        'from_account': from_account,
                        'to_account': to_account,
                    },
                    success: function(response) {
                        // $('#to_account_balance').val(parseInt(response.new_to_acc_bal));
                        // $('#from_account_balance').val(parseInt(response.new_from_acc_bal));
                        $('#confirm_deposit').show();
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            } else {
                var isConfirmed = confirm('You are trying to transfer funds that are more than the balance on the account');
                if (isConfirmed == true) {
                    $('#confirm_deposit').show();
                } else {
                    $('#transfer_amount').val(0);
                    $('#confirm_deposit').hide();
                }
            }
        } else {
            alert('Please be sure to the select the accounts that you with to transfer to and from.');
            $('#transfer_amount').val(0);
            $('#confirm_deposit').hide();
        }
    });

    $('#confirm_deposit').click(function() {
        $('#bank_transfer_form').submit();
        $(this).attr("disabled", true);
    });
</script>
<script src="{{ asset('elite/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/jszip.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/pdfmake.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/vfs_fonts.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('elite/tables/js/buttons.print.min.js') }}"></script>
<script type="text/javascript">
    jQuery('#transfer_date').datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'dd-mm-yyyy'
    });
</script>

<script>
    $('.table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "aoColumnDefs": [{
            "aTargets": [2, 3],
            "defaultContent": "",
        }]
    });
</script>

<script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

<script>
    $('#staff_member_cashier').select2({
        placeholder: "-- select --"
    });
    $('#staff_member_accountant').select2({
        placeholder: "-- select --"
    });
</script>
@endpush