@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    .dataTables_info,
    .dataTables_paginate {
        padding: 0 18px 18px !important;
    }
</style>

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5 class="page-title">
            <i class="ti tabler-diamond text-warning me-2"></i>User Cash Report
        </h5>
    </div>
</div>

<div class="card main-card m-2">

    <div class="top-filter p-3">
        <div class="row g-3 align-items-end d-flex justify-content-end">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <!-- <div class="col-lg-2 col-md-6">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">User Name</label>
                <input type="text" class="form-control" placeholder="Search user">
            </div> -->

            <div class="col-lg-1 col-md-6">
                <button class="btn btn-primary w-100">
                    <i class="ti tabler-search me-1"></i> Search
                </button>
            </div>
            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
            </div>

            <div class="col-lg-1 col-md-6">
                <button id="exportExcel" class="btn btn-label-secondary w-100">
                    <i class="ti tabler-download me-1"></i> Export
                </button>
            </div>

        </div>
    </div>
    <div class="table-responsive table-wrap">
        <table class="table w-100" id="usersTable">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>User ID</th>
                    <th>User Name</th>
                    <th>Diamond Investment</th>
                    <th>Gold Investment </th>
                    <th>Silver Investment</th>
                    <th>Diamond ROI Income </th>
                    <th>Diamond Level Income</th>
                    <th>BDB Income </th>
                    <th>Product Wallet </th>
                    <th>Gold Sale Points </th>
                    <th>Gold ROI Income </th>
                    <th>Silver ROI Income </th>
                    <th>Total Investment</th>
                    <th>Total Income</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

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

        const table = $('#usersTable').DataTable({

            ajax: {
                url: "{{ route('admin.user_cash_report_data') }}",
            },

            processing: true,
            serverSide: true,

            searching: true,
            paging: true,
            info: true,
            lengthChange: false,
            pageLength: 10,
            ordering: false,

            buttons: [{
                extend: 'excelHtml5',
                title: 'User Cash Report',
                className: 'd-none',

                exportOptions: {
                    columns: ':visible'
                },

                action: function(e, dt, button, config) {

                    $.ajax({

                        url: "{{ route('admin.user_cash_report_data') }}",
                        type: "GET",

                        data: {
                            start: 0,
                            length: 1000000
                        },

                        success: function(json) {

                            let oldData = dt.rows().data().toArray();

                            dt.clear();

                            for (let i = 0; i < json.data.length; i++) {

                                dt.row.add(json.data[i]);
                            }

                            dt.draw();

                            $.fn.dataTable.ext.buttons.excelHtml5.action.call(
                                this,
                                e,
                                dt,
                                button,
                                config
                            );

                            dt.clear();

                            for (let i = 0; i < oldData.length; i++) {

                                dt.row.add(oldData[i]);
                            }

                            dt.draw();
                        }
                    });
                }
            }],

            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },

                {
                    data: 'user_id',
                    name: 'user_id'
                },

                {
                    data: 'user_name',
                    name: 'user_name'
                },

                {
                    data: 'diamond_investment',
                    name: 'diamond_investment'
                },

                {
                    data: 'gold_investment',
                    name: 'gold_investment'
                },

                {
                    data: 'silver_investment',
                    name: 'silver_investment'
                },

                {
                    data: 'diamond_roi_income',
                    name: 'diamond_roi_income'
                },

                {
                    data: 'diamond_level_income',
                    name: 'diamond_level_income'
                },

                {
                    data: 'bdb_income',
                    name: 'bdb_income'
                },

                {
                    data: 'product_wallet',
                    name: 'product_wallet'
                },

                {
                    data: 'gsbp',
                    name: 'gsbp'
                },

                {
                    data: 'gold_roi_income',
                    name: 'gold_roi_income'
                },

                {
                    data: 'silver_roi_income',
                    name: 'silver_roi_income'
                },

                {
                    data: 'total_investment',
                    name: 'total_investment'
                },

                {
                    data: 'total_income',
                    name: 'total_income'
                },
            ]

        });

        $('#customSearch').keyup(function() {

            table.search($(this).val()).draw();

        });

        $('#pageLength').change(function() {

            table.page.len($(this).val()).draw();

        });

        $('#exportExcel').click(function() {

            table.button('.buttons-excel').trigger();

        });

    });
</script>
<!-- <script>
    $(document).ready(function() {

        const table = $('#usersTable').DataTable({
            ajax: "{{ route('admin.user_cash_report_data') }}",

            
            processing: true,
            serverSide: true,

            searching: true,
            paging: true,
            info: true,
            lengthChange: false,
            pageLength: 10,
            ordering: false,

            buttons: [{
                extend: 'excelHtml5',
                title: 'User Cash Report',
                className: 'd-none',
            }],

            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },

                {
                    data: 'user_id',
                    name: 'user_id'
                },

                {
                    data: 'user_name',
                    name: 'user_name'
                },

                {
                    data: 'diamond_investment',
                    name: 'diamond_investment'
                },

                {
                    data: 'gold_investment',
                    name: 'gold_investment'
                },

                {
                    data: 'silver_investment',
                    name: 'silver_investment'
                },

                {
                    data: 'diamond_roi_income',
                    name: 'diamond_roi_income'
                },

                {
                    data: 'diamond_level_income',
                    name: 'diamond_level_income'
                },

                {
                    data: 'bdb_income',
                    name: 'bdb_income'
                },

                {
                    data: 'product_wallet',
                    name: 'product_wallet'
                },

                {
                    data: 'gsbp',
                    name: 'gsbp'
                },

                {
                    data: 'gold_roi_income',
                    name: 'gold_roi_income'
                },

                {
                    data: 'silver_roi_income',
                    name: 'silver_roi_income'
                },

                {
                    data: 'total_investment',
                    name: 'total_investment'
                },

                {
                    data: 'total_income',
                    name: 'total_income'
                },
            ]

        });

        $('#customSearch').keyup(function() {
            table.search($(this).val()).draw();
        });

        $('#pageLength').change(function() {
            table.page.len($(this).val()).draw();
        });

        $('#exportExcel').click(function() {

            table.button('.buttons-excel').trigger();

        });

    });
</script> -->

@endsection