@extends('admin.layouts.app')

@section('title', 'Revenue Analytics')

@section('style')
@endsection

@section('content')
<main class="dash-content revenue-analytics">

    <!-- Stats row -->
    <div class="stats-row">
        <div class="stat-card">
        <div class="stat-icon stat-icon--dark-green">
            <svg width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.375 29.75H2.125C1.56141 29.75 1.02091 29.5262 0.622398 29.1276C0.223883 28.7291 0 28.1886 0 27.625V18.0625C0 17.499 0.223883 16.9585 0.622398 16.5599C1.02091 16.1614 1.56141 15.9375 2.125 15.9375H7.79131V14.875C7.79131 14.3115 8.0152 13.771 8.41371 13.3724C8.81223 12.9739 9.35273 12.75 9.91631 12.75H15.5837V10.625C15.5837 10.0615 15.8076 9.52096 16.2061 9.12244C16.6046 8.72393 17.1451 8.50004 17.7087 8.50004H23.375C23.9386 8.50004 24.4791 8.72393 24.8776 9.12244C25.2761 9.52096 25.5 10.0615 25.5 10.625V27.625C25.5 28.1886 25.2761 28.7291 24.8776 29.1276C24.4791 29.5262 23.9386 29.75 23.375 29.75ZM7.79131 18.0625H2.125V27.625H7.79131V18.0625ZM15.5837 14.875H9.91631V27.625H15.5837V14.875ZM17.7087 27.625H23.375V10.625H17.7087V13.8125V27.625ZM15.9226 3.84842C11.9244 9.74317 4.5135 11.6546 4.5135 11.6546C4.24044 11.7245 3.95081 11.683 3.70831 11.5394C3.58824 11.4682 3.48335 11.3742 3.39965 11.2625C3.31594 11.1508 3.25504 11.0237 3.22044 10.8885C3.18583 10.7533 3.1782 10.6126 3.19797 10.4745C3.21774 10.3363 3.26453 10.2034 3.33567 10.0834C3.47933 9.84086 3.71344 9.66537 3.9865 9.59548C3.9865 9.59548 11.0436 7.80729 14.4936 2.14311L12.4036 2.12504C12.1218 2.12251 11.8526 2.00813 11.6551 1.80708C11.4577 1.60603 11.3482 1.33477 11.3507 1.05298C11.3532 0.771188 11.4676 0.501945 11.6686 0.30448C11.8697 0.107016 12.141 -0.00249304 12.4228 4.30887e-05L16.9702 0.0404182C17.2489 0.0423659 17.5156 0.153926 17.7126 0.350969C17.9097 0.548012 18.0212 0.814701 18.0232 1.09336L18.0625 5.53567C18.065 5.81746 17.9555 6.08872 17.7581 6.28977C17.5606 6.49082 17.2914 6.60519 17.0096 6.60773C16.7278 6.61027 16.4565 6.50076 16.2555 6.30329C16.0544 6.10583 15.94 5.83659 15.9375 5.55479L15.9226 3.84842Z" fill="white"/>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num dark-green">$45,250</div>
            <div class="stat-label">This Month</div>
        </div>
        </div>
        <div class="stat-card">
        <div class="stat-icon stat-icon--blue">

            <svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.421 22.1525H5.74743C5.53012 22.1525 5.43701 21.867 5.60719 21.7358L8.06743 19.845H22.1247C23.1241 19.845 23.9531 19.0235 23.9725 18.0256L24.13 9.91826C24.148 8.99404 23.4712 8.19154 22.5557 8.0547C22.1154 7.98882 21.7029 8.29163 21.6369 8.73265C21.5709 9.17368 21.8753 9.58408 22.3167 9.65007C22.4314 9.66721 22.5162 9.76689 22.514 9.88238L22.3564 17.9942C22.354 18.1189 22.2501 18.2298 22.1248 18.2298H8.43462L5.88433 7.20345L7.17874 7.39215C7.62006 7.45791 8.03155 7.15165 8.0976 6.71062C8.1636 6.26959 7.85929 5.85741 7.4178 5.79141L5.47895 5.50107L4.73777 2.61994C4.64611 2.26279 4.32397 2.01929 3.95494 2.01929H0.808214C0.361879 2.01929 0 2.38099 0 2.82692C0 3.27286 0.361822 3.63456 0.808214 3.63456H3.32787L6.88764 18.6981L4.61997 20.4451C3.25189 21.4992 4.02134 23.7678 5.74738 23.7678H7.86904C7.77512 23.9986 7.72355 24.2928 7.72355 24.5816C7.72355 25.9176 8.81819 26.9999 10.1637 26.9999C11.5092 26.9999 12.6039 25.9198 12.6039 24.5839C12.6039 24.295 12.5523 23.9986 12.4584 23.7678H16.8724C16.7785 23.9986 16.7269 24.2928 16.7269 24.5816C16.7269 25.9176 17.8216 26.9999 19.1671 26.9999C20.5126 26.9999 21.6073 25.9198 21.6073 24.5839C21.6073 24.295 21.5557 23.9986 21.4618 23.7678H23.4211C23.8675 23.7678 24.2293 23.4061 24.2293 22.9602C24.2293 22.5142 23.8673 22.1525 23.421 22.1525ZM10.1637 25.3805C9.70947 25.3805 9.33998 25.0181 9.33998 24.5726C9.33998 24.1271 9.70953 23.7647 10.1637 23.7647C10.6179 23.7647 10.9875 24.1271 10.9875 24.5726C10.9875 25.0181 10.6179 25.3805 10.1637 25.3805ZM19.167 25.3805C18.7128 25.3805 18.3433 25.0181 18.3433 24.5726C18.3433 24.1271 18.7128 23.7647 19.167 23.7647C19.6213 23.7647 19.9908 24.1271 19.9908 24.5726C19.9908 25.0181 19.6213 25.3805 19.167 25.3805Z" fill="white"/>
            <path d="M14.7805 11.7062C11.5438 11.7062 8.91058 9.08055 8.91058 5.85312C8.91058 2.62569 11.5438 0 14.7805 0C18.0172 0 20.6504 2.62569 20.6504 5.85312C20.6504 9.08055 18.0172 11.7062 14.7805 11.7062ZM14.7805 1.61493C12.4351 1.61493 10.527 3.51616 10.527 5.85312C10.527 8.19007 12.4352 10.0913 14.7805 10.0913C17.1258 10.0913 19.034 8.19007 19.034 5.85312C19.034 3.51616 17.1259 1.61493 14.7805 1.61493Z" fill="white"/>
            <path d="M13.3488 7.90894L12.0507 6.36837C11.7632 6.02726 11.8069 5.51787 12.1484 5.23064C12.4898 4.94341 12.9996 4.98708 13.2872 5.32831L14.0004 6.17477L16.2196 3.81681C16.5254 3.49197 17.0369 3.47622 17.362 3.78168C17.6873 4.08714 17.703 4.5982 17.3972 4.92305L14.5559 7.94205C14.3021 8.20921 13.6527 8.26211 13.3488 7.90894Z" fill="white"/>
        </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num blue">$38,120</div>
            <div class="stat-label">Processing</div>
        </div>
        </div>
        <div class="stat-card">
        <div class="stat-icon stat-icon--purple">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <mask id="mask0_89_5836" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
            <path d="M0 0H36V36H0V0Z" fill="white"/>
            </mask>
            <g mask="url(#mask0_89_5836)">
            <path d="M10.962 23.8741C10.8273 23.8135 10.6819 23.7799 10.5342 23.7754C10.3865 23.7709 10.2394 23.7956 10.1012 23.8479C9.96306 23.9003 9.83655 23.9794 9.72894 24.0807C9.62132 24.1819 9.53471 24.3034 9.47404 24.4381C9.41337 24.5729 9.37983 24.7182 9.37534 24.8659C9.37085 25.0136 9.39549 25.1608 9.44786 25.2989C9.50023 25.4371 9.57931 25.5636 9.68057 25.6712C9.78183 25.7788 9.9033 25.8655 10.038 25.9261L13.038 27.2761C13.1728 27.3368 13.3181 27.3703 13.4658 27.3748C13.6135 27.3793 13.7607 27.3547 13.8988 27.3023C14.037 27.2499 14.1635 27.1709 14.2711 27.0696C14.3788 26.9683 14.4654 26.8469 14.526 26.7121C14.5867 26.5774 14.6202 26.432 14.6247 26.2843C14.6292 26.1366 14.6046 25.9895 14.5522 25.8513C14.4998 25.7131 14.4208 25.5866 14.3195 25.479C14.2182 25.3714 14.0968 25.2848 13.962 25.2241L10.962 23.8741Z" fill="white"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M20.688 2.48405C19.846 2.09251 18.9286 1.88965 18 1.88965C17.0714 1.88965 16.154 2.09251 15.312 2.48405L5.562 7.01855C4.46075 7.53064 3.52869 8.34664 2.87551 9.37052C2.22233 10.3944 1.87521 11.5836 1.875 12.7981V23.3206C1.87513 24.5441 2.22736 25.7418 2.88965 26.7706C3.55194 27.7994 4.4963 28.6159 5.61 29.1226L15.36 33.5596C16.189 33.9367 17.0892 34.1319 18 34.1319C18.9108 34.1319 19.811 33.9367 20.64 33.5596L30.39 29.1226C31.5037 28.6159 32.4481 27.7994 33.1104 26.7706C33.7726 25.7418 34.1249 24.5441 34.125 23.3206V12.7981C34.1248 11.5836 33.7777 10.3944 33.1245 9.37052C32.4713 8.34664 31.5393 7.53064 30.438 7.01855L20.688 2.48405ZM16.2615 4.52405C16.8063 4.27072 17.3999 4.13946 18.0008 4.13946C18.6016 4.13946 19.1952 4.27072 19.74 4.52405L29.49 9.05855C30.1905 9.38405 30.771 9.89255 31.182 10.5106L26.712 12.6286L13.113 5.98805L16.2615 4.52405ZM10.4865 7.20905L6.51 9.06005C5.82218 9.37891 5.23567 9.88134 4.815 10.5121L18 16.7551L24.111 13.8601L10.4865 7.20905ZM4.125 12.6751L16.875 18.7141V31.7281C16.6749 31.6713 16.4793 31.5996 16.29 31.5136L6.54 27.0766C5.81938 26.7486 5.20835 26.2203 4.77986 25.5545C4.35136 24.8888 4.12351 24.1138 4.1235 23.3221V12.7981L4.125 12.6751ZM19.125 31.7266C19.3241 31.6702 19.5186 31.599 19.707 31.5136L29.457 27.0766C30.1776 26.7486 30.7887 26.2203 31.2171 25.5545C31.6456 24.8888 31.8735 24.1138 31.8735 23.3221V12.7981L31.872 12.6736L19.1235 18.7111L19.125 31.7266Z" fill="white"/>
            </g>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num purple">+18.7%</div>
            <div class="stat-label">Shipped</div>
        </div>
        </div>
    </div>

    <!-- Charts row -->
    <div class="row g-4 mb-4">
        <div class="col-lg-12">
        <div class="dash-card">
            <div class="d-flex justify-content-between align-items-center title-cal flex-wrap">
            <h2 class="dash-card-title">Revenue Trend</h2>
            <div class="tabs">
                <button class="tab">Day</button>
                <button class="tab">Week</button>
                <button class="tab active">Month</button>
                <button class="tab">Year</button>
                <button class="tab">Date Range</button>
            </div>
            </div>
            <div class="card">
            <div class="chart-wrapper">
                <canvas id="revenueChart"></canvas>
                <div class="crosshair-line" id="crosshair"></div>
                <div class="custom-tooltip" id="customTooltip">
                <div class="tooltip-label">Revenue</div>
                <div class="tooltip-value-row">
                    <span class="tooltip-value" id="ttValue">$12,540</span>
                    <span class="tooltip-badge">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
                    </span>
                    <!-- sparkline mini svg -->
                    <svg class="tooltip-sparkline" width="36" height="22" viewBox="0 0 36 22">
                    <polyline points="0,18 6,12 12,16 18,6 24,10 30,4 36,8" fill="none" stroke="#9b7fcb" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/>
                    </svg>
                </div>
                <div class="tooltip-vs" id="ttVs">vs Aug 9th $11,004</div>
                <div class="tooltip-date" id="ttDate">Sep 17th, 2024</div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-6">
        <div class="dash-card h-100">
            <h2 class="dash-card-title">Top Products</h2>
                        
            <div class="card p-4 w-100">
            <div class="product-item">
                <div class="product-thumb"></div>
                <span class="product-name">Product 1</span>
                <span class="product-price">$1100</span>
            </div>
            <div class="product-item">
                <div class="product-thumb"></div>
                <span class="product-name">Product 2</span>
                <span class="product-price">$1000</span>
            </div>
            <div class="product-item">
                <div class="product-thumb"></div>
                <span class="product-name">Product 3</span>
                <span class="product-price">$900</span>
            </div>
            <div class="product-item">
                <div class="product-thumb"></div>
                <span class="product-name">Product 4</span>
                <span class="product-price">$800</span>
            </div>
            <div class="product-item">
                <div class="product-thumb"></div>
                <span class="product-name">Product 5</span>
                <span class="product-price">$100</span>
            </div>
            </div>

        </div>
        </div>
        <div class="col-lg-6">
        <div class="dash-card h-100">
            <h2 class="dash-card-title">Revenue Sources</h2>
            <div class="order-status-list">
            <div class="order-status-item">
                <div class="dot-title">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- <div class="os-dot os-dot--yellow"></div> -->
                    <span class="os-label">Direct Sales</span>
                </div>
                <span class="os-count">65%</span>
                </div>
                <div class="prograce-count">
                <div class="os-bar-wrap"><div class="os-bar os-bar--yellow" style="width:65%"></div></div>
                </div>
            </div>

            <div class="order-status-item">
                <div class="dot-title">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="os-label">Promotions</span>
                </div>
                <span class="os-count">25%</span>
                </div>
                <div class="prograce-count">
                <div class="os-bar-wrap"><div class="os-bar os-bar--blue" style="width:25%"></div></div>
                </div>
            </div>

            <div class="order-status-item">
                <div class="dot-title">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="os-label">Other</span>
                </div>
                <span class="os-count">10%</span>
                </div>
                <div class="prograce-count">
                <div class="os-bar-wrap"><div class="os-bar os-bar--purple" style="width:10%"></div></div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</main>
