@extends('layouts.site')

@section('content')
    @php
[
        $name,
        $email,
        $phone,
        $whatsapp,
        $google_map_url,
        $addresss,
        $facebook,
        $instagram,
        $twitter,
        $youtube,
        $tiktok,
        $snapchat,
    ] = getGeneralSettings();
    
        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;
        $type = 'type_' . $lang;
        $title = 'title_' . $lang;
        $description = 'description_' . $lang;
        $img_alt = 'img_alt_' . $lang;
        $slug = 'slug_' . $lang;
        // $slug = 'slug_en';
    @endphp


    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/blog.webp') }} )">
        </div>
        <div class="container">
            <div class="page-header__inner text-center">
                <h2> {{ __('Offers') }}</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                    <li><span class="icon-right-arrow-5"></span></li>
                    <li> {{ __('Offers') }}</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>

    <!--Start Blog Two-->

    <!--Start offer -->
     @if ($offers && $offers->count() > 0)
                
        <section class="bb blog-two direction">
             <div class="container">
                <div class="sec-title-two text-center">
                    <div class="sub-title">
                        <h5>    {{ app()->getLocale() == 'ar' ? 'العروض' : 'offers' }}</h5>
                    </div>
                    <h2>    {{ app()->getLocale() == 'ar' ? ' افضل العروض' : 'best offers' }}</h2>
                </div>
   
                <div class="row">
                    <!--Start Pricing One Single-->
                     @foreach ($offers as $offer)
                    <div class="col-xl-4 col-lg-4 wow fadeInUp operation-item" data-wow-delay=".3s"  style="display: {{ $loop->index < 3 ? 'block' : 'none' }};">
                        <div class="pricing-one__single text-center">
                             <div class="table-header">
                                <div class="img-box">
                                    <img src="{{ asset('assets/images/offers/' . $offer['img']) ?? '' }}" alt="{{ $offer->$img_alt ?? 'offer img' }}">
                                </div>
                            </div>

                            <div class="table-content">
                                <div class="table-content__top">
                                    <h3> {{ $offer->$name }}</h3>
                                    
                                    
                              

 
      
                                    @if($offer->discount_price)
    <del>
        {{ fmod($offer->price, 1) == 0 ? number_format($offer->price, 0) : number_format($offer->price, 2) }} RS
    </del>
    <span style="color: red; font-weight: bold; margin-right: 10px;">
        <h2>
            {{ fmod($offer->discount_price, 1) == 0 ? number_format($offer->discount_price, 0) : number_format($offer->discount_price, 2) }} RS
        </h2>
    </span>
@else
    <h2>
        {{ fmod($offer->price, 1) == 0 ? number_format($offer->price, 0) : number_format($offer->price, 2) }} RS
    </h2>
@endif

                                    
                                  {{--  <h2>$39 <span>/ 256kg</span></h2>--}}
                                </div>

                                <ul>
                                    <li>
                                       {!! html_entity_decode($offer->$details) !!}
                                    </li>
                                    
                                </ul>
                            </div>

                            <div class="table-footer">
                                <div class="btn-box">
                                    <a class="thm-btn" href="https://api.whatsapp.com/send/?phone={{ $whatsapp }}">
                                        <span class="txt">Get a Quote</span> <i class="icon-right-arrow"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                      @endforeach
                    <!--End Pricing One Single-->
 
  </div>
  <!-- Load More Button -->
                <div class="about-three__btn-box text-center mt-4">
                    <a href="#" class="btnserv1 thm-btn" id="loadMoreBtn">
                        {{ __('load more') }}
                        @if (app()->getLocale() == 'ar')
                            <i class="fas fa-arrow-left ms-2"></i>
                        @else
                            <i class="fas fa-arrow-right ms-2"></i>
                        @endif
                    </a>
                </div>
            </div>
        </section>
        @endif
   


@stop
<!--remove-from-cart
-->
@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let itemsToShow = 3;
            const operationItems = document.querySelectorAll(".operation-item");
            const loadMoreBtn = document.getElementById("loadMoreBtn");

            loadMoreBtn.addEventListener("click", function() {
                let hiddenItems = Array.from(operationItems).filter(item => item.style.display === "none");
                let count = 0;

                hiddenItems.forEach(item => {
                    if (count < itemsToShow) {
                        item.style.display = "block";
                        count++;
                    }
                });

                if (hiddenItems.length <= itemsToShow) {
                    loadMoreBtn.style.display = "none";
                }
            });

            if (operationItems.length <= itemsToShow) {
                loadMoreBtn.style.display = "none";
            }
        });
    </script>

@stop