@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>Withdrawals</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">Withdrawals</h1>
    </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>USER ID</th>
        <th>USER NAME</th>
        <th>Withdrawal AMOUNT ($)</th>
        <th>Remaining AMOUNT ($)</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 withdrawals = [
        {
            id: 1,
            date: "2026-09-28 10:30:00",
            user_id: "NVX1001",
            user_name: "Arun Kumar",
            amount: 250,
            payment_method: "Bank Transfer",
            transaction_id: "124",
            status: "Pending"
        },
      
    ];

    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: withdrawals,

        columns: [
            {
                data: "id"
            },
            {
                data: "date",
                render: function (data, type) {
                    return type === "display" ? formatDate(data) : data;
                }
            },
            {
                data: "user_id"
            },
            {
                data: "user_name"
            },
            {
                data: "amount",
                render: function (data, type) {
                    return type === "display"
                        ? "$ " + Number(data).toLocaleString("en-IN", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })
                        : data;
                }
            },
            {
                data: "transaction_id",
                  render: function (data, type) {
                    return type === "display"
                        ? "$ " + Number(data).toLocaleString("en-IN", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })
                        : data;
                }
            },
           
        ],

        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 withdrawal 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 withdrawal details
    $("#withdrawal-table").on("click", ".view-withdrawal", function () {
        const id = $(this).data("id");
        const withdrawal = withdrawals.find(item => item.id == id);

        if (withdrawal) {
            console.log("Withdrawal details:", withdrawal);

            // Open your withdrawal details modal here.
        }
    });

});
</script>
@endsection