@extends('admin.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"> {{ $transactionCount }}</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">
                        <h4 class="card-title">Filter</h4>
                    </div>
                    <div class="card-body">
                        <div id="filter-report" class="form">
                            <form action="" method="get">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="fp-range">Select Date Range</label>
                                            <input name="date" type="text" id="fp-range" class="form-control flatpickr-range" placeholder="YYYY-MM-DD to YYYY-MM-DD" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="customer_status">Select Type</label>
                                            <select class="form-control form-control-lg" name="customer_status" id="customer_status">
                                                <option value="3">All</option>
                                                <option value="1">Credit</option>
                                                <option value="2">Debit</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button id="report-filter-btn" class="btn btn-primary mr-1 waves-effect waves-float waves-light">Filter</button>
                                        <button type="reset" class="btn btn-outline-secondary waves-effect">Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <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>Type</th>
                                            <th>Key</th>
                                            <!--<th>Current</th>-->
                                            <th>Created at</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/date/daterangepicker.css') }}" />
    @endpush
@push('js')
<script src="{{ asset('assets/date/moment.js') }}"></script>
<script src="{{ asset('assets/date/daterangepicker.js') }}"></script>
    <script>
        $(function() {
            const filter = @json($filter);
            if(filter.start_date && filter.end_date){
                $('.flatpickr-range').daterangepicker({
                    timePicker: true,
                    startDate: moment(filter.start_date, 'YYYY-MM-DD HH:MM'),
                    endDate: moment(filter.end_date, 'YYYY-MM-DD HH:MM'),
                    locale: {
                    format: 'Y-M-D HH:MM'
                    }
                });
            }else{
                $('.flatpickr-range').daterangepicker({
                    timePicker: true,
                    locale: {
                    format: 'Y-M-D HH:MM'
                    }
                });
                $("#fp-range").val('');
            }

            if(filter.status){
                $("#customer_status").val(filter.status).trigger('change');
            }
            $('#retailer-list').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('admin.transaction.show', $filter) !!}",
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'sender_id'
                    },
                    {
                        data: 'sender'
                    },
                    {
                        data: 'reciever_id'
                    },
                    {
                        data: 'reciever'
                    },
                    {
                        data: 'trans_type'
                    },
                    {
                        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) {
                    const api = this.api();
                    let creditTotal=0;
                    let debitTotal=0;
                    data.map(d => {
                        if(d.sender_id == {{Auth::user()->id}}){
                            debitTotal += +d.amount;
                        }else{
                            creditTotal += +d.amount;
                        }
                    });
                    $(api.column(3).footer()).html('Debit:');
                    $(api.column(4).footer()).html(debitTotal);
                    $(api.column(5).footer()).html('Credit:');
                    $(api.column(6).footer()).html(creditTotal);
                    // $(api.column(6).footer()).html(currentTotal);
                },


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