<?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 class="mt-1 grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-info to-info-focus p-3.5">
                <p class="text-xs uppercase text-sky-100">Total Users</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($totalUsers); ?></p>
                  <a
                    href="/admin/users"
                    class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
                    >Users
                  </a>
                </div>
                <div
                  class="mask is-reuleaux-triangle absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-amber-400 to-orange-600 p-3.5">
                <p class="text-xs uppercase text-amber-50">Registered Today</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($registeredToday); ?></p>
                </div>
                <div
                  class="mask is-diamond absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 p-3.5">
                <p class="text-xs uppercase text-pink-100">Active Today</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($activeToday); ?></p>
                </div>
                <div
                  class="mask is-hexagon-2 absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
            </div>
            <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 p-3.5">
                <p class="text-xs uppercase text-sky-100">Pending Offerwall Leads</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($pendingOfferwallCount); ?></p>
                  <a
                    href="/admin/offerwall"
                    class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
                    >Offerwall Leads
                  </a>
                </div>
                <div
                  class="mask is-reuleaux-triangle absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-indigo-400 to-purple-600 p-3.5">
                <p class="text-xs uppercase text-amber-50">Pending Ads</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($pendingAds); ?></p>
                  <a
                    href="/admin/advertise/ptc"
                    class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
                    >PTC Ads
                  </a>
                </div>
                <div
                  class="mask is-diamond absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
              <div class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-sky-400 to-blue-600 p-3.5">
                <p class="text-xs uppercase text-pink-100">Pending Withdrawals</p>
                <div class="flex items-end justify-between space-x-2">
                  <p class="mt-4 text-2xl font-medium text-white"><?php echo e($pendingWithdrawCount); ?></p>
                  <a
                    href="/admin/withdrawals"
                    class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
                    >Withdrawals
                  </a>
                </div>
                <div
                  class="mask is-hexagon-2 absolute top-0 right-0 -m-3 size-16 bg-white/20"
                ></div>
              </div>
            </div>
      <div class="card mt-3 pb-1">
        <div class="my-3 flex items-center justify-between px-4 sm:px-5">
          <h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100"> Earnings Statistics </h2>
        </div>
        <div class="space-x-4 overflow-x-auto overflow-y-hidden px-4 pb-2 sm:px-5">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
                <div>
                    <span class="block mb-1 text-sm font-medium">Date Range:</span>
                    <label class="relative flex">
                        <input
                            id="date_range1"
                            x-init="$el._x_flatpickr = flatpickr($el, {
                                mode: 'range',
                                dateFormat: 'Y-m-d',
                                defaultDate: [
                                    new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0], 
                                    new Date(new Date().setDate(new Date().getDate())).toISOString().split('T')[0]
                                ],
                                maxDate: new Date(new Date().setDate(new Date().getDate() + 7)),
                                onClose: function(selectedDates) {
                                    handleEventTypeChange(1); 
                                }
                            })"
                            class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 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"
                            placeholder="Choose date..."
                            type="text"
                        />
                        <span
                          class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="size-5 transition-colors duration-200"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                            />
                          </svg>
                        </span>
                    </label>
                </div>
                <div>
                    <span class="block mb-1 text-sm font-medium">Choose Event Type:</span>
                    <label class="flex-1">
                        <select
                            id="event_type1"
                            class="form-select w-full 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"
                            onchange="handleEventTypeChange(1)"
                        >
                            <option value="all">All</option>
                            <option value="Faucet">Faucet</option>
                            <option value="PTC Ads">PTC Ads</option>
                            <option value="Shortlink">Shortlink</option>
                            <option value="Offerwalls">Offerwalls</option>
                            <option value="Referrals">Referrals</option>
                        </select>
                    </label>
                </div>
            </div>
            <div id="chart1" class="mt-5">
                <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>
            </div>
        </div>
      </div>
      <div class="card mt-3 pb-1">
        <div class="my-3 flex items-center justify-between px-4 sm:px-5">
          <h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100"> Deposit Statistics </h2>
        </div>
        <div class="space-x-4 overflow-x-auto overflow-y-hidden px-4 pb-2 sm:px-5">
            <div class="grid grid-cols-1 sm:grid-cols-1 gap-4 items-center">
                <div>
                    <span class="block mb-1 text-sm font-medium">Date Range:</span>
                    <label class="relative flex">
                        <input
                            id="date_range2"
                            x-init="$el._x_flatpickr = flatpickr($el, {
                                mode: 'range',
                                dateFormat: 'Y-m-d',
                                defaultDate: [
                                    new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0], 
                                    new Date(new Date().setDate(new Date().getDate())).toISOString().split('T')[0]
                                ],
                                maxDate: new Date(new Date().setDate(new Date().getDate() + 7)),
                                onClose: function(selectedDates) {
                                    handleEventTypeChange(2); 
                                }
                            })"
                            class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 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"
                            placeholder="Choose date..."
                            type="text"
                        />
                        <span
                          class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="size-5 transition-colors duration-200"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                            />
                          </svg>
                        </span>
                    </label>
                </div>
                    <label class="hidden">
                        <select
                            id="event_type2"
                            class="form-select w-full 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"
                            onchange="handleEventTypeChange(2)"
                        >
                            <option value="Deposit" selected></option>
                        </select>
                    </label>
            </div>
            <div id="chart2" class="mt-5">
                <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>
            </div>
        </div>
      </div>
      <div class="card mt-3 pb-1">
        <div class="my-3 flex items-center justify-between px-4 sm:px-5">
          <h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100"> Withdraw Statistics </h2>
        </div>
        <div class="space-x-4 overflow-x-auto overflow-y-hidden px-4 pb-2 sm:px-5">
            <div class="grid grid-cols-1 sm:grid-cols-1 gap-4 items-center">
                <div>
                    <span class="block mb-1 text-sm font-medium">Date Range:</span>
                    <label class="relative flex">
                        <input
                            id="date_range3"
                            x-init="$el._x_flatpickr = flatpickr($el, {
                                mode: 'range',
                                dateFormat: 'Y-m-d',
                                defaultDate: [
                                    new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0], 
                                    new Date(new Date().setDate(new Date().getDate())).toISOString().split('T')[0]
                                ],
                                maxDate: new Date(new Date().setDate(new Date().getDate() + 7)),
                                onClose: function(selectedDates) {
                                    handleEventTypeChange(3); 
                                }
                            })"
                            class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 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"
                            placeholder="Choose date..."
                            type="text"
                        />
                        <span
                          class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="size-5 transition-colors duration-200"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                            />
                          </svg>
                        </span>
                    </label>
                </div>
                    <label class="hidden">
                        <select
                            id="event_type3"
                            class="form-select w-full 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"
                            onchange="handleEventTypeChange(3)"
                        >
                            <option value="Withdraw" selected></option>
                        </select>
                    </label>
            </div>
            <div id="chart3" class="mt-5">
                <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>
            </div>
        </div>
      </div>
    </div>
  </div>
