@extends('front/layouts/main')

@section('title')
@if(app('request')->input('saved') == 1)
{{ @trans('movement.bookmarked_articles') }}
@else
{{ @trans('movement.seo_browse_movement_title') }}
@endif
@endsection
@section('description'){{ @trans('movement.seo_browse_movement_desc') }}@endsection

@section('content')
    <main class="mover-stats-page bg-white pb-5">
        <div class="container"> 
            <form>
            <input type="hidden" name="act" value="{{app('request')->input('act')}}">
            <input name="saved" id="hid_saved" type="hidden" value="{{app('request')->input('saved')}}">
            <input name="series_id" id="hide_series_id" type="hidden" value="{{app('request')->input('series_id')}}">
            <input name="category_id" id="hid_category_id" type="hidden" value="{{app('request')->input('category_id')}}">
            <input name="topic_id" id="hid_topic_id" type="hidden" value="{{app('request')->input('topic_id')}}">
            <input name="type" id="hid_type" type="hidden" value="{{app('request')->input('type')}}">
            <input name="hot" id="hid_hot_off_the_press" type="hidden" @if(app('request')->input('hot')) @if(app('request')->input('hot')== 1) value="1" @endif @endif>
            <div class="fixed-wrapper d-md-none">
                <div class="form-group mb-0 select transparent without-label d-block d-md-none">
                    <i class="gray material-icons">import_export</i>
                    <select class="gray" name="sort" onchange="this.form.submit()">
                        <option value="3" @if(app('request')->input('sort') == "3")) selected @endif>{{ @trans('movement.popular_articles') }}</option>
                        <option value="1" @if(app('request')->input('sort') == "1")) selected @endif>{{ @trans('movement.date_ascending') }}</option>
                        <option value="2" @if(app('request')->input('sort') == "2")) selected @endif>{{ @trans('movement.date_descending') }}</option>
                    </select>
                </div>
                <a href="#filter-modal" class="gray filter-btn border-left" data-toggle="modal" data-target="#filter-modal"><i class="gray material-icons mr-1">filter_list</i> Filter</a>
            </div>  
            </form>          
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <div class="sidebar left modal" id="filter-modal">
                        <div class="title-wrapper">
                            <h3 class="h3-title h3">{{ @trans('movement.filter_articles') }}</h3>
                            <a href="{{route('front.movement.movementfront')}}" class="clear-link float-right title-act gray"><i class="material-icons">refresh</i> {{ @trans('movement.clear') }}</a>
                        </div>
                        <form autocomplete="off" name="filter" id="filter" class="filter-modal">
                            <div class="form-group select">
                                <label class="control-label">{{ @trans('movement.series2') }}</label>
                                <select name="series_id" id="series_id" data-placeholder="Select Series" class="form-control select-two js-example-basic-multiple"></select>
                            </div>
                            <div class="form-group select">
                                <label class="control-label">{{ @trans('movement.category') }}</label>
                                <select name="category_id"  id="category_id" data-placeholder="Select Category" class="form-control select-two js-example-basic-multiple"></select>
                            </div>
                            <div class="form-group select">
                                <label class="control-label">{{ @trans('movement.topic') }}</label>
                                <select name="topic_id"  id="topic_id" data-placeholder="Select Topic" class="form-control select-two js-example-basic-multiple"></select>
                            </div>
                            <div class="form-group select">
                                <label class="control-label">{{ @trans('movement.content_type') }}</label>
                                <select name="type" id="type" class="form-control">
                                    <option value="">{{ @trans('movement.all_articles') }}</option>
                                    <option value="1" @if(app('request')->input('type') == 1) selected="select" @endif >{{ @trans('movement.articles_with_audios') }}   </option>
                                    <option value="2" @if(app('request')->input('type') == 2) selected="select" @endif >{{ @trans('movement.articles_with_videos') }}   </option>
                                   
                                </select>
                            </div>
                            <div class="form-group">
                                <div class="switch-wrapper">
                                    <label class="switch">
                                        <input name="hot" value="1" type="checkbox" @if(app('request')->input('hot')) @if(app('request')->input('hot') == 1) checked @endif @endif>
                                        <span class="slider round"></span>
                                    </label><span class="gray ml-2 switch-name">{{ @trans('movement.hot_off_the_press') }}</span>
                                </div>                               
                            </div>
                            <input type="hidden" name="sort" value="{{app('request')->input('sort')}}">
                        <input type="submit" class="btn btn-transparent" value="Search" id="filterSearch">
                        <a href="{{route('front.movement.movementfront')}}" class="btn btn-bordered"><i class="material-icons">refresh</i> {{ @trans('movement.clear') }}</a>
                        </form>
                    </div>
                </div>
                <div class="col-lg-9 col-md-8 mt-3 mt-md-0 infinite-scroll">
                    <div class="row">
                        <div class="col-12">
                            <div class="title-wrapper m-0 justify-content-start align-items-center">
                                <h3 class="h3-title h3 mr-auto">                                 
                                @if(app('request')->input('saved') == 1)
                                    {{ @trans('movement.bookmarked_articles') }}
                                @else
                                {{ @trans('movement.browse_articles') }}
                                @endif                               
                                </h3>
                                <div class="form-group mb-0 select btm-arrow float-right transparent without-label d-none d-md-block gray mb-2">
                                    <form name="filter">
                                    <!-- <input name="search" id="hid_search" type="hidden" value="{{app('request')->input('search')}}"> -->
                                    <input type="hidden" name="act" value="{{app('request')->input('act')}}">
                                    <input name="saved" id="saved" type="hidden" value="{{app('request')->input('saved')}}">
                                    <input name="series_id" id="hide_series_id" type="hidden" value="{{app('request')->input('series_id')}}">
                                    <input name="category_id" id="hid_category_id" type="hidden" value="{{app('request')->input('category_id')}}">
                                    <input name="topic_id" id="hid_topic_id" type="hidden" value="{{app('request')->input('topic_id')}}">
                                    <input name="type" id="hid_type" type="hidden" value="{{app('request')->input('type')}}">

                                    <input name="hot" id="hid_hot_off_the_press" type="hidden" @if(app('request')->input('hot')) @if(app('request')->input('hot')== 1) value="1" @endif @endif>
                                    <label class="gray mb-0">{{ @trans('movement.sort_by') }}</label>
                                    <select class="gray" name="sort" onchange="this.form.submit()">
                                        <option value="3" @if(app('request')->input('sort') == "3")) selected @endif>{{ @trans('movement.popular_articles') }}</option>
                                        <option value="1" @if(app('request')->input('sort') == "1")) selected @endif>{{ @trans('movement.date_ascending') }}</option>
                                        <option value="2" @if(app('request')->input('sort') == "2")) selected @endif>{{ @trans('movement.date_descending') }}</option>
                                    </select>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if(isset($movements) && count($movements) > 0)
                    <div class="row infinite-scroll-div">
                        @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}}/small/{{$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->sslug])}}" 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_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->first_name. ' '.$movement->last_name}}</a> {{ @trans('movement.on') }} {{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">
                                        <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>
                                <div 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}}</div>
                            </div>                            
                        </div>
                        @endforeach
                        {{ $movements->links() }}
                    </div>
                    @else
                        <div class="row mb-3">
                            <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>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection
