@include('layout.header')

<!-- RECHARGE -->
<div class="recharge promotion">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{ url('/user/dashboard') }}"><img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
            </a>
            <span>Promotion</span>
        </div>
    </nav>
    <div class="pro_content">
        <div class="container_">
            <div class="headline">Comission:₹ <span>{{ $total_commission }}</span></div>
        </div>
        <div class="level_box">
            <div class="level_content">
                <div class="level_list">
                    <ul class="layout list-unstyled">
                        <li>
                            <ol>
                                Total People
                            </ol>
                            <ol class="two_ol">
                                {{ count($total_users) }}
                            </ol>
                        </li>
                        <li>
                            <ol>
                                Contribution
                            </ol>
                            <ol class="two_ol">
                                ₹ {{ $contribution }}
                            </ol>
                        </li>
                    </ul>
                    <div class="layout_bot">
                        <div class="bot_list">
                            <p class="titles">My Promotion Code</p>
                            <p class="answer">{{ $user->owncode }}</p>
                        </div>
                        <div class="bot_list">
                            <p class="titles">My Promotion Link</p>
                            <p class="answer heights">
                                <span id="rlink">{!! url('/register?rcode=' . $user->owncode) !!}</span>
                            </p>
                        </div>
                    </div>
                    <div class="openlink">
                        <button onclick="return toastShow('Link Copied!')" class="btn copyBtn" style="width: 100%;" data-clipboard-text="{!! url('/register?rcode=' . $user->owncode) !!}">Copy Link</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="van-tabs van-tabs--line" style="margin-bottom: 50px">
            <div class="van-tabs__wrap">
                <div class="van-tabs__nav van-tabs__nav--line">
                    <div class="tablinks van-tab van-tab--active py-4" id="l1btn" onclick="openCity(this, 'l1')">
                        <span class="van-tab__text van-tab__text--ellipsis">Level 1（{{ $level1_users }}）</span>
                    </div>
                    <div class="tablinks van-tab py-4" id="l2btn" onclick="openCity(this, 'l2')">
                        <span class="van-tab__text van-tab__text--ellipsis">Level 2（{{ $level2_users }}）</span>
                    </div>
                    <div class="tablinks van-tab py-4" id="l3btn" onclick="openCity(this, 'l3')">
                        <span class="van-tab__text van-tab__text--ellipsis">Level 3（{{ $level3_users }}）</span>
                    </div>
                    <div class="van-tabs__line" style="
                  width: 0px;
                  transform: translateX(189px) translateX(-50%);
                  height: 0px;
                  border-radius: 0px;
                  transition-duration: 0.3s;
                ">
                    </div>
                </div>
            </div>

            <div class="van-search">
                <div class="van-search__content van-search__content--square">
                    <div class="van-cell van-cell--borderless van-field">
                        <div class="van-field__left-icon">
                            <svg class="van-icon van-icon-search" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" stroke="#000" stroke-width="2" d="M15,15 L22,22 L15,15 Z M9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 Z">
                                </path>
                            </svg>
                        </div>
                        <div class="van-cell__value van-cell__value--alone van-field__value w-100">
                            <div class="van-field__body w-100">
                                <input type="search" placeholder="search" class="van-field__control w-100" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-3 pb-2">
                <div id="section_l1" style="display:block;">
                    <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-class" id="l1" style="display: table;">
                        <thead>
                            <tr>
                                <th class="f12 py-3 text-center">ID</th>
                                <th class="f12 py-3 text-center">Phone</th>
                                <th class="f12 py-3 text-center">Water reward</th>
                                <th class="f12 py-3 text-center">Reward</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($level1_users > 0)
                            @foreach ($total_users as $key => $bonus)

                            @if ($bonus->level1 == 1)
                            <tr>
                                <td class="text-center" colspan="1">{{ $bonus->user_id }}</td>
                                @if(isset($bonus->fromUser->mobile))
                                <td class="text-center" colspan="1">{{ $bonus->fromUser->mobile }}</td>
                                @else
                                <td class="text-center" colspan="1"></td>
                                @endif
                                <td class="text-center" colspan="1">
                                    @if (isset($bonus->fromUser))
                                    {{ myCommissionFromUser($bonus->fromUser->id) }}
                                    @endif
                                </td>
                                <td class="text-center" colspan="1">{{ myBonusFromUser($bonus->user_id) }}</td>
                            </tr>
                            @endif
                            @endforeach
                            @else
                            <tr>
                                <td class="text-center" colspan="4">No data available.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($level1_users > 10)
                    <div class="pagination-container d-flex justify-content-center mb-4">
                        <nav class="d-flex justify-content-center gap-3">
                            <ul class="pagination1 d-flex justify-content-center align-items-center gap-3" style="list-style: none;">
                                <li data-page="prev" class="pointer">
                                    <span>
                                        < <span class="sr-only">
                                    </span></span>
                                </li>
                                <!--	Here the JS Function Will Add the Rows -->
                                <li data-page="next" id="prev" class="pointer">
                                    <span> > <span class="sr-only"></span></span>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    @endif

                </div>
                <div id="section_l2" style="display:none;">
                    <table class="table table-class" id="l2" style="display:none;">
                        <thead>
                            <tr>
                                <th class="f12 py-3 text-center">ID</th>
                                <th class="f12 py-3 text-center">Phone</th>
                                <th class="f12 py-3 text-center">Water reward</th>
                                <th class="f12 py-3 text-center">Reward</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($level2_users > 0)
                            @foreach ($total_users as $key => $bonus)
                            @if ($bonus->level2 == 1)
                            <tr>
                                <td class="text-center" colspan="1">{{ $bonus->user_id }}</td>
                                <td class="text-center" colspan="1">
                                    @if (isset($bonus->fromUser))
                                    {{ $bonus->fromUser->mobile }}
                                    @endif
                                </td>
                                <td class="text-center" colspan="1">
                                    @if (isset($bonus->fromUser))
                                    {{ myCommissionFromUser($bonus->fromUser->id) }}
                                    @endif
                                </td>
                                <td class="text-center" colspan="1">{{ myBonusFromUser($bonus->user_id) }}</td>
                            </tr>
                            @endif
                            @endforeach
                            @else
                            <tr>
                                <td class="text-center" colspan="4">No data available.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($level2_users > 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" style="list-style: none;">
                                <li data-page="prev" class="pointer">
                                    <span>
                                        < <span class="sr-only">
                                    </span></span>
                                </li>
                                <!--	Here the JS Function Will Add the Rows -->
                                <li data-page="next" id="prev" class="pointer">
                                    <span> > <span class="sr-only"></span></span>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    @endif
                </div>
                <div id="section_l3" style="display:none;">
                    <table class="table table-class" id="l3" style="display:none;">
                        <thead>
                            <tr>
                                <th class="f12 py-3 text-center">ID</th>
                                <th class="f12 py-3 text-center">Phone</th>
                                <th class="f12 py-3 text-center">Water reward</th>
                                <th class="f12 py-3 text-center">Reward</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($level3_users > 0)
                            @foreach ($total_users as $key => $bonus)
                            @if ($bonus->level3 == 1)
                            <tr>
                                <td class="text-center" colspan="1">{{ $bonus->user_id}}</td>
                                <td class="text-center" colspan="1">
                                    @php
                                    if(isset($bonus->fromUser->mobile)) {
                                    echo $bonus->fromUser->mobile;
                                    }
                                    @endphp
                                </td>
                                <td class="text-center" colspan="1">
                                    @if (isset($bonus->fromUser))
                                    {{ myCommissionFromUser($bonus->fromUser->id) }}
                                    @endif
                                </td>
                                <td class="text-center" colspan="1">{{ myBonusFromUser($bonus->user_id) }}</td>
                            </tr>
                            @endif
                            @endforeach
                            @else
                            <tr>
                                <td class="text-center" colspan="4">No data available.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                    @if ($level3_users > 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" style="list-style: none;">
                                <li data-page="prev" class="pointer">
                                    <span>
                                        < <span class="sr-only">
                                    </span></span>
                                </li>
                                <!--	Here the JS Function Will Add the Rows -->
                                <li data-page="next" id="prev" class="pointer">
                                    <span> > <span class="sr-only"></span></span>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- BODY -->
</div>

<!-- RECHARGE -->


<script>
    getPagination("#l1", 'pagination1');
    getPagination("#l2", 'pagination2');
    getPagination("#l3", 'pagination3');

    function getPagination(table, pagination_class) {
        var lastPage = 1;
        $("#maxRows")
            .on("change", function(evt) {
                //$('.paginationprev').html('');						// reset pagination
                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() {
                    // each TR in  table and not the header
                    trnum++; // Start Counter
                    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" 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
                }); // end of on click pagination list
                limitPagging(pagination_class);
            })
            .val(5)
            .change();
        // end of on select change
        // END OF PAGINATION
    }

    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')