@extends('layouts.app')
@section('title')
Browse Journal
@parent
@stop
@section('header_styles')
<link href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" rel="stylesheet">

        @stop
@section('content')
        <main id="j-listing">
            <section class="pt-4" id="listing-search">
                <div class="container">
                   
                    <div class="row">
                        <div class="col-12">
                            <div class="card text-white bigbox-hvr-slow">
                                <div class="card-body">
                                    <form action="{{ route('bypublication') }}" enctype="multipart/form-data" method="post">
                                      <input type="hidden"  name="_token" value="{{ csrf_token() }}">
                                    <h5 class="card-title text-dark text-center">
                                        Find Journals, Volumes, Issues & Articles
                                    </h5>
                                    <div class="row">
                                        <div class="col-md-8 offset-md-2"  ng-app="myapp" ng-controller="fetchCtrl">
                                            <div class="input-group input-group-lg"  ng-click='containerClicked();'>                                                
											
                                                <input class="form-control" name="journal_search" autocomplete="off" autocorrect="off" id="exampleFormControlInput1" placeholder="Journal name / issn / eissn" type="text"
                                                ng-change='fetchUsers()' 
                                                ng-click='searchboxClicked($event);' 
                                                ng-model='searchText'
                                                >
                                                    <!--select id="jlist-search" class="form-control col-3">
                                                      <option value="journal">Journal</option>
                                                      <option value="volume">Volume</option>
                                                      <option value="doi">DOI</option>
                                                      <option value="subject">Subject</option>
                                                    </select-->
                                                    <div class="input-group-prepend">
                                                        <button class="btn btn-info" value="1" name="btnjournalsearch" type="submit">
                                                            Search
                                                        </button>
                                                    </div>                                                
												    <div id='searchResult' class="fancy-scroll d-none" >
													<ul class='smart-box'>
														
													  <li ng-click='setValue($index,$event)' 
														  ng-repeat="journal_title in searchResult" >
														  {[{ journal_title.title }]}
													  </li>
													  
													</ul>
                                                    </div>
													
                                            </div>
											
											
											
                                            <br>
																					
											
                                           
                                        </div>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </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="{{url('bypublication')}}/{{$letter}}">
                                    {{$letter}}
                                </a>
                                @endforeach
                                
                                
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>

            <section class="pt-5">
                <div class="container">
                   <div class="row">
                        <div class="col-md-12 text-dark">
                            <h1 class="h3">
                                Subject Area: {{$subject_title[0]->title}}
                            </h1>
                            <hr>                            
                        </div>
                    </div>
                    <div class="row list">
                      @if($journal)
                        @foreach ($journal as $journals)
                        <div class="col-md-6">
                            <div class="item bigbox-hvr-slow">
                                <div class="col-md-3">
                                  <a href="{{ URL::route('journal', $journals->journal_id) }}">
                                    @if(isset($journals->image_file_name))
                                    <img class="img-fluid" src="{{'/images/bentham/'.$journals->image_file_name}}"/>
                                    @else
                                    <img alt="profile pic" src="http://placehold.it/95x125">
                                        @endif
                                   </a>
                                </div>
                                <div class="col-md-9">
                                    <h4>
                                        <a href="{{ URL::route('journal', $journals->journal_id) }}">
                                            {{$journals->title}}
                                        </a>
                                    </h4>
                                    <p>
                                @if($journals->subtitle != "NEMJ")
                                        ISSN (Print):{{$journals->issn}}
                                @endif

                                        <br>
                                            ISSN (Online):{{$journals->eissn}}
                                        </br>
                                    </p>
                                    @php
                                    $arrFrirstVol =  App\Models\Volume::getFirstLastVolume($journals->journal_id, 'asc');

                                    $arrLastVol =  App\Models\Volume::getFirstLastVolume($journals->journal_id, 'desc');  
                                    @endphp
                                    @if($arrFrirstVol)  
                                    Volume {{$arrFrirstVol['volume']}}, 
                                                Issue {{$arrFrirstVol['issue']}},
                                                {{$arrFrirstVol['month']}}, {{$arrFrirstVol['year']}}
                                                 - 
                                                 Volume {{$arrLastVol['volume']}}, 
                                                Issue {{$arrLastVol['issue']}},
                                                {{$arrLastVol['month']}}, {{$arrLastVol['year']}} 
                                    @endif

									@if($param == 'callforpaper' && isset($journals->jms_jcode))
								<div class="input-group">
								<form action="{{url('call-for-papers')}}" method="POST">
									@CSRF
									<input type="hidden" name="search_journals[]" value="{{$journals->jms_jcode}}">
									<button type="submit" class="btn btn-primary bg-siteblue btn-sm mt-2 mr-1"> Submit to Thematic Issue </button>
								</form>
								<a href="https://bentham.manuscriptpoint.com/journals/{{$journals->jms_jcode}}?utm_source=eurekaselect&utm_medium=website&utm_campaign=callforpaper&utm_term=unpaid&utm_content=link" class="btn btn-primary bg-siteblue btn-sm mt-2 mr-1">Submit Manuscript</a>
								<a href="https://bentham.manuscriptpoint.com/submit/AbstractS/Journal/{{$journals->jms_jcode}}?utm_source=eurekaselect&utm_medium=website&utm_campaign=callforpaper&utm_term=unpaid&utm_content=link" class="btn btn-primary bg-siteblue btn-sm mt-2 mr-1">Submit Abstract</a>
								<a href="https://bentham.manuscriptpoint.com/submit/Htproposal/journal/{{$journals->jms_jcode}}?utm_source=eurekaselect&utm_medium=website&utm_campaign=callforpaper&utm_term=unpaid&utm_content=link" class="btn btn-primary bg-siteblue btn-sm mt-2">Submit a Proposal</a>
								</div>
									@endif
                                </div>
								
                            </div>
                        </div>
                        @endforeach
                       @else

                       <div class="card card-body">
                         <p class=" m-0 text-center text-secondary">
                          <i class="far fa-frown mr-1 mb-2 fa-3x text-secondary"></i>
                            <br>
                            <strong> No record found  ....</strong>
                         </p>
                      </div>

                       @endif 
                    </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
