@extends('layouts.main')

@section('content')

{{-- ================= HEADER ================= --}}
<div class="content-header text-center py-5 mb-5 position-relative header-inter overflow-hidden shadow-lg">
  <div class="header-glow"></div>
  <div class="container-fluid position-relative header-content-fade">

    <div class="badge-custom mb-3 px-4 py-2 rounded-pill d-inline-flex align-items-center shadow-sm">
      <i class="fas fa-sparkles text-gold me-2"></i> 
      <span class="text-white fw-semibold small">Dashboard Analitik & Statistik</span>
    </div>

    <h2 class="fw-bold display-4 header-title mb-3">
      <i class="fas fa-chart-line me-3 text-gold"></i> Info Grafis
    </h2>

    <p class="fs-5 fw-semibold header-subtitle mt-3">
      <i class="fas fa-school me-2 text-gold"></i>
      DATA <span class="text-gold highlight-glow">SMK INDUSTRI NASIONAL 1</span> – Kurikulum Merdeka
    </p>

    <!-- Logo / Badge Tiga Jurusan (TBSM, TKJ, Farmasi) -->
    <div class="jurusan-badge-container mt-3">
      <span class="jurusan-pill"><i class="fas fa-motorcycle text-danger"></i> TBSM</span>
      <span class="jurusan-pill"><i class="fas fa-network-wired text-primary"></i> TKJ</span>
      <span class="jurusan-pill"><i class="fas fa-pills text-success"></i> Farmasi</span>
    </div>

    <p class="fs-6 header-meta mt-3">
      <i class="fas fa-fingerprint me-2"></i>
      <span class="text-gold fw-bold">kangRinan</span> – mariarumi
    </p>

  </div>
</div>

{{-- ================= INFO CARD ================= --}}
<section class="content pb-5">
  <div class="container-fluid">

    <div class="row g-4">
      @foreach ($data as $index =>$item)
      @php
          // Palet warna modern & ikon dinamis yang menyatu dengan tema Emerald
          $themes = [
              ['bg' => 'linear-gradient(135deg, #059669, #047857)', 'glow' => 'rgba(5, 150, 105, 0.35)', 'icon' => 'fas fa-user-graduate'],
              ['bg' => 'linear-gradient(135deg, #0d9488, #0f766e)', 'glow' => 'rgba(13, 148, 136, 0.35)', 'icon' => 'fas fa-chalkboard-user'],
              ['bg' => 'linear-gradient(135deg, #0284c7, #0369a1)', 'glow' => 'rgba(2, 132, 199, 0.35)', 'icon' => 'fas fa-book-open-reader'],
              ['bg' => 'linear-gradient(135deg, #7c3aed, #6d28d9)', 'glow' => 'rgba(124, 58, 237, 0.35)', 'icon' => 'fas fa-shapes'],
              ['bg' => 'linear-gradient(135deg, #d97706, #b45309)', 'glow' => 'rgba(217, 119, 6, 0.35)', 'icon' => 'fas fa-award'],
              ['bg' => 'linear-gradient(135deg, #e11d48, #be123c)', 'glow' => 'rgba(225, 29, 72, 0.35)', 'icon' => 'fas fa-layer-group'],
          ];
          $currentTheme = $themes[$index % count($themes)];$iconClass = !empty($item['icon']) &&$item['icon'] !== 'fas fa-chart-bar' ? $item['icon'] :$currentTheme['icon'];
          $targetRoute = route($item['route'] ?? '#');
          $itemTitle =$item['title'] ?? 'Detail Data';
      @endphp

      <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
        <div class="card info-card h-100 card-animate" style="animation-delay: {{ $index * 0.1 }}s">
          <div class="card-body text-center d-flex flex-column justify-content-between p-4">

            <div>
              <div class="icon-soft mb-4 shadow-sm" style="background: {{ $currentTheme['bg'] }}; box-shadow: 0 10px 20px {{$currentTheme['glow'] }} !important;">
                <i class="{{ $iconClass }} text-white"></i>
              </div>

              <h3 class="display-5 fw-bold text-gradient mb-2">
                {{ $item['count'] ?? 0 }}
              </h3>

              <p class="fs-6 fw-bold text-uppercase tracking-wide text-muted mb-3">
                {{ $itemTitle }}
              </p>
            </div>

            <button onclick="challengeNavigate('{{ $targetRoute }}', '{{$itemTitle }}')" 
                    class="btn btn-inter btn-sm rounded-pill px-4 fw-semibold shadow-sm w-100">
              <span>Lihat Detail</span> <i class="fas fa-arrow-right ms-2 transition-icon"></i>
            </button>

          </div>
        </div>
      </div>
      @endforeach
    </div>

    {{-- ================= CHART ================= --}}
    <div class="row mt-5">

      <div class="col-lg-6 mb-4">
        <div class="card chart-card card-animate" style="animation-delay: 0.4s">
          <div class="card-header bg-gradient-emerald text-white fw-semibold py-3 border-0">
            <i class="fas fa-chart-bar me-2 text-gold"></i> Statistik Kurikulum Merdeka SMK Industri Nasional 1
          </div>
          <div class="card-body p-4">
            <canvas id="barChart" height="240"></canvas>
          </div>
        </div>
      </div>

      <div class="col-lg-6 mb-4">
        <div class="card chart-card card-animate" style="animation-delay: 0.5s">
          <div class="card-header bg-gradient-teal text-white fw-semibold py-3 border-0">
            <i class="fas fa-chart-pie me-2 text-gold"></i> Proporsi Grafik Kurikulum Merdeka SMK Industri Nasional 1
          </div>
          <div class="card-body p-4">
            <canvas id="pieChart" height="240"></canvas>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>

