@extends('layouts.app')

@section('styles')
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/welcome.css">
<style>
    .c-app {
        background-color: #338b94 !important;
    }

    .btn-select {
        padding-left: 15px;
        padding-bottom: 15px;
    }
</style>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
@endsection

@section('content')
<div class="text-center text-white mt-5">
    <h3>PROGRAM</h3>
</div>

<div class="row d-flex mt-3" data-masonry='{"percentPosition": true }'>
    @foreach ($products as $product)
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="card m-2">
            <input type="hidden" value="{{$product->id}}" id="product_id">
            <a href="/product/{{ $product->id }}">
                <img class="card-img-top" src="{{$product->featured_image->getUrl()}}" alt="Card image" style="width:100%; height: 150px">
            </a>
            <div class="card-body">
                <h4 class="card-title">{{$product->title}}</h4>
                <p class="card-text">{!! substr($product->description, 0, 100); !!}..</p>
                <p><a href="/product/{{ $product->id }}">Lihat selengkapnya</a></p>
                <p><a class="btn btn-success" href="/fundraising/{{ $product->shortcode }}">Infak Sekarang</a></p>
            </div>
        </div>
    </div>
    @endforeach
</div>
</div>
@endsection