<?php if (isset($component)) { $__componentOriginal91fdd17964e43374ae18c674f95cdaa3 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal91fdd17964e43374ae18c674f95cdaa3 = $attributes; } ?>
<?php $component = App\View\Components\AdminLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('admin-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AdminLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php $__env->startSection('title', $page . ' | ' . get_setting('site_name')); ?>
  <div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
      <h2 class="text-2xl font-semibold text-slate-600 dark:text-navy-100 mb-4">
        <?php echo e($page); ?>

      </h2>
      <div x-data="{activeTab:'WD'}" class="tabs flex flex-col">
        <div
          class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
        >
          <div class="tabs-list flex px-1.5 py-1">
              <div
                x-data="usePopper({placement:'bottom-start',offset:4})"
                @click.outside="isShowPopper && (isShowPopper = false)"
                class="inline-flex ml-4"
              >
                <button
                  class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                  x-ref="popperRef"
                  @click="isShowPopper = !isShowPopper"
                ><i class="fas fa-window-maximize"></i>
                  <span id="st">Status</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-4 transition-transform duration-200"
                    :class="isShowPopper && 'rotate-180'"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>
                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                  <div
                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
                  >
                    <ul>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="pending"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Pending</a
                        >
                      </li>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="approved"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Approved</a
                        >
                      </li>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="rejected"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Rejected</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="flex items-center justify-between mt-3">
            <div>
                <select id="perpage" class="form-select rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"> 
                    <option value="10">10</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>
            <div>
                <input id="uid" type="search" <?php echo request('uid') ? 'value="'.request('uid').'"' : ''; ?> placeholder="User ID" aria-label="User ID" class="gridjs-input gridjs-search-input" value="">
            </div>
            <div class="flex items-center space-x-2" x-data="{ isInputActive: false, searchText: '' }">
                <!-- Search Input with Toggle -->
                <div class="flex items-center">
                    <label class="block">
                        <input x-model="searchText" x-transition x-effect="isInputActive === true &amp;&amp; $nextTick(() => { $el.focus()});" :class="isInputActive ? 'w-32 lg:w-48' : 'w-0'" class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200 w-0" placeholder="Search here..." type="text" id="search" autocomplete="new-password">
                    </label>
                    <button @click="isInputActive = !isInputActive" class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                      </button>
                </div>
            </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'WD'"
            x-transition:enter="transition-all duration-500 easy-in-out"
            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
          >
          <div id="table" x-data x-init>
            <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
              <table x-ref="" class="w-full text-left">
                <thead>
                  <tr>
                    <th class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> Username </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> User ID </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> Country </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> Ip </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> Transaction </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> Balance </th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Date</th>
                    <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Action</th>
                  </tr>
                </thead>
                <tbody id="offerwalls">
                  <tr>
                    <td colspan="8" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td>
                  </tr>
                </tbody>
              </table>
            </div>
            </div>
            <div><div x-ref="wrapper"></div></div>
            <!-- Pagination -->
            <div id="pagination" class="mt-4 flex justify-center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
<?php $__env->startPush('scripts'); ?>
<script>
$(document).ready(function() {
    let ajaxRequest;
    let debounceTimer;
    let curStatus = 0;
    let curQuery = '';
    let newq;
    let uid;
    let perPage = 10;
    function loadHistory(page = 1, status = 0, query = '') {
      curQuery = query;
      curStatus = status;
      if (ajaxRequest) {
        ajaxRequest.abort();
      }
      uid = $('#uid').val();
      newq = 'table'+page+status;

      ajaxRequest = $.ajax({
        url: "/admin/offerwall/load/"+status+"/"+uid,
        type: "GET",
        data: { page: page, search: query, perpage: perPage },
        dataType: "json",
        beforeSend: function () {
            const table = document.querySelector('table[x-ref]');
            if (table) {
              table.setAttribute('x-ref', newq);
            }
            removeGridAttributes();
            $('[x-ref="wrapper"]').empty();
            $("#offerwalls").html('<tr><td colspan="8" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td></tr>');
        },
        success: function (data) {
            var html = "";
            if (data.records.length > 0) {
                data.records.forEach(function (item) {
                  html += `
                    <tr id="leadid${item.id}" class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                    <td class="whitespace-nowrap px-4 py-3 sm:px-5"><a href="/admin/user/${item.user_id}" target="_blank" class="text-primary">${item.username}</a></td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                          ${item.user_id}
                      </td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.country}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.ip}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.transaction}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.reward}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.date}</td>
                      <td class="flex items-center">
                        ${item.status.text == 'Pending' ? `
                            <button class="btn-approve mt-1 edit-btn btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90" data-id="${item.id}">Approve</button>
                        ` : ''}
                        ${item.status.text == 'Pending' ? `
                            <button class="btn-reject mt-1 btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90" data-id="${item.id}">Reject</button>
                        ` : ''}
                      </td>
                    </tr>`;
                });
          } else {
            html = '<tr><td colspan="8" class="text-center py-4">No data available</td></tr>';
          }
          $("#offerwalls").html(html);
        const init = document.querySelector('#table');
        init.setAttribute('x-init', "if ($el._x_grid) {$el._x_grid.destroy();}$el._x_grid = new Gridjs.Grid({from: $refs."+newq+", sort: true, search: false}).render($refs.wrapper);");
        var paginationHtml = `
            <ol class="pagination">
                <li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
                    <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.prev_page}" ${data.prev_page ? "" : "disabled"}>
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>
                </li>`;
        
        var startPage = Math.max(1, data.current_page - 2);
        var endPage = Math.min(data.total_pages, startPage + 4);
        
        if (startPage > 1) {
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="1">1</a>
            </li>`;
            if (startPage > 2) {
                paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
            }
        }
        
        for (var i = startPage; i <= endPage; i++) {
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 ${i === data.current_page ? 'bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90' : 'leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90'}" data-page="${i}">${i}</a>
            </li>`;
        }
        
        if (endPage < data.total_pages) {
            if (endPage < data.total_pages - 1) {
                paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
            }
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.total_pages}">${data.total_pages}</a>
            </li>`;
        }
        
        paginationHtml += `
            <li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.next_page}" ${data.next_page ? "" : "disabled"}>
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </li>
        </ol>`;
        
        $("#pagination").html(paginationHtml);

        },
      });
    }

    $("#pending").click(function() {
        $("#st").text('Pending');
        loadHistory(1, 0, curQuery);
    });

    $("#approved").click(function() {
        $("#st").text('Approved');
        loadHistory(1, 1, curQuery);
    });
    
    $("#rejected").click(function() {
        $("#st").text('Rejected');
        loadHistory(1, 2, curQuery);
    });
    $("#st").text('Approved');
    loadHistory(1, 1);
    $(document).on("click", ".pagination-btn", function (e) {
      e.preventDefault();
      var page = $(this).data("page");
      if (page) loadHistory(page, curStatus, curQuery);
    });
    
    $(document).on("click", ".btn-approve", function () {
        let id = $(this).data("id");
        updateStatus(id, 1);
    });
    
    $(document).on("click", ".btn-reject", function () {
        let id = $(this).data("id");
        updateStatus(id, 2);
    });
    let theme = localStorage.getItem("_x_darkMode_on") === "true" ? "dark" : "light";
  function removeGridAttributes() {
    $('#table').removeAttr('x-data');
    $('#table').removeAttr('x-init');
  }
    function updateStatus(id, status) {
        $.ajax({
            url: "/admin/offerwall/update-status",
            type: "POST",
            data: {
                _token: $('meta[name="csrf-token"]').attr("content"), 
                id: id,
                status: status
            },
                success: function(response) {
                    if (response.success) {
                        $("#leadid" + id).remove();
                        let swalOptions = {
                            icon: "success",
                            title: "Success!",
                            html: `<p>${response.message}</p>`,
                            toast: true,
                            position: "bottom-end",
                            showConfirmButton: false,
                            customClass: {
                                popup: "toast-popup",
                                title: "toast-title",
                                content: "toast-content"
                            },
                            showCloseButton: true,
                            closeButtonHtml: "<i class='fas fa-times'></i>"
                        };
                        
                        if (theme === "dark") {
                            swalOptions.background = "#1E293B";
                            swalOptions.color = "#F8FAFC";
                            swalOptions.confirmButtonColor = "#4F46E5";
                        }

                        Swal.fire(swalOptions);

                        loadHistory(1, 0, curQuery);
                    } else {
                        let swalOptions = {
                            icon: "error",
                            title: "Failed!",
                            html: `<p>${response.error}</p>`,
                            toast: true,
                            position: "bottom-end",
                            showConfirmButton: false,
                            customClass: {
                                popup: "toast-popup",
                                title: "toast-title",
                                content: "toast-content"
                            },
                            showCloseButton: true,
                            closeButtonHtml: "<i class='fas fa-times'></i>"
                        };
                        
                        if (theme === "dark") {
                            swalOptions.background = "#1E293B";
                            swalOptions.color = "#F8FAFC";
                            swalOptions.confirmButtonColor = "#4F46E5";
                        }
                        
                        Swal.fire(swalOptions);
                    }
                },
            error: function () {
                alert("Error updating status!");
            }
        });
    }
    $("#uid").on("keyup change", function() {
        $("#users-table").html('<tr><td colspan="8" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td></tr>');
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            loadHistory(1, curStatus);
        }, 1000);
    });
    $("#search").on("keyup", function() {
        $("#users-table").html('<tr><td colspan="8" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td></tr>');
        clearTimeout(debounceTimer);
        let query = $(this).val();
        debounceTimer = setTimeout(() => {
            loadHistory(1, curStatus, query);
        }, 1000);
    });
    $('#perpage').on('change', function() {
        let number = $(this).val();
        perPage = number;
        loadHistory(1, curStatus);
    });
});
</script>

<?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal91fdd17964e43374ae18c674f95cdaa3)): ?>
<?php $attributes = $__attributesOriginal91fdd17964e43374ae18c674f95cdaa3; ?>
<?php unset($__attributesOriginal91fdd17964e43374ae18c674f95cdaa3); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal91fdd17964e43374ae18c674f95cdaa3)): ?>
<?php $component = $__componentOriginal91fdd17964e43374ae18c674f95cdaa3; ?>
<?php unset($__componentOriginal91fdd17964e43374ae18c674f95cdaa3); ?>
<?php endif; ?>
<?php /**PATH /home/bitcoscript/public_html/update.bitcoscript.com/resources/views/admin/history/offerwall.blade.php ENDPATH**/ ?>