<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Admin Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <!-- Fonts and icons -->
  <script src="{{ asset('admin/js/plugin/webfont/webfont.min.js') }}"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

  <script>
    WebFont.load({
      google: { families: ["Lato:300,400,700,900"] },
      custom: {
        families: [
          "Font Awesome 5 Solid",
          "Font Awesome 5 Regular",
          "Font Awesome 5 Brands",
          "simple-line-icons",
        ],
        urls: ['../assets/css/fonts.min.css'],
      },
      active: function () {
        sessionStorage.fonts = true;
      },
    });
  </script>

  <!-- CSS Files -->
  <link rel="stylesheet" href="{{ asset('admin/css/bootstrap.min.css') }}" />
  <link rel="stylesheet" href="{{ asset('admin/css/atlantis.css') }}" />

  <style>
  body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f8fafc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bagian atas dengan background gradient dan teks */
.gradient-container {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: white;
  padding: 3.5rem 2rem 3rem;
  position: relative;
  box-sizing: border-box;
  min-height: 280px;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 5px 15px rgba(107, 33, 168, 0.3);
}

.gradient-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.gradient-container h2,
.gradient-container h5 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 680px;
  line-height: 1.4;
  user-select: none;
}

.gradient-container h2 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  letter-spacing: -0.025em;
}

.gradient-container h5 {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.95;
}

/* Container card, margin negatif agar card "menempel" */
.card-container {
  position: relative;
  z-index: 10;
  margin-top: -80px;
  padding: 0 2rem 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Styling card */
.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
}

/* Icon besar di card */
.icon-big {
  font-size: 2.5rem;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

/* Custom gradient backgrounds for icons */
.visitors-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.subscribers-icon {
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.sales-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.orders-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

/* Quiz control specific icon */
.quiz-control-icon {
  background: linear-gradient(135deg, #ec4899, #be185d);
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}

/* Card text info tanpa background, hanya warna teks */
.card-info {
  flex: 1;
  min-width: 0;
  background: none !important;
}

/* PAKSA warna teks kategori dan judul agar override */
.card-info p.card-category {
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  user-select: none;
  color: #64748b !important;
}

.card-info h4.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  user-select: none;
  color: #1e293b !important;
}

/* Stats trend indicator */
.stats-trend {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  user-select: none;
}

.trend-up {
  color: #059669;
}

.trend-down {
  color: #dc2626;
}

/* Quiz control card styling */
.quiz-control-card {
  background: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%);
  border: 2px solid #e879f9;
  margin-top: 2rem;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(232, 121, 249, 0.15);
  text-align: center;
}

.quiz-control-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(232, 121, 249, 0.25);
}

.quiz-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.quiz-status-open {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: 1px solid #86efac;
}

.quiz-status-closed {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid #f87171;
}

.quiz-toggle-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.quiz-toggle-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-open-quiz {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.btn-open-quiz:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4);
}

.btn-close-quiz {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

.btn-close-quiz:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.4);
}

/* Responsive improvements */
@media (max-width: 991px) {
  .gradient-container {
    padding: 3rem 1.5rem 2.5rem;
    min-height: 280px;
    border-radius: 0 0 20px 20px;
  }

  .gradient-container h2 {
    font-size: 1.8rem;
  }

  .gradient-container h5 {
    font-size: 1rem;
  }

  .card-container {
    padding: 0 1.5rem 3rem;
    margin-top: -80px;
  }

  .card {
    padding: 2rem;
    gap: 1.5rem;
  }

  .icon-big {
    width: 70px;
    height: 70px;
    font-size: 2.25rem;
  }

  .card-info h4.card-title {
    font-size: 1.5rem !important;
  }

  .quiz-control-card {
    padding: 2.5rem;
  }
}

@media (max-width: 575px) {
  .card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .quiz-toggle-btn {
    min-width: 160px;
    padding: 0.875rem 1.5rem;
  }
}

