@extends('web.layout')

@section('web_container')


    <div>
        <nav class="navbar navbar-expand-lg navbar navbar-light" style=" padding-right: 20px; padding: 20px;height:100px; padding-bottom: 10px">

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">

                    @foreach($catagories as $catagory)

                    <li class="nav-item ">
                        <a class="nav-link catagory_id" href="#"  data-catagory="{{$catagory->catagory_id}}"   style="padding-left: 60px">{{$catagory->catagory_name}}{{--<span class="sr-only">(current)</span>--}}</a>
                    </li>
                    @endforeach

                </ul>

            </div>
        </nav>

    </div>




    <div class="row" style="margin-left: 10px" >
        <div class="col-lg-8" id="articles">
            @foreach($articles as $article)
                <h2><a href="#" class="article_id" data-article="{{$article->article_id}}" id="">{{$article->article_name}}</a></h2>
                <p>{{$article->description}}</p>
            @endforeach
        </div>
    </div>




    <script type="text/javascript">


        $(document).ready(function(){

            $(document).delegate('.catagory_id', 'click',  function(e){

                e.preventDefault();

                var catagory_id = $(this).data('catagory');   // it will get id of clicked row

                console.log(catagory_id);

                $.ajax({
                    type: 'GET',
                    url:'get_articles_by_catagory/'+catagory_id,
                    dataType: 'html'
                })
                    .done(function(data){
                        console.log(data);
                        $('#articles').html('');
                        $('#articles').html(data); // load response
                        //$('#modal-loader').hide();		  // hide ajax loader
                    })
                    .fail(function(){
                        $('#articles').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                        //$('#modal-loader').hide();
                    });

            });


            $(document).delegate('.article_id','click',  function(e){

                e.preventDefault();

                var article_id = $(this).data('article');   // it will get id of clicked row

                console.log(article_id);

                $.ajax({
                    type: 'GET',
                    url:'show_article_details/'+article_id,
                    dataType: 'html'
                })
                    .done(function(data){
                        console.log(data);
                        $('#articles').html('');
                        $('#articles').html(data); // load response
                    })
                    .fail(function(){
                        $('#articles').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                        //$('#modal-loader').hide();
                    });

            });



        });


    </script>

@endsection