@extends('layouts.master')

@section('title', __('tr.News') )
@section('subtitle', __('tr.Faculty of Engineering News') )
@section('titleicon', "icon-chat2" )
@section('advancedaction')
    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 mt-1">
        <div class="float-right">
            <a class="set_preferences btn btn-primary"
                    id="set_preferences" href='javascript:void(0)' >@lang('tr.Set News Preference')</a>
        </div>
    </div>
@endsection

@section('content')
<div class='modal fade' id='add_file_form' tabindex='-1' role='dialog' aria-labelledby='add_file_form' aria-hidden='true'>
        <form action="" method="post" enctype='multipart/form-data'>
            {{ csrf_field() }}
        <input type="hidden" name="parent_id" value="68469">
        <input type="hidden" name="type" value="2">
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <div class="col-11 p-0">
                            <h5 class='modal-title' id='modal_label'>Add File</h5>
                        </div>
                        <div class="col-1 p-0">
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        </div>
                    </div>
                    <div class='modal-body'>                                
                          <div class="form-group">
                            <input required type="text" class="form-control" id="title" name="title" title="title" placeholder="Title">
                        </div>
                        <div class="form-group">
                            <input required type="text" class="form-control" id="title" name="summary" title="summary" placeholder="Summary">
                        </div>
                        <div class="form-group">
                            <input required type="file" onchange="validateFileName(this)" class="form-control" id="file" name="file">
                        </div>                                  
                    </div>
                    <div>
                        <div id='progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                    </div>
                    <div class='modal-footer'>
                        <button type='submit' class='btn btn-primary' id='action'>@lang('tr.Submit') <span id="progress_text"></span></button>
                        <button type='button' class='btn btn-light' id='close' data-dismiss='modal'>@lang('tr.Cancel')</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <div class='modal fade' id='preferences_form' tabindex='-1' role='dialog' aria-labelledby='preferences_form' aria-hidden='true'>
        <form action="" method="post" enctype='multipart/form-data'>
            {{ csrf_field() }}
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <div class="col-11 p-0">
                            <h5 class='modal-title' id='modal_label'>Set Preferences</h5>
                        </div>
                        <div class="col-1 p-0">
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        </div>
                    </div>
                    <div class='modal-body'>                                
                          <div class="form-group">
                            <select required class="selectize" multiple id="sources_ids" name="sources_ids[]" title="News Sources" placeholder="News Sources"> </select>
                        </div>                                      
                    </div>
                    <div>
                        <div id='progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                    </div>
                    <div class='modal-footer'>
                        <button type='submit' class='btn btn-primary' id='action'>@lang('tr.Submit') <span id="progress_text"></span></button>
                        <button type='button' class='btn btn-light' id='close' data-dismiss='modal'>@lang('tr.Cancel')</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="main-content blogBox" id="mainDiv">
        <div class="card">
            <div class="card-body pb-0">
                <form action="" method="post" id="filter_form">
                    {{ csrf_field() }}
                    
                    <div class="row filter-box">
                                              
                        <div class="input-group col-md-3" style="height: 7px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text" style="border: none;">@lang('tr.From') </span> 
                            </div>
                            <input type="date" name="search_from" style="border-radius: .25rem;" id="search_from" class="form-control " title="@lang('tr.From')" >
                        </div>

                        <div class="input-group col-md-3" style="height: 7px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text" style="border: none;">@lang('tr.To') </span> 
                            </div>
                            <input type="date" name="search_to" style="border-radius: .25rem;" id="search_to" class="form-control " title="@lang('tr.To')" >
                        </div>

                        <div class="col-md-6">
                            <select class="form-control" name="search_source_id" id="search_source_id">
                               <option value="">@lang('tr.Select Source')</option>
                                @foreach($sources as $source)
                                    @if($source->selected)
                                    <option value="{{$source->id}}">{{$source->title}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <input data-placement="top" type="text" name="search_text" id="search_text" class="typeahead" autocomplete="off" placeholder="@lang('tr.TextSearch')" class="form-control">
                        </div>

                        {{--Button--}}
                        <div class="col-md-3">
                            <button class="btn btn-primary" type="button" id="search_button">@lang('tr.Search')</button>
                        </div>

                        {{--Button--}}
                        <div class="col-md-3">
                            <button class="btn btn-danger" type="button" id="reset_button">@lang('tr.Reset')</button>
                        </div>
                    </div>                  
                </form>
            </div>            
        </div>

        <div class="row">
            <div id='news_template' style="display: none; width: 100%; background-color: white; margin-top: 5px; border: 1px solid lightgray;">
                <div style="display: inline-block; width: 30%">
                    <img id='image' class="card-img-top" src="{{url('/int/images/defaultNews.jpg')}}" width="100%">
                </div>
                <div style="display: inline-block; width: 60%; vertical-align: top; padding: 10px;">
                    <h4 class="card-title" id='title'></h4>
                    <p style="font-size: 110%;">
                        <span class="badge badge-bdr-pill badge-primary" id="source"></span>
                        <span class="badge badge-bdr-pill badge-success" id='time'></span>
                        <a class="badge badge-pill badge-success" id='download' title="Download" target="_blank" href="">Download</a>
                        <a class="badge badge-pill badge-success" id='show' title="View" target="_blank" href="">Read More</a>
                       
                    </p>
                    <p id='summary' style="padding-top: 5px; font-size: 120%; height: 100%;"></p>
                </div>
            </div>
        </div>

        <div class="row gutters" id="news_container">            
        </div>
        <div style="padding:10px; text-align: {{right()}};">
            <a href="javascript:void(0)" onClick="displayMore()" class="btn btn-primary float-right" id="load_more">Load More<i class="icon-arrow-down-thick"></i></a>
        </div>
        <br>
        <br>
    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')
    <script type="text/javascript">
    
        var page_index = 1;
       
        function bindNews(data, more) {

            var newsTemplate = $('#news_template');
            var showURL = '{{ route('news_show', ['archive'=>'#id'])}}';
            var downloadURL = '{{ route('download_file', ['archive'=>'#id'])}}';
            
            $.each(data, function(index, item) {                
                var element = newsTemplate.clone();
                element.css('display', '');
                if(item.image) element.find('#image').attr('src', item.image);
                element.find('#title').text(item.title);
                element.find('#time').text(item.time);
                element.find('#source').text(item.source);
                var description = $('<textarea/>').html(item.description).text();
                element.find('#summary').text(description);
                if(item.type==1) {
                    element.find('#show').attr('href', showURL.replace('#id', item.id));
                    element.find('#download').css('display', 'none');
                }
                else {
                    element.find('#download').attr('href', downloadURL.replace('#id', item.id));
                    element.find('#show').css('display', 'none');
                }
                
                $('#news_container').append(element);
            });

            $('#load_more').css('display', (more)?'':'none');
        }

        var offset = 0;
        
        function displayNews() {

            $.ajax({
                type: 'post', 
                data: {
                    'search_text': $("#search_text").val(), 
                    'search_source_id': $("#search_source_id").val(),
                    'search_from': $("#search_from").val(),
                    'search_to': $("#search_to").val(),
                    'offset': offset, 
                    'limit': 9
                },
                url: '{{ route('news')}}',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {

                    offset += data.news.length;
                    bindNews(data.news, data.more);
                }, 
                error:function(){}
            });
        }

        function displayMore() {
            displayNews();
        }

        $(document).ready(function() {            

            offset = 0;
            displayNews();
       
            $allowSubmit = false;

            $('#filter_form').on('submit', function(event) {
                if(!$allowSubmit)event.preventDefault();
            })

            $('#search_text').keyup(function (e) {
                if (e.keyCode == 13)
                {
                    e.preventDefault();
                    offset = 0;
                    $('#news_container').html('');
                    displayNews();
                }
            });

            $(document).on("click", "#search_button", function () {
                offset = 0;
                $('#news_container').html('');
               displayNews();  
            });

            $("#reset_button").click(function(){
                $("#search_text").val(null);
                $("#search_source_id").val(null);                
                $("#search_from").val(null);
                $("#search_to").val(null);
                offset = 0;
                $('#news_container').html('');
                displayNews();    
            });

            $(document).on("click", "#set_preferences", function () {
                
                var modal = $('#preferences_form').clone();
                var url = '{{route('news_save_preferences')}}';
                modal.find('form').attr('action', url);

                modal.execModal({
                    progressBar: 'progress_bar',
                    progressText: 'progress_text',
                }, function(response){
                    $("#reset_button").trigger('click');
                }, null, function (dialog) {

                    $.ajax({
                    type: 'GET', 
                    url: '{{route('news_sources')}}',
                    dataType: 'json',
                    success: function (data) {
                        if(data){
                            $.each(data, function(index, item) {
                                var selected = '';
                                if(item.selected) selected = "selected";
                                dialog.find("#sources_ids").prepend("<option value="+item.id+" "+selected+">"+item.title+"</option>");
                            });
                            dialog.find('#sources_ids').selectize({
                                plugins: ['remove_button'],
                            });
                        }}, error:function(){}
                    });                    
                });
            });
        });
    </script>
@endsection