@extends('layouts.app')

@section('content')
    <section id="dom">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title-wrap bar-teal">
                            <h4 class="card-title">Bank Account reconciliation</h4>
                            <!-- <p class="card-text">Here you can see the list of existing Bank Accounts.</p> -->
                        </div>
                        <!-- <a class="float-right" href="{{ route('paracha_accounts.create') }}">
                                <button type="button" class="btn btn-success mr-1">
                                    <i class="icon-plus"></i> Create
                                </button>
                            </a> -->
                    </div>
                    <div class="card-body collapse show">
                        <div class="px-3">
                            <form class="form" action="save_bank_reconciliation" id="bank_reconciliation_form">
                                <div class="form-body">
                                    {{-- <h4 class="form-section">
                                    <i class="icon-user"></i> Personal Details</h4> --}}
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="account_name">Bank Name</label>
                                                <select name="bank_account_id" id="bank_account_id" class="form-control">
                                                    <option value="" selected disabled="">Select Bank</option>
                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            {{ $input['bank_account_id'] ? 'selected' : '' }}>
                                                            {{ $account->account_name }}-{{ $account->banks->bank_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">End Date</label>
                                                <input type="date" name="end_date" class="form-control"
                                                placeholder="end Date">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Previous Balance</label>
                                                <input type="number" name="previous_month_balance"
                                                    id="previous_month_balance"
                                                    class="form-control"
                                                    value="{{$end_balance}}"
                                                    placeholder="Balance">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="pay_to">Ending Balance</label>
                                                <input type="number" name="end_balance" id="end_balance"
                                                     class="form-control"
                                                     value="0"
                                                    placeholder="Balance">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Transaction Amount</label>
                                                <input type="text" class="form-control" id="transaction_amount"
                                                    name="transaction_amounts" value="0" readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Difference</label>
                                                <h2 id="difference" style="color: red"></h2>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <hr>
                                <div>
                                    <div class="card-header">
                                        <div class="card-title-wrap bar-success">
                                            <h4 class="card-title" id="basic-layout-form">Service Charges</h4>
                                        </div>
                                    </div>
                                    <div class="row service_charge_div">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="">Name</label>
                                                <input type="text" name="service_name[]" class="form-control" placeholder="Name">
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="">Amount</label>
                                                <input type="number" name="service_amount[]" class="form-control" placeholder="Amount">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add_service_charges_row"></div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" class="btn btn-success add_service_charge">
                                                <i class="icon-plus"></i> Add More
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div>
                                    <div class="card-header">
                                        <div class="card-title-wrap bar-success">
                                            <h4 class="card-title" id="basic-layout-form">Interest Rate</h4>
                                        </div>
                                    </div>
                                    <div class="row interest_div">
    
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="">Name</label>
                                                <input type="name" name="interest_name[]" class="form-control" placeholder="Name">
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="">Amount</label>
                                                <input type="number" name="interest_amount[]" class="form-control" placeholder="Amount">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add_interest_rate_row"></div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" class="btn btn-success add_interest_rate">
                                                <i class="icon-plus"></i> Add More
                                            </button>
                                        </div>
                                    </div>
                                </div> --}}


                                </div>

                                <div class="form-actions">
                                    <button type="button" class="btn btn-success" id="saveBtn">
                                        <i class="icon-note"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="card-block card-dashboard table-responsive">
                            <table class="table table-striped table-bordered" id="dTable">
                                <thead>
                                    <tr>
                                        <td><input type="checkbox" class="form-control check_all"></td>
                                        <th>Transaction No</th>
                                        <th>Date</th>
                                        <th>Description</th>
                                        <th>Account</th>
                                        <th>Debit</th>
                                        <th>Credit</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($data as $a)
                                        <tr>
                                            <td>
                                                @if ($a->is_reconcile==0)
                                                <input type="checkbox" value="{{ $a->id }}"
                                                class="form-control reconcile_check" name="reconcile_check[]"
                                                style="width:50%">                                                  
                                                @endif
                                                </td>
                                            <td>{{ $a->id }}</td>
                                            <td>{{ $a->created_at->format('d-m-Y') }}</td>
                                            <td>{{ $a->description }}</td>
                                            <td>{{ $a->bank_name->account_name }}</td>
                                            <td class="debit">{{ $a->debit }}</td>
                                            <td class="credit">{{ $a->credit }}</td>
                                            <td>
                                               @if ($a->is_reconcile==1)
                                                   <label for="" style="color: green">Reconciled</label>
                                               @else
                                               <label for="" style="color: red">Not Reconcile</label>
                                               @endif
                                            </td>
                                        </tr>

                                    @empty
                                        <tr align="center">
                                            <td colspan="11">No record Found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <br><br>

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


            </div>
        </div>
    </section>
    {{-- Modal --}}
@endsection

@section('afterScript')
    <script>
        $(document).ready(function() {

            $('#dTable').DataTable();

            $(document).on('keyup','#end_balance',function(){
                $('.reconcile_check').trigger('change');
            })

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.check_all').change(function() {
                $('.reconcile_check').prop('checked', $(this).prop('checked'));
                $('.reconcile_check').trigger('change');
            });

            $('.reconcile_check').change(function() {
                var end_balance = $('#end_balance').val();
                if(end_balance==''){
                    end_balance=0;
                }
                var total = 0;
                var credit = 0;
                var debit = 0;
                var check = $(this);
                $('input[name="reconcile_check[]"]:checked').each(function() {
                    debit = $(this).closest('tr').find('.debit').text();
                    credit = $(this).closest('tr').find('.credit').text();
                    if (credit != '') {
                        total = total + parseInt(credit);
                    }
                    if (debit != '') {
                        total = total - parseInt(debit);
                    }
                })
                var difference = total - parseInt(end_balance);
                if (difference != 0) {
                    $('#difference').css('color', 'red');
                } else {
                    $('#difference').css('color', 'green');
                }
                $('#transaction_amount').val(total);
                $('#difference').text(difference);
            });

            $('#saveBtn').click(function() {
                var difference=$('#difference').text();
                if(difference==0){
                    var transaction_id = [];
                    $(':checkbox:checked').each(function(i) {
                        transaction_id[i] = $(this).val();
                    });


                    var transaction_id_val=transaction_id.toString();

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "/save_reconcile/"+transaction_id_val,
                        type: "GET",
                        async: false,
                        cache: false,
                        contentType: false,
                        enctype: 'multipart/form-data',
                        processData: false,
                        success: function(res) {
                            swal("Inserted!", "Bank has been Reconciled!", "success");
                            // //  setTimeout(function() { 
                            // //     // location.reload();
                            // // }, 1000);
                            // $('#itemForm')[0].reset();
                            // location.reload();
                            $('#bank_reconciliation_form').submit();
                            
                        },
                        error: function(err) {
                            swal('Not Valid', err.responseJSON.message, 'error');
                            // setTimeout(function() { 
                            //     location.reload();
                            // }, 1000);
    
                        }
                    });
                }
                else{
                    alert('The difference between the amounts must be zero');
                }
            })

        });
    </script>
@endsection