@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>

@endsection

@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4> Auto Sale Order Article List </h4>
        <button class="btn btn-success float-right btn-sm" type="button"  data-toggle="modal" data-target="#autosaleorderModel" style="float:right; margin:10px;">
          <i class="fa fas fa-plus"></i>Add Auto Sale Order Aticle </button>

    </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>
          <th>Size</th>                         
          <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->size) ? $value->size : ''   }}</td>
          <td> <a href="{{ route('autosaleorders',['id' => $value->id]) }}"> <i class='fa fas fa-eye'>Edit</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" id="autosaleorderModel" role="dialog"  data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog ">
  <div class="modal-content">
    <div class="modal-header text-center">
      <h4 class="modal-title w-100 font-weight-bold"> Add Article </h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>     

    <div class="row" style="margin-top:20px;"> 
      <div class="col-sm-2"></div> 

      <div class="col-sm-8">
        
        
        <select name="article" id="article" class="form-control select2" > 
          <option value="">-- Select Article--</option>                               
          @foreach($listarticles as $article)
         <option value="{{ $article->code }}">{{ $article->code  }}</option>    
          @endforeach
        </select> 
        <br><br>
     
        <select name="color" id="color" class="form-control select2" > 
          <option value="">-- Select color--</option>                               
          @foreach($listColor as $color)
         <option value="{{ $color->name }}">{{ $color->name  }}</option>    
          @endforeach
        </select> 

     <br><br>

     <select name="size" id="size" class="form-control select2" > 
        <option value="">-- Select size--</option> 
        <option value="S">S</option>    
        <option value="M">M</option>    
        <option value="L">L</option>    
        <option value="XS">XS</option>    
        <option value="XL">XL</option>    
        <option value="2XL">2XL</option>    
        <option value="3XL">3XL</option>    
        <option value="4XL">4XL</option>    
        <option value="5XL">5XL</option>    
      
    </select>       
      </div> 
      <div class="col-sm-2"></div>
    </div>

      <div class="modal-footer d-flex justify-content-center" style="border-top:none;">
      <button class="btn btn-default" id='saveArticle'>Save Article</button>
       
      </div>  
         

    </div>
    
  </div>
</div>

@endsection

@section('extraJs')

<script type="text/javascript">

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

var article = $('#article').val(); 
var color = $('#color').val(); 
var size = $('#size').val(); 
//alert(size);

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-sale-order-save') }}",
data: {
article: article,
color: color,
size: size,
_token: _token
},
dataType: "json",
success: function(response) {   

$('#autosaleorderModel').modal('hide');         
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);
}

}
});

});
</script>
@endsection