@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content">

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">{{ $module }}</h4>
            </div>
            <div class="text-end d-flex">
                <!-- dropdown-->
                <div class="dropdown me-1">
                    <a href="javascript:void(0);"
                        class="btn btn-md fs-14 fw-normal border bg-white rounded text-dark d-inline-flex align-items-center"
                        data-bs-toggle="dropdown">
                        Export<i class="ti ti-chevron-down ms-2"></i>
                    </a>
                    <ul class="dropdown-menu p-2">
                        <li>
                            <a class="dropdown-item" href="#">Download as PDF</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">Download as Excel</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- End Page Header -->

        <div class="table-responsive">
            <table class="table table-nowrap journal" id="datatable">
                <thead class="thead-light">
                    <tr>
                        <th>Account</th>
                        <th>Group</th>
                        <th>Debit</th>
                        <th>Credit</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2">Total</th>
                        <th><span id="tot-debit"></span></th>
                        <th><span id="tot-credit"></span></th>
                    </tr>
                </tfoot>
            </table>
        </div>

    </div>
    <!-- End Content -->

</div>

<!-- ========================
   End Page Content
  ========================= -->


<!-- DataTables  -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>


<script>
    $(document).ready(function() {

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            lengthMenu: [
                [25, 50, 150, 500],
                [25, 50, 150, 500]
            ],
            ajax: '',
            order: [
                [0, "desc"]
            ],
            columns: [{
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'total_debit',
                    name: 'total_debit',
                    render: function(data, type, row) {
                        return '{{ env('CURRENCY') }}' + data;
                    }
                },
                {
                    data: 'total_credit',
                    name: 'total_credit',
                    render: function(data, type, row) {
                        return '{{ env('CURRENCY') }}' + data;
                    }
                }
            ],
            "footerCallback": function(row, data, start, end, display) {

                var tot_credit = 0;
                var tot_debit = 0;

                data.forEach(function(item) {
                    tot_credit += parseFloat(item.total_credit);
                    tot_debit += parseFloat(item.total_debit);
                });

                $('#tot-debit').text('{{ env('CURRENCY') }}' + tot_debit.toFixed(2));
                $('#tot-credit').text('{{ env('CURRENCY') }}' + tot_credit.toFixed(2));
            }

        });


    });
</script>


@include($view . '::create')
@include('layouts.footer')