@include('layout.header')

<style>
    .table>:not(caption)>*>* {
        padding: 0px !important;
    }
</style>

<div class="recharge transaction">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{ url('/user/dashboard') }}">
                <img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
            </a>
            <span>Transaction</span>
        </div>
    </nav>
    <!-- HEADER -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-4 tablinks border-bottom border-primary text-center f14 py-2" id="commission"
                onclick="showContainer(this.id)">
                Commission
            </div>
            <div class="col-4 tablinks border-primary text-center f14 py-2" id="bonus"
                onclick="showContainer(this.id)">
                Bonus
            </div>
            <div class="col-4 tablinks border-primary text-center f14 py-2" id="interest"
                onclick="showContainer(this.id)">
                Interest
            </div>
        </div>
    </div>
    <!-- TABLE -->
    <div class="recharge_box">
        <div class="completed_list" id="commission_container">
            <div class="d-none form-group">
                <select class="form-control" name="state" id="maxRows">
                    <option value="5000">Show ALL Rows</option>
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="70">70</option>
                    <option value="100">100</option>
                </select>
            </div>
            <table class="table table-borderless" id="table-id">
                <thead>
                    <tr>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @if (count($user_data->commissions) > 0)
                        @foreach ($user_data->commissions as $commission)
                        <tr style="border-bottom: 1px solid #e8e8e8;">
                                <td>
                                    <div class="listItem">
                                        <div class="text">
                                            <div>
                                                <p class="p-0 m-0">Commission</p>
                                                <p class="p-0 m-0">Level</p>
                                                <p class="p-0 m-0">Date</p>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align:right;">
                                    <p class="m-0">{{ $commission->commission }}</p>
                                    @if ($commission->level1 == 1)
                                        <p class="m-0">1</p>
                                    @elseif($commission->level2 == 1)
                                        <p class="m-0">2</p>
                                    @elseif($commission->level3 == 1)
                                        <p class="m-0">3</p>
                                    @endif
                                    <p class="m-0">{{ $commission->created_at }}</p>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr class="text-center">
                            <td colspan="2">No data to show.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
            @if (count($user_data->commissions) > 10)
                <div class="pagination-container d-flex justify-content-center mb-4">
                    <nav class="d-flex justify-content-center gap-3">
                        <ul class="pagination d-flex justify-content-center align-items-center gap-3">
                            <li data-page="prev" class="pointer list-style-none">
                                <span>
                                    < <span class="sr-only">
                                </span></span>
                            </li>
                            <li data-page="next" id="prev" class="pointer list-style-none">
                                <span> > <span class="sr-only"></span></span>
                            </li>
                        </ul>
                    </nav>
                </div>
            @endif
        </div>
        <div class="completed_list" id="bonus_container" style="display:none;">
            <table class="table table-borderless" id="table-id2">
                <thead>
                    <tr>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @if (count($user_data->bonuses) > 0)
                        @foreach ($user_data->bonuses as $bonus)
                            <tr style="border-bottom: 1px solid #e8e8e8;">
                                <td>
                                    <div class="listItem">
                                        <div class="text">
                                            <div>
                                                <p class="p-0 m-0">Bonus</p>
                                                @if ($bonus->level1 == 1)
                                                    <p class="p-0 m-0">Level</p>
                                                @elseif($bonus->level2 == 1)
                                                    <p class="p-0 m-0">Level</p>
                                                @elseif($bonus->level3 == 1)
                                                    <p class="p-0 m-0">Level</p>
                                                @else
                                                    <p class="p-0 m-0">Type</p>
                                                @endif
                                                <p class="p-0 m-0">Date</p>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align:right;">
                                    <p class="m-0">{{ $bonus->bonus }}</p>
                                    @if ($bonus->level1 == 1)
                                        <p class="m-0">1</p>
                                    @elseif($bonus->level2 == 1)
                                        <p class="m-0">2</p>
                                    @elseif($bonus->level3 == 1)
                                        <p class="m-0">3</p>
                                    @elseif($bonus->comment == 'signin')
                                        <p class="m-0">Sign In</p>
                                    @elseif($bonus->comment == 'redenvelope')
                                        <p class="m-0">Red Envelope</p>
                                    @else
                                        <p class="p-0 m-0">Reward</p>
                                    @endif
                                    <p class="m-0">{{ $bonus->created_at }}</p>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr class="text-center">
                            <td colspan="2">No data to show.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
            @if (count($user_data->bonuses) > 10)
                <div class="pagination-container d-flex justify-content-center mb-4">
                    <nav class="d-flex justify-content-center gap-3">
                        <ul class="pagination2 d-flex justify-content-center align-items-center gap-3">
                            <li data-page="prev" class="pointer list-style-none">
                                <span>
                                    < <span class="sr-only">
                                </span></span>
                            </li>
                            <li data-page="next" id="prev" class="pointer list-style-none">
                                <span> > <span class="sr-only"></span></span>
                            </li>
                        </ul>
                    </nav>
                </div>
            @endif
        </div>
        <div class="completed_list" id="interest_container" style="display:none;">
            <table class="table table-borderless" id="table-id3">
                <thead>
                    <tr></tr>
                </thead>
                <tbody>
                    @if (count($user_data->interests) > 0)
                        @foreach ($user_data->interests as $interest)
                            <tr style="border-bottom: 1px solid #e8e8e8;">
                                <td>
                                    <div class="listItem">
                                        <div class="text">
                                            <div>
                                                <p class="p-0 m-0">Interest</p>
                                                <p class="p-0 m-0">Amount</p>
                                                <p class="p-0 m-0">Date</p>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align:right;">
                                    <p class="m-0">{{ $interest->interest }}</p>
                                    <p class="m-0">{{ $interest->amount }}</p>
                                    <p class="m-0">{{ $interest->created_at }}</p>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr class="text-center">
                            <td colspan="2">No data to show.</td>
                        </tr>
                    @endif
                </tbody>
            </table>

            @if (count($user_data->interests) > 10)
                <div class="pagination-container d-flex justify-content-center mb-4">
                    <nav class="d-flex justify-content-center gap-3">
                        <ul class="pagination3 d-flex justify-content-center align-items-center gap-3">
                            <li data-page="prev" class="pointer list-style-none">
                                <span>
                                    < <span class="sr-only">
                                </span></span>
                            </li>
                            <li data-page="next" id="prev" class="pointer list-style-none">
                                <span> > <span class="sr-only"></span></span>
                            </li>
                        </ul>
                    </nav>
                </div>
            @endif
        </div>
    </div>
