index.blade.php

@extends('layouts.master')

@section('title')
@section('content')
<div class="row">
  <div class="col-md-12">
      <div class="jumbotron">
          <h1></h1>
          <p class="lead"></p>
      </div>
    </div>
</div>
@foreach($products->chunk(3) as $productChunk)
<div class="row">
  @foreach($productChunk as $product)
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="{{ asset('images/'. $product->imagePath) }}" alt="img" class="img-responsive">
      <div class="caption">
        <h3>{{ $product->title }}</h3>
        <p class="description">{{ substr(strip_tags($product->description), 0, 30) }}{{strlen(strip_tags($product->description)) > 30 ? "..":""}}</p>
        <div class="clearfix">
            <div class="pull-left">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
              Click for details
          </button>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">{{ $product->title }}</h4>
            </div>
            <br>
            <center><img src="{{ asset('images/'. $product->imagePath) }}" alt="img" class="img-responsive"></center>
            <div class="modal-body">
              <p class="lead">{!! $product->description !!}</p>
            </div>
            <div class="modal-footer">
            <h5 class="pull-left"><b>Price : Rp. {{ $product->price }}</b></h5>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
          </div>
            <a href="{{ route('product.addToCart' , ['id' => $product->id]) }}" class="btn btn-success pull-right" role="button">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div>
@endforeach
@endsection