@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"><h5> Article Images</h5><hr/></div>
             <div class="col-md-12 form-group">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>    
                        <th class="text-center">Title</th>                   
                        <th class="text-center">Image</th>                       
                        <th class="text-center">Sort Order</th>                    
                        <th class="text-center">Action</th>
                      </tr>
                    </thead>
                    <tbody id="tbodyv">
                   
                    
                       @for($i=1; $i <= 1;$i++)
                       @php $count = $i;@endphp
                       
                        <tr id="{{$count}}" >                             
                             <td class="row-index text-center">               
                                  <input type="text" name="articleP[]"  class="form-control" placeholder="Enter Image Title" required />
                              </td>
                              <td class="row-index text-center">               
                                    <input type="file" name="aphoto[]"> 
                              </td>
                              <td class="row-index text-center">               
                                  <input type="number" name="asortorder[]"  class="form-control" placeholder="Enter Sort Order" required />
                              </td>
                              <td class="text-center">
                                
                              </td>
                        </tr>
                       @endfor 
                     
                    </tbody>
                  </table>
                </div>
               
                
                <button class="btn btn-md btn-primary" 
                    id="addBtn" type="button">
                  Add Images 
                </button>
                
            </div>

            <!-- <div class="col-md-12"><h5> Cateloge Images</h5><hr/></div>
            <div class="col-md-12 form-group">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>    
                        <th class="text-center">Title</th>                   
                        <th class="text-center">Image</th>                       
                        <th class="text-center">Sort Order</th>                    
                        <th class="text-center">Action</th>
                      </tr>
                    </thead>
                    <tbody id="cbodyv">
                   
                    
                       @for($i=1; $i <= 1;$i++)
                       @php $ccount = $i;@endphp
                       
                        <tr id="{{$count}}" >                             
                             <td class="row-index text-center">               
                                  <input type="text" name="cateTitle[]"  class="form-control" placeholder="Enter Image Title" required />
                              </td>
                              <td class="row-index text-center">               
                                    <input type="file" name="cateimages[]"> 
                              </td>
                              <td class="row-index text-center">               
                                  <input type="number" name="catesortorder[]"  class="form-control" placeholder="Enter Sort Order" required />
                              </td>
                              <td class="text-center">
                                
                              </td>
                        </tr>
                       @endfor 
                     
                    </tbody>
                  </table>
                </div>
               
                
                <button class="btn btn-md btn-primary" 
                    id="addCateBtn" type="button">
                  Add Images 
                </button>
                
            </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);
        }
    }

  var rowIdx = ;
  
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {    
  
    // Adding a row inside the tbody.
    $('#tbodyv').append(`<tr id="R${++rowIdx}">
          <td class="row-index text-center">               
               <input type="text" name="imageTitle[${rowIdx}]"  class="form-control" placeholder="Enter Image Title" required />
          </td>
          <td class="row-index text-center">  
              <input type="file" name="images[${rowIdx}]">             
          </td>
          <td class="row-index text-center">    
               <input type="number" name="newsortorder[${rowIdx}]"   id="ot${rowIdx}" class="form-control" placeholder="Enter Sort Order" required />

          </td>
          
           <td class="text-center">
            <button class="btn btn-danger remove" 
                type="button">Remove</button>
            </td>
           </tr>`);
});

$('#tbodyv').on('click', '.remove', function () {

        // Getting all the rows next to the row
        // containing the clicked button
        var child = $(this).closest('tr').nextAll();

        // Iterating across all the rows
        // obtained to change the index
        child.each(function () {

        // Getting <tr> id.
        var id = $(this).attr('id');        

        // Getting the <p> inside the .row-index class.
        var idx = $(this).children('.row-index').children('p');

        // Gets the row number from <tr> id.
        var dig = parseInt(id.substring(1));

        // Modifying row index.
        idx.html(`Row ${dig - 1}`);

        // Modifying row id.
        $(this).attr('id', `R${dig - 1}`);
        });      

        // Removing the current row.
        $(this).closest('tr').remove();

        // Decreasing total number of rows by 1.
        rowIdx--;
    });


  var crowIdx = ;
  
// jQuery button click event to add a row.
$('#addCateBtn').on('click', function () {    
  
    // Adding a row inside the tbody.
    $('#cbodyv').append(`<tr id="R${++crowIdx}">
          <td class="row-index text-center">               
               <input type="text" name="cateTitle[${crowIdx}]"  class="form-control" placeholder="Enter Image Title" required />
          </td>
          <td class="row-index text-center">  
              <input type="file" name="cateimages[${crowIdx}]">             
          </td>
          <td class="row-index text-center">    
               <input type="number" name="catesortorder[${crowIdx}]"   id="ot${crowIdx}" class="form-control" placeholder="Enter Sort Order" required />

          </td>
          
           <td class="text-center">
            <button class="btn btn-danger remove" 
                type="button">Remove</button>
            </td>
    </tr>`);
});

$('#cbodyv').on('click', '.remove', function () {

        // Getting all the rows next to the row
        // containing the clicked button
        var child = $(this).closest('tr').nextAll();

        // Iterating across all the rows
        // obtained to change the index
        child.each(function () {

        // Getting <tr> id.
        var id = $(this).attr('id');        

        // Getting the <p> inside the .row-index class.
        var idx = $(this).children('.row-index').children('p');

        // Gets the row number from <tr> id.
        var dig = parseInt(id.substring(1));

        // Modifying row index.
        idx.html(`Row ${dig - 1}`);

        // Modifying row id.
        $(this).attr('id', `R${dig - 1}`);
        });      

        // Removing the current row.
        $(this).closest('tr').remove();

        // Decreasing total number of rows by 1.
        rowIdx--;
    });
});
</script>
@endsection