@extends('layouts.frontend')

@section('content')
<div class="banner">
	<div class="container">
		<div class="row">
			<div class="col-md-12 text-center">
				<h2 class="page-title">THOUGHT OF THE DAY: {{$category->name}} @if(isset($thoughts)) ({{count($thoughts)}}) @endif</h2>
			</div>
		</div>
	</div>
    <a href="#" class="btn-chat">Chat With Us</a>  
</div>

<section class="main-sec">
	<div class="container">
    	<div class="row">
            <div class="col-md-9">
                <div class="row">
                	<div class="col-md-12 mb-4">
                    	<ul class="filter-nav">
                        	<li><a href="{{url('thoughts/category')}}/{{$slug}}">View Latest</a></li>
                        	<li><a href="{{url('thoughts/category/most-like')}}/{{$slug}}">Most Liked</a></li>
                        	<li><a href="{{url('thoughts/category/random')}}/{{$slug}}">Random</a></li>
                        </ul>
                    </div>
                    @php
                    $count = 0;
                    @endphp
                    @if(isset($thoughts))
                    @foreach($thoughts as $thought)
                        @php
                        $count++;
                        @endphp
                        @if($count%2 <> 0)
                        <div class="col-md-8 mb-4 thoughts-list">
                            <div class="thoughts-list-inner">
                                <span class="icon">
                                    <i class="fas fa-quote-left Left"></i>
                                </span>
                                <div class="content">
                                    <h6>{{$thought->content}}</h6>
                                    <div class="IconFinder">
                                        <ul>
                                            <li><i class="fa fa-calendar"></i>{{date_format($thought->created_at,'F jS, Y')}} </li>
                                            <li>
                                                <div class="post-like">
                                                    <a href="javascript:void(0);" class="thought-like" data_id="{{$thought->id}}" like="{{$thought->thought_like}}">
                                                        <i class="fa fa-heart qtip-like"></i>
                                                    </a>
                                                    <span id="like{{$thought->id}}" class="count">{{$thought->thought_like}}</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="offset-md-4 col-md-8 mb-4 thoughts-list">
                            <div class="thoughts-list-inner">
                                <span class="icon">
                                    <i class="fas fa-quote-left Left"></i>
                                </span>
                                <div class="content">
                                    <h6>{{$thought->content}}</h6>
                                    <div class="IconFinder">
                                        <ul>
                                            <li><i class="fa fa-calendar"></i>{{date_format($thought->created_at,'F jS, Y')}} </li>
                                            <li>
                                                <div class="post-like">
                                                    <a href="javascript:void(0);" class="thought-like" data_id="{{$thought->id}}" like="{{$thought->thought_like}}">
                                                        <i class="fa fa-heart qtip-like"></i>
                                                    </a>
                                                    <span id="like{{$thought->id}}" class="count">{{$thought->thought_like}}</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                    @endforeach

                        <div class="col-12">
                            <nav aria-label="Page navigation example">
                            {{$thoughts->links()}}
                            </nav>
                        </div> 

                    @endif

                    @if($count < 1)
                        <div class="col-12">
                            <h2>No Thought Found!</h2>
                        </div> 
                    @endif


                    
                </div>
            </div>
             <div class="col-md-3">
             	 <div class="category-box mb-4">
                    <h3>Thought Categories</h3>
                    <ul class="cate-list">
                        <li><a href="{{route('frontend.thoughts')}}">All ({{$totalThoughts}})</a></li>
                        @foreach($categories as $category)
                            <li><a href="{{url('thoughts/category')}}/{{$category->slug}}">{{$category->name}} ({{count($category->thoughts)}})</a></li>
                        @endforeach
                    </ul>
                </div>
                <div class="add mb-4">
                    <a href="{{route('frontend.sales-presenters')}}">
                      <img src="{{asset('f/images/add-img3.jpg')}}" alt="">
                    </a>
                </div>
             	 <div class="category-box mb-4">
                    <h3>Quick Links</h3>
                    <ul class="cate-list">
                        @foreach($quicklinks as $quicklink)
                            <li><a href="{{$quicklink->redirect_url}}">{{$quicklink->title}}</a></li>
                        @endforeach
                    </ul>
                </div>
            </div>         
        </div>
    </div>
    <div class="btm-shape-prt">
    	<img class="img-fluid" src="{{asset('f/images/shape2.png')}}" alt="" />
    </div>
</section>



@endsection
@section("js_after")
<script>
  $(document).ready(function() {

    $('.thought-like').click(function () {

      var id = $(this).attr("data_id");
      //var currentLike = $(this).attr("like");
      
      var base_url = window.location.origin;

      $.ajax({
         url: base_url+'/thought/like/'+id,
         type: 'get',
         dataType: 'html',
         success: function(response){
            $("#like"+id).text(response);
         }
      });

      return false;
    });
  });
</script>
@endsection