@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)
@endforeach
 <!-- 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-6 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>               
            </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 class="wthree-services-bottom-grids">
            <div class="col-md-6 wthree-services-left">
            @foreach ($productdetail as $value )
                <img src="{{ asset('images/product_detail/'.$value->image) }}" alt="">
                <br><br>
            @endforeach
            </div>
            <div class="col-md-6 wthree-services-right">
            @foreach ($productdetail as $value )
                <img src="{{ asset('images/product_detail/'.$value->image) }}" alt="">
                <br><br>
            @endforeach
            </div>
        </div>    --}}

        <div class="agileinfo-gallery-row">
            @foreach ($productdetail as $value)
            <div class="col-md-4 col-sm-4 col-xs-6 w3gallery-grids wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                <div class="demo">
                    <a href="{{ asset('images/product_detail/'.$value->image) }}">
                    <figure class="imghvr-shutter-in-out-diag-2">
                        <img src="{{ asset('images/product_detail/'.$value->image) }}" alt=" " class="img-responsive">
                    </figure>
                    </a>
                </div>                         
            </div> 
            @endforeach        
            <div class="clearfix"> </div>
        </div> 
    </div>
</div>

<!-- //about -->


<!-- pop-up-box -->
    <div id="small-dialog" class="mfp-hide w3ls_small_dialog wthree_pop">
        <h3>Like this residential ?</h3>  &nbsp   
        <div class="agileits_modal_body">
            {{ Form::open(
                array(
                    'url' => 'product/auth/login',
                    'id' => 'login',
                    'class' => 'form-horizontal form-without-legend'
                )
              ) 
          }}
            <div class="form-group">
                    
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </div>
                        
                        {!! Form::text('email', null, ['class' => 'form-control']) !!}
                    </div>
                    
                </div>
                
                
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block btn-login">
                        <i class="fa fa-login"></i>
                        Like
                    </button>
                </div>
            {!! Form::close() !!}&nbsp
            <h5>Anda belum terdaftar? <a href="#small-dialog1" class="btn btn-primary btn-sm play-icon popup-with-zoom-anim">Enquiry Form</a></h5>
        </div>
    </div>
    <div id="small-dialog1" class="mfp-hide w3ls_small_dialog wthree_pop">
        <h3>Register</h3>       
        <div class="agileits_modal_body">
            <form action="{{ url('register') }}" method="post">
            <div class="form-group"> 
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="col-md-4">
                    {!! Form::label('name', 'Name ') !!}
                </div>
                <div class="col-md-8">
                    {!! Form::text('name', null, ['class' => 'form-control']) !!}
                </div>
            </div>&nbsp
            <div class="form-group"> 
                <div class="col-md-4">
                    {!! Form::label('email', 'Email ') !!}
                </div>
                <div class="col-md-8">
                    {!! Form::text('email', null, ['class' => 'form-control']) !!}</div>
            </div>&nbsp
            <div class="form-group"> 
                <div class="col-md-4">
                    {!! Form::label('phone', 'Phone ') !!}
                </div>
                <div class="col-md-8">
                    {!! Form::text('phone', null, ['class' => 'form-control']) !!}</div>
            </div>&nbsp
            <div class="form-group"> 
                <div class="col-md-4">
                    {!! Form::label('topic', 'topic ') !!}
                </div>
                <div class="col-md-8">
                    {!! Form::password('topic', ['class' => 'form-control']) !!}
                </div>
            </div>&nbsp
            
           
             
            <div class="form-group"> 
                <div class="col-md-12">
                    {!! Form::submit('Register', ['class' => 'btn btn-primary form-control']) !!}
                </div>
            </div></form>&nbsp
            <h5>Sudah Subscribe? <a href="#small-dialog" class="btn btn-primary btn-sm play-icon popup-with-zoom-anim">Login</a></h5>
            
        </div>
    </div>
 
<!-- //pop-up-box -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog-product">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{$pro->title}} {{$pro->sub_title}}</h4>
      </div>
      <div class="modal-body-product">
       
    <div class="container">
         
        <div class="wthree-services-bottom-grids">
            
                 
                 <center><img src="{{ asset('images/product/'.$pro->image_2) }}" alt="" > </center>
                <br> 
                 
                
            
            <div class="col-md-10 wthree-services-right first-w3l">
                 <p>{!!  $pro->description  !!}</p>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
 
         
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
 @endsection