@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>My 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">My Withdrawals</h1>
        </div>

        <div class="d-flex gap-2">
            <a href="{{ route('user.withdraw') }}" 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>S.No</th>
                            <th>Date</th>
                            <th>Withdraw Amount</th>
                            <th>Status</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 table = new DataTable("#level-income-table", {

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('user.withdrawal_data') }}",
                    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: "created_at"
                    },
                    {
                        data: "withdraw_amount",
                        name: "withdraw_amount"
                    },
                    {
                        data: "status",
                        name: "status"
                    }
                ],

                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 withdrawal 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();
            });


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


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

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

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


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

        });
    </script>
@endsection