<div class="container">
    <div class="cta-section" style="background-image: url('{{ asset('storage/'.$academic->background_image) }}'); background-size: cover; background-position: center;">
      <div class="cta-overlay"></div>
      <div class="cta-content">
        <div class="cta-label">Explore</div>
        <div class="cta-title">{{ $academic->title }}</div>
      </div>
    </div>
  </div>
  <div class="programs-section">
    <div class="view-toggle">
      <button class="toggle-display toggle-active" id="grid-view-btn">
        <img src="{{asset('images/si_grid-line.png')}}" /> Grid
      </button>
      <button class="toggle-display " id="list-view-btn">
        <img src="{{asset('images/lucide_list.png')}}" /> List
      </button>
    </div>

    <div class="programs-grid" id="programs-grid">
        @foreach ($programs as $program)
        <div class="program-card">
          <img src="{{asset('storage/'.$program->background_image)}}" alt="{{$program->main_title}}" />
          <div class="program-card-header-bba"></div>
          <div class="program-details">
            <div class="program-code">{{$program->main_code}}</div>
            <div class="program-name">{{$program->main_title}}</div>
            <div class="program-description">
              {{ \Illuminate\Support\Str::words($program->description, 50, '...') }}
            </div>
            <a href="{{route('program', $program->id)}}" class="read-more">READ MORE </a>
          </div>
        </div>
        @endforeach

    </div>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const gridViewBtn = document.getElementById("grid-view-btn");
      const listViewBtn = document.getElementById("list-view-btn");
      const programsGrid = document.getElementById("programs-grid");

      if (!gridViewBtn || !listViewBtn || !programsGrid) {
        console.warn('One or more required elements not found:', {gridViewBtn, listViewBtn, programsGrid});
        return;
      }

      // Event listener for Grid view button
      gridViewBtn.addEventListener("click", function () {
        programsGrid.classList.remove("list-view"); // Remove list-view class
        gridViewBtn.classList.add("toggle-active"); // Set grid button as active
        listViewBtn.classList.remove("toggle-active"); // Deactivate list button
      });

      // Event listener for List view button
      listViewBtn.addEventListener("click", function () {
        programsGrid.classList.add("list-view"); // Add list-view class
        listViewBtn.classList.add("toggle-active"); // Set list button as active
        gridViewBtn.classList.remove("toggle-active"); // Deactivate grid button
      });
    });
  </script>


<style>
    /* Responsive styles for academic top content section */
    @media (max-width: 1200px) {
        .container {
            padding: 0 30px;
        }
        .cta-section {
            min-height: 400px;
        }
        .cta-content {
            padding: 60px 40px;
        }
        .cta-title {
            font-size: 2.2rem;
        }
        .programs-section {
            padding: 60px 30px;
        }
        .programs-grid {
            gap: 30px;
        }
    }

    @media (max-width: 900px) {
        .container {
            padding: 0 24px;
        }
        .cta-section {
            min-height: 350px;
        }
        .cta-content {
            padding: 50px 30px;
        }
        .cta-label {
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        .cta-title {
            font-size: 1.8rem;
        }
        .programs-section {
            padding: 50px 24px;
        }
        .view-toggle {
            margin-bottom: 30px;
        }
        .toggle-display {
            padding: 10px 16px;
            font-size: 0.9rem;
        }
        .programs-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        .program-card {
            min-height: 320px;
        }
        .program-name {
            font-size: 1.1rem;
        }
        .program-description {
            font-size: 0.9rem;
            line-height: 1.5;
        }
    }

    @media (max-width: 700px) {
        .container {
            padding: 0 20px;
        }
        .cta-section {
            min-height: 300px;
        }
        .cta-content {
            padding: 40px 24px;
        }
        .cta-label {
            font-size: 0.85rem;
            margin-bottom: 10px;
        }
        .cta-title {
            font-size: 1.6rem;
        }
        .programs-section {
            padding: 40px 20px;
        }
        .view-toggle {
            margin-bottom: 25px;
        }
        .toggle-display {
            padding: 8px 14px;
            font-size: 0.85rem;
        }
        .toggle-display img {
            width: 16px;
            height: 16px;
        }
        .programs-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .program-card {
            min-height: 280px;
        }
        .program-code {
            font-size: 0.8rem;
        }
        .program-name {
            font-size: 1rem;
            margin-bottom: 8px;
        }
        .program-description {
            font-size: 0.85rem;
            line-height: 1.4;
            margin-bottom: 12px;
        }
        .read-more {
            font-size: 0.8rem;
            padding: 8px 16px;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 0 16px;
        }
        .cta-section {
            min-height: 250px;
        }
        .cta-content {
            padding: 30px 20px;
        }
        .cta-label {
            font-size: 0.8rem;
            margin-bottom: 8px;
        }
        .cta-title {
            font-size: 1.4rem;
        }
        .programs-section {
            padding: 30px 16px;
        }
        .view-toggle {
            margin-bottom: 20px;
            gap: 10px;
        }
        .toggle-display {
            padding: 6px 12px;
            font-size: 0.8rem;
        }
        .toggle-display img {
            width: 14px;
            height: 14px;
        }
        .programs-grid {
            gap: 16px;
        }
        .program-card {
            min-height: 240px;
        }
        .program-details {
            padding: 16px 12px;
        }
        .program-code {
            font-size: 0.75rem;
            margin-bottom: 6px;
        }
        .program-name {
            font-size: 0.95rem;
            margin-bottom: 6px;
        }
        .program-description {
            font-size: 0.8rem;
            line-height: 1.3;
            margin-bottom: 10px;
        }
        .read-more {
            font-size: 0.75rem;
            padding: 6px 12px;
        }
    }

    @media (max-width: 360px) {
        .container {
            padding: 0 12px;
        }
        .cta-section {
            min-height: 200px;
        }
        .cta-content {
            padding: 25px 16px;
        }
        .cta-label {
            font-size: 0.75rem;
            margin-bottom: 6px;
        }
        .cta-title {
            font-size: 1.2rem;
        }
        .programs-section {
            padding: 25px 12px;
        }
        .view-toggle {
            margin-bottom: 18px;
            gap: 8px;
        }
        .toggle-display {
            padding: 5px 10px;
            font-size: 0.75rem;
        }
        .toggle-display img {
            width: 12px;
            height: 12px;
        }
        .programs-grid {
            gap: 14px;
        }
        .program-card {
            min-height: 220px;
        }
        .program-details {
            padding: 14px 10px;
        }
        .program-code {
            font-size: 0.7rem;
            margin-bottom: 5px;
        }
        .program-name {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        .program-description {
            font-size: 0.75rem;
            line-height: 1.2;
            margin-bottom: 8px;
        }
        .read-more {
            font-size: 0.7rem;
            padding: 5px 10px;
        }
    }

    /* List view responsive adjustments */
    @media (max-width: 900px) {
        .programs-grid.list-view {
            grid-template-columns: 1fr;
        }
        .programs-grid.list-view .program-card {
            flex-direction: column;
            min-height: auto;
        }
        .programs-grid.list-view .program-card img {
            width: 100%;
            height: 200px;
        }
    }

    @media (max-width: 480px) {
        .programs-grid.list-view .program-card img {
            height: 160px;
        }
    }

    @media (max-width: 360px) {
        .programs-grid.list-view .program-card img {
            height: 140px;
        }
    }

    /* Ensure toggle buttons are properly spaced on mobile */
    @media (max-width: 480px) {
        .view-toggle {
            justify-content: center;
        }
    }
    </style>