{{-- ================= STYLE ================= --}}
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
}

/* ===== HEADER STYLING ===== */
.header-inter {
  background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #0f766e 100%);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.header-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.2) 0%, transparent 60%);
  pointer-events: none;
  animation: pulseGlow 6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}

.header-title {
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.header-subtitle { color: #ecfdf5; }
.header-meta { color: #a7f3d0; }

.badge-custom {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content-fade {
  animation: fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.text-gold { color: #fde047 !important; }
.highlight-glow { text-shadow: 0 0 15px rgba(253, 224, 71, 0.5); }

/* Badge Jurusan Header (TBSM, TKJ, Farmasi) */
.jurusan-badge-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.jurusan-pill {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1.2rem;
  border-radius: 50rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.jurusan-pill i { font-size: 1rem; }
.jurusan-pill:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.25);
  border-color: #fde047;
}

/* ===== CARD STYLING & ANIMATION ===== */
.card-animate {
  animation: fadeInUpCard 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInUpCard {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.info-card {
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(6, 78, 59, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #34d399);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 35px -10px rgba(6, 78, 59, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.info-card:hover::before { opacity: 1; }

.icon-soft {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-card:hover .icon-soft {
  transform: rotate(8deg) scale(1.1);
}

.icon-soft i { font-size: 30px; }

/* Text Gradient Emerald */
.text-gradient {
  background: linear-gradient(135deg, #064e3b, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Button Inter Emerald */
.btn-inter {
  background: linear-gradient(135deg, #064e3b, #047857);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 12px !important;
  transition: all 0.3s ease;
}

.btn-inter:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.btn-inter:hover .transition-icon { transform: translateX(5px); }
.transition-icon { transition: transform 0.3s ease; }

/* ===== CHART CARD ===== */
.chart-card {
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 20px;
  box-shadow: 0 10px 30px -5px rgba(6, 78, 59, 0.06);
  background: #ffffff;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.chart-card:hover { transform: translateY(-4px); }

.bg-gradient-emerald {
  background: linear-gradient(135deg, #064e3b, #059669);
  letter-spacing: 0.5px;
}

.bg-gradient-teal {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  letter-spacing: 0.5px;
}
</style>

@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
/* ===== POPUP TANTANGAN ALJABAR ===== */
function challengeNavigate(targetUrl, itemTitle) {
  // Generasi persamaan aljabar otomatis: a * x + b = c
  const x = Math.floor(Math.random() * 8) + 2; // Nilai x antara 2 - 9
  const a = Math.floor(Math.random() * 4) + 2; // Koefisien a antara 2 - 5
  const b = Math.floor(Math.random() * 15) + 1; // Konstanta b antara 1 - 15
  const c = (a * x) + b;

  Swal.fire({
    title: '<span style="color: #064e3b; font-weight: 800;"><i class="fas fa-square-root-variable text-success me-2"></i>Tantangan Aljabar</span>',
    html: `
      <p class="text-secondary mb-3" style="font-size: 0.95rem;">
        Selesaikan persamaan di bawah ini untuk membuka halaman <strong>${itemTitle}</strong>:
      </p>
      <div class="p-3 mb-3 text-center rounded-3" style="background: #f0fdf4; border: 1.5px dashed #10b981;">
        <span style="font-size: 1.4rem; font-weight: 800; color: #047857;">${a}x + ${b} = ${c}</span>
      </div>
      <p class="text-muted small mb-1">Berapakah nilai <strong>x</strong>?</p>
    `,
    input: 'number',
    inputAttributes: {
      autocapitalize: 'off',
      placeholder: 'Masukkan jawaban angka...',
      required: 'true',
      style: 'text-align: center; font-size: 1.1rem; font-weight: 700;'
    },
    showCancelButton: true,
    confirmButtonText: 'Verifikasi & Lanjutkan <i class="fas fa-arrow-right ms-1"></i>',
    cancelButtonText: 'Batal',
    confirmButtonColor: '#059669',
    cancelButtonColor: '#94a3b8',
    backdrop: `rgba(6, 78, 59, 0.35) backdrop-filter: blur(5px)`,
    customClass: {
      popup: 'rounded-4 shadow-lg border-0 p-4',
      confirmButton: 'btn btn-success px-4 py-2 rounded-3 font-weight-bold',
      cancelButton: 'btn btn-secondary px-4 py-2 rounded-3'
    },
    preConfirm: (value) => {
      if (!value || parseInt(value) !== x) {
        Swal.showValidationMessage(`Jawaban salah! Petunjuk: Hitung (${c} - ${b}) ÷ ${a}`);
        return false;
      }
      return true;
    }
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        icon: 'success',
        title: 'Jawaban Benar! 🎉',
        text: 'Mengalihkan Anda ke halaman tujuan...',
        timer: 1200,
        showConfirmButton: false,
        background: '#ffffff',
        iconColor: '#10b981'
      }).then(() => {
        window.location.href = targetUrl;
      });
    }
  });
}

/* ===== CHARTS INITIALIZATION ===== */
const labels = @json(array_column($data, 'title'));
const values = @json(array_column($data, 'count'));

// Palet warna Emerald/Teal yang senada
const chartColors = [
  '#059669',
  '#0d9488',
  '#0284c7',
  '#7c3aed',
  '#d97706',
  '#e11d48'
];

new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: values,
      backgroundColor: chartColors,
      borderRadius: 10,
      borderSkipped: false,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: { 
      y: { 
        beginAtZero: true,
        grid: { color: 'rgba(0,0,0,0.04)' }
      },
      x: { grid: { display: false } }
    }
  }
});

new Chart(document.getElementById('pieChart'), {
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      data: values,
      backgroundColor: chartColors,
      borderWidth: 3,
      borderColor: '#ffffff',
      hoverOffset: 8
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '65%',
    plugins: { 
      legend: { 
        position: 'bottom',
        labels: { boxWidth: 12, font: { family: 'Plus Jakarta Sans', size: 12 } }
      } 
    }
  }
});
</script>
@endsection