<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Codepena Showcase</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
  </script>
  @include('components.styles')
  
    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .card-animate {
      animation: fadeInUp 0.5s ease-out forwards;
    }
    
    /* Staggered delays for cards */
    .card-animate:nth-child(1) { animation-delay: 0.1s; }
    .card-animate:nth-child(2) { animation-delay: 0.2s; }
    .card-animate:nth-child(3) { animation-delay: 0.3s; }
    .card-animate:nth-child(4) { animation-delay: 0.4s; }
    .card-animate:nth-child(5) { animation-delay: 0.5s; }
    .card-animate:nth-child(6) { animation-delay: 0.6s; }
    .card-animate:nth-child(7) { animation-delay: 0.7s; }
    .card-animate:nth-child(8) { animation-delay: 0.8s; }
    .card-animate:nth-child(9) { animation-delay: 0.9s; }
    .card-animate:nth-child(10) { animation-delay: 1.0s; }
    
    /* Filter active animation */
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.02);
      }
    }
    
    .filter-active {
      animation: pulse 1s ease-in-out;
    }
    
    /* Sidebar animations */
    .sidebar-container {
      transition: transform 0.3s ease-in-out;
    }
    
    .sidebar-container.active {
      transform: translateX(0);
    }
    
   
    
    /* Loading animation */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .animate-spin {
      animation: spin 1s linear infinite;
    }


    .light-gradient {
  background-image: linear-gradient(to right bottom, #f1f1f1, #fdf0f7, #ffefed, #fff3d9, #faffd1);
}

.dark-gradient {
  background-color: #141b24 !important;
  background-image: none !important;
}
  
</head>
<body class="text-gray-800 dark:text-gray-200 transition-colors duration-300 light-gradient dark:bg-[#1a1a1a]">



  <div id="page-loader" class="fixed inset-0 bg-white dark:bg-gray-900 flex items-center justify-center z-50 transition-opacity duration-300">
    <div class="flex flex-col items-center">
      <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div>
      <p class="text-gray-600 dark:text-gray-400">Loading content...</p>
    </div>
  </div>

  <!-- Payment Modal -->
  <div id="payment-modal" class="fixed inset-0 z-50 hidden">
    <div class="modal-backdrop fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
    <div class="modal-container">
      @include('components.modals')
    </div>
  </div>

  <!-- Header -->
  @include('components.headers')

  <!-- Box Filter -->
  @include('components.boxfilter')

  <div class="flex h-[calc(100vh-140px)]">
    <!-- Mobile Sidebar Toggle -->
    <button id="sidebar-toggle" class="fixed bottom-4 right-4 md:hidden bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg z-50 transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
    
    <!-- Sidebar Overlay -->
    <div id="sidebar-overlay" class="sidebar-overlay"></div>
    
    <!-- Sidebar -->
    <aside id="sidebar" class="sidebar-container w-64 md:w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-y-auto transition-colors duration-300 mx-3 md:mx-0 md:ml-6 lg:ml-8 rounded-xl shadow-sm">
      <div class="p-3 md:p-6">
        <div class="flex justify-between items-center mb-3 md:hidden">
          <h2 class="text-base font-semibold text-gray-900 dark:text-white">Categories</h2>
          <button id="close-sidebar" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
        
        <div class="space-y-1">
          <a href="{{ route('welcome') }}" class="block">
            <div class="flex justify-between items-center py-2 md:py-3 px-3 md:px-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer rounded-lg transition-colors {{ !$currentKategori ? 'bg-purple-50 dark:bg-purple-900 filter-active' : '' }}">
              <span class="font-medium text-gray-700 dark:text-gray-300 text-xs md:text-base">
                All Categories
              </span>
              <span class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 px-2 py-1 rounded text-xs">
                {{ $kategoriList->sum('jumlah') }}
              </span>
            </div>
          </a>
          
          @foreach ($kategoriList as $kategori)
            <a href="{{ route('welcome.kategori', ['kategori' => $kategori->kat_var]) }}" class="block">
              <div class="flex justify-between items-center py-2 md:py-3 px-3 md:px-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer rounded-lg transition-colors {{ $currentKategori === $kategori->kat_var ? 'bg-purple-50 dark:bg-purple-900 filter-active' : '' }}">
                <span class="font-medium text-gray-700 dark:text-gray-300 text-xs md:text-base">
                  {{ $kategori->kategori }}
                </span>
                <span class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 px-2 py-1 rounded text-xs">
                  {{ $kategori->jumlah }}
                </span>
              </div>
            </a>
          @endforeach
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <section class="flex-1 main-content">
      <div class="p-3 sm:p-6 md:p-8 mt-3 md:mt-0 pb-20 md:pb-12">
        @if($kontenList->isEmpty())
       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden max-w-2xl mx-auto">
  <div class="p-6 sm:p-8 text-center">
    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No projects found</h3>
    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
      @if($currentKategori)
        There are no projects in this category yet.
      @else
        There are no projects available yet.
      @endif
    </p>
    <div class="mt-6">
      <a href="{{ route('welcome') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
        View all projects
      </a>
    </div>
  </div>
</div>
        @else
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 md:gap-8 max-w-7xl mx-auto">
            @foreach ($kontenList as $konten)
              <div class="card-animate bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl md:rounded-2xl shadow-sm hover:shadow-lg dark:hover:shadow-2xl transition-all duration-300 p-4 sm:p-6 md:p-8 opacity-0">
                <img 
                  src="{{ $konten->url_thumb }}" 
                  alt="{{ $konten->nama_konten }}" 
                  class="w-full card-image h-48 sm:h-56 md:h-64 object-cover rounded-lg md:rounded-xl mb-4 sm:mb-5 md:mb-6 transition-transform duration-300 hover:scale-[1.02]"
                />
                
                <div class="inline-flex items-center gap-1 sm:gap-2 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 rounded-full mb-3 md:mb-4">
                  {!! $konten->nama_class !!}
                  {{ $konten->kategori }}
                </div>

                <h2 class="text-lg sm:text-xl md:text-2xl font-semibold mb-2 md:mb-3 text-gray-900 dark:text-white line-clamp-2">
                  {{ $konten->nama_konten }}
                </h2>

                <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-4 md:mb-6 line-clamp-3">
                  {{ $konten->deskripsi }}
                </p>

                <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-700 pt-4 md:pt-6">
                  <a href="{{ $konten->url_demo }}" target="_blank" class="inline-flex items-center gap-1 sm:gap-2 text-sm sm:text-base text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    Lihat Demo
                  </a>

                 <a href="{{ $konten->url_demo }}" download class="inline-flex items-center gap-1 sm:gap-2 text-sm sm:text-base text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors download-btn">
                  <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
                  </svg>
                  Download
                </a>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      </div>

      <!-- Download Restricted Modal -->
<div id="download-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
  <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6 sm:p-8 transform transition-all">
    <div class="absolute top-4 right-4">
      <button id="close-download-modal" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    
    <div class="text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
        <svg class="h-6 w-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
      </div>
      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Fitur Terkunci</h3>
      <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
        Download tidak tersedia untuk akun trial. Silahkan upgrade ke akun premium untuk mengakses fitur ini.
      </p>
      <div class="flex flex-col sm:flex-row justify-center gap-3">
        <button id="close-download-modal-btn" type="button" class="px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors">
          Tutup
        </button>
        <a href="" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors text-center">
          Daftar Sekarang
        </a>
      </div>
    </div>
  </div>
</div>
    </section>
  </div>

<script>
  // Theme toggle
  const themeToggle = document.getElementById('theme-toggle');
  const html = document.documentElement;
  const body = document.body;

  const currentTheme = localStorage.getItem('theme') || 'light';
  
  if (currentTheme === 'dark') {
    html.classList.add('dark');
    themeToggle.classList.add('dark');
    body.classList.remove('light-gradient');
    body.classList.add('dark-gradient');
  } else {
    html.classList.remove('dark');
    themeToggle.classList.remove('dark');
    body.classList.remove('dark-gradient');
    body.classList.add('light-gradient');
  }

  themeToggle.addEventListener('click', () => {
    if (html.classList.contains('dark')) {
      html.classList.remove('dark');
      themeToggle.classList.remove('dark');
      body.classList.remove('dark-gradient');
      body.classList.add('light-gradient');
      localStorage.setItem('theme', 'light');
    } else {
      html.classList.add('dark');
      themeToggle.classList.add('dark');
      body.classList.remove('light-gradient');
      body.classList.add('dark-gradient');
      localStorage.setItem('theme', 'dark');
    }
  });
  
  // Payment modal
  const paymentFlowBtn = document.getElementById('payment-flow-btn');
  const paymentFlowBtn2 = document.getElementById('payment-flow-btn2');
  const paymentModal = document.getElementById('payment-modal');
  const closeModalBtn = document.getElementById('close-modal');
  
  if (paymentFlowBtn) {
    paymentFlowBtn.addEventListener('click', () => {
      paymentModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    });
  }
  
  if (paymentFlowBtn2) {
    paymentFlowBtn2.addEventListener('click', () => {
      paymentModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    });
  }
  
  function closeModal() {
    paymentModal.classList.add('hidden');
    document.body.style.overflow = 'auto';
  }
  
  if (closeModalBtn) {
    closeModalBtn.addEventListener('click', closeModal);
  }
  
  paymentModal.addEventListener('click', (e) => {
    if (e.target === paymentModal) {
      closeModal();
    }
  });
  
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !paymentModal.classList.contains('hidden')) {
      closeModal();
    }
  });

  // Mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

  if (mobileMenuButton && mobileMenu) {
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
  }

  // Sidebar toggle for mobile
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');
  const sidebarOverlay = document.getElementById('sidebar-overlay');
  const closeSidebar = document.getElementById('close-sidebar');

  // Show sidebar
  if (sidebarToggle) {
    sidebarToggle.addEventListener('click', () => {
      sidebar.classList.add('active');
      sidebarOverlay.classList.add('active');
    });
  }

  // Hide sidebar
  function hideSidebar() {
    sidebar.classList.remove('active');
    sidebarOverlay.classList.remove('active');
  }
  
  if (closeSidebar) {
    closeSidebar.addEventListener('click', hideSidebar);
  }
  
  if (sidebarOverlay) {
    sidebarOverlay.addEventListener('click', hideSidebar);
  }

  // Close sidebar when clicking on links (mobile only)
  document.querySelectorAll('#sidebar a').forEach(link => {
    link.addEventListener('click', (e) => {
      if (window.innerWidth < 768) {
        hideSidebar();
      }
    });
  });

  // Handle window resize
  window.addEventListener('resize', () => {
    const isDesktop = window.innerWidth >= 768;

    // Hide mobile menu on desktop
    if (isDesktop && mobileMenu && !mobileMenu.classList.contains('hidden')) {
      mobileMenu.classList.add('hidden');
    }

    // Hide sidebar if switching to desktop view
    if (isDesktop && sidebar) {
      hideSidebar();
    }
  });

  // Hide page loader when content is loaded
  window.addEventListener('load', function() {
    const loader = document.getElementById('page-loader');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => {
        loader.style.display = 'none';
      }, 300);
    }
    
    // Trigger card animations
    const cards = document.querySelectorAll('.card-animate');
    cards.forEach(card => {
      card.classList.remove('opacity-0');
    });
  });

  // Handle filter active animations
  const activeFilters = document.querySelectorAll('.filter-active');
  activeFilters.forEach(filter => {
    filter.addEventListener('animationend', () => {
      filter.style.animation = 'none';
    });
  });

  // Download modal handling
const downloadButtons = document.querySelectorAll('a[download]');
const downloadModal = document.getElementById('download-modal');
const closeDownloadModalBtn = document.getElementById('close-download-modal');
const closeDownloadModalBtn2 = document.getElementById('close-download-modal-btn');

if (downloadButtons) {
  downloadButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      e.preventDefault();
      downloadModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    });
  });
}

function closeDownloadModal() {
  downloadModal.classList.add('hidden');
  document.body.style.overflow = 'auto';
}

if (closeDownloadModalBtn) {
  closeDownloadModalBtn.addEventListener('click', closeDownloadModal);
}

if (closeDownloadModalBtn2) {
  closeDownloadModalBtn2.addEventListener('click', closeDownloadModal);
}

downloadModal.addEventListener('click', (e) => {
  if (e.target === downloadModal) {
    closeDownloadModal();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !downloadModal.classList.contains('hidden')) {
    closeDownloadModal();
  }
});
</script>

</body>
</html>