@if ($key == 0 || ($key+1 > 3 && (($key+1)%3) == 1))
    @php $bg = "linear-gradient(to right, #e2583e 0%, #bf1931 100%);"; @endphp
@elseif ($key == 1 || ($key+1 > 3 && (($key+1)%3) == 2))
    @php $bg = "linear-gradient(to right, #7cc4c3 0%, #479493 100%);"; @endphp
@elseif ($key == 2 || ($key+1 > 3 && (($key+1)%3) == 0))
    @php $bg = "linear-gradient(to right, #98b3d1 0%, #5f4a8b 100%);"; @endphp
@endif

@if($coupon->type == 'product_base')
    @php 
        $products = json_decode($coupon->details); 
        $coupon_products = [];
        foreach($products as $product) {                            
            array_push($coupon_products, $product->product_id);                           
        }
    @endphp
@else                 
    @php 
        $order_discount = json_decode($coupon->details); 
    @endphp             
@endif
@php 
    if($coupon->user->user_type != 'admin') {
        $shop = $coupon->user->shop;
        $name = $shop->name;
    }
    else {
        $name = get_setting('website_name');
    }
@endphp

<div style="min-height: 232px; border-radius: 24px; background: {{ $bg }};" class="d-flex align-items-center position-relative">

    <!-- Shop Name & discount -->
    <div class="position-absolute" style="top:2rem; left:2rem;">
        <h3 class="fs-13 text-white fw-500 px-3">{{ $name }}
            @if (\Request::route()->getName() == 'coupons.all')
                <a 
                    @if($coupon->user->user_type != 'admin')
                        href="{{ route('shop.visit', $shop->slug) }}"
                    @else 
                        href="{{ route('inhouse.all') }}"
                    @endif
                    class="ml-3 text-white hov-text-warning fs-13" style="text-decoration: underline;"
                >
                    {{ translate('Visit Store') }}
                </a>
            @endif
        </h3>
        <div class="align-self-center px-3 flex-grow-1 text-white">
            @if($coupon->discount_type == 'amount')
                <p class="fs-16 fw-500 mb-1">{{ single_price($coupon->discount) }} {{ translate('OFF') }}</p>    
            @else
                <p class="fs-16 fw-500 mb-1">{{ $coupon->discount }}% {{ translate('OFF') }}</p>    
            @endif
        </div>
    </div>
    
    <!-- Middle design -->
    <div class="d-flex jystify-content-between align-items-center w-100 position-absolute">
        <span class="bg-white rounded-content" style="min-height: 48px; min-width: 48px; margin-left: -24px;"></span>
        <hr class="border border-dashed border-white opacity-40 w-100 mx-2">
        <span class="bg-white rounded-content" style="min-height: 48px; min-width: 48px; margin-right: -24px;"></span>
    </div>

    <!-- Coupon Details -->
    <div class="position-absolute" style="bottom:1rem; left:2rem; right:2rem">
        <div class="px-4 mt-2">
            @if($coupon->type == 'product_base')
                <!-- Coupon Products -->
                @php $products = get_multiple_products($coupon_products); @endphp
                <div class="aiz-carousel coupon-slider gutters-16 arrow-none" data-items="6" data-lg-items="6"  data-md-items="4" data-sm-items="4" data-xs-items="4" data-arrows='true' data-infinite='true' data-autoplay="true">
                    @foreach($products as $key => $product)
                        <a href="{{ route('product', $product->slug) }}" title="{{ $product->name }}" class='p-1 border border-transparent hov-border' target="_blank">
                            <img class="img-fit mx-auto h-48px w-48px" 
                                src="{{ uploaded_asset($product->thumbnail_img) }}"
                                data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                alt="">
                        </a>
                    @endforeach      
                </div>       
            @else
                <!-- Coupon Discount range -->
                <span class="fs-12 text-white pb-lg-3 d-block m-auto ">
                    @if($coupon->discount_type == 'amount')
                        {{ translate('Min Spend ') }} <strong>{{ single_price($order_discount->min_buy) }}</strong> {{ translate('from') }} <strong>{{ $name }}</strong> {{ translate('to get') }} <strong>{{ single_price($coupon->discount) }}</strong> {{ translate('OFF on total orders') }}
                    @else 
                        {{ translate('Min Spend ') }} <strong>{{ single_price($order_discount->min_buy) }}</strong> {{ translate('from') }} <strong>{{ $name }}</strong> {{ translate('to get') }} <strong>{{ $coupon->discount }}%</strong> {{ translate('OFF on total orders') }}                                   
                    @endif
                </span>
            @endif
        </div>
        
        <!-- Coupon Code -->
        <div class="text-right">
            <span class="fs-13 d-block mb-0 text-white">
                {{ translate('Code') }}:
                <span class="fw-600">{{ $coupon->code }}</span>
                <span class="ml-2 text-white fs-16" style="cursor:pointer;" onclick="copyCouponCode('{{ $coupon->code }}')" data-toggle="tooltip" data-title="{{ translate('Copy the Code') }}" data-placement="top"><i class="las la-copy"></i></span>
            </span>
        </div>
    </div>
</div>