@section('extraCss')
<style>
    .articleCombinations td,
    .articleCombinations td input{
        font-size:11px;
    }
     table.TableAddDelete,.TableAddcompont{
    width: 100%;
    border-collapse: collapse;
    margin-top:20px;
}
table.TableAddDelete th, table.TableAddDelete td,table.TableAddcompont th,table.TableAddcompont td{
    border: 1px solid #cdcdcd;
    padding: 7px;
}
</style>
@endsection
@php
    $addNew = '&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="text-success text-bold" onclick="addNewMaster(\'{master}\',\'{field}\');"><i class="fa fas fa-plus"></i> Add</a>';
@endphp
@php
$reqsubsub = !empty($article->id) ? $article->category_id : 0;
$existingClasses = [];
$existingColors = [];
$existingSizes = [];
if(!empty($article->id) && $article->itemCodes->count() > 0):
    foreach($article->itemCodes as $iCode):
            $cls = '';
            $colTemp = '';
            $sizeTemp = '';
            foreach($sizes as $tempSize) {
                if($tempSize->code == $iCode->size) {
                    $sizeTemp = $tempSize->id;
                    $existingSizes[] = $sizeTemp;
                    break;
                }
            }
            foreach($colorFamilies as $colorFamily) {
                if(!empty($colorFamily->colors) && $colorFamily->colors->count() > 0) {
                    foreach($colorFamily->colors as $col) {
                        if($col->name == $iCode->color) {
                            $colTemp = $col->id;
                            $existingColors[] = $colTemp;
                            break;
                        }
                    }
                }
                if($colTemp != '') {
                    break;
                }
            }
            $cls = '_'.$sizeTemp.'_'.$colTemp;
            $clsCol = '_Col'.'_'.$colTemp;
            $clsSize = '_Size'.'_'.$sizeTemp;
            $existingClasses[] = $cls;
    endforeach;
endif;
@endphp
<form
    method="POST"
    enctype="multipart/form-data" action="{{ route('articles-draftstore') }}"   
>
@csrf
@isset($article->id)
	{{ method_field('PUT') }}