@push('pageJs')
<script>
    $('#series_id').select2(select2Ajax("{{route('common.get_search_json', ['type' => 'movement_series'])}}"));
    $('#category_id').select2(select2Ajax("{{route('common.get_search_json', ['type' => 'movement_category'])}}"));
    $('#topic_id').select2(select2Ajax("{{route('common.get_search_json', ['type' => 'movement_topic'])}}"));
    $('#type').select2();

    $(document).ready(function() {
        @if($selectedSeries)
            var newOption = new Option("{{ $selectedSeries->series_name }}", "{{ $selectedSeries->id }}");
            $('#series_id').append(newOption).trigger('change'); 
        @endif
        @if($selectedCategory)
            var newOption = new Option("{{ $selectedCategory->name }}", "{{ $selectedCategory->id }}");
            $('#category_id').append(newOption).trigger('change');
        @endif
        @if($selectedTopic)
            var newOption = new Option("{{ $selectedTopic->name }}", "{{ $selectedTopic->id }}");
            $('#topic_id').append(newOption).trigger('change');
        @endif
    });

    function select2Ajax(url) {
        return {    
            ajax:{
                type: "get",
                url: url,
                dataType: "json",
                data: function(params) {
                    var query = {
                        search: params.term,
                        page : params.page || 1,
                        per_page : params.per_page || 25
                    }
                        
                    return query;
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                        return {
                            results: data.data,
                            pagination: {
                                more: (params.page * 25) < data.total
                            }
                        };
                        
                },
            }
        }
        
    }

    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: "{{ @trans('movement.okay') }}"
    });
    @endif

    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<div class="loader" style="display:block"></div>',
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll-div',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>
@endpush