@extends('layouts.app')
@section('title')
   News Feed
@endsection
@section('content')
    @php

        if(isset($_GET['selected_id'])){
          $selected_ids = explode("$$",$_GET['selected_id']);

          foreach ($selected_ids as $key => &$value) {
            $value = str_replace("$","",$value);
          }
        }
    @endphp
    <style type="text/css">
      .kt-inbox__actions.homedash {
    right: 20px;
  }
  .card-div {
    min-height: 154px;
}
  div#kt_content {
     margin-top: 0px; 
}
    </style>
   
   <!-- Start Blog Area -->
        <section class="blog-area ptb-70 limit-line">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 order-details">
                        <div class="courses-topbar">
                            <div class="topbar-search">
                                
                                <div class="search-overlay-form filter-s">
                                    <form method="get">
                                        <input class="input-search" type="search" value="{{isset($_GET['q'])?$_GET['q']:""}}" name="q"
                                         id="q" placeholder="Search here...">
                                  @if(isset($_GET['sources']))
                                      @foreach($_GET['sources'] as $source)
                                          <input type="hidden" class="sources" name="sources[]" value="{{$source}}">
                                      @endforeach
                                  @endif
                                        <button type="submit" class="save_btn"><i class='bx bx-search-alt'></i></button>
                                    </form>
                                  </div>
                            </div>
                        </div>
                        <form method="get" action="{{url()->current()}}">
                          <div class="payment-box courses-details-desc">
                              <div class="courses-accordion">
                                  <div class=" accordion accordion-solid accordion-toggle-svg" id="accordionExample8" style="background-color: #ecf5f9;">


                            <h5 class="title-filter">{{$controls->sources_filters_name}}</h5>
                            <div class="search-select accordion accordion-light accordion-toggle-plus"
                                 style="float: right;margin: 8px;">
                                <div class="card" style="border: none;">
                                    <div class="card-header" id="headingOne6">
                                    
                                    </div>
                                </div>
                            </div>


                            <div id="treeview_container" class="hummingbird-treeview collapse show @if(isset($_GET['sources'][0]) && !empty($_GET['sources'][0]))  @endif"data-parent="#treeview_container " style="clear: both;">
                                <div id="treeview " class="hummingbird-base">
                                    @foreach($categories as $key => $category)
                                        @php
                                            $arrIntersect = array();
                                            if(isset( $_GET['sources'][0])){
                                                $categoryIdsArr = $category->rss->pluck("id")->toArray();
                                                $arrIntersect =array_values( array_intersect($_GET['sources'],$categoryIdsArr));

                                                if(count($arrIntersect) == count($categoryIdsArr)){

                                                    $allChecked  = 1;
                                                }else{
                                                    $allChecked  = 0;

                                                }
                                            }
                                        @endphp
                                        <div class="card">
                                            <div class="card-header padd-no" id="headingCategory{{$category->id}}">
                                                <div class="card-title ">
                                                    <div class="kt-checkbox-list">
                                                        <label class="kt-checkbox kt-checkbox--brand {{(isset($arrIntersect[0]) && !(isset($allChecked) && $allChecked) )?"inc-check":""}}">
                                                            <input class="xnode maincheck"
                                                                   id='Categorymaincheck{{$category->id}}'
                                                                   data-type="Category" value='{{$category->id}}'
                                                                   data-id="custom-0"
                                                                   type="checkbox" {{(isset($allChecked) && $allChecked)?"checked":""}}/>{{$category->name_en}}
                                                            <span></span>
                                                        </label>
                                                    </div>
                                                    <div data-toggle="collapse"
                                                         data-target="#collapseOne{{$category->id}}"
                                                         aria-expanded="false"
                                                         aria-controls="collapseOne{{$category->id}}"
                                                         class="collapsed card-title"
                                                         style="padding: 0;position: absolute;right: 7px;">

                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                                             height="24px" viewBox="0 0 24 24" version="1.1"
                                                             class="kt-svg-icon">
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                               fill-rule="evenodd">
                                                                <polygon points="0 0 24 0 24 24 0 24"/>
                                                                <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                                                      fill="#000000" fill-rule="nonzero"/>
                                                                <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                                                      fill="#000000" fill-rule="nonzero" opacity="0.3"
                                                                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "/>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="collapseOne{{$category->id}}" class="collapse"
                                                 aria-labelledby="headingCategory{{$category->id}}"
                                                 data-parent="#accordionExample8">
                                                <div class="card-body">
                                                    @foreach($category->rss as $source)
                                                        <div class="kt-checkbox-list">
                                                            <label class="kt-checkbox kt-checkbox--brand">
                                                                <input type="checkbox"
                                                                        class="CategorycheckAll{{$category->id}} subKeywordcheck" data-type="Category" data-mainid="{{$category->id}}"
                                                                       {{isset($_GET['sources'])?(in_array($source->id , $_GET['sources'])?"checked":""):""}}  name="sources[]"
                                                                       value="{{$source->id}}"> {{$source->name}} - {{$source->source}}
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                                  <button class="filter_btn" type="submit" >Filter</button>
                                  <button class="clear_btn reset" type="reset">Clear</button>
                              </div>
                          </div>
                        </form>
                    </div>
                    <div class="col-md-9 woocommerce-topbar">
                        <div class="row align-items-center">
                            <div class="col-lg-10 col-md-10">
                                <div class="topbar-result-count">
                                    <p>Showing ({{$total}} results)</p>
                                </div>
                            </div>
                            <div class="col-md-2 text-right">
                          <div class="dropdown dropdown-inline">
                            <button type="button"
                                    class="btn btn-hover-brand btn-elevate-hover btn-icon btn-sm btn-icon-md btn-circle"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
                                        class="la la-file-text-o"></i></button>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
                                <a class="dropdown-item viewActive export-articles" data-type="all">Export All</a>
                                <a class="dropdown-item viewActive export-articles" data-type="selected">Export
                                    Selected</a>
                            </div>
                        </div>
                        </div>
                        </div>
                        <hr>
                        <div class="row">
                         @foreach ($articles as $article)
                            <div class="col-md-6 {{(isset($selected_ids) && in_array($article->id, $selected_ids))?"PrintTest":""}}">
                                        <div class="kt-portlet card-div">
                                            <div class="kt-portlet__body" style="height: auto;">
                                                <div class="kt-widget19__wrapper">
                                                    <div class="kt-widget19__content">
                                                        <div class="kt-widget19__info">
                                                           <a class="d-inline-block"  href="/rss-search?sources%5B%5D={{$article->rss->id}}&viewType=title&q=" target="_blank">{{$article->rss->name}} - {{$article->rss->source}}</a>
                                                            <div>

                                                                <a class="d-inline-block" @if(Auth::check() && Auth::user()->type == "user")
                                                               onclick="Read('{{$article->href}}','{{$article->id}}')"
                                                               href="{{$article->href}}"
                                                               @else
                                                               href="{{$article->href}}" target="_blank"
                                                               @endif> {{str_limit(strip_tags($article->title),66)}}  @if($article->updated_at->diffInHours(Carbon\Carbon::now()->toDateTimeString()) <= 72)
                                                                        <span class="new">New</span>
                                                                    @endif</a>
                                                                <div class="kt-inbox__actions homedash">
                                                                    <label class="checkbox bounce">
                                                          <input type="checkbox" data-view='title'
                                                       class="selected-article checkbox-{{$article->id}}"
                                                       {{(isset($selected_ids) && in_array($article->id, $selected_ids))?"checked":""}} data-id="{{$article->id}}">
                                                        <svg viewBox="0 0 21 21">
                                                              <polyline points="5 10.75 8.5 14.25 16 6"></polyline>
                                                          </svg><span class="test-check"></span>
                                                      </label>
                                                                </div>

                                                            </div> 
                                                             <br>
                                                            <div class="soci-div">
                                                                <div class="soci-div">
                                                                    <div id="social-links">
                                                                     <ul>
                                                                         <li><a href="https://www.facebook.com/sharer/sharer.php?u={{$article["href"]}}" class="social-button " id=""><span class="fa fa-facebook-official"></span></a></li>
                                                                         <li><a href="https://twitter.com/intent/tweet?text=my share text&amp;url={{$article["href"]}}" class="social-button " id=""><span class="fa fa-twitter"></span></a></li>
                                                                         <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{$article["href"]}}&amp;title=my share text&amp;summary=dit is de linkedin summary" class="social-button " id=""><span class="fa fa-linkedin"></span></a></li>
                                                                         <li><a href="https://wa.me/?text={{$article["href"]}}" class="social-button " id=""><span class="fa fa-whatsapp"></span></a></li>    
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                             <br>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @if($article->body)
                                                <div class="accordion accordion-solid accordion-toggle-plus read_body read-div" id="accordionExample{{$article->id}}" style="margin-top: 0px">
                                                    <div class="card">
                                                        <div class="card-header" id="headingOne{{$article->id}}">
                                                            <div class="card-title collapsed text-center" data-toggle="collapse" data-target="#collapse-1{{$article->id}}"      aria-expanded="false" aria-controls="collapse-1{{$article->id}}">
                                                                 more details 
                                                            </div>
                                                        </div>
                                                        <div id="collapse-1{{$article->id}}" class="collapse" aria-labelledby="headingOne{{$article->id}}" data-parent="#accordionExample{{$article->id}}">
                                                            <div class="card-body">
                                                                {{$article->body}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach

                        </div>
                        {{$articles->links()}}
                    </div>
                </div>
            </div>
        </section>
        <!-- End Blog Area -->
@endsection
@section('script')
  
    <script type='text/javascript'
            src='//platform-api.sharethis.com/js/sharethis.js#property=5d37ccff42eb980012755d6a&product=inline-share-buttons'
            async='async'></script>
    <script type="text/javascript">


        $('.maincheck').change(function () {
            $(this).closest('label').removeClass("inc-check")
            main_id = $(this).val()

            data_type = $(this).data("type");
            console.log(data_type + "checkAll" + main_id)
            $("." + data_type + "checkAll" + main_id).each(function () {
                $(this).prop("checked", $("#" + data_type + "maincheck" + main_id).prop("checked"))
            })
        });
        $('.subKeywordcheck').change(function () {
            mainid = $(this).data("mainid")

            data_type = $(this).data("type");

            var x = new Array()
            x[0]=0;
            x[1]=0;
            $("."+data_type+"checkAll"+mainid).each(function () {
                x[$(this).prop("checked") ? 1 : 0]++
            })
            MainCheckSelector = $('#heading'+data_type+mainid).find('.maincheck');
            if(x[0]==0){
                MainCheckSelector.closest('label').removeClass("inc-check")
                MainCheckSelector.prop("checked", true)
                MainCheckSelector.trigger("change")
            }else if(x[1]==0){
                MainCheckSelector.closest('label').removeClass("inc-check")
                MainCheckSelector.prop("checked", false)
                MainCheckSelector.trigger("change")
            }else{
                MainCheckSelector.closest('label').addClass("inc-check")

            }
            // $(this).closest('label').removeClass("inc-check")

        });
        var viewActive = function () {
                $(".viewActive").removeClass("active");
                $(this).addClass("active");

            }
        $(".reset").on("click", function () {
            window.location.href = "/rss-search";
        })

        var url = "{{url()->full()}}"
        $(".selected-article").change(function (data, except) {
            console.log(except);
            id = $(this).data("id");

            viewType = $(this).data("view");
            $(".checkbox-" + id).prop("checked", this.checked);

            if (this.checked) {
                $("[data-view='magazine'].checkbox-" + id).addClass("PrintTestEX");
                $("[data-view='title'].checkbox-" + id).addClass("PrintTestEX");

                $("[data-view='magazine'].checkbox-" + id).parents(':eq(3)').addClass("PrintTest");
                $("[data-view='title'].checkbox-" + id).parents(':eq(6)').addClass("PrintTest");

                if (except != 'Except select') {
                    check = window.location.href.search("selected_id");
                    if (check == -1) {
                        window.history.pushState("object or string", "id", window.location.href + "&selected_id=$" + id + "$");
                        url = window.location.href.replace("rss-search&selected_id", "rss-search?selected_id")
                        window.history.pushState("object or string", "id", url);

                    } else {
                        window.history.pushState("object or string", "id", window.location.href + "$" + id + "$");
                    }
                }
            } else {
                $("[data-view='magazine'].checkbox-" + id).removeClass("PrintTestEX");
                $("[data-view='title'].checkbox-" + id).removeClass("PrintTestEX");

                $("[data-view='magazine'].checkbox-" + id).parents(':eq(3)').removeClass("PrintTest");
                $("[data-view='title'].checkbox-" + id).parents(':eq(6)').removeClass("PrintTest");

                if (except != 'Except select') {

                    url = window.location.href.replace("$" + id + "$", "");
                    url = url.replace("$" + id + "$", "");
                    window.history.pushState("object or string", "id", url.replace("$" + id + "$", ""));
                }
            }


            $(".fbsearchshare").attr("href", "https://www.facebook.com/sharer/sharer.php?u=" + url)
            $(".twittersearchshare").attr("href", "https://twitter.com/intent/tweet?text=Share&amp;url=" + url)
            $(".linsearchshare").attr("href", "http://www.linkedin.com/shareArticle?mini=true&amp;url=" + url)
            $(".wasearchshare").attr("href", "https://wa.me/?text=" + url)
        });
        $(".export-articles").on("click", function () {
            exportType = $(this).data("type");
            articleArray = [];
            if (exportType == "all") {
                articleSelector = $(".selected-article");
            } else if (exportType == "selected") {
                articleSelector = $(".PrintTestEX");

            }
            articleSelector.each(function (index) {
                articleArray.push($(this).data("id"))
            });
            var onlyUnique = articleArray.filter(function (value, index, self) {
                return self.indexOf(value) === index;
            });
            console.log(onlyUnique);
            ExportLink = 'export_rss_articles?m=';

            $.each(onlyUnique, function (a, v) {
                ExportLink += "&articles[]=" + v;
            })
            window.location = ExportLink;

        })
        $(".selected-article").trigger('change', ["Except select"])
    </script>

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b942bf9d0a7ac3d"></script>
@endsection