/* Animation */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: slideInUp 0.8s ease forwards;
  opacity: 0;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="main-header">
      <!-- Logo Header -->
      <div class="logo-header" data-background-color="blue">
        <div class="nav-toggle">
          <button class="btn btn-toggle toggle-sidebar">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>
      <!-- End Logo Header -->

      <!-- Navbar Header -->
      @include('admin.navbar')
      <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    @include('admin.sidebar')
    <!-- End Sidebar -->

    <div class="main-panel">
      <div class="content">

        <!-- Bagian atas dengan gradient dan teks -->
        <div class="gradient-container">
          <h2 class="fw-bold">
            Selamat datang kembali, {{ Auth::user()->name }}! 👋
          </h2>
          <h5>
            Ini adalah pusat kendali sistem pendukung keputusan. Pantau data terbaru dan kelola informasi siswa dengan lebih terstruktur dan mudah diakses.
          </h5>
        </div>

        <!-- Container card -->
        <div class="card-container container">
          <div class="row g-4">
            
            <!-- Card 1: Total Siswa -->
            <div class="col-12 col-sm-6 col-md-3">
              <a href="{{ route('siswa') }}" class="text-decoration-none">
                <div class="card clickable-card" style="animation-fill-mode: forwards;">
                  <div class="icon-big visitors-icon">
                    <i class="fa-solid fa-users"></i>
                  </div>
                  <div class="card-info">
                    <p class="card-category">Total Siswa</p>
                    <h4 class="card-title">{{ number_format($totalSiswa) }}</h4>
                  </div>
                </div>
              </a>
            </div>
            
            <!-- Card 2: Kurikulum -->
            <div class="col-12 col-sm-6 col-md-3">
              <a href="{{ route('kurikulum') }}" class="text-decoration-none">
                <div class="card clickable-card" style="animation-fill-mode: forwards;">
                  <div class="icon-big subscribers-icon">
                    <i class="fa-solid fa-book-open-reader"></i>
                  </div>
                  <div class="card-info">
                    <p class="card-category">Kurikulum</p>
                    <h4 class="card-title">{{ number_format($totalKurikulum) }}</h4>
                  </div>
                </div>
              </a>
            </div>
            
            <!-- Card 3: Total Responden -->
            <div class="col-12 col-sm-6 col-md-3">
              <a href="{{ route('perhitungan') }}" class="text-decoration-none">
                <div class="card clickable-card" style="animation-fill-mode: forwards;">
                  <div class="icon-big sales-icon">
                    <i class="fa-solid fa-chart-line"></i>
                  </div>
                  <div class="card-info">
                    <p class="card-category">Total Responden</p>
                    <h4 class="card-title">{{ number_format($totalResponden) }}</h4>
                  </div>
                </div>
              </a>
            </div>
            
            <!-- Card 4: Sekolah -->
            <div class="col-12 col-sm-6 col-md-3">
              <a href="{{ route('sekolah') }}" class="text-decoration-none">
                <div class="card clickable-card" style="animation-fill-mode: forwards;">
                  <div class="icon-big orders-icon">
                    <i class="fa-solid fa-school"></i>
                  </div>
                  <div class="card-info">
                    <p class="card-category">Sekolah</p>
                    <h4 class="card-title">{{ number_format($totalSekolah) }}</h4>
                  </div>
                </div>
              </a>
            </div>
            
          </div> <!-- end row -->

          <!-- Quiz Control Section -->
          <div class="row mt-4">
            <div class="col-12">
              <div class="card quiz-control-card" style="animation-fill-mode: forwards;">
                <div class="icon-big quiz-control-icon">
                  <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div class="card-info">
                  <p class="card-category">Kontrol Akses Quiz</p>
                  <h4 class="card-title">Kelola Akses User ke Section Quiz</h4>
                  
                  <div class="mt-3">
                    <div class="quiz-status-badge {{ $quizAccessStatus ? 'quiz-status-open' : 'quiz-status-closed' }}" id="statusBadge">
                      <i class="fa-solid {{ $quizAccessStatus ? 'fa-lock-open' : 'fa-lock' }}"></i>
                      <span id="statusText">{{ $quizAccessStatus ? 'QUIZ TERBUKA' : 'QUIZ TERKUNCI' }}</span>
                    </div>
                    
                    <div class="mt-3">
                      <button 
                        id="toggleQuizBtn" 
                        class="quiz-toggle-btn {{ $quizAccessStatus ? 'btn-close-quiz' : 'btn-open-quiz' }}"
                        onclick="toggleQuizAccess()"
                      >
                        <i class="fa-solid {{ $quizAccessStatus ? 'fa-lock' : 'fa-lock-open' }}"></i>
                        <span id="btnText">{{ $quizAccessStatus ? 'Tutup Akses Quiz' : 'Buka Akses Quiz' }}</span>
                      </button>
                    </div>
                    
                    <small class="text-muted mt-2 d-block" id="statusDescription">
                      {{ $quizAccessStatus 
                          ? 'Semua user dapat mengakses section quiz di dashboard mereka' 
                          : 'Section quiz terkunci untuk semua user hingga Anda membuka akses' 
                      }}
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div> <!-- end card-container -->

      </div> <!-- end content -->
    </div> <!-- end main-panel -->
  </div> <!-- end wrapper -->

  <!-- Script Files -->
  @include('admin.script')
  <!-- End Script Files -->

  <script>
    // Set up CSRF token for AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Animate numbers on page load
    document.addEventListener('DOMContentLoaded', function() {
      const cardTitles = document.querySelectorAll('.card-title');

      cardTitles.forEach((title, index) => {
        const finalText = title.textContent.trim();
        const numericValue = parseInt(finalText.replace(/[^0-9]/g, ''));

        if (!isNaN(numericValue) && numericValue > 0) {
          let currentValue = 0;
          const increment = Math.max(1, numericValue / 60);
          const hasSymbol = finalText.includes('$');

          const timer = setInterval(() => {
            currentValue += increment;
            if (currentValue >= numericValue) {
              title.textContent = finalText;
              clearInterval(timer);
            } else {
              const displayValue = Math.floor(currentValue).toLocaleString();
              title.textContent = hasSymbol ? `$ ${displayValue}` : displayValue;
            }
          }, 25 + (index * 8));
        } else {
          // Jika bukan angka valid, tetap tampilkan teks asli
          title.textContent = finalText;
        }
      });
    });

    // Function to toggle quiz access
    function toggleQuizAccess() {
      const btn = document.getElementById('toggleQuizBtn');
      const btnText = document.getElementById('btnText');
      const statusBadge = document.getElementById('statusBadge');
      const statusText = document.getElementById('statusText');
      const statusDescription = document.getElementById('statusDescription');
      
      // Disable button during request
      btn.disabled = true;
      btnText.textContent = 'Memproses...';
      
      // Make AJAX request
      fetch('{{ route("admin.toggle-quiz-access") }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // Update UI based on new status
          const isOpen = data.status;
          
          // Update button
          btn.className = `quiz-toggle-btn ${isOpen ? 'btn-close-quiz' : 'btn-open-quiz'}`;
          btn.querySelector('i').className = `fa-solid ${isOpen ? 'fa-lock' : 'fa-lock-open'}`;
          btnText.textContent = isOpen ? 'Tutup Akses Quiz' : 'Buka Akses Quiz';
          
          // Update status badge
          statusBadge.className = `quiz-status-badge ${isOpen ? 'quiz-status-open' : 'quiz-status-closed'}`;
          statusBadge.querySelector('i').className = `fa-solid ${isOpen ? 'fa-lock-open' : 'fa-lock'}`;
          statusText.textContent = isOpen ? 'QUIZ TERBUKA' : 'QUIZ TERKUNCI';
          
          // Update description
          statusDescription.textContent = isOpen 
            ? 'Semua user dapat mengakses section quiz di dashboard mereka'
            : 'Section quiz terkunci untuk semua user hingga Anda membuka akses';
          
          // Show success message using toastr
          toastr.success(data.message);
        } else {
          // Show error message using toastr
          toastr.error(data.message || 'Terjadi kesalahan');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        // Show error message using toastr
        toastr.error('Terjadi kesalahan saat memproses permintaan');
      })
      .finally(() => {
        // Re-enable button
        btn.disabled = false;
      });
    }
  </script>
</body>
</html>