@include('layout.header')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<div class="recharge orders bg-transparent">
    <!-- HEADER -->
    <nav class="top_nav shadow-none">
        <div class="left">
            <a href="{{ url('/user/dashboard') }}">
                <img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
            </a>
            <span>Orders</span>
        </div>
    </nav>

    <div class="top_nav shadow-sm w-100 h-100 pt-3">
        <div class="tab">
            <button class="tablinks f18 active" onclick="openOrdersTab(this, 'all')">
                ALL
            </button>
            <button class="tablinks f18" onclick="openOrdersTab(this, 'undelivered')">
                UNDELIVER
            </button>
            <button class="tablinks f18" onclick="openOrdersTab(this, 'unreceived')">
                UNRECEIVE
            </button>
            <button class="tablinks f18" onclick="openOrdersTab(this, 'success')">
                SUCCESS
            </button>
        </div>
    </div>

    <div id="all" class="tabcontent" style="display: block;">
        <div class="completed_list">
            <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>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($bettings) > 0)
                    @foreach ($bettings as $betting)
                    <tr>
                        <td>
                            <div class="listItem">
                                <div class="image">
                                    @if ($betting->status == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif ($betting->status == 1)
                                    @if ($betting->result == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif($betting->result == 1)
                                    <div class="iconBox bg-success">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @endif
                                    @endif
                                </div>
                                <div class="text">
                                    <div>
                                        <strong>Join Period</strong>
                                        <strong>{{ $betting->game_id }}</strong>
                                        <small>{{ $betting->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                        </td>
                        @if ($betting->status == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #212529!important;">{{ $betting->value }}</td>
                        @elseif ($betting->status == 1)
                        @if ($betting->result == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #dc3545!important;">{{ $betting->value }}</td>
                        @elseif($betting->result == 1)
                        <td class="tdtext2 " style="font-weight: bold; color: #198754!important;">{{ $betting->value }}</td>
                        @endif
                        @endif
                    </tr>
                    @endforeach
                    @else
                    <tr class="text-center">
                        <td>No data to show.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            @if (count($bettings) > 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">
                            <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 id="undelivered" class="tabcontent" style="display: none;">
        <div class="completed_list">
            <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-id2">
                <thead>
                    <tr></tr>
                </thead>
                <tbody>
                    @if (count($pending_bettings) > 0)
                    @foreach ($pending_bettings as $betting)
                    <tr>
                        <td>
                            <div class="listItem">
                                <div class="image">
                                    @if ($betting->status == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif ($betting->status == 1)
                                    @if ($betting->result == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif($betting->result == 1)
                                    <div class="iconBox bg-success">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @endif
                                    @endif
                                </div>
                                <div class="text">
                                    <div>
                                        <strong>Join Period</strong>
                                        <strong>{{ $betting->game_id }}</strong>
                                        <small>{{ $betting->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                        </td>
                        @if ($betting->status == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #212529!important;">{{ $betting->value }}</td>
                        @elseif ($betting->status == 1)
                        @if ($betting->result == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #dc3545!important;">{{ $betting->value }}</td>
                        @elseif($betting->result == 1)
                        <td class="tdtext2 " style="font-weight: bold; color: #198754!important;">{{ $betting->value }}</td>
                        @endif
                        @endif
                    </tr>
                    @endforeach
                    @else
                    <tr class="text-center">
                        <td>No data to show.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            @if (count($pending_bettings) > 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>

    <div id="unreceived" class="tabcontent" style="display: none;">
        <div class="completed_list">
            <table class="table table-borderless" id="table-id3">
                <thead>
                    <tr>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                        <th class="f12 py-3 text-center"></th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($lost_bettings) > 0)
                    @foreach ($lost_bettings as $betting)
                    <tr>
                        <td>
                            <div class="listItem">
                                <div class="image">
                                    @if ($betting->status == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif ($betting->status == 1)
                                    @if ($betting->result == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif($betting->result == 1)
                                    <div class="iconBox bg-success">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @endif
                                    @endif
                                </div>
                                <div class="text">
                                    <div>
                                        <strong>Join Period</strong>
                                        <strong>{{ $betting->game_id }}</strong>
                                        <small>{{ $betting->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                        </td>
                        @if ($betting->status == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #212529!important;">{{ $betting->value }}</td>
                        @elseif ($betting->status == 1)
                        @if ($betting->result == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #dc3545!important;">{{ $betting->value }}</td>
                        @elseif($betting->result == 1)
                        <td class="tdtext2 " style="font-weight: bold; color: #198754!important;">{{ $betting->value }}</td>
                        @endif
                        @endif
                    </tr>
                    @endforeach
                    @else
                    <tr class="text-center">
                        <td>No data to show.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            @if (count($lost_bettings) > 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 id="success" class="tabcontent" style="display: none;">
        <div class="completed_list">

            <table class="table table-borderless" id="table-id4">
                <thead>
                    <tr></tr>
                </thead>
                <tbody>
                    @if (count($won_bettings) > 0)
                    @foreach ($won_bettings as $betting)
                    <tr>
                        <td>
                            <div class="listItem">
                                <div class="image">
                                    @if ($betting->status == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif ($betting->status == 1)
                                    @if ($betting->result == 0)
                                    <div class="iconBox bg-danger">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @elseif($betting->result == 1)
                                    <div class="iconBox bg-success">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    @endif
                                    @endif
                                </div>
                                <div class="text">
                                    <div>
                                        <strong>Join Period</strong>
                                        <strong>{{ $betting->game_id }}</strong>
                                        <small>{{ $betting->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                        </td>
                        @if ($betting->status == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #212529!important;">{{ $betting->value }}</td>
                        @elseif ($betting->status == 1)
                        @if ($betting->result == 0)
                        <td class="tdtext2 " style="font-weight: bold; color: #dc3545!important;">{{ $betting->value }}</td>
                        @elseif($betting->result == 1)
                        <td class="tdtext2 " style="font-weight: bold; color: #198754!important;">{{ $betting->value }}</td>
                        @endif
                        @endif
                    </tr>
                    @endforeach
                    @else
                    <tr class="text-center">
                        <td>No data to show.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            @if (count($won_bettings) > 10)
            <div class="pagination-container d-flex justify-content-center mb-4">
                <nav class="d-flex justify-content-center gap-3">
                    <ul class="pagination4 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>

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


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