@extends('User.layout')

@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
    / <span>Income Report</span>
@endsection

@section('content')
    <link href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Rank Income Report</h1>
        </div>

        <div class="d-flex gap-2">
            <a href="{{ route('user.get_rank') }}" type="button" class="btn btn-primary btn-sm"> Rank Eligibility
            </a>
        </div>
    </div>

    <div class="card card-animated-border mb-4">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <h3 class="h6 mb-0 text-gold">All Income Records</h3>
            <span class="badge bg-secondary" id="recordCount">0 Records</span>
        </div>

        <!-- TABLE -->
        <div class="table-responsive">
            <table class="table table-striped align-middle mb-0" id="level-income-table" style="width: 100%">

                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>ID</th>
                        <th>DATE</th>
                        <th>Daily Income</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

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

            const table = new DataTable("#level-income-table", {

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('user.rank_income_data') }}",
                    type: "GET",

                    error: function(xhr) {
                        console.error("Rank Income Error:", xhr.responseText);
                    }
                },

                columns: [

                    // SNO
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    // ID
                    {
                        data: 'id',
                        name: 'id'
                    },

                    // DATE
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    // DAILY INCOME
                    {
                        data: 'daily_income',
                        name: 'daily_income',

                        render: function(data, type) {

                            if (type === 'display') {
                                return '$' + Number(data).toLocaleString('en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }

                            return data;
                        }
                    }

                ],

                order: [
                    [2, 'desc']
                ],

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                searching: true,
                ordering: true,
                paging: true,
                info: true,
                autoWidth: false,
                scrollX: true,

                language: {
                    search: "",
                    searchPlaceholder: "Search table...",
                    emptyTable: "No income records available",
                    zeroRecords: "No matching records found",
                    lengthMenu: "_MENU_",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries"
                },

                columnDefs: [{
                    targets: "_all",
                    className: "text-nowrap align-middle"
                }],

                drawCallback: function(settings) {

                    if (settings.json) {
                        $('#recordCount').text(
                            settings.json.recordsFiltered + ' Records'
                        );
                    }
                }
            });

        });
    </script>
@endsection