@extends('frontend.layouts.app')

@section('content')


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

@php $bannerImage = asset('module-banner/'.$classified->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">
  <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 ) && count( $classified->gallery ) > 0)
             
                  @foreach( $classified->gallery as $key => $gallery )
                      @if( file_exists( public_path('classified-gallery/'.$gallery->image ) ))
                        <li data-thumb="{{ asset( 'classified-gallery/'.$gallery->image ) }}"> 
                          <img src="{{ asset( 'classified-gallery/'.$gallery->image ) }}" />
                        </li>
                      @endif
                  @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>
            @auth
            <button type="button" class="send-message btn btn-warning" data-toggle="modal" data-target="#business-snd-msg">
              Send a Message
            </button>  
            @endauth
            <div class="product-description">
              {!! $classified->overview_description !!}
            </div>
            @auth
            <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>
            @endauth

            @guest
            <div class="row seller-detail">
              <div class="heading">
                <h2>Seller Details</h2>
              </div>
              <div class="detail">
                <p>view seller details, Please <a href="javascript:void(0);" id="sendMessageLoginCon">Log In</a></p> or <a href="javascript:void(0);" id="sendMessageLoginCon1">sign up</a> first.</p>
              </div>
            </div>
            @endguest
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>
<!-- Business Page Section End -->

 <div class="garagesale-detail-content mb-5">
      @if( isset( $similarProducts ) && count( $similarProducts ) > 0 )
      <div class="container">
        <div class="heading">
          <h2>Similar Product</h2>
        </div>
        <div class="row business-list-content garagesale-content">
          
          @foreach( $similarProducts as $product )
            <div class="col-md-3">
              <div class="business-list-content-box">
                <div class="image">
                  @if( isset( $product->featured_image ) )
                  <a href="{{route('classified.detail',$product->slug)}}">
                     <img src="{{ asset('classified/'.$product->featured_image ) }}" alt="{{ $product->title }}">
                  </a>
                  @endif
                </div>
                <div class="content">
                  <div class="title">
                    <h2><a href="{{route('classified.detail',$product->slug)}}">{{ $product->title }}</a></h2>
                  </div>
                  <h5 class="product-post-date"><span>Date : </span>{{ date('d-m-Y',strtotime($product->approved_date) ) }}</h5>
                  <div class="price">
                    <p>${{ $product->classified_price }}/-</p>
                  </div>
                  <div class="garagesale-btn">
                    <a href="{{route('classified.detail',$product->slug)}}">Read More</a>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
          
        </div>
      </div>
      @endif
    </div>
 @auth
    <!-- Modal send message -->
<div class="modal fade" id="business-snd-msg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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">Send Us A Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('user.send.message')}}" method="POST" id="messageSendForm">
        <div class="modal-body">
            @csrf
            <input type="hidden" name="slug" value="{{ $classified->slug }}">
            <input type="hidden" name="module" value="classified">
            <div id="succesMessageDisplay"></div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <input name="first_name" type="text" class="form-control" id="inputFname" placeholder="First Name">
              </div>
              <div class="form-group col-md-6">
                <input name="last_name" type="text" class="form-control" id="inputLname" placeholder="Last Name">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <input name="phone_number" type="text" class="form-control" id="inputNumber" placeholder="Phone Number">
              </div>
              <div class="form-group col-md-6">
                <input name="email"  type="email" class="form-control" id="inputEmail" placeholder="Email">
              </div>
            </div>
            <div class="form-group">
              <input name="street_address" type="text" class="form-control" id="inputAddress" placeholder="Street, Address">
            </div>
            <div class="form-group">
              <textarea  name="message" class="form-control"></textarea>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-warning" id="messageSendFormSubmit">Send Us Message</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endauth
@include('frontend.ads.modal.login')
@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> 
@include('frontend.ads.js.login-js')
<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>
@include('frontend.ads.js.send-us-message-js')
@endsection