@extends('vendor.layouts.app')

@section('title', 'Customer Insights')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="sr-page-header d-flex align-items-center justify-content-between flex-wrap">
          <div>
            <h2 class="sr-title">Customer Insights</h2>
            <p class="sr-sub">Understand your customer base</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">1,234</div>
            <div class="stl-stat-title">Total Customers</div>
            <div class="stl-stat-sub li-orange">+145 this month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">456</div>
            <div class="stl-stat-title">Repeat Customers</div>
            <div class="stl-stat-sub li-green">37% retention</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">$193</div>
            <div class="stl-stat-title">Avg Customer LTV</div>
            <div class="stl-stat-sub stl-purple">+8% vs last quarter</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">4.6</div>
            <div class="stl-stat-title">Satisfaction Score</div>
            <div class="stl-stat-sub li-amber">Based on 892 reviews</div>
          </div>
        </div>

        <!-- Revenue Trend -->
        <div class="row">
          <div class="col-md-6">
            <div class="li-panel">
              <div class="li-panel-header flex-wrap">
                <h3 class="li-panel-title">Customer Acquisition</h3>
                <!-- <div class="rt-range-tabs">
                  <button class="rt-range-btn active" data-range="30d">30 Days</button>
                  <button class="rt-range-btn" data-range="90d">90 Days</button>
                  <button class="rt-range-btn" data-range="1y">1 Year</button>
                </div> -->
              </div>
              <div class="stl-chart-box">
                <canvas id="revenueTrendChart"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Customer Demographics</h3>
              <h3 class="li-panel-title">Age Groups</h3>
              <div class="order-status-list cd">
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">18-24</span>
                    <div class="percentage-count">15%</div>
                  </div>
                  <div class="prograce-count ci">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:15%"></div></div>
                  </div>
                </div>
  
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">25-34</span>
                    <div class="percentage-count">38%</div>
                  </div>
                  <div class="prograce-count ci">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:38%"></div></div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">35-44</span>
                    <div class="percentage-count">28%</div>
                  </div>
                  <div class="prograce-count ci">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:28%"></div></div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">45-54</span>
                    <div class="percentage-count">12%</div>
                  </div>
                  <div class="prograce-count ci">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:12%"></div></div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">55+</span>
                    <div class="percentage-count">7%</div>
                  </div>
                  <div class="prograce-count ci">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:7%"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Top Customers</h3>
              <div class="ci-customer-list">
                <div class="ci-customer-item">
                  <div class="ci-avatar">SJ</div>
                  <div class="ci-customer-info">
                    <div class="ci-customer-name">Sarah Johnson</div>
                    <div class="ci-customer-sub">24 orders &bull; Member since Jan 2025</div>
                  </div>
                  <div class="ci-customer-amount">$3,450</div>
                </div>
                <div class="ci-customer-item">
                  <div class="ci-avatar">MD</div>
                  <div class="ci-customer-info">
                    <div class="ci-customer-name">Mike Davis</div>
                    <div class="ci-customer-sub">18 orders &bull; Member since Feb 2025</div>
                  </div>
                  <div class="ci-customer-amount">$2,890</div>
                </div>
                <div class="ci-customer-item">
                  <div class="ci-avatar">EW</div>
                  <div class="ci-customer-info">
                    <div class="ci-customer-name">Emma Wilson</div>
                    <div class="ci-customer-sub">15 orders &bull; Member since Dec 2024</div>
                  </div>
                  <div class="ci-customer-amount">$2,340</div>
                </div>
                <div class="ci-customer-item">
                  <div class="ci-avatar">JS</div>
                  <div class="ci-customer-info">
                    <div class="ci-customer-name">John Smith</div>
                    <div class="ci-customer-sub">12 orders &bull; Member since Mar 2025</div>
                  </div>
                  <div class="ci-customer-amount">$1,980</div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Customer Behavior</h3>
              <div class="ci-behavior-list">
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Avg Session Duration</span>
                  <span class="ci-behavior-value">8:42 min</span>
                </div>
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Pages per Visit</span>
                  <span class="ci-behavior-value">5.3</span>
                </div>
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Cart Abandonment Rate</span>
                  <span class="ci-behavior-value">68%</span>
                </div>
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Email Open Rate</span>
                  <span class="ci-behavior-value">24.5%</span>
                </div>
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Repeat Purchase Rate</span>
                  <span class="ci-behavior-value">37%</span>
                </div>
                <div class="ci-behavior-row">
                  <span class="ci-behavior-label">Referral Rate</span>
                  <span class="ci-behavior-value">12%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="li-panel last">
              <h3 class="li-panel-title">Customer Feedback Summary</h3>
              <div class="ci-feedback-grid">
                <div class="ci-feedback-item">
                  <div class="ci-feedback-num">4.7</div>
                  <div class="ci-feedback-label">Product Quality</div>
                </div>
                <div class="ci-feedback-item">
                  <div class="ci-feedback-num">4.5</div>
                  <div class="ci-feedback-label">Shipping Speed</div>
                </div>
                <div class="ci-feedback-item">
                  <div class="ci-feedback-num">4.8</div>
                  <div class="ci-feedback-label">Customer Service</div>
                </div>
                <div class="ci-feedback-item">
                  <div class="ci-feedback-num">4.4</div>
                  <div class="ci-feedback-label">Value for Money</div>
                </div>
                <div class="ci-feedback-item">
                  <div class="ci-feedback-num">4.6</div>
                  <div class="ci-feedback-label">Overall Experience</div>
                </div>
              </div>
            </div>
          </div>

        </div>