@endsection

@section('script')

<script>
  // Monthly data points (Jan–Oct)
  const labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct'];
  const data = [80, 220, 620, 710, 200, 760, 760, 530, 810, 370];
 
  // Previous period data (for "vs" comparison in tooltip)
  const prevData = [60, 190, 500, 680, 180, 690, 710, 500, 730, 320];
 
  const ctx = document.getElementById('revenueChart').getContext('2d');
 
  // Gradient fill
  const gradient = ctx.createLinearGradient(0, 0, 0, 320);
  gradient.addColorStop(0, 'rgba(155,127,203,0.18)');
  gradient.addColorStop(1, 'rgba(155,127,203,0)');
 
  const chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [{
        data,
        borderColor: '#C479FF',
        borderWidth: 2,
        tension: 0.45,
        fill: true,
        backgroundColor: gradient,
        pointRadius: 0,
        pointHoverRadius: 6,
        pointHoverBackgroundColor: '#9b7fcb',
        pointHoverBorderColor: '#fff',
        pointHoverBorderWidth: 2.5
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: { display: false },
        tooltip: { enabled: false }  // use custom tooltip
      },
      scales: {
        x: {
          grid: { display: false },
          border: { display: false },
          ticks: { color: '#aaa', font: { size: 12 } }
        },
        y: {
          min: 0,
          max: 1000,
          grid: {
            color: 'rgba(0,0,0,0.06)',
            drawBorder: false,
            lineWidth: 1.2
          },
          border: { display: false, dash: [4, 4] },
          ticks: {
            color: '#aaa',
            font: { size: 12 },
            stepSize: 250,
            callback: v => v
          }
        }
      },
      onHover: (event, elements) => {
        if (elements.length > 0) {
          showTooltip(event, elements[0].index);
        } else {
          hideTooltip();
        }
      }
    }
  });
 
  const tooltip = document.getElementById('customTooltip');
  const crosshair = document.getElementById('crosshair');
  const ttValue = document.getElementById('ttValue');
  const ttVs = document.getElementById('ttVs');
  const ttDate = document.getElementById('ttDate');
 
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct'];
  const fullMonths = ['January','February','March','April','May','June','July','August','September','October'];
 
  function showTooltip(event, index) {
    const canvas = document.getElementById('revenueChart');
    const rect = canvas.getBoundingClientRect();
    const wrapperRect = canvas.parentElement.getBoundingClientRect();
 
    const meta = chart.getDatasetMeta(0);
    const point = meta.data[index];
 
    const x = point.x;
    const chartTop = chart.chartArea.top;
    const chartBottom = chart.chartArea.bottom;
 
    // Crosshair
    crosshair.style.left = (x + canvas.offsetLeft) + 'px';
    crosshair.style.top = chartTop + 'px';
    crosshair.style.height = (chartBottom - chartTop) + 'px';
    crosshair.style.opacity = '1';
 
    // Tooltip content
    const val = data[index];
    const prev = prevData[index];
    const day = 9 + index;
    const prevMonth = index > 0 ? months[index - 1] : 'Dec';
 
    ttValue.textContent = '$' + (val * 17 + 540).toLocaleString();
    ttVs.textContent = `vs ${prevMonth} ${day}th $${(prev * 15 + 1004).toLocaleString()}`;
    ttDate.textContent = `${fullMonths[index]} ${day}th, 2024`;
 
    // Position tooltip
    let left = x + canvas.offsetLeft + 14;
    const tooltipWidth = tooltip.offsetWidth || 210;
    if (left + tooltipWidth > wrapperRect.width) {
      left = x + canvas.offsetLeft - tooltipWidth - 14;
    }
    // Clamp so the tooltip always stays fully inside the chart wrapper (fixes clipping on mobile)
    left = Math.max(4, Math.min(left, wrapperRect.width - tooltipWidth - 4));

    tooltip.style.left = left + 'px';
    tooltip.style.top = Math.max(chartTop, point.y - 60) + 'px';
    tooltip.classList.add('visible');
  }
 
  function hideTooltip() {
    tooltip.classList.remove('visible');
    crosshair.style.opacity = '0';
  }
 
  document.getElementById('revenueChart').addEventListener('mouseleave', hideTooltip);
 
  // Tab switching
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    });
  });
</script>
@endsection