</div>


<script>
    getPagination("#table-id", 'pagination');
    getPagination("#table-id2", 'pagination2');
    getPagination("#table-id3", 'pagination3');

    function getPagination(table, pagination_class) {
        var lastPage = 1;

        $("#maxRows")
            .on("change", function(evt) {
                lastPage = 1;
                $("." + pagination_class).find("li").slice(1, -1).remove();
                var trnum = 0; // reset tr counter
                var maxRows = 10; // get Max Rows from select option

                if (maxRows == 5000) {
                    $("." + pagination_class + "").hide();
                } else {
                    $("." + pagination_class + "").show();
                }

                var totalRows = $(table + " tbody tr").length; // numbers of rows

                $(table + " tr:gt(0)").each(function() {
                    trnum++; 
                    if (trnum > maxRows) {
                        $(this).hide(); // fade it out
                    }
                    if (trnum <= maxRows) {
                        $(this).show();
                    } // else fade in Important in case if it ..
                }); //  was fade out to fade it in
                if (totalRows > maxRows) {
                    var pagenum = Math.ceil(totalRows / maxRows);
                    for (var i = 1; i <= pagenum;) {
                        $("." + pagination_class + " #prev")
                            .before(
                                '<li class="pointer list-style-none" data-page="' +
                                i +
                                '">\
                                <span>' +
                                i++ +
                                '<span class="sr-only"></span></span>\
                              </li>'
                            )
                            .show();
                    }
                }
                $('.' + pagination_class + ' [data-page="1"]').addClass(
                "active"); // add active class to the first li
                $("." + pagination_class + " li").on("click", function(evt) {
                    evt.stopImmediatePropagation();
                    evt.preventDefault();
                    var pageNum = $(this).attr("data-page");
                    var maxRows = 10;
                    if (pageNum == "prev") {
                        if (lastPage == 1) {
                            return;
                        }
                        pageNum = --lastPage;
                    }
                    if (pageNum == "next") {
                        if (lastPage == $(".pagination li").length - 2) {
                            return;
                        }
                        pageNum = ++lastPage;
                    }
                    lastPage = pageNum;
                    var trIndex = 0;
                    $("." + pagination_class + " li").removeClass("active");
                    $('.' + pagination_class + ' [data-page="' + lastPage + '"]').addClass(
                        "active"
                    );
                    // $(this).addClass('active');					// add active class to the clicked
                    limitPagging(pagination_class);
                    $(table + " tr:gt(0)").each(function() {
                        // each tr in table not the header
                        trIndex++; // tr index counter
                        // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
                        if (
                            trIndex > maxRows * pageNum ||
                            trIndex <= maxRows * pageNum - maxRows
                        ) {
                            $(this).hide();
                        } else {
                            $(this).show();
                        } //else fade in
                    }); // end of for each tr in table
                });
                limitPagging(pagination_class);
            })
            .val(5)
            .change();
    }

    function limitPagging(pagination_class) {
        if ($("." + pagination_class + " li").length > 7) {
            if ($("." + pagination_class + " li.active").attr("data-page") <= 3) {
                $("." + pagination_class + " li:gt(5)").hide();
                $("." + pagination_class + " li:lt(5)").show();
                $('.' + pagination_class + ' [data-page="next"]').show();
            }
            if ($("." + pagination_class + " li.active").attr("data-page") > 3) {
                $("." + pagination_class + " li:gt(0)").hide();
                $('.' + pagination_class + ' [data-page="next"]').show();
                for (
                    let i =
                        parseInt($("." + pagination_class + " li.active").attr("data-page")) - 2; i <= parseInt($(
                        "." + pagination_class + " li.active").attr("data-page")) + 2; i++
                ) {
                    $('.' + pagination_class + ' [data-page="' + i + '"]').show();
                }
            }
        }
    }
</script>

@include('layout.footer')
