@extends('frontend.layouts.app')

@section('content')

@if( isset( $preview->preview_data ) )

@php  
  $classified = json_decode( $preview->preview_data ); //dump( $classified );
  $module = \App\Models\AdModule::find($preview->module_id);
@endphp

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

  $bannerImage = asset('module-banner/'.$module->banner_image); @endphp

  <style type="text/css">
    .inner-banner-section
    {
      background-image:url("{{$bannerImage}}");
    }
  </style>

@else

  <style type="text/css">
    .inner-banner-section{
      background: #000;
    }
  </style>

@endif

<!-- Banner Section Start -->
<div class="inner-banner-section">
  <div class="inner-banner-content">
    <div class="page-name">
      <p>{{ $classified->title }}</p>
    </div>
    <div class="breadcrumb">
      <ul>
        <li><a href="{{ route('home.index') }}">Home</a></li>
        <li><a class="active">{{ $classified->title }}</a></li>
      </ul>
    </div>
  </div> 
</div>
<!-- Banner Section End -->

<!-- Business page Section Start -->
<div class="classified-detail-page mb-5">
  <div class="container">
    <div class="">
      <div class="container-fliud">
        <div class="wrapper row">
          <div class="preview col-md-6">
            <div class="item">
              <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
              
                @if( isset( $classified->gallery_image ) && count( $classified->gallery_image ) > 0 )
                  @foreach( $classified->gallery_image as $gallery )
                    <li data-thumb="{{ asset( 'classified-gallery/'.$gallery ) }}"> 
                      <img src="{{ asset( 'classified-gallery/'.$gallery ) }}" />
                    </li>
                  @endforeach
                @endif

              </ul>
            </div>
          </div>
          <div class="details col-md-6">
            <h3 class="product-title">{{ $classified->title }}</h3>
            <h5 class="product-post-date"><span>Date : </span>{{ date('Y-m-d')}}</h5>
            <h4 class="price">Price: <span>${{ $classified->classified_price ?? '' }}</span></h4>
            <button type="button" class="send-message btn btn-warning" data-toggle="modal" data-target="#business-snd-msg">
              Send a Message
            </button>  
            <div class="product-description">
              {!! $classified->overview_description !!}
            </div>
            
            <div class="row seller-detail">
              <div class="heading">
                <h2>Seller Details</h2>
              </div>
              <div class="detail">
                <p><span>Name :</span> {{auth()->user()->first_name}} {{auth()->user()->last_name}}</p>
              </div>
             
              <div class="detail">
                <p><span>Email :</span> {{$classified->email ?? ''}}</p>
              </div>
              <div class="detail">
                <p><span>Phone :</span> {{$classified->phone ?? ''}}</p>
              </div>
              @php   $province = \App\Models\Province::find($classified->province_id); @endphp
              <div class="detail">
                <p><span>Location :</span> {{$classified->city.','}}  {{$province->name}}, {{$classified->postal_code}}</p>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>
<!-- Business Page Section End -->

<section class="continue-edit-options">
 <div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="text-center" style="margin-bottom: 20px;">  
          <a href="{{route('preview.classified-ad.countinue')}}" class="btn btn-primary">Continue Classified Post</a>
          <a href="{{route('post-ad')}}?editAdPost={{$preview->id}}" class="btn btn-secondary">Edit Classified</a>
      </div>
    </div>
  </div>
</div>
</section>
<!-- #End Breakfast Speecials -->

@endif


@endsection

@section('head-css')
<link rel="stylesheet"  href="{{  asset('frontend/lightslider/lightslider.css') }}"/>
<style>
  ul{list-style: none outside none; padding-left: 0; margin: 0;}
  .demo .item{margin-bottom: 60px;}
  .content-slider li{background-color: #ed3020; text-align: center; color: #FFF;}
  .lSAction > .lSNext {width: 0; height: 0; border-top: 20px solid transparent; right: 0px; 
    border-right: 50px solid #ffcd00; border-bottom: 20px solid transparent;}
  .lSAction > .lSPrev {width: 0; height: 0; border-top: 20px solid transparent; left: 0px;
    border-left: 50px solid #ffcd00; border-bottom: 20px solid transparent;}
  .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {border: 3px solid #ffcd00; transition: all 0.1s linear;}
  #image-gallery li{text-align: center; height: 375px; overflow: hidden; background: #fff;}
  #image-gallery li img{max-height: 375px;}
  .details .send-message{
    float: right;
  top: -22%;
  position: relative;
  }
  .classified-detail-page{
        margin-top: 50px;
  }
</style>
@endsection

@section('scripts')
<script src="{{ asset('frontend/lightslider/lightslider.js') }}"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $("#content-slider").lightSlider({
        loop:true,
        keyPress:true
    });
    $('#image-gallery').lightSlider({
        gallery:true,
        item:1,
        thumbItem:9,
        slideMargin: 0,
        speed:500,
        auto:true,
        loop:true,
        onSliderLoad: function() {
            $('#image-gallery').removeClass('cS-hidden');
        }  
    });
});
</script>
@endsection