@extends('admin.layouts.app')

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

@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">Marketing Analytics</h2>
            <p class="sr-sub">Track marketing campaign performance</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">12</div>
            <div class="stl-stat-title">Active Campaigns</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">$8,450</div>
            <div class="stl-stat-title">Campaign Revenue</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">4.2%</div>
            <div class="stl-stat-title">Avg CTR</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">3.8x</div>
            <div class="stl-stat-title">ROI</div>
          </div>
        </div>

        <!-- Campaign Performance / Traffic Sources -->
        <div class="row">
          <div class="col-md-6">
            <div class="li-panel">
              <div class="li-panel-header flex-wrap">
                <h3 class="li-panel-title">Campaign Performance</h3>
              </div>
              <div class="stl-chart-box" >
                <canvas id="campaignPerformanceChart"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Traffic Sources</h3>
              <div class="ma-traffic-list">
                <div class="ma-traffic-row">
                  <div>
                    <div class="ma-traffic-name">Organic Search</div>
                    <div class="ma-traffic-sub">Conversion: 3.2%</div>
                  </div>
                  <div class="ma-traffic-value">45%</div>
                </div>
                <div class="ma-traffic-row">
                  <div>
                    <div class="ma-traffic-name">Paid Ads</div>
                    <div class="ma-traffic-sub">Conversion: 4.8%</div>
                  </div>
                  <div class="ma-traffic-value">28%</div>
                </div>
                <div class="ma-traffic-row">
                  <div>
                    <div class="ma-traffic-name">Social Media</div>
                    <div class="ma-traffic-sub">Conversion: 2.1%</div>
                  </div>
                  <div class="ma-traffic-value">18%</div>
                </div>
                <div class="ma-traffic-row">
                  <div>
                    <div class="ma-traffic-name">Direct</div>
                    <div class="ma-traffic-sub">Conversion: 5.8%</div>
                  </div>
                  <div class="ma-traffic-value">9%</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Active Campaigns -->
        <div class="li-panel last">
          <h3 class="li-panel-title">Active Campaigns</h3>
          <div class="ma-campaign-list">
            <div class="ma-campaign-row">
              <div class="ma-campaign-info">
                <div class="ma-campaign-name">Summer Sale 2026</div>
                <div class="ma-campaign-sub">2,345 clicks &bull; 89 orders</div>
              </div>
              <div class="ma-campaign-amount">
                <div class="ma-campaign-price">$3,450</div>
                <div class="ma-campaign-roi">ROI: 4.2x</div>
              </div>
              <span class="ma-campaign-tag">Discount</span>
              <a href="#" class="ma-campaign-view">View</a>
            </div>
            <div class="ma-campaign-row">
              <div class="ma-campaign-info">
                <div class="ma-campaign-name">Flash Sale - Headphones</div>
                <div class="ma-campaign-sub">1,890 clicks &bull; 67 orders</div>
              </div>
              <div class="ma-campaign-amount">
                <div class="ma-campaign-price">$2,890</div>
                <div class="ma-campaign-roi">ROI: 3.8x</div>
              </div>
              <span class="ma-campaign-tag">Flash Sale</span>
              <a href="#" class="ma-campaign-view">View</a>
            </div>
            <div class="ma-campaign-row">
              <div class="ma-campaign-info">
                <div class="ma-campaign-name">Bundle Deal - Tech Pack</div>
                <div class="ma-campaign-sub">1,234 clicks &bull; 45 orders</div>
              </div>
              <div class="ma-campaign-amount">
                <div class="ma-campaign-price">$2,110</div>
                <div class="ma-campaign-roi">ROI: 3.2x</div>
              </div>
              <span class="ma-campaign-tag">Bundle</span>
              <a href="#" class="ma-campaign-view">View</a>
            </div>
          </div>
        </div>
</main>
@endsection

@section('script')
<script>
const campaignCtx = document.getElementById('campaignPerformanceChart').getContext('2d');
    const campaignGradient = campaignCtx.createLinearGradient(0, 0, 0, 200);
    campaignGradient.addColorStop(0, 'rgba(252, 252, 252, 252)');
    campaignGradient.addColorStop(1, 'rgba(149, 175, 252, 0.05)');

    new Chart(campaignCtx, {
      type: 'line',
      data: {
        labels: ['Mar 01', 'Mar 08', 'Mar 15', 'Mar 22', 'Mar 29', 'Apr 05'],
        datasets: [{
          data: [2890, 2890, 2890, 2890, 2890, 2890],
          borderColor: '#7C93F5',
          backgroundColor: campaignGradient,
          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() + ' clicks'
            }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            border: { display: false }
          },
          y: {
            display: false,
            grid: { display: false },
            border: { display: false }
          }
        }
      }
    });
</script>
@endsection