@extends('app')
<!-- 401791     1411512379 -->
@section('content')
    <style type="text/css">
        @media print {
            #incomeDatatable_length,
            #incomeDatatable_paginate,
            #incomeDatatable_filter,
            #incomeDatatable_info,
            #expenseDatatable_length,
            #expenseDatatable_filter,
            #expenseDatatable_paginate,
            #expenseDatatable_info,
            .from-to {
                display: none;
            }

            #incomeDatatable {
                width: 475px !important;
            }

            #expenseDatatable {
                width: 475px !important;
            }

            .btn-primary {
                background-color: #fff;
                border-color: #fff;
            }

        }
    </style>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Income Expense Ledger
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Accounts</a></li>
            <li class="active">Income Expense Ledger</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <form name="searchForm" class="searchForm form-horizontal" method="post"
                      action="{{route('accounts.getIncomeExpenseLedger.post')}}">
                    <div class="form-group col-md-12 from-to" style="margin-top: 10px; margin-bottom: 5px;">
                        <div class="col-md-12">
                            <label class="col-md-1 col-md-offset-1">
                                <i class="fa fa-calendar"></i>
                                Type:
                            </label>
                            <div class="col-md-2">
                                {{csrf_field()}}
                                <select class="form-control type" name="type">
                                    <option value="">Select Type</option>
                                    <option value="income" {{$type == 'income' ? 'selected' : ''}}>Income
                                    </option>
                                    <option value="expense" {{$type == 'expense' ? 'selected' : ''}}>Expense
                                    </option>
                                    <option value="both" {{$type == 'both' ? 'selected' : ''}}>Both</option>
                                </select>
                            </div>
                            <label class="col-md-1">
                                <i class="fa fa-calendar"></i>
                                From:
                            </label>
                            <div class="col-md-2">
                                <input class="form-control datepicker" autocomplete="off" type="text"
                                       name="from" id="from" value="{{$from}}">

                            </div>
                            <label class="col-md-1">
                                <i class="	fa fa-calendar"></i>
                                To:
                            </label>
                            <div class="col-md-2">
                                <input class="form-control datepicker" autocomplete="off" type="text" name="to"
                                       id="to" value="{{$to}}">
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-sm btn-primary" type="submit"> Submit</button>
                                <button class="btn btn-sm btn-default" type="button"
                                        style="border: 1px solid #000;" onclick="window.print();">
                                    <i class="fa fa-print"></i>
                                    Print
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="col-md-3 col-sm-3 col-md-offset-1 col-sm-offset-1">
							<span style="font-size: 18px; color: #0d4e73; font-weight: bold;">
								INCOMES
							</span>
                        </div>
                        <div class="col-md-4 col-sm-4">
							<span style="font-size: 18px; color: #0d4e73; font-weight: bold;">
								From : {{$from}} - To {{$to}}
							</span>
                        </div>
                        <div class="col-md-2 col-md-offset-1 col-sm-2 col-sm-offset-1">
							<span style="font-size: 18px; color: #0d4e73; font-weight: bold;">
								EXPENSES
							</span>
                        </div>
                    </div>
                </form>

                @can('income-expense-ledger-view')
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="col-md-6 col-sm-6 incomeDatatableDiv">
                                <table id="incomeDatatable"
                                       class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Invoice ID</th>
                                        <th>Date</th>
                                        <th>Comment</th>
                                        <th>Total Amount</th>
                                    </tr>
                                    </thead>

                                    <tfoot>
                                    <tr>
                                        <th>Invoice ID</th>
                                        <th>Date</th>
                                        <th>Comment</th>
                                        <th>Total Amount</th>
                                    </tr>
                                    <tr>
                                        <th colspan="3" style="color: green; font-size: 18px;">
                                            Total Amount
                                        </th>
                                        <th style="color: green; font-size: 18px;"
                                            id="totalIncomeAmount"></th>

                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="col-md-6 col-sm-6 expenseDatatableDiv">
                                <table id="expenseDatatable"
                                       class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Invoice ID</th>
                                        <th>Date</th>
                                        <th>Comment</th>
                                        <th>Total Amount</th>
                                    </tr>
                                    </thead>

                                    <tfoot>
                                    <tr>
                                        <th>Invoice ID</th>
                                        <th>Date</th>
                                        <th>Comment</th>
                                        <th>Total Amount</th>
                                    </tr>
                                    <tr>
                                        <th colspan="3" style="color: green; font-size: 18px;">
                                            Total Amount
                                        </th>
                                        <th style="color: green; font-size: 18px;"
                                            id="totalExpenseAmount"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <table class="table table-bordered table-striped">
                        <tbody>
                        <tr>
                            <th style="background: #e2eaf5; color: #19638e; font-size: 18px;">
                                &nbsp;
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 18px;"> Total
                                Income
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 20px;"
                                id="footerTotalIncomeAmount">

                            </th>
                        </tr>
                        <tr>
                            <th style="background: #e2eaf5; color: #19638e; font-size: 18px;">
                                &nbsp;
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 18px;"> Total
                                Expense
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 20px;"
                                id="footerTotalExpenseAmount">

                            </th>
                        </tr>
                        <tr>
                            <th style="background: #e2eaf5; color: #19638e; font-size: 18px;">
                                &nbsp;
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 18px;">
                                Account Balace
                            </th>
                            <th colspan="2"
                                style="background: #e2eaf5; color: #19638e; font-size: 20px;"
                                id="accountBalance">

                            </th>
                        </tr>
                        </tbody>
                    </table>
            @endcan
            <!-- /.tab-content -->
                <!-- nav-tabs-custom -->
                <!-- SELECT2 EXAMPLE -->
            </div>
        </div>
    </section>
    <!-- Normal Modal -->

