@extends('front.layouts.app')
@section('content')

<div class="my-account-body">
    <section class="title-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <h2>{!! $title !!} ({!! count($recommendedProducts) !!})</h2>
                </div>
            </div>
        </div>
    </section>
    <div class="container" style="margin-top:30px;">
        <div class="row">
            <div class="col-md-12">
                @if(@count(@$recommendedProducts) > 0)
                <div class="card-body">
                    <div class="row products-row dashboard-products">
                        @foreach($recommendedProducts as $key => $products)
                        <div class="col-lg-3 col-md-4 col-sm-6 Col">
                            <div class="product-card bg-white">
                                <div class="img-view">
                                    <img src="{!! $products['image'] !!}" class="img-fluid" alt="product-image" />
                                </div>
                                <div class="content">
                                    <h4 class="text-truncate">{!! $products['name'] !!}</h4>
                                    <h5 class="text-truncate">{!! $products['price'] !!}</h5>
                                    <a href="{!! $products['link'] !!}" class="arrow-btn" target="_blank">
                                        <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" class="img-fluid class-arrow-icon" alt="arrow-right-blue" />
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                @section('js')
                @stop
                @else
                <p class="no-data-text">No recommended products found!</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
@endsection