@extends('front/layouts/main')

@section('title')Latest {{$name}} Articles | {{ @trans('movement.empower') }}@endsection
@section('description')Browse latest {{$name}} articles from different movers on #TheMovement at Empower.@endsection


@section('content')
    <main class="category-topic-details-page bg-white p-0">
        <section class="section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title-wrapper">
                            <h2 class="box-title large-font-size">{{$name}}
                                
                            </h2>
                            <div class="d-flex flex-wrap mb-1">
                                <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center mr-3"><span class="material-icons mr-2">supervised_user_circle</span> <span class="activityCnt">{{$followerCnt}}</span> &nbsp;{{ @trans('movement.followers') }}</a>
                                <a href="javascript:void(0)" class="btn btn-transparent {{$followtext}} follow_activity" id="{{$id}}" ref_type="category">{{$followtext}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @if(isset($movements) && count($movements) > 0)

                        @foreach($movements as $movement)
                        <div class="col-sm-6 col-lg-4 vertical-card-view d-flex flex-column mt-4">                            
                            @if($movement->cover_image != '')
                            <a href="{{route('front.movement.movementdetails',['slug' => $movement->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/medium/{{$movement->cover_image}}" alt="{{$movement->movement_title}}" class="rounded-lg mb-3 d-block fit-img" ></a>
                            @endif
                            <div class="chips d-flex align-items-center flex-wrap">
                                <a href="{{route('front.series.seriesdetails',['slug' => $movement->series->slug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$movement->series->series_name}}</a>
                                @if($movement->does_contain_audio == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                @endif
                                @if($movement->does_contain_video == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                @endif
                            </div>
                            <a href="{{route('front.movement.movementdetails',['slug' => $movement->slug])}}" class="mt-2 mb-2 d-block bold title-font">{{$movement->movement_title}}</a>
                            <p class="smd-font-size mt-auto mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $movement->moverprofile->slug])}}">{{$movement->mover->first_name. ' '.$movement->mover->last_name}}</a> {{ @trans('movement.on') }} {{$movement->moverprofile->getDateFormat2($movement->updated_at)}}</p>
                            <hr class="my-2 w-100">
                            <div class="d-flex">
                                <div class="like mr-3">
                                    <div class="custom-control custom-checkbox p-0">
                                        <input type="checkbox" class="custom-control-input" id="like1" name="example2">
                                        <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$movement->count_like}}</label>
                                    </div>
                                </div>
                                <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center mr-auto"><span class="material-icons title-font mr-1">share</span> {{$movement->count_share}}</a>
                            </div>                            
                        </div>
                        @endforeach

                    @else
                    <div class="col-sm-12 col-lg-12 vertical-card-view d-flex flex-column mt-4" style="text-align: center;">  
                        {{ @trans('movement.no_article_found') }}
                    </div>
                    @endif
                </div>
            </div>
        </section>
    </main>
@endsection
@push('pageJs')
<script>
    $(document).ready(function() {  

        $(document).on("click", ".follow_activity", function() {
           
            var ref_type = $(this).attr("ref_type");
            var ref_id = $(this).attr("id");
            
            @guest
                $('#frmLoginUser2 #activity_type').val('follow')
                $('#frmLoginUser2 #ref_id').val(ref_id)
                $('#frmLoginUser2 #ref_type').val(ref_type)
                $("#moverLoginModal").modal("show");
            @endguest
            
            @auth
            $.ajax({
                method: 'POST',
                url: "{{route('front.activity.store')}}",
                data: {
                    "_token": "{{csrf_token()}}",
                    'ref_type': ref_type,
                    'ref_id': ref_id,
                    'activity_type': 'follow'
                },
                success: function(res) {  
                    res=res.split("~");              
                    $('.follow_activity').html(res[1]); 
                    $('.activityCnt').html(res[0]);

                    if ( $('.follow_activity').is( ".Following" ) ) {
                        $("a").removeClass("Following");
                    } else {
                        $('.follow_activity').addClass('Following');
                    }
                }
            });
            @endauth
        });

    });
</script>
@endpush