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

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

<div class="Main-agile">
    <!-- banner -->
     <div class="w3layouts-banner-top">
        <div class="container">
            <div class="agileits-banner-info">               
                
                    
            </div>                
        </div>  
    </div>
</div>       
     
    <!-- //banner-text -->
  
<!-- //banner --> 
@foreach($product as $pro)

 <!-- about -->
<div class="about-top" id="jv">
    <div class="container">
        <h3 class="w3l-title"><font color="black"> {{$pro->title}}  </font></h3>
        <span class="w3-sub"> {{$pro->sub_title}} </span>
        <div class="wthree-services-bottom-grids">
            <div class="col-md-12 wthree-services-left">
                
                <img src="{{ asset('images/product/'.$pro->image_1) }}" alt="">
                 {{--<img src="{{ asset('images/product/'.$pro->image_2) }}" alt="">
                 <img src="{{ asset('images/product/'.$pro->image_3) }}" alt="">--}}

                <br><br>
                <a href="{{ url('product/cluster/'.$pro->id) }}" class="btn btn-success">Explore More {{$pro->sub_title}}</a>
                
            </div>
            <div class="col-md-6 wthree-services-right first-w3l">
                <div class="wthree-services-right-top">
                    {{--
                        <h4 style="text-align: justify;">Area</h4>
                        <p style="text-align: justify;">Land Area : {{$pro->land_area}} M<sup>2</sup></p>
                        <p style="text-align: justify;">Building Area : {{$pro->building_area}} M<sup>2</sup></p>
                        _____________________________________
                        <h4 style="text-align: justify;">Floor</h4>
                        <p style="text-align: justify;">{{$pro->floor}} Lantai</p>
                        
                        <br><br>
                
                    <div class="table-responsive">          
                        <table class="table" >
                            @if ($pro->pool == 0)
                            <tr>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/2.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->bath}}</h1></th>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/4.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->bed}}</h1></th>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/5.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->carport}}</h1></th>
                            </tr>
                            @else
                            <tr>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/2.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->bath}}</h1></th>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/3.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->pool}}</h1></th>
                                
                            </tr>
                            <tr>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/4.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->bed}}</h1></th>
                                <th><img width="50%" src="{{ asset('images/icon_spesification/5.png') }}" alt="" class="spec"></th>
                                <th><h1>{{$pro->carport}}</h1></th>
                                
                            </tr>
                            @endif
                        </table>
                    </div>
                    --}}
                </div>
                <div class="clearfix"> </div>
                
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>
@endforeach
<!-- //about -->

@endsection