@extends('distributor.layouts.app')
@section('title', 'Transaction Management')
@section('row')
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-left mb-0">Transaction List</h2>
                <h2 class="content-header-title float-left mb-0"> {{ $transactionSenderCount+$transactionRecieverCount }}</h2>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <section id="multilingual-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div>
                            <h2 class="font-weight-bolder mb-0">Sent to Retailers : {{ $transactionSenderCount }}</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-datatable">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="table-responsive">
                                <table class="table" id="retailer-list">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Sender_id</th>
                                            <th>Send by</th>
                                            <th>Reciever_id</th>
                                            <th>Recieved by</th>
                                            <th>Credit</th>
                                            <!--<th>Current</th>-->
                                            <th>Created at</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="4" style="text-align:right">Total:</th>
                                            <th></th>
                                            <th></th>
                                            <!--<th></th>-->
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card-header">
                        <div>
                            <h2 class="font-weight-bolder mb-0">Transferred By Admin / Retailers : {{ $transactionRecieverCount }}</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-datatable">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="table-responsive">
                                <table class="table" id="reciever-list">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Sender_id</th>
                                            <th>Send by</th>
                                            <th>Reciever_id</th>
                                            <th>Recieved by</th>
                                            {{-- <th>Previous</th> --}}
                                            <th>Credit</th>
                                            <!--<th>Current</th>-->
                                            <th>Created at</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="4" style="text-align:right">Total:</th>
                                            <th></th>
                                            <th></th>
                                            <!--<th></th>-->
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('js')
    <script>
        $(function() {
            $('#retailer-list').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('transaction.sender.all.show') !!}",
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'sender_id'
                    },
                    {
                        data: 'sender'
                    },
                    {
                        data: 'reciever_id'
                    },
                    {
                        data: 'reciever'
                    },
                    {
                        data: 'amount'
                    },
                    // {
                    //     data: 'closing'
                    // },
                    {
                        data: 'created_at'
                    },

                ],

                lengthMenu: [ [10, 50, 100, 500, 1000], [10, 50, 100, 500, 1000] ],
                dom: 'Bflrtip',
                buttons: [{
                        extend: 'pdf',
                        footer: true,
                        titleAttr: 'PDF',
                        extension: ".pdf",
                        filename: "Customers",
                        title: "",
                        text: '<i class="fadeIn animated bx bx-file-blank">PDF</i> ',
                        className: 'btn btn-success',
                        messageTop: 'All Products',


                    },
                    {
                        extend: 'csv',
                        footer: false

                    },
                    {
                        extend: 'excel',
                        footer: false
                    },
                    {
                        extend: 'copy',
                        footer: false
                    },
                    {
                        extend: 'print',
                        footer: false
                    }
                ],

                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    // computing column Total of the complete result
                    var creditTotal = api
                        .column(5)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    var currentTotal = api
                        .column(6)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer by showing the total with the reference of the column index
                    $(api.column(0).footer()).html('Total');
                    $(api.column(5).footer()).html(creditTotal);
                    // $(api.column(6).footer()).html(currentTotal);
                },


            });
            $('#reciever-list').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('transaction.reciever.all.show') !!}",
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'sender_id'
                    },
                    {
                        data: 'sender'
                    },
                    {
                        data: 'reciever_id'
                    },
                    {
                        data: 'reciever'
                    },
                    {
                        data: 'amount'
                    },
                    // {
                    //     data: 'closing'
                    // },
                    {
                        data: 'created_at'
                    },
                    ],
                lengthMenu: [ [10, 50, 100, 500, 1000], [10, 50, 100, 500, 1000] ],
                dom: 'Bflrtip',

                buttons: [{
                        extend: 'pdf',
                        footer: true,
                        titleAttr: 'PDF',
                        extension: ".pdf",
                        filename: "Customers",
                        title: "",
                        text: '<i class="fadeIn animated bx bx-file-blank">PDF</i> ',
                        className: 'btn btn-success',
                        messageTop: 'All Products',


                    },
                    {
                        extend: 'csv',
                        footer: false

                    },
                    {
                        extend: 'excel',
                        footer: false
                    },
                    {
                        extend: 'copy',
                        footer: false
                    },
                    {
                        extend: 'print',
                        footer: false
                    }
                ],

                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    // computing column Total of the complete result
                    var creditTotal = api
                        .column(5)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    var currentTotal = api
                        .column(6)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer by showing the total with the reference of the column index
                    $(api.column(0).footer()).html('Total');
                    $(api.column(5).footer()).html(creditTotal);
                    // $(api.column(6).footer()).html(currentTotal);
                },


            });
        });
    </script>
@endpush