@extends('user.layouts.app')

@section('body_class', 'rules-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>Rules & Regulations</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">
    <div class="page-title">
      <h4>Rules & Regulations</h4>
    </div>
    @if(!empty($rulesRegulations))
    @foreach($rulesRegulations as $rulesRegulation)
    <div class="section-inner">

      <div class="section-description">
            <h5 class="green">{{$rulesRegulation->section_title }}</h5>
            
             {!! 
                preg_replace_callback(
                    '/<p[^>]*>(.*?)<\/p>/is',
                    function ($matches) {
                        // remove span/font inside p
                        $clean = preg_replace('/<\/?(span|font)[^>]*>/i', '', $matches[1]);
                        return '<p>' . $clean . '</p>';
                    },
                    $rulesRegulation->section_description
                )
            !!}
      </div>
    </div>
    @endforeach
    @endif
  </div>
</div>

@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