{{-- Achievements Section --}}
  <section class="achievement-section py-5" data-aos="fade-up">

      <div class="container">

          <!-- Section Heading -->
          <div class="text-center mb-5">

              <span class="achievement-badge">
                  {{ fixed('Achievements', 'उपलब्धियाँ') }}
              </span>

              <h2 class="achievement-title">
                  {{ fixed('Scientific Achievements & Discoveries', 'वैज्ञानिक उपलब्धियाँ एवं खोजें') }}
              </h2>

              <p class="achievement-subtitle">
                  {{ fixed(
                      'Milestones in biodiversity exploration, wildlife conservation and species discoveries.',
                      'जैव विविधता अन्वेषण, वन्यजीव संरक्षण एवं नई प्रजातियों की खोज में महत्वपूर्ण उपलब्धियाँ।',
                  ) }}
              </p>

          </div>

          @if ($achievements->count())
              <div id="achievementCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"
                  data-bs-interval="6000" data-bs-pause="hover">

                  <!-- Indicators -->
                  <div class="carousel-indicators">

                      @foreach ($achievements as $achievement)
                          <button type="button" data-bs-target="#achievementCarousel"
                              data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"
                              aria-current="{{ $loop->first ? 'true' : 'false' }}">
                          </button>
                      @endforeach

                  </div>

                  <div class="carousel-inner">

                      @foreach ($achievements as $achievement)
                          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">

                              <div class="achievement-card">

                                  <div class="row align-items-center g-0">

                                      <!-- Left Image -->
                                      <div class="col-lg-5">

                                          <div class="achievement-image">

                                              @if (!empty($achievement->szImage))
                                                  <img src="{{ asset('uploads/images/achievements/' . $achievement->szImage) }}"
                                                      class="img-fluid w-100"
                                                      alt="{{ lang($achievement->szTitle, $achievement->szHindiTitle) }}">
                                              @else
                                                  <img src="{{ asset('images/no-image.png') }}" class="img-fluid w-100"
                                                      alt="{{ fixed('No Image', 'कोई चित्र उपलब्ध नहीं') }}">
                                              @endif

                                              <div class="achievement-overlay">

                                                  <span>
                                                      {{ fixed('Achievement', 'उपलब्धि') }}
                                                  </span>

                                              </div>

                                          </div>

                                      </div>

                                      <!-- Right Content -->
                                      <div class="col-lg-7">

                                          <div class="achievement-content">

                                              <span class="achievement-tag">

                                                  {{ fixed('Zoological Survey of India', 'भारतीय प्राणी सर्वेक्षण') }}

                                              </span>

                                              <h2>

                                                  {{ lang($achievement->szTitle, $achievement->szHindiTitle) }}

                                              </h2>

                                              <p>

                                                  {!! strip_tags(lang($achievement->szContent, $achievement->szHindiContent)) !!}

                                              </p>

                                              <div class="d-flex align-items-center gap-3 mt-4">

                                                  @if (!empty($achievement->szDocument))
                                                      @php
                                                          $document = lang(
                                                              $achievement->szDocument,
                                                              $achievement->szHindiDocument,
                                                          );
                                                      @endphp

                                                      <a href="{{ asset('uploads/documents/achievements/'. fixed('english','hindi') . '/' . $document) }}"
                                                           target="_blank"
                                                          class="btn btn-success achievement-btn">

                                                          {{ fixed('Read More', 'और पढ़ें') }}
                                                      </a>
                                                  @endif

                                              </div>

                                          </div>

                                      </div>

                                  </div>

                              </div>

                          </div>
                      @endforeach

                  </div>

                  @if ($achievements->count() > 1)
                      <!-- Previous -->

                      <button class="carousel-control-prev" type="button" data-bs-target="#achievementCarousel"
                          data-bs-slide="prev">

                          <span class="carousel-control-prev-icon"></span>

                      </button>

                      <!-- Next -->

                      <button class="carousel-control-next" type="button" data-bs-target="#achievementCarousel"
                          data-bs-slide="next">

                          <span class="carousel-control-next-icon"></span>

                      </button>
                  @endif

              </div>

              <!-- Play / Pause Button -->
              <button type="button" id="achievementCarouselToggleBtn" class="achievement-carousel-toggle-btn">
                  <i class="fas fa-pause"></i>
                  <span>{{ fixed('Pause', 'रोकें') }}</span>
              </button>
          @else
              <div class="text-center py-5">

                  <img src="{{ asset('images/no-data.svg') }}" width="180">

                  <h4 class="mt-4">

                      {{ fixed('No Achievements Available', 'कोई उपलब्धि उपलब्ध नहीं है') }}
                  </h4>

              </div>
          @endif

      </div>

  </section>
 <style>
      /* Achievement Carousel Play/Pause */
      .achievement-carousel-toggle-btn {
          position: absolute;
          top: 275px;
          right: 140px;
          z-index: 15;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 18px;
          border: none;
          border-radius: 50px;
          background: #2a4173;
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all .3s ease;
      }

      .achievement-carousel-toggle-btn:hover {
          background: #2a4173;
          transform: translateY(-2px);
      }

      .achievement-carousel-toggle-btn i {
          font-size: 15px;
      }

      @media (max-width:768px) {

          .achievement-carousel-toggle-btn {
              top: 12px;
              right: 12px;
              padding: 8px 14px;
              font-size: 13px;
          }

      }
  </style>
  <script>
      document.addEventListener('DOMContentLoaded', function() {

          const carouselElement = document.getElementById('achievementCarousel');

          if (!carouselElement) return;

          const carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);

          const toggleBtn = document.getElementById('achievementCarouselToggleBtn');

          let isPaused = false;

          toggleBtn.addEventListener('click', function() {

              if (isPaused) {

                  carousel.cycle();

                  this.innerHTML =
                      '<i class="fas fa-pause"></i> <span>{{ fixed('Pause', 'रोकें') }}</span>';

              } else {

                  carousel.pause();

                  this.innerHTML =
                      '<i class="fas fa-play"></i> <span>{{ fixed('Play', 'चलाएँ') }}</span>';

              }

              isPaused = !isPaused;

          });

      });
  </script>