@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">Sorted By</h3>
                <div>
                <div class="row mt-5 justify-content-center">
                    <div class="col-sm-12 col-lg-5">
                        <div class="form-group sub-category-selection mt-0">

                            <select class="form-select text-capitalize" id="project_category" aria-label="Default select example">
                                @if(count($categories) > 0)
                                    <option value="all" class="text-capitalize">All</option>
                                    @foreach($categories as $category)
                                    
                                        @if(isset($cat_id))
                                           @if($cat_id == $category->id)
                                            <option value="{{$category->id}}" class="text-capitalize" selected>{{$category->name}}</option>
                                           @else
                                            <option value="{{$category->id}}" class="text-capitalize" >{{$category->name}}</option>
                                           @endif
                                        @else   
                                            <option value="{{$category->id}}" class="text-capitalize">{{$category->name}}</option>
                                        @endif  
                                    
                                    @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-4 mb-sm-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-4 mt-sm-5">

                                <h5 class="mb-3 fw-600 d-flex justify-content-between">
                                        
                                    <a href="{{ route('project-description',$ide) }}" class="text-main text-start text-break home-title"  >{{ $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
                                        @if(Auth::check() && Auth::user()->role == 'admin') 
                                            <a href="" class="favorite" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fas fa-heart watchlist-icon"></i></a>
                                            
                                        @else
                                            <a href="{{ route('login')}}" class="favorite"><i class="fas fa-heart watchlist-icon"></i></a>
                                        @endif
                                    @endif

                                </h5>

                                @foreach($users as $user)
                                @if($user->id == $project->inventor_id)
                                
                                @php $idu = Crypt::encrypt($user->id); @endphp
                                <a href="{{route('userProfile',$idu)}}">
                                <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>
                                </a>
                                
                                @endif
                                
                                @endforeach
                                <p class="fw-300 text-break home-card-desc">@if(!empty($project->project_short_desc)){{$project->project_short_desc }}@endif</p>

                            </div>

                        </div>

                    </div>
                @endforeach
                @else
                <!--<main class="admin-dashbaord-content">-->
                        <div class="text-center">
                            <img src="{{ URL::asset('assets/medias/decrease.png') }}" alt="">
                        </div>
                        <div class="default-content">
                            <h3 class="text-center mb-3">Oops!</h3>
                            <p class="text-center default-text">No result found</p>
                        </div>
                @endif
                

            </div>
            <div class="text-center d-flex justify-content-center">
            {{ $projects->links() }}
            </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>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
         <h4>Oops!</h4>
         <p>Admin can not add projects in watchlist.</p>
         <p>Thank You!</p>
      </div>
    </div>
  </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