@extends('frontend.layouts.app')

@section('content')


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

@php $bannerImage = asset('module-banner/'.$module->category_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>Classifieds</p>
    </div>
    <div class="breadcrumb">
      <ul>
        <li><a href="{{ route('home.index') }}">Home</a></li>
        <li><a href="{{route('directory.category.list',$module->slug)}}">Classifieds</a></li>
        <li><a href="{{route('classified.category.list',$category->slug)}}"  class="active"> {{ $category->title }} </a></li>
      </ul>
    </div>
  </div>
</div>
<!-- Banner Section End -->


<!-- Business page Section Start -->
<div class="business-list-page-section classified-page">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="business-list-sidebar">
          <div class="search-box">
            <form>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button>
                </div>
              </div>
            </form>
          </div>
          <div id="accordion">
            <div class="card">
              <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#category" aria-expanded="true" aria-controls="category">
                    Category
                  </button>
                </h5>
              </div>
              <div id="category" class="collapse show" aria-labelledby="headingOne">
                <div class="card-body">
                  <ul>
                    @if( isset( $classifiedCategories ) && count( $classifiedCategories ) > 0 )
                      @foreach( $classifiedCategories as $category )
                        @php 
                          $adPost = \App\Models\AdBusiness::where('category_id',$category->id)->where('module_id',$module->id)->where('status',1)->whereDate('approved_date','<=',date('Y-m-d'))->whereDate('expiry_date','>=',date('Y-m-d'))->get();
                        @endphp
                        <li>
                          <a href="{{ route('classified.category.list',$category->slug) }}" class="btn btn-link"><i class="fa fa-angle-double-right"></i> {{ $category->title }} <span>{{ count( $adPost ) }}</span></a>
                        </li>
                      @endforeach
                    @endif
                  </ul>
                </div>
              </div>
            </div>

            <div class="card" style="margin-top:20px;">
                
              <div class="form-group price-range">
                <p>
                  <label for="amount">Price range:</label>
                  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                </p>
                <div id="slider-range"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8">

        <div class="row business-list-content garagesale-content featured-ads">
          
          <div class="classified-heading">
            <h2>All Classified</h2>
            <div class="sorting">
              <label>Sort By</label>
              <select class="sorting">
                <option>Latest</option>
                <option>Oldest</option>
                <option>low to high</option>
                <option>high to low</option>
              </select>  
            </div>
          </div>

          @if( isset( $classifieds ) && count( $classifieds ) > 0 )
            @foreach( $classifieds as $classified )
              <div class="col-md-4">
                <div class="business-list-content-box">
                  <div class="image">
                    @if( isset( $classified->featured_image ) )
                    <a href="{{route('classified.detail',$classified->slug)}}">
                      <img src="{{ asset('classified/'.$classified->featured_image ) }}" alt="{{ $classified->title }}">
                    </a>
                    @endif
                  </div>
                  <div class="content">
                    <div class="title">
                      <h2><a href="{{route('classified.detail',$classified->slug)}}">{{ $classified->title }}</a></h2>
                    </div>
                    <h5 class="product-post-date"><span>Date : </span>{{ date('d-m-Y',strtotime($classified->approved_date) ) }}</h5>
                    <div class="price">
                      <p>${{ $classified->classified_price }}/-</p>
                    </div>
                    <div class="garagesale-btn">
                      <a href="{{route('classified.detail',$classified->slug)}}">Read More</a>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          @else
            <div class="col-md-12">
                <p>No Classifieds Available!</p>
            </div>
          @endif

        </div>

         <div class="row">
          <div class="business-list-content">
          {!!$classifieds->links()!!}
          </div>
        </div>
      </div>
    </div>
  </div>  
</div>
<!-- Business Page Section End -->

@endsection

@section('head-css')
<style type="text/css">
  .ui-widget-header {background: #28a745!important;}
  .real-estate-modal .price-range input{color: #28a745!important; font-size: 20px!important;
    position: relative; top: 2px;}
  .real-estate-modal .btn{margin-bottom: 10px;}
  .real-estate-modal p.label-bottom{font-size: 14px; color: #777;}
</style>
@endsection

@section('scripts')
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>
@endsection