@extends('layouts.backend')
@section('mainContentArea')
<h4 class="my-4 text-center">
    Update Article - {{ !empty($article->name)  ? $article->name : ''}}
    <a href="{{ route('article-update',['id' => $article->id]) }}" class="btn btn-dark float-right btn-sm" style="margin-left: 10px;"> Edit</a>
    <a onclick="history.back();" class="btn btn-info float-right btn-sm"> Back</a>
</h4>
<div class="row">
    <div class="col-md-2 col-3">
        <div class="articlemenu">
            <ul>
                <li><a href="#m_basic" class="active">Basic Details</a></li>
                <li><a href="#m_description">Description</a></li>
                <li><a href="#m_attributes">Attributes</a></li>
                <li><a href="#m_variations">Variations</a></li>
                <li><a href="#m_price">Price</a></li>
                <li><a href="#m_component">Component Details</a></li>
                <li><a href="#m_coordinates">Suggested Cordinates</a></li>
                <li><a href="#m_images">Article Images</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-10 col-9">
        <div class="card card-default">
            <div class="card-header">
            </div>
            <div class="card-body">
            @section('extraCss')
            <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css">
            <link href="{{ asset(BACKEND_THEME_CSS_PATH . 'uploadfile.css') }}" rel="stylesheet">
            <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;
            }
            .modal-body {
                height: 80vh;
                overflow-y: scroll;
            }
            .modal-lg, .modal-xl {
                max-width: 90%;
            }
            .articlemenu a {
                display: block;
                padding: 8px 8px;
                color: #464646;
                font-size: 110%;
            }
            .articlemenu a.active {
                padding-left: 4px;
                border-left: solid 4px #58c9f3;
                color: #464646;
                font-weight: bold;
            }
            .articlemenu.fixed {
                position: fixed;
                margin-top: -40px;
            }
            .ajax-upload-dragdrop {
                display: none;
            }
            </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 = [];
            $acolor = [];
            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) {
                                        $acolor[$col->id] = $col->name;
                                        $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-draftapproval') }}"> --}}
                <form   method="POST"    enctype="multipart/form-data"
                @if(isset($exitsarticle->id))
                        action="{{ route('articles-update', ['id' => $article->id]) }}"
                @else
                action="{{ route('articles-store') }}"
                @endif >

            @csrf
            @isset($exitsarticle->id)
                {{ method_field('PUT') }}
            @endisset
            <div class="row">
                <div class="col-md-12" id="m_basic"><h5>Basic Details</h5><hr class="my-2"/></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 : ''}}">
                    <input type="hidden" name="d_id" id="d_id" class="form-control" value="{{ !empty($draftarticle->id)  ? $draftarticle->id : ''}}">
                    <input type="hidden" name="a_id" id="a_id" class="form-control" value="{{ !empty($article->id)  ? $article->id : ''}}">
                </div>
                <div class="col-md-4 form-group">
                    <label for="code">Article Code</label>
                    <select name="a_code" class="select2 form-control">
                        <option value="">Select</option>
                    </select>
                    <input name="code" type="hidden" 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="category_id">Category*</label>
                    <select name="category_id" id="category_id" class="form-control select2">
                    @php $dash='';
                    if($article->category_id!=0)
                        $category['parent_id']=isset($article->category_id)?$article->category_id:0;
                    else {
                        $category['parent_id']=isset($article->sub_category_id)?$article->sub_category_id:0;
                    }
                    @endphp
                    @foreach($sections as $section)
                    <option value="{{ $section->id }}">{{ $section->name }}</option>
                    @if (count($section->childs))
                        @foreach ($section->childrenCategories as $childCategory)
                        @include('backend.articles.subcategory', ['child_category' => $childCategory])
                        @endforeach
                    @endif
                    @endforeach
                    </select>
                </div>
                <div class="col-md-4 form-group d-none">
                    <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="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="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 Details </label>
                    <textarea name="fab_desc" id="fab_desc" class="form-control">{{ !empty($article->fab_desc)  ? $article->fab_desc : ''}}</textarea>
                </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>
                    <input type="text" name="year" value="{{ date('Y') }}" readonly="readonly" class="form-control">
                </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="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="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="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-4 form-group">
                    <label for="weight">Weight (in gm) </label>
                    <input name="weight" id="weight" class="form-control" type="number" step="0.1" value="{{ !empty($article->weight)  ? $article->weight : ''}}">
                </div>
                <div class="col-md-4 form-group">
                    <label for="gross_weight">Gross Weight (in gm) </label>
                    <input name="gross_weight" id="gross_weight" class="form-control" type="number" step="0.1" value="{{ !empty($article->gross_weight)  ? $article->gross_weight : ''}}">
                </div>
                <div class="col-md-4 form-group">
                    <label for="measurement">Measurement (L x W x H in cm) </label>
                    <input name="measurement" id="measurement" class="form-control" placeholder="e.g. 10 x 15 x 0.6" value="{{ !empty($article->measurement)  ? $article->measurement : ''}}">
                </div>

                <div class="col-md-12 mt-5" id="m_description"><h5>Description</h5><hr class="my-2"/></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" rows="4">{{ !empty($article->long_desc)  ? $article->long_desc : 'None'}}</textarea>
                </div>
                <div class="col-md-12 mt-5" id="m_attributes">
                    <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 class="my-2"/>
                    <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-4 extraMasters form-group" >
                        <label><b>{{ $master->name }}  </b> {!! str_replace('{master}','master',str_replace('{field}','masterid_'.$master->id,$addNew)) !!}</label>
                        <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 mixerDiv mt-5" id="m_variations">
                    <h5>Variations</h5><hr class="my-2"/>
                    <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>
                
                <div class="col-md-12 mixerDiv mt-5" id="m_price">
                    <h5>Price</h5><hr class="my-2"/>
                </div>
                @include("backend.articles.product-combinationsnew")

                <div class="col-md-12 mixerDiv mt-5" id="m_component">
                <h5>Component Details</h5><hr class="my-2"/>   
                </div>

                <div class="col-md-12 mixerDiv">
                    <div class="row"> 
                        <div class="col-md-2">
                            <label for="Style">Component </label>
                            <input type="text" class="form-control componentadd"   >                    
                        </div>

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

                        <div class="col-md-3">
                            <label for="Quantity">Fabric</label>
                            {{-- <input type="text" class="form-control componentfab"  > --}}
                            <select class="form-control select2 componentfab" >
                                <option value="">Select Option</option>
                                @foreach($fabrics as $fabric)
                                <option value="{{ $fabric->name.','.$fabric->quality.','.$fabric->composition.','.$fabric->construction.','.$fabric->weave }}">{{ $fabric->name.','.$fabric->quality.','.$fabric->composition.','.$fabric->construction.','.$fabric->weave }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- <div class="col-md-3">
                            <label for="Quantity">Fabric Details</label>
                            <input type="text" class="form-control componentfabdetail"  >
                        </div> --}}

                        <div class="col-md-3">
                            <label for="Quantity">&nbsp;</label><br>
                            <button type="button" class="componentAddDelete btn btn-primary">Add Component</button> 
                        </div>  
                    </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 mt-5" id="m_coordinates"><h5>Suggested Cordinates</h5><hr class="my-2"/></div>
                
                <div class="col-md-12"> 
                    <div class="row">
                        <div class=" col-md-3 form-group ">
                            <label for="Style">Select 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)
                                @foreach($colorFamily->colors as $col)
                                    @if(in_array($col->id, $existingColors))
                                        <option value="{{ $col->name }}" >{{ $col->name }}</option>
                                    @endif
                                @endforeach
                            @endif
                            @endforeach
                            </select>
                            
                        </div> 
                        <div class=" col-md-6 form-group">
                            <label for="Quantity">ARTICLE</label><br>
                            <button type="button" class="btn btn-outline-secondary w-100" data-toggle="modal" data-target="#opencatalogmodals">+ Select Article</button> 
                        </div>
                        <div class=" col-md-3 form-group">
                            <label for="Quantity">&nbsp;</label><br>
                            <button type="button" class="btnrowAddDelete btn btn-primary">Add Cordinates</button> 
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="opencatalogmodals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Select Article</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <iframe src="{{ route('admin-order-category') }}" width="100%" height="100%" frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation" allowtransparency="true"></iframe>
                        </div>
                        </div>
                    </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 mt-5" id="m_images"><h5> Article Images</h5><hr class="my-2"/></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 $aimages = [];
                            if(!empty($ArticleImg) && count($ArticleImg) > 0) {
                                foreach($ArticleImg as $key => $value) {
                                    $aimages[$value->color_id] = array('id'=>$value->id,'color_id'=>$value->color_id,'color_name'=>$value->color_name,'imgname'=>$value->imgname,'code'=>$value->code);
                                }
                            }
                            if(!empty($DraftArticleImg) && count($DraftArticleImg) > 0) {
                                foreach($DraftArticleImg as $key => $value) {
                                    $aimages[$value->color_id] = array('id'=>$value->id,'color_id'=>$value->color_id,'color_name'=>$value->color_name,'imgname'=>$value->imgname,'code'=>$value->code);
                                }
                            }
                            @endphp
                            @foreach($acolor as $keys => $values)
                                @if(!empty($aimages) && count($aimages) > 0)       
                                        @if(array_key_exists($keys, $aimages))
                                            <tr> 
                                                <input type="hidden" name="imgid[]"  value="{{ $aimages[$keys]['id'] }}"  />
                                                <td class="row-index text-center">
                                                    {{ $values }}
                                                    <input type="hidden" 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="{{ $aimages[$keys]['imgname'] }}">            
                                                    <img src="{{ asset('uploads/articles/photos/thumbnail'.$aimages[$keys]['imgname']) }}" alt="" title="" width = '' height='100'>
                                                </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= "{{ $aimages[$keys]['id'] }}" onclick="deleteImage(this.id)">remove</button>-->                                          
                                                    <button type="button" class="btn btn-info uploadarticleimages" id= "{{$keys}}" data-code= "{{$article->code}}" data-title="{{$values}} Color Images" data-color="{{$values}}" ><i class="fa fa-pencil-square-o"></i> View</button>
                                                
                                                </td>
                                            </tr>
                                            @else
                                            <tr>
                                                <td class="row-index text-center">               
                                                    {{ $values }}
                                                    <input type="hidden" 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">               
                                                    No Image Uploaded
                                                </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">                                       
                                                    <button class="btn btn-primary uploadarticleimages"  type="button" id= "{{$keys}}" data-code= "{{$article->code}}" data-title="{{$values}} Color Images" data-color="{{$values}}">Upload</button>
                                                </td>
                                            </tr>
                                        @endif                                           
                                @else
                                    <tr>
                                        <td class="row-index text-center">               
                                            {{ $values }}
                                            <input type="hidden" 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">               
                                            No Image Uploaded
                                        </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">                                       
                                            <button class="btn btn-primary uploadarticleimages"  type="button" id= "{{$keys}}" data-code= "{{$article->code}}" data-title="{{$values}} Color Images" data-color="{{$values}}">Upload</button>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                            
                            </tbody>
                        </table>                     
                    </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> Approval </button>
        <a href="{{route('articles-updatelist',['is_update' => 1])}}" 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>
            

            <div class="modal fade " id="GroupImageModal" tabindex="-1" role="dialog" aria-hidden="true" >
                <div class="modal-dialog modal-xl" 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 id="aimages"></div>
                        <div id="articleimageupload"><div></div></div>
                    </div>
                    <div class="modal-footer">        
                        <button type="button" class="btn btn-primary" id="uimages">Save changes</button>

                    </div>
                    </form>
                    </div>
                </div>
            </div>
            @section('extraJs')
            <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.6/js/dx.all.js"></script>
            <script type="text/javascript" src="{{ asset(BACKEND_THEME_JS_PATH . 'jquery.uploadfile.min.js') }}"></script>
            <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><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 = 0;
                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--;
                });

                $(window).scroll(function(e) {  
                    if ($(window).scrollTop() > 100) { 
                        $('.articlemenu').addClass("fixed");
                    } else {
                        $('.articlemenu').removeClass("fixed");
                    } 
                });

                
            });

            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);
            });
            $('#i_price').click(function() {
                $('#pricetable').toggleClass('d-none');
            });
            $(".articlemenu a").click(function(event) {
                event.preventDefault();
                $(".articlemenu a").removeClass('active');
                $(this).addClass('active');
                $('html, body').animate({
                    scrollTop: $($(this).attr('href')).offset().top - 100
                }, 2000);
            });
            });

            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);
                    }
                });
            });

            $('.uploadarticleimages').click(function() {
                var step = 1;
                var title = $(this).attr('data-title');
                var imageid = $('#updateid').val();                
                var colorid = $(this).attr('id');
                var code = '{{ isset($article->code)?$article->code:'' }}';
                var _token   = '{{ csrf_token() }}';
                var colorname   = $(this).attr('data-color');
                var articleid   = '{{ isset($article->id)?$article->id:'' }}';
                $('#articleimageupload').remove();
                $('#GroupImageModal .modal-body').append('<div id="articleimageupload"><div></div></div>');
                $.ajax({
                    type: "POST",
                    url: "{{ route('article-image-list-bycolordraft') }}",
                    data: {colorid: colorid, code: code, _token: _token, articleid: articleid},
                    success: function(response) {
                        var j = JSON.parse(response);
                        var aimages = '<div class="row">';
                        var extraObj = $('#articleimageupload > div').uploadFile({
                            url:"{{ route('image-upload-bycolordraft') }}",
                            fileName:"myfile",
                            acceptFiles:"image/*",
                            showPreview:true,
                            previewHeight: "auto",
                            previewWidth: "100px",
                            showDelete: true,
                            onLoad:function() {
                                if(j.images.length > 0) {
                                    $.each(j.images, function(key, value) {
                                        step++;
                                        aimages += "<div class='col-sm-4 mb-3'><div class=' border border-info rounded p-3'><div class='row'>\
                                                    <div class='col-md-3'><img src='{{  url('') }}/uploads/articles/photos/full"+value.imgname+"' height='100'></div>\
                                                    <div class='col-md-9'><div class='row'><div class='col-sm-6'><div class='form-group'><label class='m-0'>Sort Order</label><input type='number' min='1' value='"+value.sort_order+"' name='sort_order' class='form-control'></div></div><div class='col-sm-6'><div class='form-group'><label class='m-0'>Title</label><input type='text' name='title' value='"+value.title+"' class='form-control'></div></div></div>\
                                                    <div class='row'><div class='col-md-12'></div></div></div>\
                                                </div><input type='hidden' name='color_id' value='"+colorid+"'><input type='hidden' name='color_name' value='"+colorname+"'><input type='hidden' name='article' value='"+code+"'></div></div>";
                                    });
                                }
                                aimages += '</div>';
                                $('#aimages').html(aimages);
                            },
                            extraHTML:function() {
                                    var html = "<div class='row'>\
                                                    <div class='col-md-5'><div class='form-group'><label>Sort Order</label><input type='number' min='1' value='"+(step++)+"' name='sort_order' class='form-control'></div></div>\
                                                    <div class='col-md-7'><div class='form-group'><label>Title</label><input type='text' name='title' class='form-control'></div></div>\
                                                </div><input type='hidden' name='_token' value='{{ csrf_token() }}'><input type='hidden' name='color_id' value='"+colorid+"'><input type='hidden' name='color_name' value='"+colorname+"'><input type='hidden' name='article' value='"+code+"'><input type='hidden' name='articleid' value='"+articleid+"'>";
                                    return html;    		
                            },
                            onSuccess:function(files,data,xhr,pd) {
                                $('#GroupImageModal').modal('hide');
                                console.log(data.imageid);
                                $('#m_images').append('<input type="hidden" name="aphoto[]" id="'+data.imageid+'" value="'+data.imageid+'">');
                            },
                            autoSubmit:false
                        });
                        $("#uimages").click(function() {
                            extraObj.startUpload();
                        });
                    },
                    error: function(response) {
                        console.log(response.responseJSON.errors);
                        $('#GroupImageModal').modal('show');
                    }
                });
                $('#GroupImageModal .modal-header h5').text(title);
                $('#GroupImageModal').modal('show');
            });

            function changeprice() {
                $('#mrp_price').val($('#pp_price').val() * $('#pp_price').attr('data-mrp'));
                $('#wsp_price').val($('#pp_price').val() * $('#pp_price').attr('data-wsp'));
            }
            </script>
            @endsection
            </div>
        </div>
    </div>
</div>
@endsection