@extends('layouts.backend')

@section('extraCss')  
<style type="text/css">
  .modal {
                text-align: center;
            }
 
</style>
@endsection

@php 
$Discounts = [ 1 => 'Clearence' , 2 => 'Non Clearence' ];
@endphp

@section('mainContentArea')
<div class="card card-default">
        <div class="card-header">
            <h4>Sales Article Sizewise New Report </h4>
        </div>       
         
        <div class="alert alert-default" style="overflow-x:auto;">
            <form action="{{ route('pos-article-size-wise-sales-new-report') }}" id="salesarticlereport">
                <h4>Filter  </h4>
                <table class="table filterPosSo">  

                    <tr>  
                         @php if(!empty($articlesParam) && $articlesParam != 0) 
                         {
                           $articlesearch = implode(",",$articlesParam);
                         }else
                         {
                            $articlesearch = 0;
                         }

                         if(!empty($subsectionParam) && $subsectionParam != 0) 
                         {
                           $subsectionsearch = implode(",",$subsectionParam);
                         }else
                         {
                            $subsectionsearch = 0;
                         } 

                         if(!empty($clearenceRequest) && $clearenceRequest != 0) 
                         {
                           $clearences = implode(",",$clearenceRequest);
                         }else
                         {
                            $clearences = $clearenceRequest;
                         }  
      
                         @endphp
                         <a class="btn btn-md btn-primary" style="float:right; margin-bottom:10px;" href="{{ ($warehouseName) ? route('salesSizeWiseStockExportnew',[implode(",",$pos_id),$articlesearch,$subsectionsearch,$startdate,$enddate,$clearences] ) : '#' }}" id="eexcel">Export Excel</a> 
                     </tr>      
                    
                    <tr>
                        <td >Warehouse</td>
                        <td >Store</td>
                        <td >Discount</td>
                        <td >Subsection</td> 
                        <td >Article</td>   
                        <td  id="sdate">Start Date </td>
                        <td  id="edate">End Date</td> 
                        <!-- <td width="10%">Article</td>
                        <td width="10%">Color</td>    -->                     
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr>

                        <td>
                            <select name="warehouse_id[]" id="warehouse" class="input-md"  multiple="multiple" >
                               
                                @foreach($ALL_WAREHOUSES as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ ( !empty(request("warehouse_id")) && in_array($warehouse->id, request("warehouse_id")) ? "selected" : "") }}>{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                                @endforeach
                            </select>
                        </td>

                        <td>
                            <select name="warehouse_id[]" id="Pos" class="input-md"  multiple="multiple">                                
                                @foreach($ALL_POS as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ ( !empty(request("warehouse_id")) && in_array($warehouse->id, request("warehouse_id")) ? "selected" : "") }}>{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                                @endforeach
                            </select>
                        </td>                      
                        

                        <td>
                            <select name="discountId[]" id="discountId" class="input-md"  multiple="multiple">                                
                                @foreach($Discounts as $key => $discount)
                                <option value="{{ $key }}" {{ ( !empty(request("discountId")) && in_array($key, request("discountId")) ? "selected" : "") }}>{{ $discount }}</option>
                                @endforeach
                            </select>
                        </td> 

                        <td>
                            <select name="subsection_filter[]" id="subsection_filter" class="input-md" multiple="multiple">
                                
                                 @foreach($ListSubcsetion as $Subcsetion) 
                                 @if(!empty($Subcsetion->category->name ))<option value="{{ $Subcsetion->category_id }}" {{ ( !empty(request("subsection_filter")) && in_array($Subcsetion->category_id, request("subsection_filter")) ? "selected" : "") }}>{{ $Subcsetion->category->name  }}</option>
                                 @endif
                                 @endforeach
                            </select>
                        </td>  

                        <td>
                            <select name="article_filter[]" id="article_filter" class="input-md" multiple="multiple">
                                
                                 @foreach($ListArticle as $articles)
                                <option value="{{ $articles }}" {{ ( !empty(request("article_filter")) && in_array($articles, request("article_filter")) ? "selected" : "") }}>{{ $articles  }}</option>
                           
                                 @endforeach
                            </select>
                        </td>                      

                        <td>
                            <input type="text" name="startdate" id="startdate" readonly class="form-control datepicker" placeholder="Enter Start date" value="<?php echo empty(request('startdate')) ? date("Y-m-d") : request('startdate') ?>" style="width:150px" >
                             @if ($errors->has('startdate'))
                             <span class="text-danger">{{ $errors->first('startdate') }}</span>
                             @endif
                        </td>                         

                        <td>
                           <input type="text" name="enddate" id="enddate" readonly class="form-control datepicker" value="<?php echo empty(request('enddate')) ? date("Y-m-d") : request('enddate') ?>" placeholder="Enter End date" style="width:150px">
                            @if ($errors->has('enddate'))
                             <span class="text-danger">{{ $errors->first('enddate') }}</span>
                            @endif
                        </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('pos-article-size-wise-sales-new-report') }}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
        </div>

        <div class="card-body table-responsive" style="overflow:scroll !important;">

            <table class="table table-striped table-bordered " id="articleTables">
                <thead>
                   
                    <tr> 
                        <th></th>                                           
                        <th>Image</th>
                        <th>Article</th>
                        <th>Color</th>
                        <th>Subsection</th>
                        
                        @foreach($sizes as $size)
                        <th>{{$size}}</th>
                        @endforeach
                        <th>Total</th>
                        <th>Mrp</th>
                       <!--  <th>Clearence (%)</th> -->
                        <th>Discount</th>
                        <th>Net Sales</th>
                        <th>view</th>
                    </tr>
                </thead>
                @php if(count($orders) > 0) {  @endphp
                <tbody>

                 @php    
                    $gtotalTotal = $gtotalXS = $gtotalS = $gtotalL = $gtotalM = $gtotalXL = $gtotal2XL = $gtotal3XL = 
                    $gtotal4XL = $gtotal5XL = $gtotal6XL = $gtotal7XL = $gtotalFREE = $gtotalsales = $gtotaldiscount =  0.00; 
                    $i=1;
                 @endphp 
                
                 @foreach($orders as $key => $row)
                    

                 @php $totalTotal = 0;  @endphp
                  
                    <tr>
                        @php $article = \App\Article::select(['id','image','category_id','main_category_id','price'])->where('code',$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>{{ $i }}</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>{{  $row['article'] }}</td>
                        <td>{{  $row['color'] }}</td>                       
                        <td>{{ !empty($article->category) ? $article->category->name : '' }}</td>
                        <td> {{  $row['XS'] }} </td>
                        <td> {{  $row['S'] }} </td>
                        <td> {{  $row['M'] }} </td>
                        <td> {{  $row['L'] }} </td>
                        <td> {{  $row['XL'] }} </td>
                        <td> {{  $row['2XL'] }} </td>
                        <td> {{  $row['3XL'] }} </td>
                        <td> {{  $row['4XL'] }} </td>
                        <td> {{  $row['5XL'] }} </td>
                        <td> {{  $row['6XL'] }} </td>
                        <td> {{  $row['7XL'] }} </td>
                        <td> {{  $row['FREE'] }} </td>
                         @php 
                                $totalTotal +=  $row['XS'] + $row['S'] + $row['L'] + $row['M'] + $row['XL'] + $row['2XL'] + $row['3XL'] + 
                                 $row['4XL'] + $row['5XL'] + $row['6XL'] + $row['7XL'] + $row['FREE'];
                                
                                $gtotalTotal += $totalTotal;
                                $gtotalXS += $row['XS'];
                                $gtotalS += $row['S'];
                                $gtotalL += $row['L']; 
                                $gtotalM += $row['M'];
                                $gtotalXL += $row['XL'];
                                $gtotal2XL += $row['2XL'];
                                $gtotal3XL += $row['3XL'];
                                $gtotal4XL += $row['4XL'];
                                $gtotal5XL += $row['5XL'];
                                $gtotal6XL += $row['6XL'];
                                $gtotal7XL += $row['7XL'];
                                $gtotalFREE += $row['FREE'];
                                $gtotalsales += $row['sales'];
                                $gtotaldiscount += $row['discount'];
                                
                         @endphp
                        <td>{{$totalTotal}}</td>
                        <td>{{ !empty($row['minmrp']) ? $row['minmrp'] : '' }} - {{ !empty($row['maxmrp']) ? $row['maxmrp'] : '' }} </td>
                        <!-- <td>{{$row['clearence']}}</td> -->
                        <td>{{$row['discount']}}</td>
                        <td>{{$row['sales']}}</td>
                        <td><button class="btn btn-block btn-warning" type="button" data-article="@php echo $row['article']; @endphp" 
                          data-color="@php echo $row['color']; @endphp" data-toggle="modal" data-target="#myModal">
                          <i class="fa fa-eye"></i></button></td>
                    </tr>

                    @if(!empty(request("discountId")))
                    @if(in_array(1, request("discountId")))      

                     @php   
                         $colorc= 0;
                         $clearenceArticle = \App\Scheme::where('article',$row['article'])->where('activated',1)->where(function ($query) use ($pos_id)
                         {
                              $query->whereIn('store',$pos_id);
                              $query->Orwhere('store',9999);
                         
                              return $query;

                          })->orderby('id','DESC')->first();

                         if(!empty($clearenceArticle))
                         {
                               if($clearenceArticle->color === 'any')
                               {
                                  $colorc= 1;
                               }

                               if($clearenceArticle->color === $row['color'])
                               {
                                  $colorc= 1;
                               }
                         }                        
                         
                         
                     @endphp                
                       @if(!empty($clearenceArticle))
                       @if($colorc === 1)
                      <tr style='color:green;'> 
                      <td>{{ $i }}</td>
                      <td><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"></td>                     
                      
                     <td>{{$clearenceArticle->article}}</td>
                     <td>{{$clearenceArticle->color}}</td>
                    
                      <td>{{ !empty($article->category) ? $article->category->name : '' }}</td>                      
                      
                      
                      <?php

$xs = $s = $l = $m = $xl = $xl2 = $xl3 = $xl4 = $xl5 = $xl6 = $xl7 = $free = 0;
if ($clearenceArticle->size === 'any')
{
    $xs = $s = $l = $m = $xl = $xl2 = $xl3 = $xl4 = $xl5 = $xl6 = $xl7 = $free = $clearenceArticle->discper;
}
else
{
    if ($clearenceArticle->size === 'XS')
    {
        $xs = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'S')
    {
        $s = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'L')
    {
        $l = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'M')
    {
        $m = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL')
    {
        $xl = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL2')
    {
        $xl2 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL3')
    {
        $xl3 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL4')
    {
        $xl4 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL5')
    {
        $xl5 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL6')
    {
        $xl6 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'XL7')
    {
        $xl7 = $clearenceArticle->discper;
    }
    if ($clearenceArticle->size === 'FREE')
    {
        $free = $clearenceArticle->discper;
    }
}
?>
                      <td>{{$xs}}(%)</td>
                      <td>{{$s}}(%)</td>
                      <td>{{$l}}(%)</td>
                      <td>{{$m}}(%)</td>
                      <td>{{$xl}}(%)</td>
                      <td>{{$xl2}}(%)</td>
                      <td>{{$xl3}}(%)</td>
                      <td>{{$xl4}}(%)</td>
                      <td>{{$xl5}}(%)</td>
                      <td>{{$xl6}}(%)</td>
                      <td>{{$xl7}}(%)</td>
                      <td>{{$free}}(%)</td>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                      
                      <td ></td>
                    </tr> 
                    @endif
                    @endif
                    @endif                 
                    @endif  
                    @php $i++; @endphp
                @endforeach
                </tbody>
                <tfoot>
                            <tr>
                                <td colspan='5'></td>                             
                                <td> {{$gtotalXS}}</td>
                                <td> {{$gtotalS}} </td>
                                <td> {{$gtotalM}} </td>
                                <td> {{$gtotalL}} </td>
                                
                                <td> {{$gtotalXL}} </td>
                                <td> {{$gtotal2XL}} </td>
                                <td> {{$gtotal3XL}} </td>
                                <td> {{$gtotal4XL}} </td>
                                <td> {{$gtotal5XL}} </td>
                                <td> {{$gtotal6XL}} </td>
                                <td> {{$gtotal7XL}} </td>
                                <td> {{$gtotalFREE}} </td>
                                <td> {{$gtotalTotal}} </td>
                               
                                <td>  </td>
                                <td> {{$gtotaldiscount}} </td>
                                <td> {{$gtotalsales}} </td>
                                 <td>  </td>
                            </tr>                   
                </tfoot>
                
               @php } @endphp
            </table>
        </div>
</div>

<div class="modal fade bd-example-modal-lg" id="myModal" role="dialog"  data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header" >
          <h5> Article Comparison</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>         
        </div>
        <div class="modal-body" >

             <div class="row" style="margin-top:20px;">
                <div class="col">
                  <label for="articlemodel" class="col-sm-2" style="margin-right:40px;">Article</label>  
                  <input type="text"  id="articlemodel" style="border: gray;" readonly >
                </div>
                <div class="col">
                  <label for="colormodel" class="col-sm-2" style="margin-right:20px;">Color</label>  
                  <!-- <input type="text" class="form-control" id="colormodel" readonly> -->
                  <select name="colormodel[]" id="colormodel" class="form-control" multiple="multiple">
                  
                  </select> 
                </div>
              </div>   

              <div class="row" style="margin-top:20px;">

                <div class="col" >
                  <label for="warehouse_model" class="col-sm-2" style="margin-right:40px;">Warehouse</label> 
                 <select name="warehouse_model" id="warehouse_model" class="input-md form-control">
                           <option value=''>select</option>  
                              @foreach($ALL_WAREHOUSES as $warehouse)
                           <option value="{{ $warehouse->id }}"  >{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                              @endforeach
                  </select>
                </div>

                <div class="col">
                 <label for="pos_model" class="col-sm-2" style="margin-right:20px;">Store</label>  
                 <select name="warehouse_model" id="pos_model" class="input-md form-control" >   
                           <option value=''>select</option>                             
                              @foreach($ALL_POS as $warehouse)
                           <option value="{{ $warehouse->id }}" >{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                              @endforeach
                  </select>
                </div>

              </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="table-responsive" style="margin-top:20px; display:none;" id='posdiv'>
                   <table class="table table-striped table-bordered" id='compersion' >

                        <thead>
                            <tr >
                               <th > Color </th>
                               <th id="th1"> POS </th>
                               
                               @foreach($sizes as $size)
                                <th>{{$size}}</th>
                                @endforeach
                                <th>Total</th>
                            </tr>
                        </thead>

                         <tbody>


                         </tbody>


                    </table>
            </div>

              <div class="table-responsive" style="margin-top:20px; display:none;" id='warediv'>

                    <table class="table table-striped table-bordered" id='compersion2' >

                        <thead>
                            <tr >

                               <th > Color </th>
                               <th id="th2"> Warehouse </th>
                               
                               @foreach($sizes as $size)
                                <th>{{$size}}</th>
                                @endforeach
                                <th>Total</th>
                            </tr>
                        </thead>

                         <tbody>


                         </tbody>


                    </table>
            </div>
            
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </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 type="text/javascript" src="ColReorderWithResize.js"></script>

<script type="text/javascript">  


    $("#submit").click(function () {    

        if (($('#warehouse').val() == '') && ($('#Pos').val() == '')) {

            alert("Please Select Warehouse / Store");
           
            $("#articlereport").attr("disabled", "disabled");

            return false;
        }
        
    });
$(document).ready(function() {
    $('#articleTables').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],         
          dom: 'Bfrtip',
          buttons: ['colvis'],         
          colReorder: true,  
          paging: false 
       } );       
          } );
</script>
<script type="text/javascript">
   $(function () {
  $('#myModal').on('show.bs.modal', function (event) {
    $('option', $('#pos_model')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
    });
    $("#pos_model").multiselect('refresh');

    $('option', $('#warehouse_model')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
    });
    $("#warehouse_model").multiselect('refresh');

    
    
    $('#compersion2 tbody').html('');  
    $('#compersion tbody').html(''); 
    $('#warediv').css('display','none');
    $('#posdiv').css('display','none');
    var button = $(event.relatedTarget); // Button that triggered the modal
    var article = button.data('article'); // Extract info from data-* attributes
    var color = button.data('color'); // Extract info from data-* attributes
    var modal = $(this);
    modal.find('#articlemodel').val(article);

    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();
      }
    }
    

   })
    // modal.find('#colormodel').val(color);
  });
});
    jQuery("#loader_div").hide();

  $('#colormodel').on('change',function(){    

    // $('option', $('#pos_model')).each(function(element) {
    // $(this).removeAttr('selected').prop('selected', false);
    // });
    // $("#pos_model").multiselect('refresh');

    // $('option', $('#warehouse_model')).each(function(element) {
    // $(this).removeAttr('selected').prop('selected', false);
    // });
    // $("#warehouse_model").multiselect('refresh');
    // $('#compersion2 tbody').html('');  
    // $('#compersion tbody').html(''); 
    // $('#warediv').css('display','none');
    // $('#posdiv').css('display','none');
    var article = $('#articlemodel').val();
    var color = $('#colormodel').val();
    var startdate = $('#startdate').val();
    var enddate = $('#enddate').val();
    var ware_id = $('#warehouse_model').val(); 
    var pos_id = $('#pos_model').val(); 

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

    if(ware_id != '' && ware_id != 'null')
    {
       warehouseajex(ware_id,article,color,startdate,enddate,_token);   
    }
     
     if(pos_id != '' && pos_id != 'null')
    {
       posajex(pos_id,article,color,startdate,enddate,_token);   
    }
    
});

   $("#warehouse_model").on('change', function () {    
    
     if ($("#colormodel option:selected").length < 1) {
        $("#article").removeAttr("selected");
        alert('Plese select Color');
        
        return false;
    }
    jQuery("#loader_div").show();
    var article = $('#articlemodel').val();
    var color = $('#colormodel').val();
    var startdate = $('#startdate').val();
    var enddate = $('#enddate').val();
    var id = $(this).val();   
    var _token   = $('meta[name="csrf-token"]').attr('content');   
     
     warehouseajex(id,article,color,startdate,enddate,_token);
    

   });

   function warehouseajex(id,article,color,startdate,enddate,_token)
   {

      $.ajax({
        type: "get",
        url: "{{ route('pos-article-comparision') }}",
        data: {
          id: id,
          article: article,
          color: color,
          startdate: startdate,
          enddate: enddate,
          warehouse : true,
          _token: _token
        },
        dataType: "json",
        success: function(response) { 
          $('#warediv').css('display','block'); 
             $('#compersion2 tbody').html('');  
             jQuery("#loader_div").hide(); 
              $.each(response, function(propNames, propVals) {
              console.log(propNames, propVals); 
              console.log(propVals);

              $.each(propVals, function(propName, propVal) {  
                var total = ( parseInt(propVal.XS) +  parseInt(propVal.S) +  parseInt(propVal.M) +  parseInt(propVal.L) +  parseInt(propVal.XL) +  parseInt(propVal.XL2) 
                + parseInt(propVal.XL3) + parseInt(propVal.XL4) + parseInt(propVal.XL5) + parseInt(propVal.XL6) + parseInt(propVal.XL7) + parseInt(propVal.FREE)); 
               
                $('#th2').html(propVal.name);           
               
               $('#compersion2 tbody').append("<tr><td>" + propVal.colors  + "</td><td>" + propName + "</td><td>" + propVal.XS + "</td><td>" + propVal.S + "</td><td>" + propVal.M + 
                "</td><td>" + propVal.L + "</td><td>" + propVal.XL + "</td><td>" + propVal.XL2 + "</td><td>" + propVal.XL3 + "</td><td>" + propVal.XL4 + 
                "</td><td>" + propVal.XL5 + "</td><td>" + propVal.XL6 + "</td><td>" + propVal.XL7 + "</td><td>" + propVal.FREE + "</td><td>" + total + "</td></tr>");
                  });
            });
              
        },
        error: function(response) {
          console.log(response.responseJSON);
        }
      });
   }

     
    $("#pos_model").on('change', function () {    
    jQuery("#loader_div").show();
    var article = $('#articlemodel').val();
    var color = $('#colormodel').val();
    var startdate = $('#startdate').val();
    var enddate = $('#enddate').val();
    var id = $(this).val();   
    var _token   = $('meta[name="csrf-token"]').attr('content');   

      posajex(id,article,color,startdate,enddate,_token);
  
   });

    function posajex(id,article,color,startdate,enddate,_token)
    {
        $.ajax({
        type: "get",
        url: "{{ route('pos-article-comparision') }}",
        data: {
          id: id,
          article: article,
          color: color,
          startdate: startdate,
          enddate: enddate,
          _token: _token
        },
        dataType: "json",
        success: function(response) { 
          $('#posdiv').css('display','block'); 
             $('#compersion tbody').html('');  
             jQuery("#loader_div").hide(); 

            $.each(response, function(propNames, propVals) {
              console.log(propNames, propVals); 
              console.log(propVals);  

              $.each(propVals, function(propName, propVal) {  
                var total = ( parseInt(propVal.XS) +  parseInt(propVal.S) +  parseInt(propVal.M) +  parseInt(propVal.L) +  parseInt(propVal.XL) +  parseInt(propVal.XL2) 
                + parseInt(propVal.XL3) + parseInt(propVal.XL4) + parseInt(propVal.XL5) + parseInt(propVal.XL6) + parseInt(propVal.XL7) + parseInt(propVal.FREE)); 
              
              $('#th1').html(propVal.name);           
               
               $('#compersion tbody').append("<tr><td>" + propVal.colors  + "</td><td>" + propName + "</td><td>" + propVal.XS + "</td><td>" + propVal.S + "</td><td>" + propVal.M + 
                "</td><td>" + propVal.L + "</td><td>" + propVal.XL + "</td><td>" + propVal.XL2 + "</td><td>" + propVal.XL3 + "</td><td>" + propVal.XL4 + 
                "</td><td>" + propVal.XL5 + "</td><td>" + propVal.XL6 + "</td><td>" + propVal.XL7 + "</td><td>" + propVal.FREE + "</td><td>" + total + "</td></tr>");
                  });
            });
              
        },
        error: function(response) {
          console.log(response.responseJSON);
        }
      });
    }


  $(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