@extends('user.layouts.app')

@section('body_class', 'payment-guidelines-page')

@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>
    <!-- Login Area -->
    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="/">Home</a>
          </li>
          <li>Payment Guidelines</li>
        </ul>
      </div>
    </div>
    <div class="container contact-wrapper d-flex align-items-center justify-content-center">
      <div class="row w-100 justify-content-center">
          @if(!empty($payment_guidelines))
          @foreach($payment_guidelines as $key => $payment_guideline)
              @if($key == 0 )
                 <div class="page-title">
                     <h4>{{$payment_guideline->section_title}}</h4>
                     {!! $payment_guideline->section_description !!}
                </div>              
              @endif
      
        
          @endforeach
          @endif

        <div class="section-inner">
          @if(!empty($payment_guidelines))
       
          @foreach($payment_guidelines as $key => $payment_guideline)
                @if($key != 0 )
                    <div class="section-description">
                      <h4>{{$payment_guideline->section_title}}</h4>
                      
                        <!-- {!! strip_tags(
                          preg_replace('/ style="[^"]*"/i', '', 
                          preg_replace('/<\/?(font|span)[^>]*>/i', '', $payment_guideline->section_description)
                        ), '<p><ul><ol><li><strong><b><h4><h5><br>')
                        !!} -->
                        {!! $payment_guideline->section_description !!}
                      
                      
                    </div>
              @endif
          @endforeach
          @endif

        </div>
      </div>
    </div>
</section>
@endsection

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

@push('scripts')
<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