@extends('frontend.layouts.products-app')

@section('title')
    Testimonials
@endsection

@section('seo')
@endsection

@section('content')
    <style>
        .testimonial-banner {
            /* Linear gradient and background image */
            background: linear-gradient(rgba(253, 253, 253, 0.5), rgba(212, 212, 212, 0.5)),
                url('{{ asset('img/zenorex-smile-colorblack.png') }}') no-repeat center center;
            background-size: cover;
            /* Maintain the original size of the image */
            height: 70vh;
            width: 100%;
        }

        @media screen and (max-width: 476px) {
            .testimonial-banner {
                height: 300px;
                background-size: cover;
                /* Maintain the size on smaller screens too */
                object-position: 35%;
            }
        }
    </style>


    <style>
        .testimonial-company-title {
            transform: translateX(6rem) translateY(0rem);
        }

        @media (max-width: 768px) {
            .testimonial-company-title {
                transform: translateX(0rem) translateY(0rem);
                /* Adjust as needed for mobile */
            }
        }
    </style>
    <div class="overflow-hidden position-relative testimonial-banner d-flex align-items-center">
        {{-- <img src="img/banner-testimonials.jpg" class="img-fluid" alt=""> --}}
        <div class="d-block" style="margin-bottom: -10rem;">
            <div class="ps-4 testimonial-company-title ">
                <h2 class="overflow-hidden fw-bold">
                    <span>
                        <img src="img/hi-reslogo.png" class="img-fluid test-img pe-2" width="100px" alt=""></span><span
                        class="fw-bold t-title" style="font-size: 1.1em !important">
                        TESTIMONIALS
                    </span>
                </h2>
                <div class="p-title">
                    <p style="font-family: 'Poppins', sans-serif !important; font-weight: 500 !important;">Reviews that show
                        the quality of our
                        products and services, and real-life stories that prove how
                        our products stand up to real-life disaster</p>
                </div>
            </div>
        </div>
        {{-- <div class="d-md-none">
    <div class="" style="transform: translateY(-40px) translateX(-175px);"> <!-- translate-middle -->
      <h2 class="overflow-hidden fw-bold"><span><img src="img/icon-1.png" class="img-fluid test-img pe-2" alt=""></span><span class="fw-bold t-title" style="font-size: .7em !important;">TESTIMONIALS</span></h2>
      <div class="p-title">
        <p style="font-family: 'Poppins', sans-serif !important; font-weight: 500 !important; font-size: .5em !important;">Testimonials that prove our products stand up to real-life disaster</p>
      </div>
    </div>
  </div> --}}
    </div>
   <style>
    @media (max-width: 767px) {
        .responsive-img {
            width: 100%;
            height: 60%;
            object-fit: contain;
        }

        .responsive-bg {
            width: 100%; /* Ensure the background covers the width of the container */
            height: auto; /* Adjust height automatically based on content */
            background-size: cover; /* Cover the entire container */
            background-position: center; /* Center the background image */
            background-repeat: no-repeat; /* Do not repeat the background image */
        }
    }

    @media (min-width: 768px) {
        .responsive-bg {
            width: 25rem; /* Fixed width for larger screens */
            height: 16rem; /* Fixed height for larger screens */
            background-size: cover; /* Cover the entire container */
            background-position: center; /* Center the background image */
            background-repeat: no-repeat; /* Do not repeat the background image */
        }
    }
</style>

    @php
        $x = 0;
    @endphp
   @foreach ($testimonials as $testimonial)
    @if ($x % 2 == 0)
        <div class="container overflow-hidden">
            <div class="d-flex flex-row-reverse flex-rem">
                <div class="p-2">
                    <div class="p-3 float-end floaters test-spacer responsive-bg"
                        style="background-image: url('{{ asset('img/review-bg.png') }}');">
                        {{-- <p class="color-red text-font2 text-red">"{{ $testimonial->title }}"</p> --}}
                        <p>{!! $testimonial->description !!}</p>
                    </div>
                    <div class="text-end pe-5">
                        <h1>{{ $testimonial->name }}</h1>
                        <p class="fst-italic">{{ date('F Y', strtotime($testimonial->date)) }}</p>
                    </div>
                </div>
                <div>
                    <div>
    <img class="img-fluid responsive-img"
        src="{{ url('/uploads/product/' . $testimonial->images) }}" 
        style="height: 10rem; width: auto;" 
        alt="">
</div>

                </div>
            </div>
        </div>
    @else
        <div class="container overflow-hidden">
            <div class="d-flex flex-row flex-rem">
                <div class="p-2">
                    <img src="{{ url('/uploads/product/' . $testimonial->images) }}" class="img-fluid responsive-img"
                          style="height: 10rem; width: auto;" >
                </div>
                <div class="p-2">
                    <div class="p-3 float-end floaters test-spacer responsive-bg"
                        style="background-image: url('{{ asset('img/review-bg.png') }}');">
                        {{-- <p class="color-red text-font2 text-red">"{{ $testimonial->title }}"</p> --}}
                        <p>{!! $testimonial->description !!}</p>
                    </div>
                    <div class="text-end pe-5">
                        <h1>{{ $testimonial->name }}</h1>
                        <p class="fst-italic">{{ date('F Y', strtotime($testimonial->date)) }}</p>
                    </div>
                </div>
                <div class="p-2"></div>
            </div>
        </div>
    @endif
    @php
        $x++;
    @endphp
@endforeach


    <div class="d-lg-block d-none d-sm-none">
        <br><br><br>
    </div>

    <script>
        $(window).bind("resize", function() {

            if ($(this).width() < 500) {
                $('.flex-rem').removeClass('d-flex')
            } else {
                $('.flex-rem').addClass('d-flex')
            }
        }).trigger('resize');
    </script>

    {{-- <style>
  .footer-mt{
    margin-top: -2rem;
  }
</style>
<style>
  .site-footer{
      padding-top: 375px !important;
    }
  </style> --}}
@endsection