@extends('layouts.backend')

@section('extraCss') 

<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>Manage Article Images</h4>  

            <a href="{{ route('article-image.add') }}" class="btn btn-success float-right btn-sm" style="margin:10px;"><i class="fa fas fa-plus"></i> Add Image</a>  
                     
        </div>

        <div class="alert alert-default" style="overflow-x:auto;">
            <form action="{{ route('article-image') }}" id="auditreport">
                <h4>Filter  </h4>
                <table class="table filterPosSo">        
                  
                    <tr>                        
                        <th>Article</th>                        
                         
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr>  

                       <td>
                            <select name="afilter" id="afilter" class="form-control select2" >
                                
                                 @foreach($listarticles as $article)
                                <option value="{{ $article->code }}" {{ request('afilter') == $article->code ? 'selected' : '' }}>{{ $article->code  }}</option>
                           
                                 @endforeach
                            </select>
                        </td>                                                                 
                       
                        <td><button class="btn btn-block btn-success"><i class="fa fas fa-search" id="challansubmit"></i></button></td>
                        <td><button class="btn btn-block btn-warning" type="button" onclick="window.location.href='{{ route('article-image') }}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
        </div>
 

        <div class="card-body " >

                <table class="table table-bordered data-table "  >
                <thead>
                   
                    <tr>
                        <th>#</th>
                        <th>Article</th>
                        <th>Color</th>                    
                        <th>Photo</th>      
                        <td colspan="2">Action</td> 
                    </tr>
                </thead>
                @if($articles->count() > 0)
                <tbody>
                @foreach($articles as $key => $row)
               
                <tr>
                    <td>{{$key + $articles->firstItem() }}</td>                                      
                   
                    <td>{{ !empty($row->code) ? $row->code : '' }}</td>
                    <td>{{ $row->color_name }} </td>
                    
                    <td><img src="{{ asset('uploads/articles/photos/full'.$row->imgname) }}" alt="" title="" width = '100px' height='150px'></td>                    
                   
                    <td width="100">
                        <a href="{{ route('article-image.edit',$row->id) }}" class="btn btn-sm btn-block btn-primary"><i class="fa fas fa-pencil"></i> Modify</a>
                    </td>
                    
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="10"><div class="alert alert-danger">No Images found!</div></td>
                </tr>
                @endif

                </tbody>
                
            
            </table>
              
        </div>
       @php if($articles->count() > 0) { @endphp {!! $articles->appends(request()->input())->links() !!} @php } @endphp
</div>


@endsection



@section('extraJs')
@endsection