@extends('layouts.backend')
@section('extraCss')  
 <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
 <style>
table.TableAddDelete{
    width: 100%;
    border-collapse: collapse;
    margin-top:20px;
}
table.TableAddDelete th, table.TableAddDelete td{
    border: 1px solid #cdcdcd;
    padding: 7px;
}
</style>
@endsection

@section('mainContentArea')

<div class="card card-default">
    <div class="card-header">
        <h4>
            Add Article Image      
            <a href="{{ route('article-image') }}" class="btn btn-info float-right btn-sm"> Back</a>      
        </h4>
    </div>

    @if (count($errors) > 0)
   <div class = "alert alert-danger">
      <ul>
         @foreach ($errors->all() as $error)
            <li >{{ $error }}</li>
         @endforeach
      </ul>
   </div>
   @endif
    <div class="card-body">
       
        <form   method="POST" enctype="multipart/form-data" action="{{ route('article-image.store') }}" >
        @csrf

        <div class="col-md-12"><h5> Article Details</h5><hr/></div>
        
        <div class="row"> 

            <div class="col-md-6 form-group">
                <label for="challenType">Article</label>
                    <select name="article" id="article" class="form-control select2" >
                                
                    @foreach($listarticles as $article)
                    <option value="{{ $article->code }}" {{ request('article') == $article->code ? 'selected' : '' }}>{{ $article->code  }}</option>
                          
                    @endforeach
                    </select>
            </div>

            <div class="col-md-6 form-group">
                <label for="color">Color</label>
                <select name="color" id="colormodel" class="form-control select2" required>
                       
                        
                </select>
            </div>

            <div class="col-md-12"><h5> Images</h5><hr/></div>
        

            <div class="col-md-6 form-group">
                <label for="code"> Photo </label>
                <input type="file" name="photo[]" id="photo" class="form-control" onchange="previewPhoto(this)" multiple accept="image/*">
            </div>

            <div class="col-md-6 form-group" id="preview_photo" style='display:none;'>
              <img id="preview_photo_img" src="" alt="Placeholder" width = '100px' height='150px'>
            </div>

           
            <div class="col-md-12 text-Center" style="margin:20px;">
                <button type="submit" class="btn btn-success" ><i class="fa fas fa-save"></i> Submit</button>
                
            </div>
          
        </div>

        
        
    </form>

    </div>
</div>
@endsection

@section('extraJs')
<script>
$(document).ready(function(){

     $("#article").on('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>');
                });               
              
              }else{
                $("#colormodel").empty();
              }
            }    

           })
    });

     function previewPhoto(input){
       $("#preview_photo").css("display", "block");
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#preview_photo_img").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
});
</script>
@endsection