@extends('Admin.layout')
<style>
    .dt-search
    {
        display: none !important;
    }
</style>
@section('navlink')
    <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Purchased Package 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">Purchased Package Report</h1>
    </div>

    <div class="d-flex gap-2">
        <a href="{{ route('purchase_package') }}" class="btn btn-primary">
            <span>Make A Purchase</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-3">
                <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-3">
                <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-12 col-md-6 col-lg-2">
                <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-2">
                <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-1">
                <button type="button" id="filterBtn"
                    class="btn btn-warning w-100">
                    Search
                </button>
            </div>

            <div class="col-6 col-lg-1">
                <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>DATE</th>
                        <th>USER ID</th>
                        <th>USER NAME</th>
                        <th>PACKAGE NAME</th>
                        <th>PLAN AMOUNT</th>
                        <th>NEXT INCOME DATE</th>
                        <th>INCOME GIVEN</th>
                        <th>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 users = [
        {
            id: 1,
            date: "2026-09-27",
            user_id: "NVX1001",
            user_name: "Arun Kumar",
            package_name: "Starter Package",
            plan_amount: 500,
            next_income_date: "2026-09-28",
            income_given: 5,
            income: 25
        },
        {
            id: 2,
            date: "2026-09-26",
            user_id: "NVX1002",
            user_name: "Priya",
            package_name: "Silver Package",
            plan_amount: 1000,
            next_income_date: "2026-09-29",
            income_given: 10,
            income: 50
        },
        {
            id: 3,
            date: "2026-09-25",
            user_id: "NVX1003",
            user_name: "Karthik",
            package_name: "Gold Package",
            plan_amount: 2500,
            next_income_date: "2026-09-30",
            income_given: 15,
            income: 125
        },
        {
            id: 4,
            date: "2026-09-24",
            user_id: "NVX1004",
            user_name: "Divya",
            package_name: "Platinum Package",
            plan_amount: 5000,
            next_income_date: "2026-10-01",
            income_given: 20,
            income: 250
        },
        {
            id: 5,
            date: "2026-09-23",
            user_id: "NVX1005",
            user_name: "Suresh",
            package_name: "Diamond Package",
            plan_amount: 10000,
            next_income_date: "2026-10-02",
            income_given: 25,
            income: 500
        }
    ];

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

        const parts = date.split("-");
        return `${parts[2]}-${parts[1]}-${parts[0]}`;
    }

    function formatAmount(amount) {
        return "$ " + Number(amount || 0).toLocaleString("en-IN", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

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

        columns: [
            {
                data: "id"
            },
            {
                data: "date",
                render: function (data, type) {
                    return type === "display" ? formatDate(data) : data;
                }
            },
            {
                data: "user_id"
            },
            {
                data: "user_name"
            },
            {
                data: "package_name"
            },
            {
                data: "plan_amount",
                render: function (data, type) {
                    return type === "display" ? formatAmount(data) : data;
                }
            },
            {
                data: "next_income_date",
                render: function (data, type) {
                    return type === "display" ? formatDate(data) : data;
                }
            },
            {
                data: "income_given"
            },
            {
                data: "income",
                render: function (data, type) {
                    return type === "display" ? formatAmount(data) : data;
                }
            }
        ],

        order: [[0, "asc"]],
        pageLength: 10,
        lengthChange: false,
        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",
            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();
    });

    // Apply filters
    $("#filterBtn").on("click", function () {
        table.draw();
    });

    // Custom date and field filtering
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable.id !== "level-income-table") {
            return true;
        }

        const user = table.row(dataIndex).data();

        const name = $("#filterName").val().trim().toLowerCase();
        const userId = $("#filterUserId").val().trim().toLowerCase();
        const fromDate = $("#fromDate").val();
        const toDate = $("#toDate").val();

        if (name && !user.user_name.toLowerCase().includes(name)) {
            return false;
        }

        if (userId && !user.user_id.toLowerCase().includes(userId)) {
            return false;
        }

        if (fromDate && user.date < fromDate) {
            return false;
        }

        if (toDate && user.date > toDate) {
            return false;
        }

        return true;
    });

    // Reset filters
    $("#resetBtn").on("click", function () {
        $("#filterName").val("");
        $("#filterUserId").val("");
        $("#fromDate").val("");
        $("#toDate").val("");
        $("#customSearch").val("");

        table.search("");
        table.draw();
    });

    // Page length
    $("#pageLength").on("change", function () {
        table.page.len(Number(this.value)).draw();
    });

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

        const headers = [
            "SNO",
            "DATE",
            "USER ID",
            "USER NAME",
            "PACKAGE NAME",
            "PLAN AMOUNT",
            "NEXT INCOME DATE",
            "INCOME GIVEN",
            "INCOME"
        ];

        const csvRows = [headers];

        rows.forEach(function (user) {
            csvRows.push([
                user.id,
                user.date,
                user.user_id,
                user.user_name,
                user.package_name,
                user.plan_amount,
                user.next_income_date,
                user.income_given,
                user.income
            ]);
        });

        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-masters-report.csv";
        document.body.appendChild(link);
        link.click();
        link.remove();

        URL.revokeObjectURL(url);
    });

});
</script>

@endsection