@extends('layouts.backend')
@section('extraCss')
    <style>
        
        .select2-container--default .select2-selection--single{
            font-size: 16px;
            padding: 9px 35px 39px 20px;
        }
    </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>
                Edit / Update Auto Purchase Order
                <a href="{{ route('autopurchaseorder') }}" class="btn btn-info float-right btn-sm"> Back</a>
            </h4>
        </div>
        <div class="card-body">
            <div class="row">
                      
                    <form method="GET" enctype="multipart/form-data" name="mainFrmSo" 
                            action="{{ route('update-autopurchaseorder') }}">
                        @csrf
                        <input type="hidden" name='id' value='{{ $autoorder->id }}'>                       
                       
                               <div class="row" style="padding:20px;">
                                 <div class="col-md-4 form-group">
                                     <label for="Style">Article </label>
                                     <select name="article" id="article" class="form-control select2" required >                                                      
                                        @foreach($listarticles as $article)
                                       <option value="{{ $article->code }}" {{ $autoorder->article == $article->code ? 'selected' : '' }}>{{ $article->code  }}</option>    
                                        @endforeach
                                      </select>                    
                                 </div>

                                 <div class="col-md-4 form-group">
                                     <label for="Color">Color</label>                                    
                                     <select name="color" id="colormodel" class="form-control " required> 
                                        <option value="any" {{ $autoorder->color == 'any' ? 'selected' : '' }}>Any</option>                               
                                        @foreach($listColor as $color)
                                       <option value="{{ $color->color }}" {{ $autoorder->color == $color->color ? 'selected' : '' }}>{{ $color->color  }}</option>    
                                        @endforeach
                                      </select>
                                 </div>

                                  <div class="form-group col-md-4">      
                                     <label for="Color">Status</label>                  
                                     <select name="is_active" id="is_active" class="form-control select2"  > 
                                      <option value="1" >Active</option>                               
                                      <option value="0" >Inactive</option>                               
                                     
                                     </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'  name="xs" value="{{$autoorder->xs}}">                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="s">S </label>
                                      <input type="number" class="form-control " id='s' name="s" value="{{$autoorder->s}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="m">M </label>
                                      <input type="number" class="form-control " id='m' name="m" value="{{$autoorder->m}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="l">L </label>
                                      <input type="number" class="form-control " id='l' name="l" value="{{$autoorder->l}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="xl">XL </label>
                                      <input type="number" class="form-control " id='xl' name="xl" value="{{$autoorder->xl}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="2xl">2XL </label>
                                      <input type="number" class="form-control " id='2xl' name="xl2" value="{{$autoorder->xl2}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">3XL </label>
                                      <input type="number" class="form-control " id='3xl' name="xl3" value="{{$autoorder->xl3}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">4XL </label>
                                      <input type="number" class="form-control " id='4xl' name="xl4" value="{{$autoorder->xl4}}"  >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">5XL </label>
                                      <input type="number" class="form-control " id='5xl' name="xl5" value="{{$autoorder->xl5}}"  >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">6XL </label>
                                      <input type="number" class="form-control " id='6xl' name="xl6" value="{{$autoorder->xl6}}" >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">7XL </label>
                                      <input type="number" class="form-control " id='7xl' name="xl7" value="{{$autoorder->xl7}}"  >                    
                                  </div>
                                  <div class="col-md-1 form-group">
                                      <label for="3xl">Free </label>
                                      <input type="number" class="form-control " id='free' name="free" value="{{$autoorder->free}}"  >                    
                                  </div>
                               
                          </div>

                        <div class="form-group col-md-12">
                            <button class="btn btn-block btn-primary btnSubmit">Save Order</button>
                        </div>
                    </form>                  

                </div>             
            
        </div>
    </div>
@endsection

@section('extraJs')
<script type="text/javascript">
   $("#article").change(function(){
          var article = $('#article').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