@extends('dashboard.layouts.app') @section('title','Bank Statements') @section('content') <div class="main-content"> <div class="main-content-inner"> <div class="breadcrumbs ace-save-state" id="breadcrumbs"> <ul class="breadcrumb"> <li> <i class="ace-icon fa fa-home home-icon"></i> <a href="#">{{__('messages.Home')}}</a> </li> <li class="active">Bank Statements</li> </ul> </div> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <h3 class="header smaller lighter blue">Bank Statements</h3> <form action="" method="POST" role="form"> <div class="row"> {{csrf_field()}} <div class="col-md-3"> <div class="form-group"> <label>Bank Account</label> <select name="bank_id" class="form-control select2"> <option value="">Select Bank Account</option> @foreach($banks as $bank) <option value="{{$bank->id}}" @if(isset($bank_id)){{$bank_id==$bank->id?'selected':''}} @endif>{{getModelById('Bank',$bank->bank_id)->name}}({{$bank->account_number}})</option> @endforeach </select> </div> </div> <!-- <div class="col-md-3"> <div class="form-group"> <label>From Dealer</label> <select name="from_dealer_id" class="form-control select2"> <option value="">Select Dealer</option> @foreach($dealers as $dealer) <option value="{{$dealer->id}}" >{{$dealer->name}} ({{$dealer->address1}})</option> @endforeach </select> </div> </div> --> <div class="col-md-3"> <div class="form-group"> <label>Dealer Name</label> <select name="dealer_id" class="form-control select2"> <option value="">Select Dealer</option> @foreach($dealers as $dealer) <option value="{{$dealer->id}}" >{{$dealer->name}} ({{$dealer->address1}})</option> @endforeach </select> </div> </div> <div class="col-md-3"> <div class="form-group input-daterange"> <label for="from_date"> From Date</label> @if(isset($from_date)) <input type="text" value="{{$from_date}}" name="from_date" id="from_date" class="form-control" placeholder="From Date" readonly=""> @else <input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" readonly=""> @endif <span class="label label-danger"></span> </div> </div> <div class="col-md-3"> <div class="form-group input-daterange"> <label for="to_date"> To Date</label> @if(isset($to_date)) <input type="text" value="{{$to_date}}" name="to_date" id="to_date" class="form-control" placeholder="To Date" readonly=""> @else <input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" readonly=""> @endif <span class="label label-danger"></span> </div> </div> <div class="col-md-3"> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </div> </form> </div> </div> <div class="row"> <div class="col-xs-12"> @if (session('success')) <div class="alert alert-success"> {{ session('success') }} </div> @endif @if (session('error')) <div class="alert alert-danger"> {{ session('error') }} </div> @endif <div class="clearfix"> <div class="pull-right tableTools-container"> </div> </div> <div class="table-header" > <b id="title"> @if(isset($bank_id)) {{getModelById('Bank',getModelById('BankAccount',$bank_id)->bank_id)->name}} Bank Statements From {{$from_date}} To {{$to_date}} @else Bank Statements @endif </b> <div class="widget-toolbar no-border"> <a class="btn btn-xs bigger btn-danger dropdown-toggle" data-toggle="modal" href='#addPaymentModal'> Add Statement <i class="ace-icon fa fa-plus icon-on-right"></i> </a> </div> </div> <div class="table-responsive"> <div class="dataTables_borderWrap"> <table id="dynamic-table" class="table table-striped table-bordered table-hover"> <thead> <tr> <th> Date (dd/mm/yyyy)</th> <th>Particular</th> <th>Voucher No.</th> <th>Type</th> <th>Debit</th> <th>Credit</th> </tr> </thead> <tbody> @php $total_debit = 0; $total_credit = 0; @endphp @foreach($statements as $statement) <tr> <td>{{date('d/m/Y',strtotime($statement['transaction_date']))}}</td> <td>{{$statement['particular']}}</td> <td>#{{$statement['series']}}</td> <td>{{$statement['type']}}</td> <td>{{$statement['status']=='debit'?$statement['amount']:''}} @if($statement['status']=='debit') @php $total_debit = $total_debit + $statement['amount']; @endphp @endif </td> <td>{{$statement['status']=='credit'?$statement['amount']:''}} @if($statement['status']=='credit') @php $total_credit = $total_credit + $statement['amount']; @endphp @endif </td> </tr> @endforeach <tr> <!-- <td colspan="4" style="text-align: right;">Opening Balance</td> --> <td></td> <td></td> <td></td> <td>Opening Balance</td> <td>@if($opening_balance < 0) {{abs($opening_balance)}} @endif</td> <td>@if($opening_balance > 0) {{abs($opening_balance)}} @endif </td> </tr> <tr> <!-- <td colspan="4" style="text-align: right;">Total</td> --> <td></td> <td></td> <td></td> <td>Total</td> <td>{{$total_debit}}</td> <td>{{$total_credit}}</td> <!-- <td>@if($opening_balance < 0) {{ $total_debit = $total_debit+abs($opening_balance) }} @else {{$total_debit}} @endif</td> <td>@if($opening_balance > 0 ) {{ $total_credit = $total_credit + abs($opening_balance) }} @else {{$total_credit}} @endif</td> --> </tr> <tr> <td></td> <td></td> <td></td> <td >Closing Balance</td> @php if($opening_balance > 0){ $closing_balance = $total_credit - $total_debit; }else{ $closing_balance = $total_credit - $total_debit; } @endphp <td>@if($closing_balance < 0) {{abs($closing_balance)}} @endif</td> <td>@if($closing_balance > 0) {{abs($closing_balance)}} @endif </td> </tr> </tbody> </table> </div> </div> </div> </div> </div><!-- /.page-content --> </div> </div><!-- /.main-content --> <!-- Add Module Modal --> <!-- Add Module Modal --> <!-- Add Module Modal --> <div class="modal fade" id="addPaymentModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Add New Statement</h4> </div> <div class="modal-body"> <form action="{{url('/user/bank-statement-add')}}" method="POST" role="form" id="addPaymentForm"> @csrf <div id="global-error" class="alert alert-danger" style="display: none;"></div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="transaction_date">Transaction Date</label> <input type="text" class="form-control date-picker" name="transaction_date" id="transaction_date" placeholder="dd/mm/yyyy" readonly> <span class="label label-danger" id="add_transaction_date_error" style="display: none;"></span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="bank">Bank Account</label> <select class="form-control select2" name="bank" id="bank"> <option value="">Select Bank Account</option> @foreach($banks as $bank) <option value="{{$bank->id}}">{{getModelById('Bank', $bank->bank_id)->name}} ( {{$bank->account_number}} )</option> @endforeach </select> <span class="label label-danger" id="add_bank_error" style="display: none;"></span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="payment_mode">Payment Mode</label> <select class="form-control select2" name="payment_mode" id="payment_mode"> <option value="">Select Mode</option> <option value="Cash">Cash</option> <option value="Cheque">Cheque</option> <option value="DD">DD</option> <option value="NEFT">NEFT</option> <option value="RTGS">RTGS</option> </select> <span class="label label-danger" id="add_payment_mode_error" style="display: none;"></span> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="type">Type</label> <select class="form-control select2" name="type" id="type"> <option value="">Select Type</option> <option value="credit">Credit</option> <option value="debit">Debit</option> </select> <span class="label label-danger" id="add_type_error" style="display: none;"></span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="amount">Amount</label> <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount"> <span class="label label-danger" id="add_amount_error" style="display: none;"></span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="reference_number">Reference No.</label> <input type="text" class="form-control" name="reference_number" id="reference_number" placeholder="Reference No."> <span class="label label-danger" id="add_reference_number_error" style="display: none;"></span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="particular">Particular</label> <input type="text" class="form-control" name="particular" id="particular" placeholder="Particular"> <span class="label label-danger" id="add_particular_error" style="display: none;"></span> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="addPaymentBtn" class="btn btn-primary">Submit</button> </div> </div> </div> </div> </div> <!-- Add Module Modal --> @section('script') {{ Html::script("assets/js/jquery.dataTables.min.js")}} {{ Html::script("assets/js/jquery.dataTables.bootstrap.min.js")}} {{ Html::script("assets/js/dataTables.buttons.min.js")}} {{ Html::script("assets/js/buttons.flash.min.js")}} {{ Html::script("assets/js/buttons.html5.min.js")}} {{ Html::script("assets/js/buttons.print.min.js")}} {{ Html::script("assets/js/buttons.colVis.min.js")}} {{ Html::script("assets/js/dataTables.select.min.js")}} {{ Html::script("assets/js/ace-elements.min.js")}} {{ Html::script("assets/js/ace.min.js")}} {{ Html::script("assets/js/bootstrap-datepicker.min.js")}} <script> $(document).ready(function() { // Date picker initialization $('.input-daterange').datepicker({ format: 'yyyy-mm-dd', autoclose: true }); // Initialize DataTable var myTable = $('#dynamic-table').DataTable({ bAutoWidth: false, "aaSorting": [], "bProcessing": true, "sAutoWidth": false, "bDestroy": true, "sPaginationType": "bootstrap", "iDisplayStart": 10, "iDisplayLength": 10, "bPaginate": false, "bFilter": false, "bInfo": false }); $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap'; new $.fn.dataTable.Buttons(myTable, { buttons: [{ "extend": "colvis", "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>", "className": "btn btn-white btn-primary btn-bold", columns: ':not(:first):not(:last)' }, { "extend": "copy", "text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>", "className": "btn btn-white btn-primary btn-bold" }, { "extend": "csv", "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>", "className": "btn btn-white btn-primary btn-bold" }, { "extend": "excel", "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>", "className": "btn btn-white btn-primary btn-bold", title: $('#title').text(), }, { "extend": "pdf", "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>", "className": "btn btn-white btn-primary btn-bold" }, { "extend": "print", "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>", "className": "btn btn-white btn-primary btn-bold", autoPrint: false, title: $('#title').text(), message: 'This print was produced using the Print button for DataTables' } ] }); myTable.buttons().container().appendTo($('.tableTools-container')); var defaultCopyAction = myTable.button(1).action(); myTable.button(1).action(function(e, dt, button, config) { defaultCopyAction(e, dt, button, config); $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white'); }); var defaultColvisAction = myTable.button(0).action(); myTable.button(0).action(function(e, dt, button, config) { defaultColvisAction(e, dt, button, config); if ($('.dt-button-collection > .dropdown-menu').length == 0) { $('.dt-button-collection') .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />') .find('a').attr('href', '#').wrap("<li />") } $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons') }); // Form submission with validation and error handling $('#addPaymentBtn').click(function(e) { e.preventDefault(); disableButton(); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') } }); $.ajax({ url: $('#addPaymentForm').attr('action'), method: 'POST', data: $('#addPaymentForm').serialize(), success: function(data) { $('#global-error').hide(); $('span.label-danger').hide(); if (!data.flag) { $.each(data.errors, function(key, val) { showError(`add_${key}_error`, val); }); } else { swal({ title: "Success!", text: data.message, type: "success" }, function() { window.location.reload(); }); } enableButton(); }, error: function(xhr, status, error) { $('#global-error').text("An error occurred while processing your request. Please try again.").show(); enableButton(); console.log(error); } }); }); // Date picker initialization for the form $('.date-picker').datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayHighlight: true }).next().on(ace.click_event, function() { $(this).prev().focus(); }); // Function to disable the submit button function disableButton() { document.getElementById("addPaymentBtn").disabled = true; } // Function to enable the submit button function enableButton() { document.getElementById("addPaymentBtn").disabled = false; } // Function to show error messages function showError(elementId, message) { $('#' + elementId).text(message).show(); } // Initialize select2 $('.select2').select2({ width: '100%' }); }); </script> @endsection @endsection