@extends('frontend.layouts.app')

@section('content')


<style>
  .content iframe{
    height: 250px !important;
    width: 350px !important;
  }
</style>

@php

if($module->id == 1)
{
    $module_folder = 'business';
}

else if($module->id == 2)
{
    $module_folder = 'home-business';
}

else if($module->id == 3)
{
    $module_folder = 'non-profit';
}

else
{
    $module_folder = 'default'; 
}

@endphp

 @if( isset( $ad->module->banner_image ) )

 @php
  $bannerImage = asset('module-banner/'.$ad->module->banner_image);
 @endphp
<style type="text/css">
  .business-list-detail-banner
  {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("{{$bannerImage}}")
  }
</style>
@endif
<!-- Business List Detail Banner Section Start -->
<div class="business-list-detail-banner">
  <div class="container">
    <div class="row">
      <div class="col-md-8 left">
        <div class="content">
          <div class="title">
            <h2>{{$ad->title ?? ''}}</h2>
            
            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Add this item to favorites" class="addToFavorite" data-slug="{{$ad->slug}}">
                <i class="fa fa-bookmark-o"></i>
            </a>


             <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Share Link"  class="shareLink" data-copy="{{ route('ad.details',['moduleSlug' => $module->slug, 'adSlug' => $ad->slug ?? 'default'] ) }}" data-slug="{{$ad->slug}}">
                <i class="fa fa-share-alt"></i>
            </a>

            <span class="badge badge-success" id="copied{{$ad->slug}}"></span>
          </div>
          @if( isset( $ad->facebook_url ) || isset( $ad->twitter_url ) || isset( $ad->pinterest_url ) || isset( $ad->instagram_url ) )
          <div class="follow-us">
            <div class="title">
              <h2>Follow Us</h2>
            </div>
            <div class="content">
              <ul>
                @if( isset( $ad->facebook_url ) )
                <li><a href="{{$ad->facebook_url}}"><i class="fa fa-facebook-f" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->twitter_url ) )
                <li><a href="{{$ad->twitter_url}}"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->pinterest_url ) )
                <li><a href="{{$ad->pinterest_url}}"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->instagram_url ) )
                <li><a href="{{$ad->instagram_url}}"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                @endif
              </ul>
            </div>
          </div>
          @endif
          <div class="category">
            <p>in 
                @if( isset( $ad->subcategory ) && count( $ad->subcategory ) )

                  @foreach( $ad->subcategory as $adCat )
                  
                    <a href="{{ route('directory.subcategory.list',['moduleSlug' => $module->slug, 'categorySlug' => $adCat->adcategory->slug] )}}">

                      {{$adCat->adcategory->title}} {{count( $ad->subcategory ) > 1 ? ',' :''}}

                    </a>

                  @endforeach

                  @else

                    <a href="{{ route('directory.subcategory.list',['moduleSlug' => $module->slug, 'categorySlug' => $category->slug] )}}">{{$category->title}}</a>

                @endif
            </p>
          </div>
          
          <div class="b-btn">
            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Send a Message" class="btn btn-warning sendUsMessage" data-slug="{{$ad->slug}}">
              Send a Message
            </a>

          </div>    

          
          <div class="opening-time">
          @if( isset($ad->working_hour_monday) || isset($ad->working_hour_tuesday) || isset($ad->working_hour_wednesday) || isset($ad->working_hour_thursday) || isset($ad->working_hour_friday) || isset($ad->working_hour_saturday) || isset($ad->working_hour_sunday) )
            <div class="title">
              <h2>Hours</h2>
            </div>
            <div class="content">
                 <!-- <i class="far fa-clock"></i> Monday : {{ $ad->working_hour_monday ?? 'N/A' }} <span><i class="fas fa-sort-down"></i></span> -->
                 <div class="card card-body">
                  @if( isset($ad->working_hour_monday) )
                    <p><span>Monday : </span>{{ $ad->working_hour_monday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_tuesday) )
                    <p><span>Tuesday : </span>{{ $ad->working_hour_tuesday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_wednesday) )
                    <p><span>Wednesday : </span>{{ $ad->working_hour_wednesday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_thursday) )
                    <p><span>Thursday : </span>{{ $ad->working_hour_thursday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_friday) )
                    <p><span>Friday : </span>{{ $ad->working_hour_friday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_saturday) )
                    <p><span>Saturday : </span>{{ $ad->working_hour_saturday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_sunday) )
                    <p><span>Sunday : </span>{{ $ad->working_hour_sunday ?? 'N/A' }}</p>
                  @endif
                  
                </div>
              <div class="collapse" id="collapseExample">
                <!-- <div class="card card-body">

                  @if( isset($ad->working_hour_monday) )
                    <p><span>Monday : </span>{{ $ad->working_hour_monday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_tuesday) )
                    <p><span>Tuesday : </span>{{ $ad->working_hour_tuesday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_wednesday) )
                    <p><span>Wednesday : </span>{{ $ad->working_hour_wednesday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_thursday) )
                    <p><span>Thursday : </span>{{ $ad->working_hour_thursday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_friday) )
                    <p><span>Friday : </span>{{ $ad->working_hour_friday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_saturday) )
                    <p><span>Saturday : </span>{{ $ad->working_hour_saturday ?? 'N/A' }}</p>
                  @endif

                  @if( isset($ad->working_hour_sunday) )
                    <p><span>Sunday : </span>{{ $ad->working_hour_sunday ?? 'N/A' }}</p>
                  @endif
                  
                </div> -->
              </div>
            </div>
          @endif
          </div>
          <!-- <div class="follow-us">
            <div class="title">
              <h2>Follow Us</h2>
            </div>
            <div class="content">
              <ul>
                @if( isset( $ad->facebook_url ) )
                <li><a href="{{$ad->facebook_url}}"><i class="fa fa-facebook-f" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->twitter_url ) )
                <li><a href="{{$ad->twitter_url}}"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->pinterest_url ) )
                <li><a href="{{$ad->pinterest_url}}"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
                @endif
                @if( isset( $ad->instagram_url ) )
                <li><a href="{{$ad->instagram_url}}"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                @endif
              </ul>
            </div>
          </div> -->
        </div>
      </div>
      <div class="col-md-4 text-right con-right">
        <div class="con-info address">
          <!--<p><a class="item-link" href="https://www.google.com/maps/place/{{str_replace(' ','+',$ad->street_address)}}/" target="_blank">{{$ad->street_address}}, {{$province->name}}<i class="fas fa-home"></i></a></p>-->
           <p><a class="item-link d-flex justify-content-end" href="javascript:void(0)" ><span>{{$ad->street_address}} {{$ad->city}}<br> {{$province->name}} , {{$ad->postal_code}}</span> <i class="fas fa-home"></i></a></p>
        </div>
        @if( isset( $ad->phone ) )
        <div class="con-info number">
          <p> <a class="item-link" href="tel:{{ $ad->phone }} ">{{ $ad->phone }} <i class="fas fa-mobile-alt"></i></a></p>
          
        </div>
        @endif

        @if( isset( $ad->email ) )
        <div class="con-info email">
          <p><a class="item-link" href="mailto:{{ $ad->email }}">{{ $ad->email }} <i class="fas fa-envelope"></i></a></p>
        </div>
        @endif

        @php 

            function addhttp($url) 
            {

              if (!preg_match("~^(?:f|ht)tps?://~i", $url)) 
              {
                  $url = "https://" . $url;
              }

              return $url;
            }

        @endphp

        @if( isset( $ad->website ) )
        <div class="con-info website">
          <p><a class="item-link" href="{{addhttp($ad->website)}}" target="_blank">{{$ad->website}} <i class="fas fa-desktop"></i></a></p>
        </div>
        @endif

        @if( isset( $ad->embed_map_iframe ) )

        <div class="location-map">
          <div class="title">
            <h2>Location Map</h2>
          </div>
          <div class="content">
            {!!$ad->embed_map_iframe!!}
          </div>
        </div>
        @endif

      </div>
    </div>
  </div>
