@if (count($latest_offers) < 1)
    <h2 class="mb-4 text-xl font-semibold">
        {{ __('messages.no_offers_available') }}
    </h2>
@else
    @php
        function getDiscountPercentage($originalPrice, $discountedPrice)
        {
            return $originalPrice > 0 ? round((($originalPrice - $discountedPrice) / $originalPrice) * 100) : 0;
        }
    @endphp
    <!-- offers slider section -->
    <div class="overflow-hidden mt- p-3">
        <div class="flex justify-between items-center  mb-3">
            <h1 class="text-[23px] font-bold">{{ __('messages.latest_offers') }}</h1>
            <a href="{{ route('offers.index') }}" class="text-[11px] underline hover-e" target="_blank">
                {{ __('messages.show_all') }}
            </a>
        </div>
        <!-- Swiper Slider -->
        <div class="swiper offers-slider">
            <div class="swiper-wrapper pb-[40px]">
                @foreach ($latest_offers as $offer)
                    <div class="swiper-slide">
                        <div class="bg-white shadow-md rounded-lg p-2" data-aos="zoom-in" data-aos-offset="100"
                            data-aos-easing="ease-in-sine" data-aos-delay="{{ $loop->index * 200 }}">
                            <div class="flex justify-between items-center mb-2 text-[13px]">
                                <!-- Check if the offer is marked as new or feautred -->
                                @if ($offer['is_new'] = 1)
                                    <span class="text-green-600 flex items-center">
                                        <i class="fa-solid fa-bolt m-1"></i> {{ __('messages.new') }}
                                    </span>
                                @endif

                                @if ($offer['is_featured'] = 1)
                                    <span class="text-red-600 flex items-center ml-1 text-[11px]">
                                        <i class="fas fa-fire m-1"></i> {{ __('messages.featured') }}
                                    </span>
                                @endif
                                @if($offer['price'] > $offer['discounted_price'])
                                    <span class="bg-red-500 text-white text-[11px] font-bold px-2  rounded-full ml-1">
                                        -{{ getDiscountPercentage($offer['price'], $offer['discounted_price']) }}%
                                    </span>
                                @endif
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ $offer['image_url'] }}" alt="{{ $offer['name'] }}"
                                    class="w-full h-32 object-contain rounded mb-3">
                                <h5 class="text-[20px] font-semibold line-clamp-1">{{ $offer['name'] }}</h5>
                                <p class="text-gray-600 text-[11px] mb-2 line-clamp-2">{{ strip_tags($offer['description']) }}</p>
                                <div class="flex justify-center items-center mt-2 text[13px]">
                                    @if(isset($offer['discounted_price']) && isset($offer['price']) && $offer['price'] > $offer['discounted_price'])
                                        <h4 class="text-red-600 font-bold mr-2">
                                            {{ number_format($offer['discounted_price'], 1) }}
                                            <span class="text-[11px]">{{ $offer['symbol'] }}</span>
                                        </h4>
                                        <h6 class="text-gray-500 text-[11px] line-through">
                                            {{ number_format($offer['price'], 1) }}
                                            <span class="text-[11px]">{{ $offer['symbol'] }}</span>
                                        </h6>
                                    @elseif(isset($offer['discounted_price']))
                                        <h4 class="text-red-600 font-bold mr-2">
                                            {{ number_format($offer['discounted_price'], 1) }}
                                            <span class="text-[11px]">{{ $offer['symbol'] }}</span>
                                        </h4>
                                    @endif
                                </div>
                                <div class="flex justify-between items-center mt-2">
                                    <p class="text-[11px] text-gray-600">{{ __('messages.offer_from') }}</p>
                                    <a href="#">
                                        <img src="{{ $offer['store_logo_url'] }}" alt="{{ $offer['store'] }}"
                                            class="w-12 h-12 object-contain">
                                    </a>
                                </div>
                                <button class="btn border bgd-color text-white p-2 pr-4 pl-4 rounded-full text-base text-[11px] font-semibold"
                                    onclick="showCoupon(
                                                                                                                    '{{ $offer['name'] }}', 
                                                                                                                    '{{ $offer['code'] ?? '' }}', 
                                                                                                                    '{{ $offer['description'] }}', 
                                                                                                                    '{{ $offer['store_logo_url'] }}',
                                                                                                                    '{{ $offer['link'] }}',
                                                                                                                    '{{ $offer['id'] }}',
                                                                                                                    '{{ $offer['end_date'] }}', 
                                                                                                                    '{{ $offer['is_new'] ? 'true' : 'false' }}',
                                                                                                                    '{{ $offer['is_featured'] ? 'true' : 'false' }}',
                                                                                                                    'offer',
                                                                                                                    '{{ $offer['image_url'] ?? '' }}',
                                                                                                                    '{{ $offer['price'] ?? '' }}',
                                                                                                                    '{{ $offer['discounted_price'] ?? '' }}', 
                                                                                                                    '{{ $offer['symbol'] ?? '' }}', 
                                                                                                                    '{{ $offer['start_date'] }}' 
                                                                                                                )">
                                    {{ __('messages.show_details') }}
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>


@endif