@extends('layouts.master')
@section('title', 'Dashboard')
  <div class="flex min-h-screen">
    @include('layouts.navbar')

    <!-- Main Content -->
    <main class="flex-1 p-8">

      <!-- Header -->
      <div class="mb-8">
        <h2 class="text-5xl font-bold text-slate-900">
          Good morning, {{ Auth::user()->name}} 👋
        </h2>

        <p class="text-slate-500 mt-3 text-lg">
          Here's what's happening with your live commerce store today.
        </p>
      </div>

      <!-- Stats -->
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8">

        <!-- Card -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
          <div class="flex items-start justify-between">

            <div>
              <p class="text-slate-500 font-medium">Total Live Sessions</p>

              <h3 class="text-5xl font-bold mt-3">24</h3>

              <p class="text-green-500 mt-3 font-medium">
                +3
                <span class="text-slate-400 font-normal">from last week</span>
              </p>
            </div>

            <div
              class="w-14 h-14 rounded-2xl bg-purple-100 flex items-center justify-center text-purple-600 text-xl">
              <i class="fa-solid fa-video"></i>
            </div>

          </div>
        </div>

        <!-- Card -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
          <div class="flex items-start justify-between">

            <div>
              <p class="text-slate-500 font-medium">Total Revenue</p>

              <h3 class="text-5xl font-bold mt-3">$12,450.00</h3>

              <p class="text-green-500 mt-3 font-medium">
                +15.3%
                <span class="text-slate-400 font-normal">from last week</span>
              </p>
            </div>

            <div
              class="w-14 h-14 rounded-2xl bg-green-100 flex items-center justify-center text-green-600 text-xl">
              <i class="fa-solid fa-dollar-sign"></i>
            </div>

          </div>
        </div>

        <!-- Card -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
          <div class="flex items-start justify-between">

            <div>
              <p class="text-slate-500 font-medium">Total Orders</p>

              <h3 class="text-5xl font-bold mt-3">186</h3>

              <p class="text-green-500 mt-3 font-medium">
                +12
                <span class="text-slate-400 font-normal">from last week</span>
              </p>
            </div>

            <div
              class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center text-blue-600 text-xl">
              <i class="fa-solid fa-cart-shopping"></i>
            </div>

          </div>
        </div>

      </div>

      <!-- Bottom Section -->
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <!-- Chart -->
        <div
          class="xl:col-span-2 bg-white rounded-3xl border border-slate-200 shadow-sm p-6">

          <div class="mb-6">
            <h3 class="text-3xl font-bold text-slate-900">
              Viewer Engagement
            </h3>

            <p class="text-slate-500 mt-1">
              Live viewer count over current session
            </p>
          </div>

          <div class="h-[420px]">
            <canvas id="viewerChart"></canvas>
          </div>

        </div>

        <!-- Activity -->
        <div
          class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6">

          <div class="flex items-center justify-between mb-6">

            <h3 class="text-3xl font-bold text-slate-900">
              Recent Activities
            </h3>

            <button class="text-blue-600 font-semibold hover:underline">
              View all
            </button>

          </div>

          <div class="space-y-6">

            <!-- Item -->
            <div class="flex gap-4">

              <div
                class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 shrink-0">
                <i class="fa-solid fa-user-plus"></i>
              </div>

              <div>
                <h4 class="font-semibold text-lg">
                  User alex_cool joined the live
                </h4>

                <p class="text-slate-400 mt-1">Just now</p>
              </div>

            </div>

            <!-- Item -->
            <div class="flex gap-4">

              <div
                class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
                <i class="fa-solid fa-cube"></i>
              </div>

              <div>
                <h4 class="font-semibold text-lg">
                  Order #7392 processed ($249.99)
                </h4>

                <p class="text-slate-400 mt-1">2 mins ago</p>
              </div>

            </div>

            <!-- Item -->
            <div class="flex gap-4">

              <div
                class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 shrink-0">
                <i class="fa-regular fa-circle-play"></i>
              </div>

              <div>
                <h4 class="font-semibold text-lg">
                  Started session 'Summer Collection Reveal'
                </h4>

                <p class="text-slate-400 mt-1">45 mins ago</p>
              </div>

            </div>

            <!-- Item -->
            <div class="flex gap-4">

              <div
                class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 shrink-0">
                <i class="fa-solid fa-user-plus"></i>
              </div>

              <div>
                <h4 class="font-semibold text-lg">
                  User sarah_j joined the live
                </h4>

                <p class="text-slate-400 mt-1">1 hour ago</p>
              </div>

            </div>

          </div>

        </div>

      </div>

    </main>

  </div>

  <script>
    const ctx = document.getElementById('viewerChart');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00'],
        datasets: [{
          label: 'Viewers',
          data: [120, 250, 410, 380, 520, 680, 890],
          borderWidth: 3,
          tension: 0.4,
          fill: false,
          pointRadius: 5,
          pointHoverRadius: 7,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,

        plugins: {
          legend: {
            display: false
          }
        },

        scales: {
          y: {
            grid: {
              color: '#e2e8f0'
            },
            ticks: {
              color: '#64748b'
            }
          },

          x: {
            grid: {
              display: false
            },
            ticks: {
              color: '#64748b'
            }
          }
        }
      }
    });
  </script>

</body>
</html>