@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 Rank Income</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 Rank Income</h1>
    </div>

     <div class="d-flex gap-2">
        <a href="{{ route('generate_rank_income') }}" class="btn btn-primary">
            <span>Generate</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="fromDate" class="form-label small">From Date</label>
                <input type="date" id="fromDate" class="form-control">
            </div>

            <div class="col-12 col-md-6 col-lg-5">
                <label for="toDate" class="form-label small">To Date</label>
                <input type="date" id="toDate" class="form-control">
            </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>CREATED DATE</th>
        <th>GENERATED DATE</th>
        <th>TYPE</th>
        <th>TOTAL ENTRIES</th>
        <th>INCOME LIST</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: "2026-09-28 10:30:00",
            generated_date: "2026-09-28 10:35:00",
            type: "Manual",
            total_entries: 25,
            income_list: "View"
        },
        {
            id: 2,
            created_date: "2026-09-27 09:15:00",
            generated_date: "2026-09-27 09:20:00",
            type: "Cron",
            total_entries: 50,
            income_list: "View"
        },
        {
            id: 3,
            created_date: "2026-09-26 11:00:00",
            generated_date: "2026-09-26 11:05:00",
            type: "Manual",
            total_entries: 18,
            income_list: "View"
        },
        {
            id: 4,
            created_date: "2026-09-25 08:00:00",
            generated_date: "2026-09-25 08:05:00",
            type: "Cron",
            total_entries: 42,
            income_list: "View"
        }
    ];

    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",
                render: function (data, type) {
                    return type === "display" ? formatDate(data) : data;
                }
            },
            {
                data: "generated_date",
                render: function (data, type) {
                    return type === "display" ? formatDate(data) : data;
                }
            },
            {
                data: "type",
                render: function (data, type) {
                    if (type !== "display") return data;

                    const badgeClass = data === "Manual"
                        ? "bg-primary"
                        : "bg-success";

                    return `<span class="badge ${badgeClass}">${data}</span>`;
                }
            },
            {
                data: "total_entries"
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    if (type !== "display") return "";

                    return `
                        <a href="{{ route('generate_rank_income_list') }}" type="button"
                            class="btn btn-sm btn-outline-primary view-income"
                            data-id="${row.id}">
                            <i class="ti ti-eye me-1"></i> View
                        </a>
                    `;
                }
            }
        ],

        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