<?php $__env->startPush('scripts'); ?>
<script>
sessionStorage.clear();
var currencyRate = <?php echo e(get_Setting('currency_rate')); ?>;
var currencyRounds = <?php echo e(get_Setting('currency_rounds')); ?>;

var chartCache = JSON.parse(sessionStorage.getItem("chartCache")) || [];

if (!Array.isArray(chartCache)) {
    chartCache = [];
}

function loadChart(container, daterange, eventype) {
    $("#" + container).html('<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>');

    let dateRange = document.getElementById("date_range" + daterange).value;
    let eventType = document.getElementById("event_type" + eventype).value;
    let dates = dateRange.split(" to ");
    let startDate = dates[0]?.trim() || new Date().toISOString().split('T')[0];
    let endDate = dates[1]?.trim() || startDate;

    let cachedData = chartCache.find(entry => 
        entry.startDate === startDate && 
        entry.endDate === endDate && 
        entry.eventType === eventType
    );

    if (cachedData) {
        updateChartFromCache(container, cachedData.data);
        return;
    }

    $.ajax({
        url: "/admin/chart/load",
        type: "GET",
        data: { start_date: startDate, end_date: endDate, event_type: eventType },
        dataType: "json",
        success: function (data) {
            chartCache.push({ startDate, endDate, eventType, data });
            sessionStorage.setItem("chartCache", JSON.stringify(chartCache));

            let categories = data.map(item => item.date);
            let values = data.map(item => Math.round(item.count));
            let rewards = '';
            if(container == 'chart2') {
                rewards = data.map(item => parseFloat(Number(item.total_deposit || 0).toFixed(6)));
            }else if(container == 'chart3') {
                rewards = data.map(item => parseFloat(((item.total_withdraw || 0) * currencyRate).toFixed(currencyRounds)));
            }else{
                rewards = data.map(item => parseFloat(((item.total_reward || 0) * currencyRate).toFixed(currencyRounds)));
            }
            updateChart(container, categories, values, rewards);
        },
        error: function () {
            console.error("Error fetching chart data.");
        }
    });
}

function updateChartFromCache(container, data) {
    let categories = data.map(item => item.date);
    let values = data.map(item => Math.round(item.count));
    let rewards = data.map(item => parseFloat(((item.total_reward || 0) * currencyRate).toFixed(currencyRounds)));

    updateChart(container, categories, values, rewards);
}

function updateChart(container, categories, values, rewards) {
    let currencyName = "<?php echo e(get_Setting('currency_name')); ?>";
    let theName = "Earned";
    if(container == 'chart2') {
        currencyName = "USD";
        theName = "Deposited";
    }else if(container == 'chart3') {
        theName = "Withdrawn";
    }
    $("#" + container).html('');

    let options = {
        series: [
            { name: "Count", data: values },
            { name: theName, data: rewards }
        ],
        chart: {
            type: "area",
            stacked: false,
            height: 350,
            toolbar: { show: false }
        },
        dataLabels: { enabled: false },
        markers: { size: 0 },
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.35,
                opacityTo: 0.05,
                stops: [20, 100, 100, 100]
            }
        },
        tooltip: {
            shared: true,
            y: {
                formatter: function (value, { seriesIndex }) {
                    if (seriesIndex === 0) {
                        return value.toFixed(0);
                    } else {
                        return value.toLocaleString() + " " + currencyName;
                    }
                }
            }
        },
        legend: { position: "top", horizontalAlign: "left" },
        xaxis: { categories: categories }
    };

    if (window["chartInstance_" + container]) {
        window["chartInstance_" + container].updateOptions(options);
    } else {
        window["chartInstance_" + container] = new ApexCharts(document.getElementById(container), options);
        window["chartInstance_" + container].render();
    }
}

$(document).ready(function () {
    loadChart("chart1", "1", "1");
    loadChart("chart2", "2", "2");
    loadChart("chart3", "3", "3");
});
function handleEventTypeChange(type) {
    loadChart("chart" + type, type, type);
}
</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/dashboard.blade.php ENDPATH**/ ?>