@extends('frontend.submain.facility.layouts.index')
@section('content')
 
@foreach ($socmed as $socmeds)
@endforeach

<a href="{{$socmeds->embedcode}}" target="_blank" id="instagram"></a>

<!-- gallery -->
<div id="gallery" class="gallery">  
	<div class="container"> 
		<h3 class="w3l-title"><font color="black">Our Facilities</font></h3>
		<span class="w3-sub">A Masterpiece of 1,000 Ha Township Development</span>
	</div>
	<div class="agileinfo-gallery-row">
        @foreach ($facility as $key => $value)
        
		<div class="col-md-4 col-sm-4 col-xs-6 w3gallery-grids">
			<a href="#" data-toggle="modal" class="imghvr-hinge-right figure" data-target="#{{ $value->id }}">
				<img src="{{ asset('images/facility/'.$value->image) }}" alt="" title="Assets  Image"/> 
				<div class="agile-figcaption">
				  <h4>{{ $value->name }} </h4>
				  <p></p>
				</div>
			</a> 
        </div> 

        <div id="{{ $value->id }}" class="modal fade " role="dialog">
            <div class="modal-dialog">
          
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">×</button>
                   
                </div>
                <div class="modal-body">                  
                  @foreach ($value->facilitydetail as $facilitydetails )                    
                      <img src="{{ asset('images/facility_detail/'.$facilitydetails->image) }}" alt=" " class="img-responsive">
                      <h5>{{ $facilitydetails->title }}</h5>
                      <br>
                  @endforeach                   
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
              </div>
          
            </div>
        </div>
            
        @endforeach
		<div class="clearfix"> </div>
	</div> 
</div>
<!-- //gallery -->

@endsection