@foreach($featuredPackages as $package)
    <div class="col-md-3">
        <div class="card card-type-pricing featured-price-card text-center " itemscope itemtype="http://schema.org/Product">
            @if($hasDiscount = $package->discount > 0)
                <div class="ribbon" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                  <span>
                    {{ $package->discount }}
                      % off
                  </span>
                </div>
            @endif
            <div class="card-body featured-card-body text-white">
                <h2 class="text-white">{{ $package->service->name }}</h2>
                <p class="text-lg text-default-bright" itemprop="name"><em>{{ ucwords($package->name) }}</em>
                </p>
                <div class="price">
                    <div>Starting at</div>
                    <h2>
                        <span class="text-xs" itemprop="priceCurrency">{{ get_local_currency_prefix() }}</span>
                        <span class="text-lg" itemprop="price">{{ get_local_currency($package->price) }}</span>
                    </h2>
                    <span class="text-lg">{{ $package->term_type == 'YEAR' ? '/yr' : '/mo' }}</span>
                </div>
                <br/>
            </div>
            <div class="card-body no-padding" itemprop="description">
                <ul class="list-unstyled">
                    @foreach($package->getComponents() as $key => $component)
                        <li class="{{ $loop->index > 2 ? 'hidden' : '' }}">{{ $component.' '.strtoupper($key) }}</li>
                    @endforeach
                    <li>24/7 Customer Support</li>
                </ul>
            </div>
            <div class="card-body packageActionBtn">
                <a class="btn btn-default orderBtn ink-reaction"
                   href="{{ route('service.package.order', [$package->service, $package->slug]) }}" title="Order Now">Order Now
                </a>
                {{-- <a class="btn btn-default inquiryBtn ink-reaction"
                href="#" title="Send Inquiry"><i class="fa fa-comments" aria-hidden="true"></i>
                </a> --}}
            </div>
        </div>
    </div>
@endforeach