@extends('user.layouts.app')


@section('body_class', 'letter_from_president')
@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}"></div>
  @endforeach
</section>

<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Letter from the President</li>
    </ul>
  </div>
</div>
<section class="letter-president-outer">
  <div class="container">
    <div class="page-title">
      <h4 data-aos="fade-up">Letter from the President</h4>
    </div>
    @if(!empty($letter_from_presidents) && $letter_from_presidents->count())
      <ul class="letter-president-list">
        @foreach($letter_from_presidents as $letter_from_president)
          <li>
            <div class="president-list-left">
              <div class="president-icon">
                <!-- SVG icon -->
                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.6666 27.3333H9.33329C5.33329 27.3333 2.66663 25.3333 2.66663 20.6667V11.3333C2.66663 6.66666 5.33329 4.66666 9.33329 4.66666H22.6666C26.6666 4.66666 29.3333 6.66666 29.3333 11.3333V20.6667C29.3333 25.3333 26.6666 27.3333 22.6666 27.3333Z" stroke="#002B10" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M22.6667 12L18.4934 15.3333C17.12 16.4267 14.8667 16.4267 13.4934 15.3333L9.33337 12" stroke="#002B10" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <h4>
                <!-- Please click here for President’s Letter - -->
                {{ $letter_from_president->letter_title }}
                {{ $letter_from_president->session_start_year }}/{{ substr($letter_from_president->session_end_year, -2) }}
              </h4>
            </div>

            <div class="president-list-right">
              <div class="letter-box" style="display: flex; align-items: center; gap: 10px;">
                <!-- <h5 style="margin-right: auto;">{{ $letter_from_president->letter_title ?? 'No Title' }}</h5> -->
                <!-- <p style="margin-right: auto;">Session: {{ $letter_from_president->session_start_year }}/{{ $letter_from_president->session_end_year }}</p> -->
                
                {{-- View PDF button --}}
                <a target="_blank" href="{{ $filePath }}" 
                   class="btn btn-primary view-btn" 
                   target="_blank">
                    View
                    <span>
                      <!-- SVG eye icon -->
                    </span>
                </a>

                {{-- Optional Download button --}}
                <a download href="{{ $filePath }}"  class="btn btn-primary download-btn">
                  Download Now
                  <span>
                    <!-- SVG download icon -->
                  </span>
                </a>
              </div>
            </div>
          </li>
        @endforeach
      </ul>
    @endif
  </div>
</section>




@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

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

<script>
  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>
@endpush