@extends('User.layout')
<style>
    .dt-search {
        display: none !important;
    }
</style>
@section('navlink')
    <a href="{{ route('user.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('user.purchase_package') }}" 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="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>DATE</th>
                            <th>PACKAGE NAME</th>
                            <th>USDT</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() {

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

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

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('user.purchased_package_data') }}",
                    type: "GET",
                    data: function(d) {

                        d.from_date = $("#fromDate").val();
                        d.to_date = $("#toDate").val();

                    }
                },

                columns: [

                    {
                        data: "DT_RowIndex",
                        name: "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: "date",
                        name: "purchased_date"
                    },

                    {
                        data: "package_name",
                        name: "package.package_name",
                        orderable: false
                    },

                    {
                        data: "plan_amount",
                        name: "usdt",
                        orderable: true,
                        searchable: false
                    }

                ],

                order: [
                    [1, "desc"]
                ],

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                info: true,

                paging: true,

                autoWidth: false,

                scrollX: true,

                language: {
                    search: "",
                    searchPlaceholder: "Search",
                    emptyTable: "No purchased packages 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();

            });


            // Date filter
            $("#fromDate, #toDate").on("change", function() {

                table.ajax.reload();

            });


            // Reset filters
            $("#resetBtn").on("click", function() {

                $("#fromDate").val("");
                $("#toDate").val("");
                $("#customSearch").val("");

                table.search("");

                table.ajax.reload();

            });


            // Page length
            $("#pageLength").on("change", function() {

                table.page.len(Number(this.value)).draw();

            });


            // Excel / CSV export
            $("#exportBtn").on("click", function() {

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

                let url = "{{ route('user.purchased_package_data') }}";

                const params = new URLSearchParams();

                params.append("export", "1");

                if (fromDate) {
                    params.append("from_date", fromDate);
                }

                if (toDate) {
                    params.append("to_date", toDate);
                }

                if (search) {
                    params.append("search", search);
                }

                window.location.href = url + "?" + params.toString();

            });

        });
    </script>
@endsection