@extends('layouts.app')
@section('title')
@if($subject_type == 'j') 
Browse Journal
  @else
  Browse eBooks
  @endif
@parent
@stop
@section('content')
        <main id="j-listing">
            <section class="pt-4" id="listing-search">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-white">
                            <h1 class="h3">
                                Browse Subject
                            </h1>
                            <hr>                            
                        </div>
                    </div>                    
                    <div class="row">
                        <div class="col-md-12">
                            <div aria-label="First group" class="btn-group d-flex alpha-page text-white" role="group">
                                <a class="btn col">
                                    All
                                </a>
                                @foreach (range('A', 'Z')  as $letter)
                                <a class="btn col" href="#{{$letter}}">
                                    {{$letter}}
                                </a>
                                @endforeach
                                
                                
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>
            <section class="pt-5">
                <div class="container">
                    <div class="row list">
                      <div class="card-columns">  
                      @php
                      $PrevLetter = null;
                      @endphp
                      @foreach ($subject_list as $subject)
                        @php
                        $Alphabet = substr($subject->title,0,1);
                        $Alphabet = strtoupper($Alphabet); 
                        @endphp
                        @if($PrevLetter != $Alphabet)        
                          @if($PrevLetter != null)
                            </div>
                              
                            </div>
                          </div>
                          @endif
                          <div class="card bigbox-hvr-slow">
                            <div class="card-body">
                              <h5 class="card-title"><div class="h2 text-primary border-bottom" id = "{{$Alphabet}}" >{{$Alphabet}}</div></h5>
                              <div class="card-text">
                          @php 
                            $PrevLetter = $Alphabet;
                            @endphp
                         @endif                  
                         @if($subject_type == 'j')                                     <a class="col-12 text-left text-dark btn btn-link" href = "/subject/{{$subject->subject_id}}">{{ucwords($subject->title)}}</a><br>                        @else        
                                <a class="col-12 text-left text-dark btn btn-link" href = "/ebook_subject/{{$subject->subject_id}}">{{ucwords($subject->title)}}</a><br>                         @endif     
                        @endforeach
                      </div>     
                </div>
            </section>

        </main>
        @endsection
@section('footer_scripts')
 <script type="text/javascript" src="{!! asset('js/angular.js') !!}"></script>
 <script type="text/javascript">
    
    var fetch = angular.module('myapp', []);
       fetch.config(function($interpolateProvider) 
        {
            $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
        });


    fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http, $window) {
       
       // Fetch data
       $scope.fetchUsers = function(){
                    
          var searchText_len = $scope.searchText.trim().length;
          returnResult = [];
          // Check search text length
          if(searchText_len > 0){
            
             $http({
               method: 'POST',
               url: '/api/services_journals/json/20',
               data: {searchText:$scope.searchText}
             }).then(function successCallback(response) 
			 {  
			 
				$("#searchResult").removeClass('d-none');
				
				//console.log(response.data.journal_list.data);
				$scope.searchResult = 0;
				//$scope.searchResult = response.data.journal_list;
                $scope.searchResult.IsVisible  = true;
                angular.forEach(response.data, function(value, key)
				{  
                    angular.forEach(value.data,function(v1,k1)
					{   
						//this is nested angular.forEach loop
                        returnResult.push( { title : v1.journal_title });
                    });                                 
                });
				
                $scope.searchResult = returnResult;
				
             });
          }else{
             $scope.searchResult = {};
          }
                    
       }

       // Set value to search box
       $scope.setValue = function(index,$event)
	   {
          $scope.searchText = $scope.searchResult[index].title;
          $scope.searchResult = {};
          $event.stopPropagation();
		  
       }

       $scope.searchboxClicked = function($event){
          $event.stopPropagation();
       }

       $scope.containerClicked = function(){
          $scope.searchResult = {};
       }
     
    }]);

 </script>
<script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
        <script language="javascript" src="{{ asset('assets/vendors/select2/js/select2.js') }}" type="text/javascript">
        </script>
        <script>
            $(document).ready(function() {

    $("#journal_year").change(function(){
        
      var vYear= $("#journal_year").val();
      $(location).attr('href', '/bypublication/'+vYear);
    });
});
             $(".select2").select2({
                theme:"bootstrap",
                placeholder:"",
                width: '100%'
            });
        </script>
        @stop