@endisset
<div class="row">
    <div class="col-md-12"><h5>Basic Details</h5><hr/></div>
    <div class="col-md-4 form-group">
        <label for="name">Article Name</label>
        <input type='hidden' name="url" id="url" class="form-control" value="{{ $pre_url }}">
        <input name="name" id="name" class="form-control" required value="{{ !empty($article->name)  ? $article->name : ''}}">
    </div>
    <div class="col-md-4 form-group">
        <label for="code">Article Code</label>
        <input name="code" id="code" class="form-control" required value="{{ !empty($article->code)  ? $article->code : rand(1000000, 9999999) }}" 
        @if(!empty($article->code))
            readonly
        @else
        onblur="if(jQuery.trim(this.value) != '' && jQuery.inArray( this.value, allArticles) >= 0){toastr.error('Article already exists!'); this.value='';this.focus();$('.mixerDiv').hide();return false;} else {$('.mixerDiv').show();}"
        @endif
        >
    </div>
    <!-- <div class="col-md-4 form-group">
        <label for="code">
            Photo 
            @if(!empty($article->image)) 
            <a href="{{ asset('uploads/articles/'.$article->image) }}" target="_blank"><sub class="text-danger">View Photo</sub></a>
            @endif
        </label>
        <input type="file" name="image" id="image" class="form-control">
        <input type="hidden" name="oldPhoto" id="oldPhoto" value="{{ !empty($article->image)  ? $article->image : ''}}">
        <input type="hidden" name="oldPhoto1" id="oldPhoto1" value="{{ !empty($article->file)  ? $article->file : ''}}">
        
    </div> -->
    <div class="col-md-4 form-group">
        <label for="hsn_id">HSN {!! str_replace('{master}','hsn',str_replace('{field}','hsn_id',$addNew)) !!}</label>
        <select name="hsn_id" id="hsn_id" class="form-control select2" required>
            <option value="">Select Option</option>
            @foreach($hsns as $hsn)
            <option value="{{ $hsn->id }}" {{ !empty($article->hsn_id) && $article->hsn_id == $hsn->id ? 'selected' : '' }}>{{ $hsn->name . ' ('.$hsn->code.')' }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="main_category_id">Section</label>
        <select name="main_category_id" id="main_category_id" class="form-control select2" required onchange="$('#category_id').val(0);$('.subsectionsOptions').hide();$ ('.subsectionsOptions.select2-hidden-accessible').select2 ('destroy');$('#subsectionId'+this.value).show();$('#subsectionId'+this.value).select2();">
            <option value="">Select Option</option>
            @foreach($sections as $section)
            <option value="{{ $section->id }}" {{  !empty($article->main_category_id) && $section->id == $article->main_category_id ? 'selected' : '' }}>{{ $section->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <input type="hidden" name="category_id" id="category_id" value="0">
        <label for="category_id">Subsection</label>
        @foreach($sections as $section)
            <select name="category_id_temp" id="subsectionId{{ $section->id }}" class="form-control subsectionsOptions" required style="{{ !empty($article->main_category_id) && $section->id == $article->main_category_id ? '' : 'display:none;' }}" data-placeholder="SELECT OPTION" onchange="$('#category_id').val(this.value);">
            <option value="0">Select Subsection</option>
            @php $dash=''; @endphp
            @foreach ($section->childrenCategories as $childCategory)
                @include('backend.articles.child_category', ['child_category' => $childCategory])
            @endforeach
            </select>
            @endforeach
    </div>
    <div class="col-md-4 form-group">
        <label for="brand_id">Brand {!! str_replace('{master}','brand',str_replace('{field}','brand_id',$addNew)) !!}</label>
        <select name="brand_id" id="brand_id" class="form-control select2" required>
            <option value="">Select Option</option>
            @foreach($brands as $brand)
            <option value="{{ $brand->id }}" {{  !empty($article->brand_id) && $brand->id == $article->brand_id ? 'selected' : '' }}>{{ $brand->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="unit_id">Fabric {!! str_replace('{master}','fabric',str_replace('{field}','unit_id',$addNew)) !!}</label>
        <select name="unit_id" id="unit_id" class="form-control select2" required>
            <option value="">Select Option</option>
            @foreach($fabrics as $fabric)
            <option value="{{ $fabric->id }}" {{  !empty($article->unit_id) && $fabric->id == $article->unit_id ? 'selected' : '' }}>{{ $fabric->name.','.$fabric->quality.','.$fabric->composition.','.$fabric->construction.','.$fabric->weave }} </option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="fab_desc">Fabric Details111 </label>
        <textarea name="fab_desc" id="fab_desc" class="form-control">{{ !empty($article->fab_desc)  ? $article->fab_desc : 'None'}}</textarea>
    </div>
    <div class="col-md-4 form-group">
        <label for="purchase_unit_id">Designer {!! str_replace('{master}','designer',str_replace('{field}','purchase_unit_id',$addNew)) !!}</label>
        <select name="purchase_unit_id" id="purchase_unit_id" class="form-control select2" required>
            <option value="">Select Option</option>
            @foreach($designers as $designer)
            <option value="{{ $designer->id }}" {{  !empty($article->purchase_unit_id) && $designer->id == $article->purchase_unit_id ? 'selected' : '' }}>{{ $designer->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="sale_unit_id">Season {!! str_replace('{master}','season',str_replace('{field}','sale_unit_id',$addNew)) !!}</label>
        <select name="sale_unit_id" id="sale_unit_id" class="form-control select2" required>
            <option value="">Select Option</option>
            @foreach($seasons as $season)
            <option value="{{ $season->id }}" {{ !empty($article->sale_unit_id) && $season->id == $article->sale_unit_id ? 'selected' : '' }}>{{ $season->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="year">Year </label>
        <select name="year" id="year" class="form-control select2" required>
            <option value="">Select Option</option>
            @for($i = 2004; $i <= date("Y"); $i++)
            <option value="{{ $i }}" {{ !empty($article->year) && $i == $article->year ? 'selected' : '' }}>{{ $i }}</option>
            @endfor
        </select>
    </div>
    <!-- <div class="col-md-4 form-group">
        <label for="ref_no">Reference Number </label>
        <input name="ref_no" id="ref_no" class="form-control" value="{{ !empty($article->ref_no)  ? $article->ref_no : 'None'}}">
    </div> -->
    <div class="col-md-4 form-group">
        <label for="pattern_no">Pattern Number </label>
        <input name="pattern_no" id="pattern_no" class="form-control" value="{{ !empty($article->pattern_no)  ? $article->pattern_no : 'None'}}">
    </div>
    <div class="col-md-4 form-group">
        <label for="ref_article">Reference Article </label>
        <input name="ref_article" id="ref_article" class="form-control" value="{{ !empty($article->ref_article)  ? $article->ref_article : 'None'}}">
    </div>
    <div class="col-md-4 form-group">
        <label for="vendor_id">Vendor</label>
        <select name="vendor_id" id="vendor_id" class="form-control select2" data-placeholder="Select Vendor">
            <option value="0">No vendor associated</option>
            @foreach ($vendors as $vendor)
                <option value="{{ $vendor->id }}" {{ !empty($article->vendor_id) && $article->vendor_id == $vendor->id ? 'selected' : ''}}>{{ $vendor->name }} {{ $vendor->company_name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4 form-group">
        <label for="collection_id">Collection </label>
        <input name="collection_id" id="collection_id" class="form-control" value="{{ !empty($article->collection_id)  ? $article->collection_id : 'None'}}">
    </div>
    <div class="col-md-12 form-group">
        <label for="short_desc">Short Description </label>
        <input name="short_desc" id="short_desc" class="form-control" value="{{ !empty($article->short_desc)  ? $article->short_desc : 'None'}}">
    </div>
    <div class="col-md-12 form-group">
        <label for="long_desc">Long Description </label>
        <textarea name="long_desc" id="long_desc" class="form-control">{{ !empty($article->long_desc)  ? $article->long_desc : 'None'}}</textarea>
    </div>
    <div class="col-md-12">
        <h5>Attributes 
            <!-- <a href="#" class="btn btn-success btn-sm showExtraMasters" onclick="showHideExtraMasters();">Show</a>
            <a href="#" class="btn btn-success btn-sm hideExtraMasters" onclick="showHideExtraMasters();" style="display:none;">Hide</a> -->
        </h5><hr/>
        <p class="text-danger extraMasters" >Add more attributes to products.</p>
    </div>
    {{--  ATTRIBUTE MASTERS HERE  --}}
    @php
        $existProductMasterValues = [];
        if(!empty($article->mastervalues)):
            $tempMastervals = $article->mastervalues;
            foreach( $tempMastervals as $tempMasterval) {
                $existProductMasterValues[$tempMasterval->master_id][] = $tempMasterval->master_value_id;
            }
        endif;
    @endphp
    @foreach($masters as $master)
        <!-- <div class="col-md-3 extraMasters" style="display: none;">
            <p><b>{{ $master->name }}</b> {!! str_replace('{master}','master',str_replace('{field}','masterid_'.$master->id,$addNew)) !!}</p>
            <select name="master_id[]" id="masterid_{{ $master->id }}" class="form-control select2">
                <option value="">None</option>
                @if(!empty($master->vals) && $master->vals->count() > 0)
                    @foreach($master->vals as $val)
                        <option value="{{ $val->id }}" {{ !empty($existProductMasterValues[$master->id]) && $existProductMasterValues[$master->id] == $val->id ? 'selected' : '' }}>{{ $val->name }}</option>
                    @endforeach
                @endif
            </select>
        </div> -->
        <div class="col-md-3 extraMasters" >
            <p><b>{{ $master->name }}  </b> {!! str_replace('{master}','master',str_replace('{field}','masterid_'.$master->id,$addNew)) !!}</p>
            <select name="master_id[{{ $master->id }}][]" id="masterid_{{ $master->id }}" class="form-control select2" multiple>
                <option value="">None</option> 
                @if(!empty($master->vals) && $master->vals->count() > 0)
                    @foreach($master->vals as $val) 
                        <option value="{{ $val->id }}" {{ (!empty($existProductMasterValues[$master->id]) && in_array($val->id, $existProductMasterValues[$master->id]) ) ? 'selected' : ''}} >{{ $val->name }}</option>
                    @endforeach
                @endif
            </select>
        </div>
    @endforeach
    {{--  ATTRIBUTE MASTERS HERE  --}}
    <div class="col-md-12">
        <hr/>
    </div>
    <div class="col-md-12 mixerDiv">
        <h5>Variations</h5><hr/>
        <p class="text-danger">Select Both Colors and size to make the variations.</p>
    </div>
    <div class="col-md-6 form-group mixerDiv">
        <label for="colorFamily"> Color: {!! str_replace('{master}','color',str_replace('{field}','colorFamily',$addNew)) !!}</label>
        <select name="colorFamily" id="colorFamily" class="form-control select2" multiple style="width:100%;" data-placeholder="Select Colors" onchange="showHideOptionsForVariations();">
            @foreach($colorFamilies as $colorFamily)
            @if(!empty($colorFamily->colors) && $colorFamily->colors->count() > 0)
                <optgroup label="{{ $colorFamily->name }}">
                    @foreach($colorFamily->colors as $col)
                    <option value="{{ $col->id }}" {{ in_array($col->id, $existingColors) ? 'selected' : ''}}>{{ $col->name }}</option>
                    @endforeach
                </optgroup>
            @endif
            @endforeach
        </select>
    </div>
    <div class="col-md-6 form-group mixerDiv">
        <label for="sizeFamily">Size {!! str_replace('{master}','size',str_replace('{field}','sizeFamily',$addNew)) !!}</label>
        <select name="sizeFamily" id="sizeFamily" class="form-control select2" multiple style="width:100%;" data-placeholder="Select Sizes" onchange="showHideOptionsForVariations();">
            @foreach($sizes as $size)
                <option value="{{ $size->id }}" {{ in_array($size->id, $existingSizes) ? 'selected' : ''}}>{{ $size->code }}</option>
            @endforeach
        </select>
    </div>
    @include("backend.articles.product-combinations")

    <h5>Component Details</h5><hr/>   

    <div class="col-md-12 d-flex"> 
        <div class="col-md-2 form-group d-inline">
            <label for="Style">Component </label>
            <input type="text" class="form-control componentadd"   >                    
        </div>

        <div class="col-md-1 form-group d-inline">
            <label for="Quantity">Qty</label>
            <input type="number" min='1' class="form-control componentqty"  >
        </div> 

        <div class="col-md-3 form-group d-inline">
            <label for="Quantity">Fabric</label>
            <input type="text" class="form-control componentfab"  >
        </div>

        <div class="col-md-4 form-group d-inline">
            <label for="Quantity">Fabric Details</label>
            <input type="text" class="form-control componentfabdetail"  >
        </div>

        <div class="col-md-2 form-group d-inline">
        <button type="button" class="componentAddDelete">Add Component</button> 
        </div>  
    </div>

    <div class="col-md-12">
        <table class="TableAddcompont" >
            <thead>
                <tr>                                  
                    <th>Component</th>
                    <th>Qty</th>
                    <th>Fabric</th>
                    <th>Fabric Details</th>
                    <th>Delete</th>                                                                       
                </tr>                                   
            </thead>    
            <tbody>   
             @php $count = 0;  @endphp
                  @if(!empty($article->components) && count($article->components) > 0)
                   @foreach($article->components as $key => $value)

                    @php $count = $key +1 ; @endphp
                    <tr id="{{$count}}">
                          <td class="row-index text-center">               
                                <input type="text" name="component[{{$count}}]"  id="vt{{$count}}" value="{{!empty($value->componet) ? $value->componet : 0}}" class="form-control" placeholder="Enter component" required />
                          </td>
                          <td class="row-index text-center">               
                                <input type="text" name="componentqty[{{$count}}]"  value="{{!empty($value->qty) ? $value->qty : 0}}" class="form-control" placeholder="Enter quantity" required />
                          </td>
                          <td class="row-index text-center">               
                                <input type="text" name="componentfab[{{$count}}]"  value="{{!empty($value->comfab) ? $value->comfab : 0}}" class="form-control" placeholder="Enter fabric" required />
                          </td>
                          <td class="row-index text-center">               
                                <input type="text" name="componentfabdetail[{{$count}}]"  value="{{!empty($value->details) ? $value->details : 0}}" class="form-control" placeholder="Enter fabric details" required />
                          </td>
                         
                           <td class="text-center">
                            <button class="btn btn-danger remove componetdelete " 
                                type="button">Remove</button>
                            </td>
                    </tr>
                   @endforeach 
                  @endif                                 
            </tbody>
        </table>
    </div>
    <div class="col-md-12"><hr/></div>
    <h5>Suggest Cordinates</h5><hr/>
    <div class="col-md-12"><hr/></div>
    
    <div class="col-md-12 d-flex"> 
            <div class=" col-md-3 form-group ">
                <label for="Style">Master Color </label>
                <select  id="colorFamilycor" class="form-control select2 txtTeamAddDelete"   style="width:100%;" data-placeholder="Select Colors" >
                @foreach($colorFamilies as $colorFamily)
                @if(!empty($colorFamily->colors) && $colorFamily->colors->count() > 0)
                    <optgroup label="{{ $colorFamily->name }}">
                        @foreach($colorFamily->colors as $col)
                        <option value="{{ $col->name }}" >{{ $col->name }}</option>
                        @endforeach
                    </optgroup>
                @endif
                @endforeach
                 </select>
                
            </div> 
            <div class=" col-md-3 form-group">
                <label for="Quantity">ARTICLE</label>
                <input type="text" class="form-control txtCricketerAddDelete"  id='articlemodel' >
            </div> 
            <div class="col-md-3 form-group">
                <label for="user_name">COLOR</label>
                <!-- <input type="text" class="form-control txtScoreAddDelete"  > -->
                <select  id="colormodel" class="form-control txtScoreAddDelete" >
              
                </select>
            </div> 
            <div class=" col-md-3 form-group">
                <button type="button" class="btnrowAddDelete">Add Cordinates</button> 
            </div>
             
    </div>

    <div class="col-md-12">
            <table class="TableAddDelete">
                <thead>
                    <tr>                                  
                        <th>Master Color</th>
                        <th>ARTICLE</th>
                        <th>COLOR</th> 
                        <th>Delete</th>                                                                       
                    </tr>                                   
                </thead>    
                <tbody>   
                 @php $count = 0;@endphp
                      @if(!empty($article) && count($article->sugesCodes) > 0)
                       @foreach($article->sugesCodes as $key => $value)

                        @php $count = $key +1 ; @endphp
                        <tr id="{{$count}}">
                              <td class="row-index text-center">               
                                    <input type="text" name="master_color[{{$count}}]"  id="vt{{$count}}" value="{{!empty($value->master_color) ? $value->master_color : 0}}" class="form-control" placeholder="Enter Style" required />
                              </td>
                              <td class="row-index text-center">               
                                    <input type="text" name="sustyle[{{$count}}]"  value="{{!empty($value->article) ? $value->article : 0}}" class="form-control" placeholder="Enter quantity" required />
                              </td>
                              <td class="row-index text-center">               
                                    <input type="text" name="sucolor[{{$count}}]"   value="{{!empty($value->color) ? $value->color : 0}}" class="form-control" placeholder="Enter name " required />
                              </td>
                             
                               <td class="text-center">
                                <button class="btn btn-danger remove btndeleterowadded " 
                                    type="button">Remove</button>
                                </td>
                        </tr>
                       @endforeach 
                      @endif                                 
                </tbody>
            </table>
    </div>
    <div class="col-md-12"><hr/></div>
    <div class="col-md-12"><h5> Article Images</h5><hr/></div>
    <!-- <div class="row">  -->
       
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                  <tr>  
                    <th class="text-center">Color</th>   
                    <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">
                @php $counta = 1; @endphp 
                    @if(!empty($ArticleImg) && count($ArticleImg) > 0)
                      @foreach($ArticleImg as $key => $value)  
                      @php $counta = $key +1 ; @endphp                              
                        <tr id="{{$counta}}" > 
                            <td class="row-index text-center">               
                                <input type="text" name="acolor[]"  value="{{ str_replace("_", " ", $value->color_name)}}" class="form-control" placeholder="Enter Image Color" required />
                            </td>                             
                            <td class="row-index text-center">               
                                <input type="text" name="atitle[]" value="{{$value->title}}" class="form-control" placeholder="Enter Image Title" required />
                            </td>
                            <td class="row-index text-center">   
                                <input type="hidden" name="fphoto[]" value="{{$value->imgname}}">            
                                <img src="{{ asset('uploads/articles/photos/full'.$value->imgname) }}" alt="" title="" width = '100px' height='150px'>
                            </td>
                            <td class="row-index text-center">               
                                <input type="number" name="asortorder[]"  min='0' value="{{!empty($value->sort_order) ? $value->sort_order : 0}}" class="form-control" placeholder="Enter Sort Order" required />
                                <!-- <input type="hidden" name='aimageid[]' value="{{$value->id}}"> -->
                            </td>
                            <td class="text-center">                                       
                                <button class="btn btn-danger remove"  type="button" id= "{{$value->id}}" onclick="deleteImage(this.id)">remove</button>                                          
                                <button class="btn btn-info" type="button" data-imageid="{{$value->id}}" data-code="{{$value->code}}" data-colorname="{{$value->color_name}}" 
                                 data-toggle="modal" data-target="#ImageModal" id="gallery"  data-image = "{{  empty($value->imgname) || $value->imgname == 'NULL' ? 'https://via.placeholder.com/100x100.png?text=No Photo' : asset('uploads/articles/photos/full'.$value->imgname) }}" ><i class="fa fa-pencil-square-o"></i> </button>
                             
                            </td>
                        </tr>
                      @endforeach 
                    @else
                        <tr id="{{$counta}}" >
                            <td class="row-index text-center">               
                                <input type="text" name="acolor[]"  class="form-control" placeholder="Enter Image Color" required />
                            </td>                             
                            <td class="row-index text-center">               
                                <input type="text" name="atitle[]"  class="form-control" placeholder="Enter Image Title" required />
                            </td>
                            <td class="row-index text-center">               
                                <input type="file" name="aphoto[]" required> 
                            </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>
                    @endif                                           
                   
                </tbody>
            </table>                     
            
            <button class="btn btn-md btn-primary" 
                id="addBtn" type="button">
              Add Images 
            </button>                
        </div>
    
    <!-- </div> -->
    
   <!--  <div class="col-md-12"><hr/></div>
    <div class="col-md-12"><h5> Catalog Images</h5><hr/></div>   
     
    <div class="col-md-12 table-responsive">                
        <table class="table table-bordered">
            <thead>
              <tr>    
                <th class="text-center">Color</th> 
                <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">  

               @php $ccount = 0; @endphp   
               @if(!empty($CateImg) && count($CateImg) > 0)
                  @foreach($CateImg as $key => $value)  
                  @php $ccount = $key +1 ; @endphp                              
                    <tr id="{{$ccount}}" > 
                        <td class="row-index text-center">               
                            <input type="text" name="ccolor[]"  value="{{$value->color_name}}" class="form-control" placeholder="Enter Image Color" required />
                        </td>                             
                        <td class="row-index text-center">               
                            <input type="text" name="ctitle[]" value="{{$value->title}}" class="form-control" placeholder="Enter Image Title" required />
                        </td>
                        <td class="row-index text-center">               
                            <img src="{{ asset('uploads/articles/photos/full'.$value->imgname) }}" alt="" title="" width = '100px' height='150px'>
                        </td>
                        <td class="row-index text-center">               
                            <input type="number" name="csortorder[]"  min='0' value="{{!empty($value->sort_order) ? $value->sort_order : 0}}" class="form-control" placeholder="Enter Sort Order" required />
                            <input type="hidden" name='ccateid[]' value="{{$value->id}}">

                        </td>
                        <td class="text-center">                                       
                            <button class="btn btn-danger remove"  type="button" id= "{{$value->id}}" onclick="deleteImage(this.id)">remove</button>                                          
                        </td>
                    </tr>
                  @endforeach 
                @else
                    <tr id="{{$ccount}}" >   
                        <td class="row-index text-center">               
                              <input type="text" name="ccolor[]"  class="form-control" placeholder="Enter color" required />
                        </td>                          
                        <td class="row-index text-center">               
                              <input type="text" name="ctitle[]"  class="form-control" placeholder="Enter Image Title" required />
                        </td>
                        <td class="row-index text-center">               
                                <input type="file" name="cimage[]"> 
                        </td>
                        <td class="row-index text-center">               
                              <input type="number" name="csortorder[]"  class="form-control" placeholder="Enter Sort Order" required />
                        </td>
                        <td class="text-center">
                        </td>
                    </tr> 
                @endif                     
               
            </tbody>
        </table>
        
        <button class="btn btn-md btn-primary" 
            id="addCateBtn" type="button">
          Add Catalog 
        </button>              
    </div>  --> 
           

    <div class="col-md-12"><hr/></div>
    <div class="col-md-12 text-right">    
        <button type="button" class="btn btn-success" onclick="saveArticle(this.form);" style="float:right; margin:5px;"><i class="fa fas fa-save"></i> Send for approval</button>
        <a href="{{ route("articles.index") }}" class="btn btn-danger" style="float:right; margin:5px;">Cancel</a>
       @if(!empty($article->code)) <a class="btn btn-md btn-primary" style="float:right; margin:5px;" href="{{ route('articleGeneratePDF',[$article->code])}} ">Print</a> @endif
    </div>
</div>
</form>
<!-- The Modal -->
<div class="modal" id="mModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form action="{{ route('articles-master-store') }}" method="post" name="mstFrm" onsubmit="saveMasterVal(this);return false;">
              @csrf
              <input type="hidden" name="masterType" id="masterType" value="">
              <input type="hidden" name="idToUpdate" id="idToUpdate" value="">
              <input type="hidden" name="mp" id="master_parent" value="">
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group colFam">
                        <label for="cf">Color Family</label>
                        <select name="cf" id="cf" class="form-control">
                            @foreach($colorFamilies as $colFam)
                                <option value="{{ $colFam->id }}">{{ $colFam->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group"><label for="nm">Name</label><input class="form-control" name="name" id="nm" required value="" placeholder="Enter Name"/></div>
                    <div class="form-group"><label for="cd">Description / Code</label><input class="form-control" name="code" id="cd" required value="" placeholder="Enter Description / Code"/></div>
                    <div class="form-group"><button class="btn btn-block btn-primary"><i class="fa fas fa-save"></i> Save</button></div>
                </div>
              </div>
          </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- The Modal -->

<div class="modal fade " id="ImageModal" tabindex="-1" role="dialog" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5> Update Image </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="post" id="upload_form" enctype="multipart/form-data">
    {{ csrf_field() }}
      <div class="modal-body">
        <div class="row" style="margin-top:10px;">
          <div class="col-md-6 form-group">
            <img id='articlepop'  src="" alt="First slide" style="max-height:200px;">
            
          </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)"  accept="image/*" required>
                <input type="hidden" name='imageId' id='updateid' value=''>
                <input type="hidden" name='code' id='articleid' value=''>
                <input type="hidden" name='color_name' id='colorid' value=''>
               
           </div>
           <div class="col-md-6 form-group">
            <label for="code"> Sort Order </label>
            <input type="number" name="order" id='order' min='0' value="" class="form-control" placeholder="Enter Sort Order" required />
                                 
          </div>
         <div class="col-md-6 form-group">
            <img id="preview_photo" src="" alt="Placeholder" width = '100px' height='150px' style="display:none;">
          </div>
        </div>
        
      </div>
      <div class="modal-footer">        
        <button type="submit"  class="btn btn-primary" id='updateSubmit'>Save changes</button>

      </div>
       </form>
    </div>
  </div>
</div>
@section('extraJs')
<script>
    var allArticles = jQuery.parseJSON('{!! $allArticles !!}');
    function showHideOptionsForVariations() {
        var article = $("#code").val();
        if($.trim(article) == '') {
            toastr.error('Please enter the article code');
            $("#colorFamily").val('');
            $("#sizeFamily").val('');
            return false;
        } else if(jQuery.inArray( article, allArticles) >= 0) {
            @if(empty($article->id))
            toastr.error('Article already exist in the system.');
            $("#colorFamily").val('');
            $("#sizeFamily").val('')
            return false;
            @endif
        }

        var optedColors = $("#colorFamily").val();
        var optedSizes = $("#sizeFamily").val();
        var colorsSelected = $("#colorFamily option:selected").map(function() {
            return $(this).text();
        }).get();
        var sizesSelected = $("#sizeFamily option:selected").map(function() {
            return $(this).text();
        }).get();
        
        var allowedClasses = [];
        var allowedColClasses = [];
        var allowedSizeClasses = [];
        var allowedLabels = [];
        var colVals = [];
        var sizeVals = [];
        var colIdVals = [];
        var sizeIdVals = [];

        if(optedColors.length > 0 && optedSizes.length <= 0) {
            // only size selected
            // $(".productRow").hide();
            // for(var i = 0; i < optedSizes.length) {
            //    allowedClasses.push('_Size_'+optedColors[i]);
            // }
        } else if(optedColors.length <= 0  && optedSizes.length > 0) {
            // only color selected
            // $(".productRow").hide();
            // for(var i = 0; i < optedColors.length) {
            //    allowedClasses.push('_Col_'+optedSizes[i]);
            // }
        } else if(optedColors.length > 0 && optedSizes.length > 0) {
            // both color and sizes selected
            for(var i = 0; i < optedColors.length; i++) {
                for(j = 0; j < optedSizes.length; j++) {
                    allowedClasses.push('_'+optedSizes[j]+'_'+optedColors[i]);
                    allowedLabels.push(sizesSelected[j]+'-'+colorsSelected[i]);
                    colVals.push(colorsSelected[i]);
                    colIdVals.push(optedColors[i]);
                    sizeVals.push(sizesSelected[j]);
                    sizeIdVals.push(optedSizes[j]);
                    allowedColClasses.push('_Col_'+optedColors[i]);
                    allowedSizeClasses.push('_Size_'+optedSizes[j]);
                }
            }
        } else {
            // $(".productRow").hide();
        }
        if(allowedClasses.length > 0) {
            $(".articleCombinations").show();
            $(".showSaveBtn").show();
            // $('.productRow').hide();
            //$(".tblArtcileVariants tbody").html();
            for(var t = 0; t < allowedClasses.length; t++) {
                var selectedClass = allowedClasses[t];
                var selectedColClass = allowedColClasses[t];
                var selectedSizeClass = allowedSizeClasses[t];
                if($("."+selectedClass).length > 0) continue;
                var productRowHtml = '\
                    <tr class="productRow ' + selectedClass + '  ' + selectedColClass + '  ' + selectedSizeClass + ' "> \
                    <input type="hidden" class="color_id color_id' + selectedClass + '" name="color_id[]" value="'+colIdVals[t]+'"> \
                    <input type="hidden" class="size_id size_id' + selectedClass + '" name="size_id[]" value="'+sizeIdVals[t]+'"> \
                    <input type="hidden" class="product_id product_id' + selectedClass + '" name="product_id[]" value="0"> \
                    <input type="hidden" class="variant_id variant_id' + selectedClass + '" name="variant_id[]" value="0"> \
                    <input type="hidden" class="variant variant' + selectedClass + '" name="variant[]" value="0"> \
                    <input type="hidden" class="qty qty' + selectedClass + '" name="qty[]" value="1000"> \
                    <input type="hidden" class="position position' + selectedClass + '" name="position[]" value="0"> \
                    <input type="hidden" class="item_code_val item_code_val' + selectedClass + '" name="item_code_val[]" value="'+colVals[t]+'-'+sizeVals[t]+'"> \
                    <input type="hidden" class="additional_price additional_price' + selectedClass + '" name="additional_price[]" value="0"> \
                    <td><input type="text" class="form-control item_code item_code' + selectedClass + '" name="item_code[]" value="'+colVals[t]+'-'+sizeVals[t]+'" required readonly></td> \
                    <td><input type="text" class="form-control article article' + selectedClass + '" name="article[]" value="'+article+'" required readonly></td> \
                    <td><input type="text" class="form-control color color' + selectedClass + '" name="color[]" value="'+colVals[t]+'" required readonly></td> \
                    <td><input type="text" class="form-control size size' + selectedClass + '" name="size[]" value="'+sizeVals[t]+'" required readonly></td> \
                    <td><input type="number" class="form-control pp pp' + selectedClass + '" name="pp[]" value="0" step="any" min="1" required></td> \
                    <td><input type="number" class="form-control mrp mrp' + selectedClass + '" name="mrp[]" value="0" step="any" min="1" required></td> \
                    <td><input type="number" class="form-control wsp wsp' + selectedClass + '" name="wsp[]" value="0" step="any" min="1" required></td> \
                </tr> \
                ';
                $(".tblArtcileVariants tbody").append(productRowHtml);
            }
        } else {
            $(".articleCombinations").hide();
            $(".showSaveBtn").hide();
        }
        console.log(optedColors);
        console.log(optedSizes);
        // console.log(colorsSelected);
        // console.log(sizesSelected);
    }

    function fillInPrice() {
        var colorSelected = $("#colorFamily1").val();
        var sizeSelected = $("#sizeFamily1").val();
        var pp = $("#fillInPP").val();
        var mrp = $("#fillInMrp").val();
        var wsp = $("#fillInWsp").val();
        if($.trim(pp) == '') {
            pp = 0;
            $("#fillInPP").val(0)
        }
        if($.trim(mrp) == '') {
            mrp = 0;
            $("#fillInMrp").val(0)
        }
        if($.trim(wsp) == '') {
            mrp = 0;
            $("#fillInWsp").val(0)
        }
        if(parseFloat(pp) <= 0 || parseFloat(mrp) <= 0 || parseFloat(wsp) <= 0) {
            alert("Prices should be greater than zero!");
            return false;
        }
        var targetClass = [];
        if(colorSelected == 'all' && sizeSelected == 'all') {
            targetClass.push('productRow');
        } else if(colorSelected == 'all' && sizeSelected != 'all') {
            $('.productRow').each(function(index) {
                if($('._Size_'+sizeSelected).is(':visible')) {
                    targetClass.push('_Size_'+sizeSelected);
                } else {
                    // console.log('_Size_'+sizeSelected + ' > not visible');
                }
            });
        } else if(colorSelected != 'all' && sizeSelected == 'all') {
            $('.productRow').each(function(index) {
                if($('._Col_'+colorSelected).is(':visible')) {
                    targetClass.push('_Col_'+colorSelected);
                }
            });
        } else if(colorSelected != 'all' && sizeSelected != 'all') {
            targetClass.push('_'+sizeSelected+'_'+colorSelected);
        }

        console.log(targetClass);
        for(var t = 0; t < targetClass.length; t++) {
            var tcls = targetClass[t];
            if($('.'+tcls).is(':visible')) {
                $('.'+tcls).find('input.pp').val(pp);
                $('.'+tcls).find('input.mrp').val(mrp);
                $('.'+tcls).find('input.wsp').val(wsp);
            }
        }
    }

    function addNewMaster(t,i) {
        $("#mModal .modal-title").html('Add new ' + t);
        document.mstFrm.reset();
        $("#mModal #masterType").val(t);
        $("#mModal #idToUpdate").val(i);
        if(t == 'master') {
            var idVal = i.replace("masterid_","");
            $("#master_parent").val(idVal);
            $(".colFam").hide();
        } else if(t == 'color') {
            $(".colFam").show();
        } else {
            $(".colFam").hide();
        }
        $("#mModal").modal('show');
    }

    function saveMasterVal(frm) {
        $.post("{{ route('articles-master-store') }}", {
            _token: document.tokenForm._token.value,
            name: frm.name.value,
            code: frm.code.value,
            cf: frm.cf.value,
            mp: frm.mp.value,
            masterType: frm.masterType.value
        }, function(result) {
            var response = jQuery.parseJSON(result);
            if (response.status == false) {
                toastr.error(response.message);
                return false;
            } else {
                var idToUpdate = $("#idToUpdate").val();
                if(frm.masterType.value == 'size') {
                    $('#'+idToUpdate).append($('<option>', { value : response.id }).text(response.code));
                } else {
                    $('#'+idToUpdate).append($('<option>', { value : response.id }).text(response.name));
                }
                $('#'+idToUpdate).select2();
                toastr.success(response.message);
                document.mstFrm.reset();
                $("#mModal").modal('hide');
                return false;
            }
            return false;
        });
        return false;
    }
     var addmorecount = 0;
    function saveArticle(frm) { 
        var code = frm.code.value;
        var name = frm.name.value;
        var hsn_id = frm.hsn_id.value;
        var category_id = frm.category_id.value;
        var brand_id = frm.brand_id.value;
        var unit_id = frm.unit_id.value;
        var purchase_unit_id = frm.purchase_unit_id.value;
        var sale_unit_id = frm.sale_unit_id.value;
        var colorFamilycor = frm.colorFamilycor.value;
        var colormodel = frm.colormodel.value;
        var articlemodel = frm.articlemodel.value;
       
        var error = '';
        if($.trim(name) == '') {
            error += 'Article name is empty.<br>';
        } else if($.trim(code) == '') {
            error += 'Article code is empty.<br>';
        } else if(jQuery.inArray( code, allArticles) >= 0) {
            @if(empty($article->id))
            error += 'Article already exist in the system.<br>';
            @endif
        } else if($.trim(hsn_id) == '') {
            error += 'HSN is empty.<br>';
        } else if($.trim(category_id) == '') {
            error += 'Category is empty.<br>';
        } else if(parseInt(category_id) <= 0) {
            error += 'Category is empty.<br>';
        } else if($.trim(brand_id) == '') {
            error += 'Brand is empty.<br>';
        } else if($.trim(unit_id) == '') {
            error += 'Fabric is empty.<br>';
        } else if($.trim(purchase_unit_id) == '') {
            error += 'Designer is empty.<br>';
        }  else if($.trim(sale_unit_id) == '') {
            error += 'Season is empty.<br>';
        }
        // else if($.trim(colorFamilycor) === '') { 
        //     error += 'Suggest Cordinates Master Color is empty.<br>';
        // }else if($.trim(articlemodel) === '') { 
        //     error += 'Suggest Cordinates Article is empty.<br>';
        // }else if(addmorecount <= 0){ 
        //       error += 'PLease Add Suggest Cordinates .<br>';
        // }
       
        if(error != '') {
            toastr.error(error);
            return false;
        } else {
            frm.submit();
        }
    }

    function showHideExtraMasters() {
        if($('.extraMasters').is(':visible')) {
            $('.showExtraMasters').show();
            $('.hideExtraMasters').hide();
            $('.extraMasters').hide();
        } else {
            $('.showExtraMasters').hide();
            $('.hideExtraMasters').show();
            $('.extraMasters').show();
        }
    }

     $(document).ready(function(){
       
    $('.btnrowAddDelete').click(function(){
        var txtTeamAddDelete = $('.txtTeamAddDelete').val();
        var txtCricketerAddDelete = $('.txtCricketerAddDelete').val();
        var txtScoreAddDelete = $('.txtScoreAddDelete').val();
        $('.TableAddDelete tbody').append("<tr><td><input name='master_color[]' id='article' class='form-control' value='"+txtTeamAddDelete+"' ></td><td><input name='sustyle[]' id='qty' class='form-control' value='"+txtCricketerAddDelete+"' ></td><td><input name='sucolor[]' id='user' class='form-control' value='"+txtScoreAddDelete+"' ></td><td><button type='button' class='btndeleterowadded btn'>x</button></td></tr>");
        addmorecount++;
    });
    $(document).on('click', 'button.btndeleterowadded', function(){
        $(this).closest('tr').remove();
        return false;
    });

    $('.componentAddDelete').click(function(){
        var componentadd = $('.componentadd').val();  
        var componentqty = $('.componentqty').val(); 
        var componentfab = $('.componentfab').val(); 
        var componentfabdetail = $('.componentfabdetail').val();      
        $('.TableAddcompont tbody').append("<tr><td><input name='component[]' id='article' class='form-control' value='"+componentadd+"' ></td><td><input name='componentqty[]' id='qty' class='form-control' value='"+componentqty+"' ></td><td><input name='componentfab[]' id='qty' class='form-control' value='"+componentfab+"' ></td><td><input name='componentfabdetail[]' id='qty' class='form-control' value='"+componentfabdetail+"' ></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();
              }
            }    

           })
    });

    var rowIdx = ;
    var reqsubsub = null;    
    $('[name=category_id_temp]').val(reqsubsub);
      
    // 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="acolor[${rowIdx}]"  class="form-control" placeholder="Enter Image Color" required />
              </td>
              <td class="row-index text-center">               
                   <input type="text" name="atitle[${rowIdx}]"  class="form-control" placeholder="Enter Image Title" required />
              </td>
              <td class="row-index text-center">  
                  <input type="file" name="aphoto[${rowIdx}]">             
              </td>
              <td class="row-index text-center">    
                   <input type="number" name="asortorder[${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 = ;
    $('#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="ccolor[${crowIdx}]"  class="form-control" placeholder="Enter Image Color" required />
                  </td>
                  <td class="row-index text-center">               
                       <input type="text" name="ctitle[${crowIdx}]"  class="form-control" placeholder="Enter Image Title" required />
                  </td>
                  <td class="row-index text-center">  
                      <input type="file" name="cimage[${crowIdx}]">             
                  </td>
                  <td class="row-index text-center">    
                       <input type="number" name="csortorder[${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--;
    });

     
});

function deleteImage(id)
{ 
     var _token   = $('meta[name="csrf-token"]').attr('content');   

      $.ajax({
        type: "get",
        url: "{{ route('delete-article-image') }}",
        data: {
          id: id,                
          _token: _token
        },
        dataType: "json",
        success: function(response) { 
            toastr.success(response.massage);
           // window.location.reload();
           //console.log(response.massage);
           //toastr.success(response.massage);
        },
        error: function(response) {
          console.log(response.responseJSON.errors);
        }
    
  
      });
}

$(function () {
  $('#ImageModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var newSrc = button.data('image'); // Extract info from data-* attributes
    var updateimg = button.data('imageid');
    var article = button.data('code');
    var color = button.data('colorname');
    var editid = button.data('editid');
   console.log(newSrc);
     $('#articlepop').attr('src', newSrc);
     $('#updateid').val(updateimg);
     $('#articleid').val(article);
     $('#colorid').val(color);
     $('#editids').val(editid);
  });
});

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").attr("src", reader.result);
        }

        reader.readAsDataURL(file);
    }
}

$('#upload_form').on('submit', function(event){       
   event.preventDefault();
    var imageid = $('#updateid').val();
      
    var _token   = $('meta[name="csrf-token"]').attr('content');   

      $.ajax({
        type: "POST",
        url: "{{ route('update-article-image') }}",
       
       data:new FormData(this),
       dataType:'JSON',
       contentType: false,
       cache: false,
       processData: false,
        dataType: "json",
        success: function(response) { //console.log(response); return false;
           $('#ImageModal').hide();
           //toastr.success(response.massage);
           var url = "{{url('article/images/edit')}}"+"/"+response.editid;
           console.log(url); 
            window.location.reload(url);
        },
        error: function(response) {
          console.log(response.responseJSON.errors);
        }
      });
  
});
</script>
@endsection