@include('header')
	  
	  	  
<div class="jumbotron bg-dark p-0 jumbotron-fluid">
  <div class="container">
    <!--<h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>-->
	<div class="embed-responsive embed-responsive-16by9">
	  <iframe class="embed-responsive-item" src="{{$data[0]['category_content']}}" allowfullscreen></iframe>
	</div>
  </div>
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
	  <h1 class="display-4">
	  @if(isset($data) && count($data) >=0)
	  {{$data[0]['categories'][0]['category_name']}}</h1>
	  <p class="lead">{{$data[0]['categories'][0]['category_content']}}</p>
	  @endif
	</div>
<div class="container video">
	
					<div class="row">
	<!-- ------------- THREEE COLUMN GALLERY ---------------- -->
					@foreach($data as $row)
				 
					<div  class="col-md-3">
					  <div class="card mb-4 shadow-sm">
						<iframe width="100%" height="200px" src="{{$row['category_content']}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<div class="card-body">
						   <p class="card-text">{{$row['content_description']}}</p> 
						</div>
					  </div>
					</div>
				@endforeach	 
	<!-- ---------------------------------------------------- -->
				</div>
				</div>
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
	<!--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>>--
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	
  
</body>
</html>