@extends('layouts.site')

@section('content')
@php

$lang = app()->getLocale();
$name = 'name_' . $lang;
$details = 'details_' . $lang;
$type = 'type_' . $lang;
$description = 'description_' . $lang;
$title = 'title_' . $lang;

$img_alt = 'img_alt_' . $lang;
$question = 'question_' . $lang;
$answer = 'answer_' . $lang;
@endphp

<!--Start Page Header-->
<section class="page-header">
    <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/agent.webp') }} )">
    </div>
    <div class="container">
        <div class="page-header__inner text-center">
            <h2>{{ __('Partners') }}</h2>
            <ul class="thm-breadcrumb">
                <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                <li><span class="icon-right-arrow-5"></span></li>
                <li>{{ __('Partners') }}</li>
            </ul>
        </div>
    </div>
    <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
        <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
        </path>
    </svg>
</section>


@php
                
            @endphp
            @if ($partners && $partners->count() > 0)
<section class="choose-us-one about-paddinglast">
    <div class="container">
        <div class="row">
            @foreach ($partners as $index => $partner)
            <!--Start  Single Choose Us One-->
            <div class="col-xl-6 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".1s">
                <div class="choose-us-one__single">
                    <div class="choose-us-one__single-overlay-bg"></div>
                    <div class="content-box">
                        <div class="title-box">
                            <h3>   {{ $partner->$name }}  </h3>
                        </div>
                        <div class="text-box vision-pargraph">
                            <div class="read-more-textpartner">
                                <p>  {{ $partner->$details }}</p>
                            </div>
                            <button class="read-more-btn">Read More</button>

                        </div>
                    </div>
                </div>
            </div> 
            @endforeach
            <!--End  Single Choose Us One-->
             


        </div>
    </div>
</section>
@endif
@stop
@section('scripts')
<script>
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
      
      const readMoreText = "Read More";    
      const readLessText = "Read Less";      
    
      const buttons = document.querySelectorAll(".read-more-btn");
    
      buttons.forEach(btn => {
        btn.addEventListener("click", function () {
          const container = btn.closest(".vision-pargraph");
          const text = container.querySelector(".read-more-textpartner");
    
          text.classList.toggle("expanded");
          btn.textContent = text.classList.contains("expanded") ? readLessText : readMoreText;
        });
      });
    });
</script>

@stop