<?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">
      <div x-data="{activeTab:'ADVERTISE'}" 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">
            <button
              @click="activeTab = 'ADVERTISE'"
              :class="activeTab === 'ADVERTISE' ? 'bg-white shadow dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
              class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
            >
            <i class="fas fa-bullhorn"></i>
              <span>Create Ad</span>
            </button>
              <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>User Ads</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 = 'MYAD'"
                          id="pending-ad"
                          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 = 'MYAD'"
                          id="active-ad"
                          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"
                          >Active</a
                        >
                      </li>
                      <li>
                        <a
                          @click="activeTab = 'MYAD'"
                          id="rejected-ad"
                          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>
                      <li>
                        <a
                          @click="activeTab = 'MYAD'"
                          id="ended-ad"
                          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"
                          >Ended</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'ADVERTISE'"
            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 class="card px-4 pb-4 sm:px-5">
                <form action="/admin/advertise/ptc/store" method="POST" class="mt-4">
                  <?php echo csrf_field(); ?>
                  <div class="space-y-4">
                    <div> 
                      <label class="block text-sm font-medium py-3">Name:</label>
                      <input id="name" name="name" type="text" placeholder="Website Name" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" required/>
                    </div>
                    <div> 
                      <label class="block text-sm font-medium py-3">Description:</label>
                      <textarea id="description" name="description" placeholder="Website Description" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" required></textarea>
                    </div>
                    <div> 
                      <label class="block text-sm font-medium py-3">URL:</label>
                      <input id="url" name="url" type="url" placeholder="https://example.com/" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" required/>
                    </div>
                    <div>
                        <label class="block text-sm font-medium py-3">Select Countries:</label>
                          <div class="flex items-center space-x-3">
                            <label class="inline-flex items-center space-x-2">
                              <input type="hidden" name="select_all" value="0" />
                              <input
                                id="selectAllCountries"
                                name="select_all"
                                type="checkbox"
                                value="1"
                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
                              />
                            </label>
                            <span class="text-sm">Select All</span>
                          
                            <label class="block w-full" id="countrySelectContainer">
                                <select 
                                    id="countrySelect"
                                    x-init="$el._tom = new Tom($el)"
                                    class="mt-1.5 w-full"
                                    name="countries[]"
                                    multiple
                                    placeholder="Select a country..."
                                    autocomplete="off"
                                >
                                    <?php $__currentLoopData = get_setting('countries'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $code => $country): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($code); ?>"><?php echo e($country); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
                        <div>
                          <label class="block text-sm font-medium py-3">Type:</label>
                          <div class="flex items-center space-x-3">
                            <span class="text-sm">Iframe</span>
                            <label class="inline-flex items-center space-x-2">
                              <input type="hidden" name="type" value="0" />
                              <input
                                id="type"
                                name="type"
                                type="checkbox"
                                value="1"
                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
                              />
                            </label>
                            <span class="text-sm">Window</span>
                          </div>
                        </div>
                        <div> 
                          <label class="block text-sm font-medium py-3">Timer:</label>
                          <input id="timer" name="timer" type="number" placeholder="<?php echo e(get_setting('ptc_min_timer')); ?>" min="<?php echo e(get_setting('ptc_min_timer')); ?>" max="<?php echo e(get_setting('ptc_max_timer')); ?>" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" required/>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
                        <div> 
                          <label class="block text-sm font-medium py-3">Views:</label>
                          <input id="views" name="views" type="views" placeholder="<?php echo e(get_setting('ptc_min_views')); ?>" min="<?php echo e(get_setting('ptc_min_views')); ?>" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" required/>
                        </div>
                        <div> 
                          <label class="block text-sm font-medium py-3">Daily Limit:</label>
                          <input id="limit_per_day" name="limit_per_day" type="number" placeholder="0" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
                        </div>
                    </div>
                    <button type="submit" 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">Submit</button>
                  </div>
                </form>
                <div class="mt-4">
                    <label class="block text-sm font-medium py-3">Estimated Price:</label>
                    <p class="text-lg font-semibold text-primary" id="estimatedPrice">$0.00</p>
                </div>
              </div>
          </div>
          <div
            x-show="activeTab === 'MYAD'"
            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 class="overflow-x-auto">
              <table class="is-hoverable 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"> Name </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"> Url </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"> Remaining Views </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"> Today Views </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"> Total Views </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="ad-table">
                  <tr>
                    <td colspan="7" 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>
            
            <!-- Pagination -->
            <div id="pagination" class="mt-4 flex justify-center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
<?php $__env->startPush('scripts'); ?>
<script>
var pricePerSecIframe = <?php echo e(get_setting('ptc_iframe_price')); ?>;
var pricePerSecWindow = <?php echo e(get_setting('ptc_window_price')); ?>;
document.addEventListener("DOMContentLoaded", function () {
    const selectAllCheckbox = document.getElementById("selectAllCountries");
    const countrySelectContainer = document.getElementById("countrySelectContainer");

    selectAllCheckbox.addEventListener("change", function () {
        if (this.checked) {
            countrySelectContainer.style.display = "none"; 
        } else {
            countrySelectContainer.style.display = "block";
        }
    });
});
$(document).ready(function() {
    function calculatePrice() {
        var timer = parseInt($("#timer").val()) || 0;
        var views = parseInt($("#views").val()) || 0;
            
        var selectedType = $("#type").is(":checked") ? 1 : 0;
        var pricePerSec = selectedType == "0" ? pricePerSecIframe : pricePerSecWindow;

        var totalPrice = ((timer * pricePerSec) * views).toFixed(6);
        $("#estimatedPrice").text(`$${totalPrice}`);
    }

    $("#timer, #views, #type").on("input", calculatePrice);

    calculatePrice();
    let curStatus = 0;
    function loadAd(page = 1, status = 0) {
      curStatus = status;
      $.ajax({
        url: "/admin/advertise/ptc/load/"+status,
        type: "GET",
        data: { page: page },
        dataType: "json",
        beforeSend: function () {
            $("#ad-table").html('<tr><td colspan="7" 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="adid${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.name}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5"><a href="${item.url}" target="_blank" class="text-primary">Visit</a></td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.remaining_views}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.today_views}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.views}</td>
                      <td class="flex items-center">
                        ${item.status == 0 ? `
                            <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 == 0 || item.status == 1 ? `
                            <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="7" class="text-center py-4">No data available</td></tr>';
          }
          $("#ad-table").html(html);

        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-ad").click(function() {
        loadAd(1, 0);
    });

    $("#active-ad").click(function() {
        loadAd(1, 1);
    });
    
    $("#rejected-ad").click(function() {
        loadAd(1, 2);
    });
    
    $("#ended-ad").click(function() {
        loadAd(1, 3);
    });
    
    $(document).on("click", ".pagination-btn", function (e) {
      e.preventDefault();
      var page = $(this).data("page");
      if (page) loadAd(page, curStatus);
    });
    
    $(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);
    });
    
    function updateStatus(id, status) {
        $.ajax({
            url: "/admin/advertise/ptc/update-status",
            type: "POST",
            data: {
                _token: $('meta[name="csrf-token"]').attr("content"), 
                id: id,
                status: status
            },
            success: function () {
                $("#adid" + id).remove();
                if ($("#ad-table tr").length === 0) {
                    loadAd(1, curStatus);
                }
            },
            error: function () {
                alert("Error updating status!");
            }
        });
    }

});
</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/resources/views/admin/advertiser/ptc.blade.php ENDPATH**/ ?>