@extends ('backend.layouts.app')
@section ('title', app_name() . ' | ' .'Merchant Point Summary')

@section('breadcrumb-links')
@endsection

@push('after-styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .dataTables_length {
            float: left;
        }
        div.dt-buttons {
            float: right;
        }
    </style>
@endpush

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                   Merchant Point Summary
                </h4>
            </div><!--col-->
        </div><!--row-->
        <div class="row mt-4">
            <div class="col-md-6 col-lg-4 mt-4">
                <input type="text" class="date_range form-control" placeholder="Choose Dates">
            </div>
            <div class="col-md-1 text-center mt-4">
                <button type="button" id="search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;Search</button>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="merchant-point-summery-table" class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Give Point</th>
                            <th>Redeem Point</th>
                            <th>Used Point</th>
                            <th>Coupon Expired Point</th>
                        </tr>
                        </thead>
                        <tfoot>
                            <tr class="total_points">
                                <th colspan="1"> Total </th>
                                <th colspan="1">
                                    <div class="input-icon">
                                        <input class="form-control give_point" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="1">
                                    <div class="input-icon">
                                        <input class="form-control redeem_point" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="1">
                                    <div class="input-icon">
                                        <input class="form-control used_point" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="1">
                                    <div class="input-icon">
                                        <input class="form-control expired_point" type="text" disabled="disabled">
                                    </div>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->
</div><!--card-->

@endsection


@push('after-scripts')
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{ script('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js') }}
    {{ script('https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js') }}
    {{ script('https://cdn.datatables.net/plug-ins/1.12.1/api/sum().js') }}
    {{ script('assets/plugins/select2/js/select2.full.min.js')}}
    {{ script("assets/plugins/select2/component/components-select2.js") }}
    <script>
        $(function() {
            $('.date_range').daterangepicker({
                "showDropdowns": true,
                locale: {
                    format: 'YYYY-MM-DD'
                },
                dateLimit: {
                    'months': 1,
                },
                maxDate:moment(),
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                alwaysShowCalendars: true,
                maxSpan: {
                    days: 365
                }
            }, function(start, end, label) {
            }).attr('readOnly', 'true').css('cursor', 'pointer');

            var dataTable;
            LoadDataTable();

            $('#search').click(function() {
                dataTable.destroy();
                LoadDataTable();
            });
            function LoadDataTable() {
                dataTable = $('#merchant-point-summery-table').DataTable({
                    language: {
                        processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>&emsp;Pleae Wait ..."
                    },
                    dom: 'lBfrtip',
                    processing: true,
                    searching: false,
                    serverSide: false,
                    "lengthMenu": [10, 25, 50, 100],
                    ajax: {
                        url: '{!! route('admin.merchant_point.get') !!}',
                        type: 'post',
                        data: function(d) {
                            d.date_range = $('.date_range').val()
                        },
                        error: function(xhr, err) {
                            if (err === 'parsererror')
                                location.reload();
                            else swal(xhr.responseJSON.message);
                        }
                    },
                    columns: [{
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'give',
                            name: 'give'
                        },
                        {
                            data: 'redeem',
                            name: 'redeem'
                        },
                        {
                            data: 'used',
                            name: 'used'
                        },
                        {
                            data: 'expired',
                            name: 'expired'
                        }
                    ],
                    order: [
                        [0, "desc"]
                    ],
                    searchDelay: 500,
                    fnDrawCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                        var api = this.api();
                        $('.give_point').val(api.column(1).data().sum());
                        $('.redeem_point').val(api.column(2).data().sum());
                        $('.used_point').val(api.column(3).data().sum());
                        $('.expired_point').val(api.column(4).data().sum());
                        load_plugins();
                    },
                });
            }

        });
    </script>

@endpush