</div>
<!-- Business List Detail Banner Section End -->

<!-- Business List Detail Content Section Start -->
<div class="business-list-detail-content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <nav>
          <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="over-view-tab" data-toggle="tab" href="#over-view" role="tab" aria-controls="over-view" aria-selected="true">Overview</a>
            <a class="nav-item nav-link" id="photos-tab" data-toggle="tab" href="#photos" role="tab" aria-controls="photos" aria-selected="false">Photos</a>
            @if( isset( $ad->facebook_page_name ) )
            <a class="nav-item nav-link" id="facebook-page-tab" data-toggle="tab" href="#facebook-page" role="tab" aria-controls="facebook-page" aria-selected="false">Facebook Page</a>
            @endif
          </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade active show" id="over-view" role="tabpanel" aria-labelledby="nav-over-view-tab">
            <div class="content">
              <div class="col-md-12">
                <div class="title">
                  <h2>{{$ad->overview_title}}</h2>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="description" style="word-wrap: break-word;">
                     {!!$ad->overview_description!!}
                    </div>                  
                  </div>
                  @if( isset( $ad->overview_image )  && file_exists( public_path( $module_folder.'/'.$ad->overview_image ) ))
                  <div class="col-md-6">
                    <div class="image">
                      <img src="{{asset($module_folder.'/'.$ad->overview_image)}}" alt="{{$ad->overview_title}}">
                    </div>
                  </div> 
                  @endif      
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="photos" role="tabpanel" aria-labelledby="nav-photos-tab">
            <div class="row">
             
              @if(isset( $ad->gallery ) && count( $ad->gallery ) > 0)
             
                @foreach( $ad->gallery as $key => $gallery )
                    @if( file_exists( public_path( $module_folder.'-gallery/'.$gallery->image ) ))
                      <div class="col-lg-3 col-md-4 col-sm-6 photos-tab">
                        <div class="img-box">
                          <img src="{{asset($module_folder.'-gallery/'.$gallery->image)}}" class="img-responsive">
                          
                          <ul class="text-center">
                            <a href="#" type="button" data-toggle="modal" data-target="#FirstImage{{$key}}"><li>
                              <i class="fas fa-camera"></i>
                              <p>View Photo</p>
                            </li></a>
                          </ul>

                          <!-- Modal Start-->
                          <div class="modal fade" id="FirstImage{{$key}}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title" id="exampleModalLongTitle">{{$ad->title}}</h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">
                                  <img src="{{asset($module_folder.'-gallery/'.$gallery->image)}}" class="img-responsive">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Modal End-->
                        </div>
                      </div>
                    @endif
                @endforeach

                @else
                <div class="col-lg-3 col-md-4 col-sm-6 photos-tab">
                 
                    <p>No Gallary Available!</p>
                 
                </div>
              @endif
            </div>
          </div>

          @if( isset( $ad->facebook_page_name ) )
          <div class="tab-pane fade" id="facebook-page" role="tabpanel" aria-labelledby="nav-facebook-page-tab">
            <div class="content">
              <div class="col-md-12">
                 <div class="description" style="margin-top: 30px;">
                  {!!$ad->facebook_page_name!!}
                 </div>
              </div>
            </div>
          </div>
          @endif
          
        </div>
      
      </div>
    </div>

  </div>
</div>
<script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v12.0" nonce="eEYq4tch"></script>
<!-- Modal send message -->
@include('frontend.ads.modal.favorite')

@include('frontend.ads.modal.message')

@include('frontend.ads.modal.login')

@endsection

@section('scripts')

@include('frontend.ads.js.login-js')

@include('frontend.ads.js.favorite-js')

@include('frontend.ads.js.share-link-js')

@include('frontend.ads.js.send-us-message-js')

@endsection