@extends('layouts.backend')

@section('extraCss')
<style>
    .select2-container--open .select2-dropdown--below {
        min-width:200px !important;
    }
    .tblPosOrdList td, .tblPosOrdList th {
        font-size:12px;
    }

    .card-stats{
        border: 1px solid #c0c1ca;
        padding: 16px 8px;
        box-shadow: 5px 5px;
    }
    .oneth{background-color: #74c64e80;}
    .twoth{background-color: #74c64eb8;}
    .threeth{background-color: #78cd51;}
    .fourth{background-color: #74c64e4a;}
    .stats{
        float: right;
        font-size: 18px;
    }
    .fa{font-size: 23px;
    margin-right: 6px;}


</style>

<style type="text/css">
span.multiselect-native-select {
    position: relative;
    display: block;
}
.btn-group, .btn-group-vertical {
    display: block;
}
.custom-select, .dropdown-item {
    width: 100% !important;
}
</style>

@endsection

@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4> Auto Purchase Order Article List </h4>
        <button class="btn btn-success float-right btn-sm" type="button"  data-toggle="modal" data-target="#autopurchaseorderModel" style="float:right; margin:10px;">
          <i class="fa fas fa-plus"></i>Add Purchase Order Article </button>
          <a class="btn btn-success float-right btn-sm" href="{{ route('autopurchaseorder-warehouse') }}" style="float:right; margin:10px;">
          <i class="fa fas fa-plus"></i>Add auto order </a>

    </div>
    <div class="card-body">
        <div class="alert alert-default">

<table class="table table-bordered tblPosOrdList" id="table_id">
  <thead>
      <tr>
          <th>S.no </th>
          <th>Article</th>
          <th>Color</th>
          @foreach($sizes as $size)
          <th>{{$size}}</th>
          @endforeach                        
          <th>Action</th>
      </tr>
  </thead>
  <tbody>   
    @if($autosaleorder->count() > 0)  
      @foreach($autosaleorder as $key => $value)
      <tr>         
          <td>{{ $key + $autosaleorder->firstItem()   }}</td>
          <td>{{ !empty($value->article) ? $value->article : ''   }}</td>
          <td>{{ !empty($value->color) ? $value->color : ''   }}</td>
          <td>{{ !empty($value->xs) ? $value->xs : 0   }}</td>
          <td>{{ !empty($value->s) ? $value->s : 0   }}</td>
          <td>{{ !empty($value->m) ? $value->m : 0   }}</td>
          <td>{{ !empty($value->l) ? $value->l : 0   }}</td>
          <td>{{ !empty($value->xl) ? $value->xl : 0   }}</td>
          <td>{{ !empty($value->xl2) ? $value->xl2 : 0   }}</td>
          <td>{{ !empty($value->xl3) ? $value->xl3 : 0   }}</td>
          <td>{{ !empty($value->xl4) ? $value->xl4 : 0  }}</td>
          <td>{{ !empty($value->xl5) ? $value->xl5 : 0   }}</td>
          <td>{{ !empty($value->xl6) ? $value->xl6 : 0   }}</td>
          <td>{{ !empty($value->xl7) ? $value->xl7 : 0   }}</td>
          <td>{{ !empty($value->free) ? $value->free : 0   }}</td>
          <td> <a href="{{ route('autopurchaseorderedit',['id' => $value->id]) }}" > <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></td>
          

      </tr>
      @endforeach
      @else

      <tr>
        <td colspan="10"><div class="alert alert-danger">No Article Found!</div></td>
    </tr>
    @endif
  </tbody>
</table>           


   
    </div>
</div>

@php if($autosaleorder->count() > 0) { @endphp {!! $autosaleorder->appends(request()->input())->links() !!} @php } @endphp

<div class="modal fade bd-example-modal-xl" id="autopurchaseorderModel" role="dialog"  data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-xl">    
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header" >
          <h5> Add Article</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>  
           
        </div>
        <div class="modal-body" >
             <div class="modal-body-sqech">
                   <div class="row">
                     <div class="col-md-6 form-group">
                         <label for="Style">Article </label>
                         <input type="text" class="form-control componentarticle" id='articlemodel'  >                    
                     </div>

                     <div class="col-md-6 form-group">
                         <label for="Color">Color</label>
                         <select  id="colormodel" class="form-control componentcolor" required>
                       
                         </select>
                     </div>
                   </div> 
                   <div class="row" style="padding:20px;">                

                      <div class="col-md-1 form-group">
                          <label for="xs">XS </label>
                          <input type="number" class="form-control " id='xs'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="s">S </label>
                          <input type="number" class="form-control " id='s'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="m">M </label>
                          <input type="number" class="form-control " id='m'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="l">L </label>
                          <input type="text" class="form-control " id='l'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="xl">XL </label>
                          <input type="text" class="form-control " id='xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="2xl">2XL </label>
                          <input type="text" class="form-control " id='2xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">3XL </label>
                          <input type="text" class="form-control " id='3xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">4XL </label>
                          <input type="text" class="form-control " id='4xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">5XL </label>
                          <input type="text" class="form-control " id='5xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">6XL </label>
                          <input type="text" class="form-control " id='6xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">7XL </label>
                          <input type="text" class="form-control " id='7xl'  >                    
                      </div>
                      <div class="col-md-1 form-group">
                          <label for="3xl">Free </label>
                          <input type="text" class="form-control " id='free'  >                    
                      </div>
                   
              </div>
             </div>
             
               
    </div>
      
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>
          <button  type="button" title="Order Close"  id ="saveArticle" class="btn btn-success" style="margin:1px;">Save</button>
        </div>
      </div>
      
    </div>
</div>

@endsection

@section('extraJs')

<script type="text/javascript">

$('#saveArticle').on('click',function(){ 

var article = $('#articlemodel').val(); 
var color = $('#colormodel').val(); 
var xs = $('#xs').val(); 
var s = $('#s').val(); 
var m = $('#m').val(); 
var l = $('#l').val(); 
var xl = $('#xl').val(); 
var xl2 = $('#2xl').val(); 
var xl3 = $('#3xl').val(); 
var xl4 = $('#4xl').val(); 
var xl5 = $('#5xl').val(); 
var xl6 = $('#6xl').val(); 
var xl7 = $('#7xl').val(); 
var free = $('#free').val(); 

if(article == '' )
{
alert('Please Select Article');
return false;
}   

var _token   = $('meta[name="csrf-token"]').attr('content');   
jQuery("#loader_div").show();
$.ajax({
type: "get",
url: "{{ route('auto-purchase-order-save') }}",
data: {
article: article,
color: color,
xs: xs,
s: s,
m: m,
l: l,
xl: xl,
xl2: xl2,
xl3: xl3,
xl4: xl4,
xl5: xl5,
xl6: xl6,
xl7: xl7,
free: free,
_token: _token
},
dataType: "json",
success: function(response) { 
var reason = JSON.stringify(response);  
var parsed = JSON.parse(reason);            
console.log(parsed);
if (parsed.status == false) {
toastr.error(parsed.info);
} else {
toastr.success(parsed.info);
window.location.reload('true');
}

}
});

});
var addmorecount = 0;
$('.componentAddDelete').click(function(){ alert('ko');
        var componentarticle = $('.componentarticle').val();  
        var componentcolor = $('.componentcolor').val(); 
        var componentsize = $('.componentsize').val(); 
        var componentqty = $('.componentqty').val(); 
             console.log(componentarticle,componentcolor,componentsize,componentqty);
        $('.TableAddcomponts tbody').append("<tr><td><input name='componentarticle[]' id='article' class='form-control' value='"+componentarticle+"' ></td><td><input name='componentcolor[]' id='color' class='form-control' value='"+componentcolor+"' ></td><td><input name='componentsize[]' id='size' class='form-control' value='"+componentsize+"' ></td><td><input name='componentqty[]' id='qty' class='form-control' value='"+componentqty+"' ></td><td><button type='button' class='componetdelete btn'>x</button></td></tr>");
     addmorecount++;  
});
$(document).on('click', 'button.componetdelete', function(){
        $(this).closest('tr').remove();
        return false;
});

 $("#articlemodel").keyup(function(){
          var article = $('#articlemodel').val();          
          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();
              }
            }    

           })
    });

</script>
@endsection