@extends('layouts.backend')

@section('extraCss') 
<link href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" rel="stylesheet">
<style type="text/css">
    .card-header{
        border-bottom-style:hidden !important;
    }
    .container-fluid{
      font-size: 15px !important;
    }
    
</style>
@endsection

@section('mainContentArea')
<div class="card card-default">
        <div class="card-header">
            <h4>Latest Article</h4>  
        </div>

        <div class="alert alert-default" >
            <form action="{{ route('latest-article') }}" id="auditreport">
                <h4>Filter  </h4>
                <table class="table filterPosSo" > 
                    <tr>
                        <td >Article</td>
                                         
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr> 
                        <td>
                              <select name="farticle[]" id="farticle" class="input-md" multiple="multiple">            
                                 @foreach($filterarticles as $article)
                                <option value="{{ $article->code }}" {{ ( !empty(request("farticle")) && in_array($article->code, request("farticle")) ? "selected" : "") }}>{{ $article->code  }}</option>

                                 @endforeach
                               </select>
                        </td>
                         
                        <td><button class="btn btn-block btn-success"><i class="fa fas fa-search" id="articlesubmit"></i></button></td>
                        <td><button class="btn btn-block btn-warning" type="button" onclick="window.location.href='{{ route('latest-article') }}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
        </div>
 
         
        <div class="card-body table-responsive" >   
        <button class="btn btn-success float-right btn-sm" style="margin:10px;" id="addarticles"><i class="fa fas fa-plus"></i> Save article</button>  
            <br><br>      
                <table class="table table-striped table-bordered " id="articleTables">
                <thead>                   
                    <tr>
                        <th>#</th> 
                        <th>Article</th>                        
                        <th><input type='checkbox' id='CheckAll'></th>                    
                       
                    </tr>
                </thead>
                @if(count($articles) > 0)
                <tbody>
                @foreach($articles as $key => $row)
          
                <tr>
                    <td>{{$key + 1}}</td>
                    <td>{{ !empty($row->code) ? $row->code: '' }}</td>   
                    @php $exit = \App\LatestArticles::where('article',$row->code)->first(); @endphp               
                    <td><input type="checkbox" class='checkboxes' name="article[]" value="{{ !empty($row->code) ? $row->code: '' }}" {{!empty($exit->id) ? "checked": "unchecked" }}></td>  
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="3"><div class="alert alert-danger">No Article found!</div></td>
                </tr>
                @endif

                </tbody>
                
            
            </table>
              
        </div>
      
</div>

@endsection

@section('extraJs')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js" ></script>
<script type="text/javascript">

$(document).ready(function() {

  $('#articleTables').DataTable( {
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],         
  dom: 'Bfrtip',
  buttons: [ 
  'colvis',
  {
    extend: 'excelHtml5',
    autoFilter: true,
    sheetName: 'Exported data',
    exportOptions: {
    columns: ':visible'
    },
    footer: true
  }                     
  ],                   
  colReorder: true,  
  paging: false 
  } );       
} );

$("#challansubmit").click(function () { 
    if ($('#from').val() == '' ) {
        alert("Please Select articles");
        return false;
    }
});
var i=0;
$('#addarticles').click(function () {      
    var arr = [];
    $('.checkboxes:checked').each(function () {
        arr[i++] = $(this).val(); 
    });
  
  var _token   = $('meta[name="csrf-token"]').attr('content');

  $.ajax({
  url:"{{ route('latest-article-add') }}",
  method:"get",
  data:{article: arr, _token:_token},
  success:function(res)
  { 
    if(res){ 
         if(res.code === 200)
         {
            toastr.success(res.massage);
            window.reload();
         }else
         {
           toastr.error(res.massage);
         }
          
    }
  }

  })
    console.log(arr);
});

$('#CheckAll').change(function() {
if ($(this).is(":checked")) {
    $('.checkboxes').prop("checked", true);
} else {
    $('.checkboxes').prop("checked", false);
}

});
</script>

@endsection