@extends ('backend.layouts.app')
@section('title', app_name() . ' | ' . 'Customer 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('assets/plugins/select2/css/select2.min.css') }}
    {{ style('assets/plugins/select2/css/select2-bootstrap.min.css') }}
    <style>
        .dataTables_length {
            float: left;
        }

        div.dt-buttons {
            float: right;
        }
        .opening_point_div,.incoming_point_div,.outgoing_point_div,.withdraw_point_div,.used_point_div,.expired_point_div,.balance_point_div{
            background: #c2cfd6;
            color: #3e515b;
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.5;
            width: 100%;
            height: 40px;
            align-items: center;
            display: flex;
            justify-content: left;
            text-align: left;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-10">
                    <h4 class="card-title mb-0">
                        Customer Point Summary
                    </h4>
                </div><!--col-->
                <div class="col-sm-2 text-right">
                    <form class="d-none" action="{{ route('admin.customer.download_all') }}" id="downloadForm"
                        method="POST">
                        @csrf
                        <input type="text" name="date_range" class="downloadDateRange">
                        {{-- <input type="text" name="customer_id" class="downloadCustomer">
                        <input type="text" name="township_id" class="downloadTownship"> --}}
                        <input type="text" name="active" class="downloadActive">
                    </form>
                    <button type="button" class="btn btn-danger btn-sm ml-1" onclick="downloadAll()"><i
                            class="fas fa-download"></i>
                        {{ __('Download All') }}</button>
                </div>
            </div><!--row-->
            <div class="row mt-4">
                <div class="col-md-2 col-lg-2">
                    <select class="active form-control" name="active" id="active" style="width: 100%;">
                        <option selected value="1">Active&nbsp;(points using)</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="col-md-3 col-lg-3">
                    <input type="text" class="date_range form-control" placeholder="Choose Dates">
                </div>
                <div class="col-md-1 text-center">
                    <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="customer-point-summery-table" class="table table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Township</th>
                                    <th>Opening Point</th>
                                    <th>Incoming Point</th>
                                    <th>Outgoing Point</th>
                                    <th>Withdraw Point</th>
                                    <th>Used Point</th>
                                    <th>Expired Point</th>
                                    <th>Balance Point</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="total_points">
                                    <th colspan="2"></th>
                                    <th colspan="1"> Total </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="opening_point_div">
                                            <span class="opening_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="incoming_point_div">
                                            <span class="incoming_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="outgoing_point_div">
                                            <span class="outgoing_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="withdraw_point_div">
                                            <span class="withdraw_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="used_point_div">
                                            <span class="used_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="expired_point_div">
                                            <span class="expired_point px-2"></span>
                                        </div>
                                    </th>
                                    <th colspan="1" class="pt-3">
                                        <div class="balance_point_div">
                                            <span class="balance_point px-2"></span>
                                        </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>

        const downloadAll = () => {
            var date_range = $('.date_range').val();
            var active = $('#active option:selected').val();
            $('.downloadDateRange').val(date_range);
            $('.downloadActive').val(active);
            $('#downloadForm').submit();
        };

        $(function() {
            $(".js-data-township-ajax").select2({
                placeholder: "Choose Township",
                width: "off",
                ajax: {
                    url: "/township/filter_search",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.data,
                        pagination: {
                        more: (params.page * 10) < data.total
                        }
                    };
                    },
                    cache: true
                },
                escapeMarkup: function(markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepoSelection,
                templateSelection: formatRepoSelection
            });

            $('.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 = $('#customer-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: true,
                    serverSide: false,
                    "lengthMenu": [10, 25, 50, 100],
                    ajax: {
                        url: '{!! route('admin.customer_point.get') !!}',
                        type: 'post',
                        data: function(d) {
                            d.date_range = $('.date_range').val(),
                            d.active= $('#active').val()
                        },
                        error: function(xhr, err) {
                            if (err === 'parsererror')
                                location.reload();
                            else swal(xhr.responseJSON.message);
                        }
                    },
                    columns: [{
                            data: 'name',
                            name: 'name',
                            searchable:true
                        },
                        {
                            data: 'mobile',
                            name: 'mobile',
                            searchable:true
                        },
                        {
                            data: 'township',
                            name: 'township',
                            searchable:true
                        },
                        {
                            data: 'opening',
                            name: 'opening'
                        },
                        {
                            data: 'incoming',
                            name: 'incoming'
                        },
                        {
                            data: 'outgoing',
                            name: 'outgoing'
                        },
                        {
                            data: 'withdraw',
                            name: 'withdraw'
                        },
                        {
                            data: 'used',
                            name: 'used'
                        },
                        {
                            data: 'expired',
                            name: 'expired'
                        },
                        {
                            data: 'balance',
                            name: 'balance'
                        },
                    ],
                    order: [
                        [0, "desc"]
                    ],
                    searchDelay: 500,
                    fnDrawCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                        var api = this.api();
                        $('.opening_point').text(api.column(3).data().sum());
                        $('.incoming_point').text(api.column(4).data().sum());
                        $('.outgoing_point').text(api.column(5).data().sum());
                        $('.withdraw_point').text(api.column(6).data().sum());
                        $('.used_point').text(api.column(7).data().sum());
                        $('.expired_point').text(api.column(8).data().sum());
                        $('.balance_point').text(api.column(9).data().sum());
                        load_plugins();
                    },
                });
            }
        });
    </script>
@endpush