@extends('user.layouts.app')

@section('body_class', 'policy-page')
@push('styles')
<style>
  .cms-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .cms-print-btn {
    white-space: nowrap;
  }

  @media print {
    .cms-print-btn {
      display: none !important;
    }
  }
</style>
@endpush

@section('content')
    <section class="banner-slider">
        @if($bannerImages->count() > 0)
            @foreach($bannerImages as $image)
                <div class="slider-item">
                    <img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}">
                </div>
            @endforeach
        @endif
    </section>
   
    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="{{ route('user.home') }}">Home</a>
          </li>
          <li>{{ $pageTitle }}</li>
        </ul>
      </div>
    </div>

    <!-- <section class="cms-page">
        <div class="container">
            <h1>{{ $pageTitle }}</h1>
            <div class="cms-content">
                @if(!empty($content))
                    {!! $content !!}
                @else
                    <p>Content is currently being updated. Please check back later.</p>
                @endif
            </div>
        </div>
    </section> -->

    <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 cms-page-title-row">
          <h4>{{ $pageTitle }}</h4>
          <button type="button" class="btn btn-primary cms-print-btn" onclick="window.print()">Print Page</button>
        </div>

        <div class="section-inner">

          <div class="section-description">

            
            <!-- <h5>{{ $pageTitle }}</h5> -->

          
             {!! $content !!}
            
           
          </div>

        </div>

      </div>
    </div>
@endsection

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