@extends('Admin.layout')
<link href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@section('content')
@section('navlink')
<a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a> / <span>Wallet Deposit Report</span>
@endsection
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Wallet Deposit Report</h1>
    </div>
    <div class="d-flex gap-2">
       <a href="javascript:history.back()" class="btn-back">
    <i class="ti ti-arrow-left"></i>
    <span>Back</span>
</a>
    </div>
</div>

<!-- TABLE CARD -->
<div class="card card-animated-border mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0 text-gold">All Users</h3>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm">Export</button>
        </div>
    </div>
   
<div class="table-responsive">
        <table class="table table-striped align-middle mb-0" id="users-table">
        <thead>
            <tr>
                <th>SNO</th>
                <th>DATE</th>
                <th>USER ID</th>
                <th>USER NAME</th>
                <th>PAYOUT MODE</th>
                <th>AMOUNT</th>
                <th>TRANSACTION HASH</th>
                <th>RECEIPT</th>
                <th>MODE</th>
                <th>ACTION</th>
            </tr>
        </thead>
        <tbody id="users-tableBody"></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 = [
       
        {
            sno: 3,
            date: "25-09-2026",
            user_id: "USR1003",
            user_name: "Rahul Raj",
            payout_mode: "Bank Transfer",
            amount: 35000,
            transaction_hash: "TXN7C62F987654",
            receipt: "receipt_003.pdf",
            mode: "Offline",
            action: "Approved"
        },
        {
            sno: 4,
            date: "24-09-2026",
            user_id: "USR1004",
            user_name: "Divya S",
            payout_mode: "UPI",
            amount: 10000,
            transaction_hash: "TXN6D52F123789",
            receipt: "receipt_004.pdf",
            mode: "Online",
            action: "Rejected"
        }
    ];

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

        columns: [
            {
                data: "sno"
            },
            {
                data: "date"
            },
            {
                data: "user_id"
            },
            {
                data: "user_name"
            },
            {
                data: "payout_mode"
            },
            {
                data: "amount",
                render: function (data, type) {
                    if (type === "display") {
                        return "₹" + Number(data).toLocaleString("en-IN");
                    }
                    return data;
                }
            },
            {
                data: "transaction_hash"
            },
            {
                data: "receipt",
                orderable: false,
                render: function (data) {
                    return `
                        <a href="${data}"
                           target="_blank"
                           class="btn btn-sm btn-outline-primary">
                            <i class="ti ti-file-download me-1"></i>
                            View
                        </a>
                    `;
                }
            },
            {
                data: "mode"
            },
            {
                data: "action",
                orderable: false,
                render: function (data, type, row) {
                    if (type !== "display") {
                        return data;
                    }

                    if (data === "Pending") {
                        return `
                            <div class="d-flex gap-2">
                                <button type="button"
                                        class="btn btn-sm btn-outline-success accept-user"
                                        data-id="${row.user_id}">
                                    <i class="ti ti-check me-1"></i>
                                    Accept
                                </button>

                                <button type="button"
                                        class="btn btn-sm btn-outline-danger reject-user"
                                        data-id="${row.user_id}">
                                    <i class="ti ti-x me-1"></i>
                                    Reject
                                </button>
                            </div>
                        `;
                    }

                    const statusClass = {
                        Approved: "bg-success",
                        Rejected: "bg-danger"
                    };

                    return `
                        <span class="badge ${statusClass[data] || "bg-secondary"}">
                            ${data}
                        </span>
                    `;
                }
            }
        ],

        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 users...",
            emptyTable: "No users available",
            zeroRecords: "No matching users 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"
            }
        ]
    });

 
});
</script>

@endsection