@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;
    }
</style>
@endsection

@section('mainContentArea')
<div class="card card-default">
        <div class="card-header">
            <h4> Article Stock Report </h4>
        </div>       
         
        <div class="alert alert-default" style="overflow-x:auto;">
            <form action="{{ route('store-wise-article-search-report') }}" id="articlereport">
                                

                <table class="table filterPosSo">        
                    
                    <tr> 
                        <td >Article</td>                     
                        
                        <td  id="cdate">Color </td>
                        
                                             
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr>
                        <td>
                            <select name="article" id="articlescode" class="input-md" >     
                               <option value="">Select Article</option>                           
                                 @foreach($ListArticle as $articles)
                                <option value="{{ $articles->article }}" {{ ( !empty(request("article")) && ($articles->article === request("article")) ? "selected" : "") }}>{{ $articles->article  }}</option>
                           
                                 @endforeach
                            </select>
                        </td>                       

                        <td>
                            <select name="colormodel" id="colormodel" class="form-control" >
                  
                            </select>
                        </td>              

                         
                       
                        <td><button class="btn btn-block btn-success"><i class="fa fas fa-search" id="submit"></i></button></td>
                        <td><button class="btn btn-block btn-warning" type="button" onclick="window.location.href='{{ route('store-wise-article-search-report') }}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
        </div>

        <div class="d-flex justify-content-center">
       <div class="spinner-border text-primary " role="status" id="loader_div">
        <span class="sr-only">Loading...</span>
      </div>
     </div>

        <div class="card-body table-responsive" >

            <table class="table table-striped table-bordered " id="articleTables">
                <thead>
                   <tr>
                        <th>#</th>
                        <th>store</th>
                        
                        <th>Image</th>
                        <th>Article</th>
                        <th>Color</th>
                        @foreach($sizes as $size)
                        <th>{{$size}}</th>
                        @endforeach
                       
                        <th>Total</th>
                        
                    </tr>
                </thead>
                @php if(count($rows) > 0) { @endphp
                <tbody>

                 @php $totalcountallsize  = 0 ;  @endphp   
                
                @foreach($rows as $key => $row)
                   @php $totalrow = 0 ; @endphp
                    <tr>
                         @php $article = \App\Article::with('category')->with('maincategory')->select('image')->where('code',$productRows[$row]['article'])
                         ->first(); 
                          $images = empty($article->image) || $article->image == 'NULL' ? 'https://via.placeholder.com/100x100.png?text=No Photo' : asset('/uploads/articles/'.$article->image);
                        
                         @endphp
                         
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $productRows[$row]['store'] }}</td>
                        
                       
                        <td>
                          <a data-toggle="modal" data-target="#ImageModal" id="gallery" data-image="@php echo $images; @endphp" >
                          <img src="{{  empty($article->image) || $article->image == 'NULL' ? 'https://via.placeholder.com/100x100.png?text=No Photo' : asset('/uploads/articles/'.$article->image) }}" 
                            style="width:100px;" class="img-fluid center-block img-rounded">
                          </a>
                        </td>
                        <td>{{ $productRows[$row]['article'] }}</td>
                        <td>{{ $productRows[$row]['color'] }}</td>

                        @foreach($sizes as $size)
                        <td>
                            {{ empty($articleProductCombinations[$row][$size]) ? 0 : $articleProductCombinations[$row][$size] }}
                            @php
                                
                            if(empty($productCountSize[$size])) {
                                $productCountSize[$size] = 0;
                            }
                            if(empty($articleProductCombinations[$row][$size])) {
                                $articleProductCombinations[$row][$size] = 0;
                            } 
                             $totalrow +=    (int)$articleProductCombinations[$row][$size] ;
                            $productCountSize[$size]+= (int)$articleProductCombinations[$row][$size];
                            @endphp
                        </td>
                        @endforeach
                        
                        
                        <td>{{$totalrow}}</td>
                       
                    </tr>  
                      
                @endforeach

                </tbody>
                <tfoot>
                <tr>
                        <td colspan="5"></td> 
                        @foreach($sizes as $size)
                         
                        <td> {{ empty($productCountSize[$size]) ? 0 : $productCountSize[$size] }} </td> 
                      
                        @endforeach
                        
                        <td> {{$grandTotal}}</td>
                                              
                        
                </tr>
                </tfoot>
               @php } @endphp
               
            </table>
        </div>
</div>

<div class="modal fade " id="ImageModal" tabindex="-1" role="dialog" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="carouselExample" class="carousel slide" data-ride="carousel">
          
          <div class="carousel-inner">
            <div class="carousel-item active " >
             
              <img id='articlepop'  src="" alt="First slide" style="max-height:300px;">
             
            </div>
            
          </div>
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"  data-dismiss="modal">Close</button>
      </div>
    </div>
  </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 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js" ></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js" ></script>

<script type="text/javascript">

    $("input[type='checkbox']").on('click', function() {
        $("input[type='checkbox']").not(this).prop('checked', false);  
     
  });

    jQuery("#loader_div").hide();
   
    $("#submit").click(function () { 

      console.log($('#articlescode').val()); 

        if ($('#articlescode').val() == ''  && $('#colormodel').val() == '' ) {

            alert("Please Select Article and Color");
           
            $("#articlereport").attr("disabled", "disabled");

            return false;
        }else
        {
            jQuery("#loader_div").show();
        }
        
    });
$(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 
           } );

            $('#articlescode').on('change',function(){ 
                        var article = $('#articlescode').val();
                        $('#colormodel').show();

                        var _token   = $('meta[name="csrf-token"]').attr('content');

                        $.ajax({
                        url:"{{ route('pos-article-color') }}",
                        method:"get",
                        data:{article: article, _token:_token},
                        success:function(res)
                        { 

                          if(res){ console.log(res);
                            $("#colormodel").empty();
                            
                            $.each(res,function(key,value){
                              $("#colormodel").append('<option value="'+value+'">'+value+'</option>');
                            });

                            $('#colormodel').multiselect({            
                                 enableFiltering: true,
                                 allSelectedText: 'All',
                                 maxHeight: 200,
                                 includeSelectAllOption: true,
                                 enableCaseInsensitiveFiltering: true  
                            });        

                            $('#colormodel').multiselect('rebuild');
                          
                          }else{
                            $("#colormodel").empty();
                          }
                        }
                        

                       })
                });

                if($('#articlescode').val() != '') 
                {
                           var article = $('#articlescode').val();
                            $('#colormodel').show();

                            var _token   = $('meta[name="csrf-token"]').attr('content');

                            $.ajax({
                            url:"{{ route('pos-article-color') }}",
                            method:"get",
                            data:{article: article, _token:_token},
                            success:function(res)
                            { 

                              if(res){ console.log(res);
                                $("#colormodel").empty();
                                
                                $.each(res,function(key,value){
                                  $("#colormodel").append('<option value="'+value+'">'+value+'</option>');
                                });

                                $('#colormodel').multiselect({            
                                     enableFiltering: true,
                                     allSelectedText: 'All',
                                     maxHeight: 200,
                                     includeSelectAllOption: true,
                                     enableCaseInsensitiveFiltering: true  
                                });        

                                $('#colormodel').multiselect('rebuild');
                              
                              }else{
                                $("#colormodel").empty();
                              }
                            }                        

                           })
                }
                        
                      
    } );

$(function () {
  $('#ImageModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var newSrc = button.data('image'); // Extract info from data-* attributes
    
   console.log(newSrc);
     $('#articlepop').attr('src', newSrc);
  });
});


</script>

@endsection