@php
    $discountPercentage = 0;
    if ($offer['original_price'] > 0 && $offer['discounted_price'] > 0) {
        $discountPercentage = (($offer['original_price'] - $offer['discounted_price']) / $offer['original_price']) * 100;
        $discountPercentage = round($discountPercentage);
    }
@endphp

<div class="mb-4 flex justify-center" data-aos="zoom-in" data-aos-offset="100" data-aos-easing="ease-in-sine">
    <div class="border-2 border-dashed border-default rounded-[12px] p-[15px] bg-white  w-full">
        <div class="flex justify-between items-center mb-2">
            <!-- Left Side -->
            <div class=" flex gap-2">
                @if ($offer['is_new'])
                    <span class="flex items-center text-sm font-medium text-green-500">
                        <i class="fas fa-clock m-1"></i> {{ __('messages.new') }}
                    </span>
                @endif
                @if ($offer['is_featured'])
                    <span class="flex items-center text-sm font-medium text-red-500">
                        <i class="fas fa-fire m-1"></i> {{ __('messages.featured') }}
                    </span>
                @endif
            </div>

            <!-- Right Side -->
            <div class="flex items-center justify-center">
                <!-- Discount Percentage -->
                @if ($discountPercentage > 0)
                    <span class="inline-flex items-center px-3 py-1 bg-red-500 text-white text-xs font-medium rounded-md">
                        {{ $discountPercentage }}% {{ __('messages.discount') }}
                    </span>
                @endif
            </div>
        </div>

        <!-- Offer Image and Details -->
        <div class="flex flex-row">

            <img src="{{ $offer->getOfferImage() }}" alt="{{ $offer['name'] }}"
                class="border rounded-[15px] w-24 h-24 object-contain m-1">
            <div class="flex flex-col ml-2 mt-2">
                <h5 class="text-lg font-semibold text-gray-800">
                    {{ $offer['name'] }}
                </h5>
                <p class="text-sm text-gray-600 line-clamp-2">
                    {{ $offer['description'] }}
                </p>
                <div class="flex flex-row items-center">
                    <p class="text-red-600 font-bold">
                        <span>{{ $offer['discounted_price'] }}</span>
                        <span> {{ $offer->getCurrencySymbol() }}</span>
                    </p>
                    <p class="text-gray-500 text-sm line-through ml-1">
                        {{ $offer['original_price'] }}
                        <span>{{ $offer->getCurrencySymbol() }}</span>
                    </p>
                </div>
            </div>
        </div>

        <hr class="my-2 border-gray-300">

        <!-- Bottom Section -->
        <div class="flex justify-between items-center">
            <div class="flex gap-3 text-xs text-gray-500">
                <span class="flex items-center">
                    <i class="fas fa-user-clock mr-1 ml-1"></i> {{ __('messages.expired_at') }}:
                    {{ \Carbon\Carbon::parse($offer['end_date'])->format('d/m/Y') }}
                </span>
            </div>

            <!-- Button -->
            <button class="btn border bgd-color text-white p-2 rounded-full text-base font-semibold" onclick="showCoupon(
                                    '{{ $offer['name'] }}', 
                                    '{{ $offer['coupon_code'] ?? '' }}', 
                                    '{{ $offer['description'] }}', 
                                    '{{ $offer['store_logo_url'] }}',
                                    '{{ $offer['external_link']}}',
                                    '{{ $offer['id'] }}',
                                    '{{ $offer['end_date'] }}', 
                                    '{{ $offer['is_new'] ? 'true' : 'false' }}',
                                    '{{ $offer['is_featured'] ? 'true' : 'false' }}',
                                    'offer',
                                    '{{ $offer->getOfferImage()}}',
                                    '{{ $offer['original_price']}}',
                                    '{{ $offer['discounted_price']}}', 
                                    '{{ $offer->getCurrencySymbol()}}', 
                                    '{{ $offer['start_date'] }}' 
                                )">
                {{ __('messages.show_details') }}
            </button>
        </div>
    </div>
</div>