@extends('frontend.layouts.app')

@section('content')


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

@php $bannerImage = asset('module-banner/'.$module->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>Classifieds</p>
    </div>
    <div class="breadcrumb">
      <ul>
        <li><a href="{{ route('home.index') }}">Home</a></li>
        <li><a class="active">Classifieds</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 action="{{\Request::url()}}" id="searchForm">
              <input type="hidden" name="min_price">
              <input type="hidden" name="max_price">
              <input name="sorting" type="hidden" value="{{ $_GET['sorting'] ?? '' }}">
              <div class="input-group">
                <input name="search" type="text" class="form-control" placeholder="Search" aria-label="Search..." aria-describedby="basic-addon2" value="{{ $_GET['search'] ?? '' }}">
                <div class="input-group-append">
                  <button type="submit" 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;">
              <form action="{{\Request::url()}}" id="priceFilterForm">
                <input name="search" type="hidden" value="{{ $_GET['search'] ?? '' }}">
                <input name="sorting" type="hidden" value="{{ $_GET['sorting'] ?? '' }}">
                <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;">
                    <input type="hidden" name="min_price" value="{{ $classifiedMaxPrice }}">
                    <input type="hidden" name="max_price" value="{{ $classifiedMinPrice }}">
                  </p>
                  <div id="slider-range"></div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8">

        <div class="row business-list-content garagesale-content featured-ads">
          <div class="col-md-12">
            @if( isset( $_GET['max_price'] ) || isset( $_GET['min_price'] ) || isset( $_GET['search'] ) || isset( $_GET['sorting'] ) )
              <a href="{{ route('directory.category.list','classified')}}">Clear All</a>
            @endif
          </div>
          <div class="classified-heading">
            <h2>All Classified</h2>
            <div class="sorting">
              <form action="{{\Request::url()}}" id="sortingForm">
                <input type="hidden" name="min_price">
                <input type="hidden" name="max_price">
                <input name="search" type="hidden" value="{{ $_GET['search'] ?? '' }}">
                <label>Sort By</label>
                <select name="sorting" class="sorting">
                  <option value="latest" {{ isset( $_GET['sorting'] ) && $_GET['sorting'] == 'latest' ? 'selected' : '' }}>Latest</option>
                  <option value="oldest" {{ isset( $_GET['sorting'] ) && $_GET['sorting'] == 'oldest' ? 'selected' : '' }}>Oldest</option>
                  <option value="low-to-high" {{ isset( $_GET['sorting'] ) && $_GET['sorting'] == 'low-to-high' ? 'selected' : '' }}>low to high</option>
                  <option value="high-to-low" {{ isset( $_GET['sorting'] ) && $_GET['sorting'] == 'high-to-low' ? 'selected' : '' }}>high to low</option>
                </select>  
              </form>
            </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>26-04-2021</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() {
    @if( isset( $_GET['max_price'] ) && isset( $_GET['min_price'] ) )
     $( "#slider-range" ).slider({
      range: true,
        min: parseFloat("{{ $classifiedMinPrice }}"),
        max: parseFloat("{{ $classifiedMaxPrice }}"),
      values: [ parseFloat("{{ $_GET['min_price']  }}"), parseFloat("{{ $_GET['max_price']  }}") ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        $("input[name=min_price]").val(ui.values[0]);
        $("input[name=max_price]").val(ui.values[1]);
        $("#priceFilterForm").submit();
      }
    });
    @else
      $( "#slider-range" ).slider({
        range: true,
        min: parseFloat("{{ $classifiedMinPrice }}"),
        max: parseFloat("{{ $classifiedMaxPrice }}"),
        values: [ parseFloat("{{ $classifiedMinPrice }}"), parseFloat("{{ $classifiedMaxPrice }}") ],
        slide: function( event, ui ) {
          $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          $("input[name=min_price]").val(ui.values[0]);
          $("input[name=max_price]").val(ui.values[1]);
          $("#priceFilterForm").submit();
        }
      });
    @endif
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );

    $("select[name=sorting]").change(function(){
      $("#sortingForm").submit();
    });

  } );
  </script>
@endsection