@extends('website.layouts.header')
@section('styles') 
    
@endsection
@section('content')

<!-- listing page website start -->
<div id="projlist">
<div id="projlist1">
    <section>
        <div class="container">
            <div class="listing-top-content">
                <h3 class="text-center position-relative mb-0 shorted-heading">Shorted By</h3>
                <div>
                <div class="row mt-5 justify-content-center">
                    <div class="col-5">
                        <div class="form-group sub-category-selection mt-0">

                            <select class="form-select" id="project_category" aria-label="Default select example">
                                @if(count($categories) > 0)
                                    <option value="all" >All</option>
                                    @foreach($categories as $category)
                                       
                                        <option value="{{$category->id}}" >{{$category->name}}</option>
                                        
                                    @endforeach
                                @endif
                            </select>

                        </div>
                    </div>
                </div>
                <div class="listing-categories mt-5" id="subcategory_div">
                    <ul class="d-flex flex-wrap justify-content-center align-items-center" id="project_subcategory">
                        <!--<li class="category-li">-->
                        <!--    <a href="" class="category-link d-block bg-white border-blue">Software</a>-->
                        <!--</li>-->
                       
                    </ul>
                </div>
                </div>
            </div>
        </div>
    </section>
    <section  class="section listing-content-bottom
     releted-category-idea start-investing-section position-relative pb-3">

        <img src="{{ URL::asset('assets/medias/banner-shape-right.png') }}" alt="" class="investing-bg">

        <div class="container">
            <div class="section-title">

            <h3 class="section-heading text-center mb-5 fw-600">Projects to Related Category</h3>

            </div>

            <div class="new-projects row justify-content-center align-items-center" id="project_section">
                @if(count($projects) > 0)
                @foreach($projects as $project)
                    @php $ide = Crypt::encrypt($project->id); @endphp
                    <div class="col-md-4 mb-4">

                        <div class="project-wrap position-relative">

                            <div class="project-img-wrap">

                                <div class="project-img home-project-img">

                                    <a href="{{ route('project-description',$ide) }}"><img src="{{url('').'/'.$project->project_banner_image }}" alt=""></a>

                                </div>

                            </div>

                            <div class="mt-5">

                                <h5 class="mb-3 fw-600 d-flex justify-content-between">
                                        
                                    <a style="background: none; border: navajowhite;" href="{{ route('project-description',$ide) }}" class="text-main text-start text-break"  >{{ $project->project_title }}</a>
                                
                                    @if(isset($favoritelist))
                                        @if(count($favoritelist)> 0)
                                            @php
                                            foreach($favoritelist as $value){
										        $array[] = $value->project_id;
										    }
										     
										    if (in_array($project->id, $array)){  @endphp
										        <a href="" class="active ajaxfavorite a" data-id="" data-user_id="{{ Auth::user()->id }}" id="ajaxfavorite"><i class="fas fa-heart watchlist-icon"></i></a>
                                            @php
										    }else{  @endphp
										        <a href="" class="ajaxfavorite b" data-id="" data-user_id="{{ Auth::user()->id }}" id="ajaxfavorite"><i class="fas fa-heart watchlist-icon"></i></a>
                                            @php
										    }
											@endphp   
										
                                        @else
                                            <a href="" class="ajaxfavorite c" data-id="" data-user_id="{{ Auth::user()->id }}" id="ajaxfavorite"><i class="fas fa-heart watchlist-icon"></i></a>
                                        @endif
                                    @else
                                        <a href="{{ route('login')}}" class="favorite"><i class="fas fa-heart watchlist-icon"></i></a>
                                    @endif

                                </h5>

                                @foreach($users as $user)
                                @if($user->id == $project->inventor_id)
                                <h5 class="own-name text-blue mb-4">@if(!empty($user->name)){{ $user->name }}@endif @if(!empty($user->last_name)){{ $user->last_name }}@endif</h5>
                                @endif
                                
                                @endforeach
                                <p class="fw-300 text-break">@if(!empty($project->project_short_desc)){{$project->project_short_desc }}@endif</p>

                            </div>

                        </div>

                    </div>
                @endforeach
                @else
                No results Found
                @endif
                

            </div>
            @if(count($projects) > 0)
            <div class="text-center">
                <a href="" class="text-white mt-0 fw-600 text-uppercase explore-btn desc-load-btn">load more</a>
            </div>
            @endif
        </div>

    </section>
</div>
</div>
<!-- end home page website -->
@endsection
@section('scripts') 
  
<script>
    $(document).ready(function(){
        // $("#city_section").hide();
        $("#subcategory_div").css("display", "none");
        
        var option = '';
        option += "<option value=''>Select Category First</option>";
        $('#project_category').change(function(){ 
        var id = $(this).val();
        
            $.ajax({
                url: "{{url('getSubCategories/explore')}}/"+id,  
                type: 'get',
                
                success: function(response){  
                    
                    $('#projlist').html(response)
                    
                }
            });
        });
    });
    
    
   
</script> 

 
      
@endsection