@extends('frontend.main.layouts.index')
@section('content')

@foreach ($promotion as $promo)
<div class="custom-popup-toggle">
    <div class="custom-popup-img-container">
      <a href="{{ url($promo->promo_link) }}" target="_blank">
        <img src="{{ asset('images/promo/'.$promo->promo) }}" alt="" class="img-responsive">
      </a>  
    </div>
</div>
@endforeach
<style>
    .custom-popup-toggle{
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.75);
      position: fixed;
      transition: all .3s ease;
      z-index: 12345;
    }
    .custom-popup-img-container{
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    @media only screen and (max-width : 800px) {
        .custom-popup-img-container{
            width: 92vw !important;
        }
    }
    .custom-popup-img-container:after{
      content: "x";
      height: 30px;
      width: 30px;
      background: black;
      top: -10px;
      right: -15px;
      position: absolute;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      cursor: pointer;
    }
    .custom-popup-toggle.minimized{
      position: absolute;
      top: 20%;
      left: 80%;
      height: 271px;
      width: 168px;
      background: black;
      overflow: hidden;
      box-shadow: 10px 10px 50px -3px #888;
      cursor: pointer;
      background-position: center center;
      background-size: contain;
      background-repeat: no-repeat;
      transform: scale(0.8);
      display:none !important;
    }
    .custom-popup-toggle.minimized .custom-popup-img-container{
      display: none;
    }

</style>
 
 @foreach ($socmed as $socmeds)
    @endforeach

 <a href="{{$socmeds->embedcode}}" target="_blank" id="instagram"></a>
 
<div class="Main-agile">
    <!-- banner -->
    <div id="home" class="w3ls-banner"> 
        <!-- banner-text -->
        <div class="w3layouts-banner-top">
            <div class="container">
                <div class="agileits-banner-info">
                     @foreach ($header as $satu)
                    <span><font color="lightgreen">{{ $satu->tagline }} </font></span>
                     
                    <div class="rw-words rw-words-1">
                        
                        <span><font color="lightblue"> {{$satu->info_1}} </font></span>
                        <span>{{$satu->info_2}}</span>
                        <span>{{$satu->info_3}}</span>
                        <span>{{$satu->info_4}}</span>
                        
                    </div>
                     @endforeach
                </div>  
            </div>
        </div>          
    </div>
    <div class="clearfix"> </div>
    <!-- //banner-text -->
</div>  
<!-- //banner --> 
 
<br><br><br><br>
<div id="slider3_wrapper">
<div class="container">
<h3 class="w3l-titles">Mega Project The Araya</h3>
        <span class="w3-sub"></span>
        
        <div class="popular-w3">
          <div class="popular-grids">
            @foreach ($project as $projects)               
            <div class="col-md-4 popular-grid">
                @if($projects->image == "")
                <img src="{{ asset('images/default.png') }}" class="img-responsive" alt=""/>
                @else
                <img src="{{ asset('images/project/'.$projects->image) }}" class="img-responsive" alt=""/>
                @endif
                <div class="popular-text">
                  <h4 class="heading-title">{{ $projects->title }}</h4>
                  <h5 class="tagline" >{{ $projects->tagline }}</h5>
                  <div class="detail-bottom" style="height: 83px; text-align: justify">
                    {!! str_limit(strip_tags($projects->description), 135, '...') !!}
                  </div>
                </div>
                <div class="agileits_w3layouts_more menu__item">
                  <a href="{{ url('project/'.$projects->id) }}" class="menu__link" data-toggle="modal" data-target="">Read More</a>
                </div>
            </div>
            @endforeach
            
            <div class="clearfix"></div>
        </div>
          
        <br><br><br>

        </div>
    </div>
</div>

<div class="testimonials" id="whats">
    <div id="slider3_wrapper">
<div class="container">
<h3 class="w3l-titles">Unrivaled Facilities</h3>
        <!--<span class="w3-sub"></span>-->
@if ($agent->isMobile())
 <img class="img-responsive" src="{{ asset('images/facility_map/sector.png') }}" class="img-responsive">
 {{-- <br> --}}
  
 <div class="table-responsive">          
    <table class="table">
      @foreach($facilitymap as $key => $value)
      <tr>
        <td><label>{{ $value->name }} <button data-toggle="modal" data-target="#{{ $value->id }}" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-info-sign"></button></label></td>  
      </tr>
      <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">&times;</button>
               
            </div>
            <div class="modal-body">
              @if($value->image == "")
              <img src="{{ asset('images/default.png') }}" alt=" " class="img-responsive">
              @else
              <img src="{{ asset('images/facility_map/'.$value->image) }}" alt=" " class="img-responsive">
              @endif
              <h5>{{ $value->name }}</h5>
              <p>{{ $value->description }}</p>

              @if(!empty ($value->facility_id))
                  <hr>
                  @foreach ($value->facility->facilitydetail as $facilitydetails )
                  <img src="{{ asset('images/facility_detail/'.$facilitydetails->image) }}" alt=" " class="img-responsive">                                
                  <h5>{{ $facilitydetails->title }}</h5>
                  @endforeach
              @endif
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
      
        </div>
      </div>
      @endforeach
    </table>
 </div>
 
@else
  
<!-- feature -->
@foreach ($information as $info)
    @endforeach
<div class="contact-row agileits-w3layouts">  
    
    <div class="col-md-12 contact-w3lscenter map img-responsive">
       <!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12664.500495172846!2d112.65304457822768!3d-7.935692792469617!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd62996eeae1363%3A0x5154f604957af74c!2sAraya+Bumi+Megah!5e1!3m2!1sid!2sid!4v1533528918777" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>-->
       <!-- Image Map Generated by http://www.image-map.net/ -->
       <center>
        <img src="{{ asset('images/facility_map/sector.png') }}" usemap="#image-map">
        </center>
        <map name="image-map">
            @foreach($facilitymap as $key => $value)
            <area data-toggle="modal" alt="{{ $value->name }}" title="{{ $value->name }}" href="#{{ $value->id }}" coords="{{ $value->coords }}" shape="{{ $value->shape }}">  
            <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">&times;</button>
                     
                  </div>
                  <div class="modal-body">
                    @if($value->image == "")
                    <img src="{{ asset('images/default.png') }}" alt=" " class="img-responsive">
                    @else
                    <img src="{{ asset('images/facility_map/'.$value->image) }}" alt=" " class="img-responsive">
                    @endif
                    <h5>{{ $value->name }}</h5>
                    <p>{{ $value->description }}</p>
                    @if(!empty ($value->facility_id))
                      
                      @foreach ($value->facility->facilitydetail as $facilitydetails )
                      <img src="{{ asset('images/facility_detail/'.$facilitydetails->image) }}" alt=" " class="img-responsive">                                
                      <h5>{{ $facilitydetails->title }}</h5>
                      <p></p>
                      @endforeach
                    @endif
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>
                </div>
            
              </div>
            </div>
            @endforeach
        </map> 
    </div>
    <div class="clearfix"> </div>
</div>
<!-- //feature -->
 @endif
</div></div></div>

<!-- contact -->
<div class="agileits_w3layouts_contact" id="contact">
      <div id="slider3_wrapper">
<div class="container">
<h3 class="w3l-titles">Enquiry Form</h3>
        <span class="w3-sub"></span>
        
        <div class="w3_mail_grids">
            <form action="{{ url('enquiry') }}" method="post">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">                 
                <input type="text" placeholder="Your Name" name="name" required="">
                <input type="email" placeholder="Your Email" name="email" required="">
                <input type="text" placeholder="Phone Number" name="phone" required="">
                <input type="text" placeholder="Topic" name="topic" required="">
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</div>
</div>

@foreach ($information as $info)
    @endforeach
<div class="contact-row agileits-w3layouts">  
    <div class="col-md-7 contact-w3lsright">
        <div class="col-xs-6 address-row w3-agileits">
            <div class="col-xs-2 address-left">
                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
            </div>
            <div class="col-xs-10 address-right">
                <h5>Mail Us</h5>
                <p><a href="mailto:{{$info->email}} "> {{$info->email}}  </a></p>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="col-xs-6 address-row">
            <div class="col-xs-2 address-left">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            </div>
            <div class="col-xs-10 address-right">
                <h5>Visit Us</h5>
                <p><font color="white">{{$info->alamat}} </font></p>
            </div>
            <div class="clearfix"> </div>
        </div>
        
       
        <div class="col-xs-6 address-row">
            <div class="col-xs-2 address-left">
                <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
            </div>
            <div class="col-xs-10 address-right">
                <h5>Call Us</h5>
                <p> <font color="white"><a href="tel:{{$info->telepon}} ">{{$info->telepon}} </a></font></p>
                
            </div>
            <div class="clearfix"> </div>
        </div> 
         <div class="col-xs-6 address-row">
            <div class="col-xs-2 address-left">
                <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
            </div>
            <div class="col-xs-10 address-right">
                <h5>Working Hours</h5>
                
                <p><font color="white">{{$info->jam_kerja_1}} </font></p>
                <p><font color="white">{{$info->jam_kerja_2}} </font></p>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>   
    </div>
    <div class="col-md-5 contact-w3lsleft map">@foreach ($youtube as $youtubes)
    @endforeach
        <iframe src="https://www.youtube.com/embed/{{$youtubes->embedcode}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div class="clearfix"> </div>
</div>
<!-- //contact address-->
<!-- //contact -->
<!-- footer -->
<div class="footer">
    <div class="container">
        <div class="footer-top">
            <div class="col-md-4 amet-sed fir-w3l"> 
                <div class="footer-nav">
                    <ul>
                       <li class="active"><a href="{{url('/')}}">Home</a></li>
                 
                <li class="active"><a href="{{url('/')}}">Residential</a></li>
                
                 
                <li><a class="scroll scroll" href="#whats">Progress</a></li>
                <li><a class="scroll scroll" href="#contact">Enquiry</a></li>
                
            
           
            
                    </ul>
                </div>
                <div class="w3ls-social-icons-2">
                     
                    @foreach ($socmed as $socmeds)
    @endforeach
                    <a class="tumblr" target="_blank" href="{{$socmeds->embedcode}}"><i class="fa fa-instagram"></i></a>
                </div>
            </div>
            <div class="col-md-4 amet-sed amet-medium">
                <h2><a class="logo" href="index.html"><img width="50%" src="{{ asset('images/araya/logo.png') }}"></a></h2>
                <div class="ag-w3-3">
                    <a href="#home" class="scroll"><i class="fa fa-angle-up" aria-hidden="true"></i> Back to Top</a>
                </div>
                <div class="clearfix"> </div>
            </div>
             
            <div class="clearfix"> </div>
        </div>
    </div>
</div>

@endsection