@extends('admin.layouts.app')

@section('styles')
<link href="{{ URL::asset('admin/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('admin/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('admin/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<style type="text/css">
    table td .view{
        color: #4677ff;
        border: 1px solid #4677ff;
        padding: 2px 3px;
        border-radius: 3px;
        cursor: pointer;
    }
    table td .delete{
        color: #de2a43;
        border: 1px solid #de2a43;
        padding: 2px 3px;
        border-radius: 3px;
        cursor: pointer;
    }
     table td .edit {
      color: #4677ff;
      border: 1px solid #4677ff;
      padding: 2px 3px;
      border-radius: 3px;
      cursor: pointer;
    }
</style>
@endsection

@section('header')
	@include('admin.layouts.header')
@endsection

@section('sidemenu')
	@include('admin.layouts.sidemenu')
@endsection

@section('content')
<div class="content-page">
    <div class="content">
        <div class="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                {{-- <ol class="breadcrumb p-0 m-0">
                                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                                    <li class="breadcrumb-item"><a href="#">Emails</a></li>
                                    <li class="breadcrumb-item active">Emails Details</li>
                                </ol> --}}
                            </div>
                            <h4 class="page-title">Article List</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                            @if(session()->has('success-message'))
                                <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>
                            @endif
                            @if(session()->has('error-message'))
                                <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>
                            @endif
                    
                    <div class="card m-b-20">
                        <div class="card-body">
                            <h4 class="mt-0 m-b-20 header-title">Article List</h4>
                            <!--<form id="myfilter" method="POST" action="/BNA/public/admin/journal/list-article">-->
                            <!--     {{ csrf_field() }}-->
                                <div class="row justify-content-md-center">
                                <label class="col-sm-2 col-form-label">Select Month and Year</label>
                                <div class="col-sm-4">
                                    <input class="form-control mb-4" type="month" placeholder="Select Month" name="month" id="month" onchange="monthfilter();" required>
                                </div>
                            <!--</form>-->
                                <table id="datatable-buttons" class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Sr.No.</th>
                                            <th>Month & Year</th>
                                            
                                             <th>Article Type</th>
                                            <th>Title</th>
                                            <th>Author(s)</th>
                                            <th>Reference</th>
                                             <th>Index Page</th>
                                             <th>No. of Page</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="artdiv">
                                        @php $i = 1; @endphp
                                        @foreach ($article as $row)
                                        <tr>
                                            <td>{{ $i }}</td>
                                            <td>{{ $row->month }} {{ $row->year }}</td>
                                            <td>{{ $row->article_type }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td>{{ $row->author}}</td>
                                            <td>{{ $row->reference}}</td>
                                            <td>{{ $row->index_page}}</td>
                                            <td>{{ $row->no_of_page}}</td>
                                            <td><a href="edit-article/{{ $row->id }}" class="edit">Edit</a>
                                                    <a onclick="showmodal({{ $row->id }})" class="delete">Delete</a></td>
                                          
                                        </tr>
                                        @php $i++; @endphp
                                        @endforeach
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
       <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">×</button>
     </div>
     <div class="modal-body">
       <!--<p id="msgbox"></p>-->
            <div class="row">
                <div class="col-sm-12 mt-4 text-center">
                    <h5>Are you sure you want to delete this Article?</h5>
                </div>
            </div>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn-close btn btn-danger" data-dismiss="modal">Close</button>
       <a id="deletelink"><button type="button" class="btn-yes btn btn-primary">Yes</button></a>
     </div>
   </div>
 </div>
</div>
@endsection

@section('footer')
	@include('admin.layouts.footer')
@endsection

@section('scripts')
<!-- Required datatable js -->
<script src="{{ URL::asset('admin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/jszip.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/pdfmake.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/vfs_fonts.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/buttons.html5.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/buttons.print.min.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/datatables/buttons.colVis.min.js') }}"></script>

<!-- KNOB JS -->
<script src="{{ URL::asset('admin/plugins/jquery-knob/excanvas.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/jquery-knob/jquery.knob.js') }}"></script>

<!-- Datatable init js -->
<script src="{{ URL::asset('admin/pages/datatables.init.js') }}"></script>
<script type="text/javascript">
    function showmodal(id){
        var link = "delete-article/"+id;
        $('#exampleModal').modal('show');
         document.getElementById("deletelink").setAttribute("href",link);
    }
    
    function monthfilter(){
        // $('#myfilter').submit();
        var month = $('#month').val();
        $.ajax({
          url:'/BNA/public/admin/journal/list-article-filter',
          type:'get',
          data:{month:month},
          success: function(response){
              i=1;
            //   console.log(response);
              $('#artdiv').empty();
              $('#artdiv').focus();
              $.each(response, function(key, value){
            
                  $('#artdiv').append('<tr> <td>' + i++ +'</td> <td>'+ value.month+ ' '+ value.year +'</td><td>'+ value.title+ '</td><td>'+ value.author+ '</td><td>'+ value.reference+ 
                  '</td><td><a href="edit-article/'+value.id+'" class="edit">Edit</a><a onclick="showmodal('+value.id+')" class="delete">Delete</a></td></tr>');
              });

               
            },
        });
    }
    
</script>
@endsection