</main>
@endsection

@section('script')
<script>
const settlementCtx = document.getElementById('settlementChart').getContext('2d');
    new Chart(settlementCtx, {
      type: 'bar',
      data: {
        labels: ['Mar 01', 'Mar 15', 'Apr 01', 'Apr 15', 'Apr 20', 'Apr 25'],
        datasets: [{
          data: [10890, 13120, 11230, 12450, 9200, 11800],
          backgroundColor: '#F2701D',
          borderRadius: 4,
          maxBarThickness: 36
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => '$' + ctx.parsed.y.toLocaleString()
            }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            border: { display: false },
            ticks: { display: false }
          },
          y: {
            display: false,
            grid: { display: false },
            border: { display: false }
          }
        }
      }
    });
  </script>

  <script>
    const revenueTrendData = {
      '30d': { labels: ['Mar 21', 'Mar 28', 'Apr 04', 'Apr 11', 'Apr 18', 'Apr 25'], values: [9800, 9800, 9800, 9800, 9800, 9800] },
      '90d': { labels: ['Feb', 'Mar', 'Apr'], values: [27800, 31200, 38900] },
      '1y': { labels: ['May', 'Jul', 'Sep', 'Nov', 'Jan', 'Mar'], values: [29500, 33200, 35100, 38400, 41700, 45250] }
    };

    const revenueTrendCtx = document.getElementById('revenueTrendChart').getContext('2d');
    const revenueTrendGradient = revenueTrendCtx.createLinearGradient(0, 0, 0, 220);
    revenueTrendGradient.addColorStop(0, 'rgba(149, 175, 252, 0.55)');
    revenueTrendGradient.addColorStop(1, 'rgba(149, 175, 252, 0.05)');

    const revenueTrendChart = new Chart(revenueTrendCtx, {
      type: 'line',
      data: {
        labels: revenueTrendData['30d'].labels,
        datasets: [{
          data: revenueTrendData['30d'].values,
          borderColor: '#7C93F5',
          backgroundColor: revenueTrendGradient,
          fill: true,
          tension: 0.35,
          pointRadius: 0,
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => '$' + ctx.parsed.y.toLocaleString()
            }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            border: { display: false }
          },
          y: {
            display: false,
            grid: { display: false },
            border: { display: false }
          }
        }
      }
    });

    document.querySelectorAll('.rt-range-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        document.querySelectorAll('.rt-range-btn').forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');

        const data = revenueTrendData[btn.dataset.range];
        revenueTrendChart.data.labels = data.labels;
        revenueTrendChart.data.datasets[0].data = data.values;
        revenueTrendChart.update();
      });
    });
</script>
@endsection