@extends('Admin.layout')
<style>
    .dt-search, .dt-length
    {
        display: none !important;
    }
</style>
@section('navlink')
    <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Generated Income Report</span>
@endsection

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">

<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Generated Report - 26/05/2026</h1>
    </div>
 <div class="d-flex gap-2">
        <a href="{{ route('income_generation_report') }}" class="btn-back">
            <i class="ti ti-arrow-left"></i>
            <span>Back</span>
        </a>
    </div>
</div>

<div class="card card-animated-border mb-4">
    <div class="card-header">
        <h3 class="h6 mb-0 text-gold">Filters</h3>
    </div>

    <div class="card-body">
        <div class="row g-3 align-items-end">
            <div class="col-12 col-md-6 col-lg-5">
                <label for="filterName" class="form-label small">Name</label>
                <input type="text" id="filterName"
                    class="form-control"
                    placeholder="Enter Name">
            </div>

            <div class="col-12 col-md-6 col-lg-5">
                <label for="filterUserId" class="form-label small">User ID</label>
                <input type="text" id="filterUserId"
                    class="form-control"
                    placeholder="Enter User ID">
            </div>

          

            <div class="col-6 col-lg-2">
                <button type="button" id="resetBtn"
                    class="btn btn-secondary w-100">
                    Reset
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card card-animated-border mb-4">
    <div class="card-body">

        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
            <div>
                <select id="pageLength" class="form-select" style="width: 100px;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="d-flex gap-2">
                <input type="search" id="customSearch"
                    class="form-control"
                    placeholder="Search"
                    style="max-width: 250px;">

                <button type="button" id="exportBtn"
                    class="btn btn-outline-secondary text-nowrap">
                    <i class="ti ti-download me-1"></i>
                    Excel
                </button>
            </div>
        </div>

        <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>User ID</th>
        <th>User Name</th>
        <th>Total Income</th>
        
    </tr>
</thead>
<tbody></tbody>
            </table>
        </div>

    </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 incomes = [
        {
            id: 1,
            created_date: "UID123",
            generated_date: "Arun",
            total_entries: 200,
        },
       
    ];

    function formatDate(date) {
        if (!date) return "-";

        const [datePart, timePart] = date.split(" ");
        const [year, month, day] = datePart.split("-");

        return `${day}-${month}-${year} ${timePart || ""}`;
    }

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

        columns: [
            {
                data: "id"
            },
            {
                data: "created_date",
               
            },
            {
                data: "generated_date",
               
            },
           
            {
                data: "total_entries"
            },
           
        ],

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

        language: {
            search: "",
            searchPlaceholder: "Search...",
            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();
    });

    // View income list
    $("#income-table").on("click", ".view-income", function () {
        const id = $(this).data("id");

        const income = incomes.find(item => item.id == id);

        if (income) {
            console.log("Selected income record:", income);

            // Add your income list modal or details page here.
        }
    });

});
</script>

@endsection