@extends('Admin.layout')

@section('navlink')
    <a href="{{ route('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>
        <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>

    <div class="table-responsive">
        <table class="table table-striped align-middle mb-0" id="income-table" style="width:100%">
            <thead>
                <tr class="text-uppercase small">
                    <th>SNO</th>
                    <th>DATE</th>
                    <th>USER ID</th>
                    <th>USER NAME</th>
                    <th>Rank</th>
                    <th>Daily</th>
                    <th>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 users = [
        {
            id: 101,
            sno: 1,
            date: "27-09-2026",
            user_id: "USR1001",
            user_name: "Arun Kumar",
            level: "1",
            percentage: 5,
            purchase_amount: "$ 250",
            total_income: "$2.5",
            user_income: 400,
            upgrade_split: 100,
            income_by: "Direct Referral",
            remark: "Working Plan Level Income"
        }
    ];

    const formatAmount = (amount) => {
        return Number(amount).toLocaleString("en-IN", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    };

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

        columns: [
            {
                data: "sno"
            },
            {
                data: "date"
            },
            {
                data: "user_id"
            },
            {
                data: "user_name"
            },
            {
                data: "level"
            },
           
            {
                data: "total_income"
            },
            
            {
                data: "purchase_amount",
               
            },
           
        ],

        createdRow: function (row, data) {
            $(row).attr("data-id", data.id);
        },

        order: [[1, "desc"]],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        paging: true,
        autoWidth: false,
        scrollX: true,

        language: {
            search: "",
            searchPlaceholder: "Search income records...",
            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",
            infoFiltered: "(filtered from _MAX_ total entries)"
        },

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

        initComplete: function () {
            $("#recordCount").text(users.length + " Records");
        }
    });

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

        const headers = [
            "SNO",
            "DATE",
            "USER ID",
            "USER NAME",
            "LEVEL",
            "PERCENTAGE",
            "PURCHASE AMOUNT",
            "TOTAL INCOME",
            "USER INCOME",
            "UPGRADE SPLIT",
            "INCOME BY",
            "REMARK"
        ];

        const csvRows = [headers];

        rows.forEach(user => {
            csvRows.push([
                user.sno,
                user.date,
                user.user_id,
                user.user_name,
                user.level,
                user.percentage + "%",
                user.purchase_amount,
                user.total_income,
                user.user_income,
                user.upgrade_split,
                user.income_by,
                user.remark
            ]);
        });

        const csv = csvRows.map(row =>
            row.map(value => `"${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 = "income-report.csv";
        link.click();

        URL.revokeObjectURL(url);
    });

});
</script>

@endsection