@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function () {

            $('.datepicker').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: "dd-mm-yyyy"
            });

            var type = $(".type").val();
            var fromDate = $("#from").val();
            var toDate = $("#to").val();
            var totalAccountBalance = 0;
            if (type == 'income' || type == 'both') {
                $('#incomeDatatable').DataTable({
                    processing: true,
                    serverSide: true,
                    bFilter: false,
                    bInfo: false,
                    bPaginate: false,
                    order: [[0, "asc"]],
                    ajax: {
                        url: '{{ route("accounts.get-income-report") }}',
                        data: function (d) {
                            d.from = $('input[name=from]').val();
                            d.to = $('input[name=to]').val();
                        }
                    },
                    columns: [
                        {data: 'income_invoice_id', name: 'income_invoice_id', orderable: true, searchable: true},
                        {data: 'date', name: 'date', orderable: true, searchable: true},
                        {data: 'comment', name: 'comment', orderable: true, searchable: true},
                        {data: 'total_amount', name: 'total_amount', orderable: true, searchable: true},
                    ]
                });

                $.ajax({
                    url: 'get-income-total-feagure/' + fromDate + '/' + toDate,
                    method: 'GET',
                    dataType: '',
                    success: function (data) {
                        if (parseFloat(data.total_amount) > 0) {
                            $("#totalIncomeAmount").empty();
                            $("#totalIncomeAmount").html(parseFloat(data.total_amount).toFixed(2));
                            $("#footerTotalIncomeAmount").html(parseFloat(data.total_amount).toFixed(2));
                            totalAccountBalance += parseFloat(data.total_amount);
                            $('#accountBalance').html(totalAccountBalance.toFixed(2));

                        }

                    },
                    error: function (data) {
                        alert('Something went wrong !');
                    }

                });
            }

            if (type == 'expense' || type == 'both') {

                $('#expenseDatatable').DataTable({
                    processing: true,
                    serverSide: true,
                    bFilter: false,
                    bInfo: false,
                    bPaginate: false,
                    'order': [[0, "asc"]],
                    ajax: "{{ URL::to('accounts/get-expense-report')}}/" + fromDate + "/" + toDate,
                    columns: [
                        {data: 'expense_invoice_id', name: 'expense_invoice_id', orderable: true, searchable: true},
                        {data: 'date', name: 'date', orderable: true, searchable: true},
                        {data: 'comment', name: 'comment', orderable: true, searchable: true},
                        {data: 'total_amount', name: 'total_amount', orderable: true, searchable: true},
                    ]
                });

                $.ajax({
                    url: 'get-expense-total-feagure/' + fromDate + '/' + toDate,
                    method: 'GET',
                    dataType: '',
                    success: function (data) {
                        if (parseFloat(data.total_amount) > 0) {
                            $("#totalExpenseAmount").empty();
                            $("#totalExpenseAmount").html(parseFloat(data.total_amount).toFixed(2));
                            $("#footerTotalExpenseAmount").html(parseFloat(data.total_amount).toFixed(2));
                            totalAccountBalance = totalAccountBalance - parseFloat(data.total_amount);
                            $('#accountBalance').html(totalAccountBalance.toFixed(2));

                        }
                    },
                    error: function (data) {
                        alert('Something went wrong !');
                    }
                });
            }

        });

        function loadingImg() {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxComplete(function () {
                $(this).hide();
            });
        }

        function saleDetails(saleInvoiceId) {
            $(function () {
                loadingImg();
                $("#saleDetailsBody").load("{{url('reports/category-wise-sale-report')}}" + "/" + saleInvoiceId);
            });
        }


    </script>
@endsection