@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">Income Report</h1>
        <p class="text-secondary mb-0">View user income and upgrade details.</p>
    </div>

    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-primary btn-sm" id="exportBtn">
            <i class="ti ti-download me-1"></i> Export
        </button>
    </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>DATE</th>
                    <th>LEVEL</th>
                    <th>PERCENTAGE</th>
                    <th>TOTAL INCOME</th>
                    <th>USER INCOME</th>
                    <th>UPGRADE SPLIT</th>
                    <th>INCOME BY</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 users = [{
                    id: 1,
                    sno: 1,
                    date: "2026-09-27",
                    level: "Level 1",
                    percentage: 6,
                    total_income: 15000,
                    user_income: 900,
                    upgrade_split: 300,
                    income_by: "USR1001"
                },
                {
                    id: 2,
                    sno: 2,
                    date: "2026-09-26",
                    level: "Level 2",
                    percentage: 5,
                    total_income: 20000,
                    user_income: 1000,
                    upgrade_split: 500,
                    income_by: "USR1002"
                },
                {
                    id: 3,
                    sno: 3,
                    date: "2026-09-25",
                    level: "Level 3",
                    percentage: 4,
                    total_income: 25000,
                    user_income: 1000,
                    upgrade_split: 250,
                    income_by: "USR1003"
                },
                {
                    id: 4,
                    sno: 4,
                    date: "2026-09-24",
                    level: "Level 4",
                    percentage: 3.5,
                    total_income: 30000,
                    user_income: 1050,
                    upgrade_split: 350,
                    income_by: "USR1004"
                }
            ];

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

                columns: [{
                        data: "sno"
                    },
                    {
                        data: "date",
                        render: function(data, type) {
                            if (type === "display" && data) {
                                const [year, month, day] = data.split("-");
                                return `${day}-${month}-${year}`;
                            }
                            return data;
                        }
                    },
                    {
                        data: "level"
                    },
                    {
                        data: "percentage",
                        render: function(data, type) {
                            return type === "display" ? `${data}%` : data;
                        }
                    },
                    {
                        data: "total_income",
                        render: function(data, type) {
                            return type === "display" ?
                                "$" + Number(data).toLocaleString("en-IN") :
                                data;
                        }
                    },
                    {
                        data: "user_income",
                        render: function(data, type) {
                            return type === "display" ?
                                "$" + Number(data).toLocaleString("en-IN") :
                                data;
                        }
                    },
                    {
                        data: "upgrade_split",
                        render: function(data, type) {
                            return type === "display" ?
                                "$" + Number(data).toLocaleString("en-IN") :
                                data;
                        }
                    },
                    {
                        data: "income_by"
                    }
                ],

                order: [
                    [1, "desc"]
                ],
                pageLength: 10,
                lengthMenu: [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"
                }]
            });

            // Custom search
            $("#customSearch").on("input", function() {
                table.search(this.value).draw();
            });

            // Date filter
            $.fn.dataTable.ext.search.push(function(settings, data) {
                if (settings.nTable.id !== "level-income-table") {
                    return true;
                }

                const fromDate = $("#fromDate").val();
                const toDate = $("#toDate").val();

                const parts = data[1].split("-");
                const rowDate = parts.length === 3 ?
                    `${parts[2]}-${parts[1]}-${parts[0]}` :
                    "";

                if (fromDate && rowDate < fromDate) return false;
                if (toDate && rowDate > toDate) return false;

                return true;
            });

            $("#fromDate, #toDate").on("change", function() {
                table.draw();
            });

            // Export CSV
            $("#exportBtn").on("click", function() {
                const rows = table.rows({
                    search: "applied"
                }).data().toArray();

                const headers = [
                    "SNO",
                    "DATE",
                    "LEVEL",
                    "PERCENTAGE",
                    "TOTAL INCOME",
                    "USER INCOME",
                    "UPGRADE SPLIT",
                    "INCOME BY"
                ];

                const csvRows = [headers];

                rows.forEach(function(user) {
                    csvRows.push([
                        user.sno,
                        user.date,
                        user.level,
                        user.percentage + "%",
                        user.total_income,
                        user.user_income,
                        user.upgrade_split,
                        user.income_by
                    ]);
                });

                const csv = csvRows.map(function(row) {
                    return row.map(function(value) {
                        return `"${String(value ?? "").replace(/"/g, '""')}"`;
                    }).join(",");
                }).join("\r\n");

                const blob = new Blob(["\uFEFF" + csv], {
                    type: "text/csv;charset=utf-8;"
                });

                const url = URL.createObjectURL(blob);
                const link = document.createElement("a");

                link.href = url;
                link.download = "level-income-report.csv";
                link.click();

                URL.revokeObjectURL(url);
            });

        });
    </script>

@endsection