@php
    $size = sizeof($skillDetails);
@endphp
<div class="row clearfix p-1">
    <div class="col-1">
        <div class="tabs" data-tabby>
            <div class="bar">
                @php
                    $cnt=1;
                    $cls_new="";
                $skillDetailsLater = $skillDetails;
                @endphp
                @foreach ($skillDetails as $pskills)

                    @if($cnt==1)
                        @php
                            $cls_new="data-tabby-active";
                        @endphp
                    @endif

                    <div class="status"  onclick="set_major_skill(this)" id="{{ $pskills['id'] }}" data-tabby-bar="{{$cnt}}" {{ $cls_new }} >{{ $pskills['skill'] }}</div>


                    @php $cnt++;
                                    $cls_new="";@endphp
                @endforeach
                <div class="status"  onclick="set_major_skill(this)" id="99999" data-tabby-bar="7"  >ALL</div>
            </div>
            <div class="content" id="tab-text">
                <div class="col-1 seach-bar">
                    <div class="col-2">


                        <div class="ck-button">
                            <label>
                                <input class="class_skill_name" type="checkbox" name="skill_rank_name"  value="1" id="skill_rank_1" skillid="138">
                                <span>A</span>
                            </label>
                        </div>


                        <div class="ck-button">
                            <label>
                                <input class="class_skill_name" type="checkbox" name="skill_rank_name"  value="2" id="skill_rank_2" skillid="138">
                                <span>AA</span>
                            </label>
                        </div>
                        <div class="ck-button">
                            <label>
                                <input class="class_skill_name" type="checkbox" name="skill_rank_name"  value="3" id="skill_rank_3" skillid="138">
                                <span>AAA</span>
                            </label>
                        </div>



                    </div>

                    <div class="col-2">
                        <div class="search-fillter">
                            <input type="text" name="search" placeholder="Search" id="tags">
                            <input type="hidden" id="auto_ids" name="auto_ids" value="0">
                            <button type="submit" class="submit"></button>
                        </div>
                    </div>
                </div>
                <div data-tabby-content="1" data-tabby-active>
                    <form action="#" id="frm_1" name="frm_1">
                        <input id="selected_skills" name="selected_skills" value="0" hidden="hidden">
                        <input type="hidden" id="skill_rank_cat" name="skill_rank_cat" value="0">
                        <input type="hidden" id="skill_major" name="skill_major" value="@php echo $skillDetailsLater[0]['id'];@endphp">

                        <div class="col-1">
                            <!-- Skills Box starts from here -->


                            @php

                                $key_id = $skillDetailsLater[0]['id'];
                                 //tester($pskills['skill_details'][$key_id]);
                                $skill_details = $skillDetailsLater[0]['skill_details'][$key_id];
                                //print_r( $skill_details);
                            @endphp
                            @foreach ($skill_details as $detail)


                                <div class="skills-box">

                                    <div class="col-4 skills">
                                        <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                            <label class="btn btn-default">
                                                <div class="itemcontent">
                                                    <input type="checkbox" name="var_id[]" autocomplete="off"
                                                           value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox" >
                                                    <h5>{{ $detail['skill'] }}</h5>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-3-4 skills-bar">
                                        <div class="col-3-4 range">
                                            <input type="hidden" id="mytype" name="mytype" value="1">
                                            <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                            <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                            <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                                   class="class_skilllevel" value="0">
                                            <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                            <output>0</output>
                                        </div>
                                        <div class="col-4">Skills Level</div>
                                        <div class="col-3-4 range">
                                            <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                                   class="class_skillyears" value="0">
                                            <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                            <output>0</output>
                                        </div>
                                        <div class="col-4">Years</div>
                                    </div>
                                </div>


                        @endforeach
                        <!-- Skills Box End here -->
                        </div>
                    </form>



                </div>

                <div data-tabby-content="2">
                    <form action="#" id="frm_2" name="frm_2">
                        <div class="col-1">
                            <!-- Skills Box starts from here -->

                            @php

                                $key_id = $skillDetailsLater[1]['id'];
                                 //tester($pskills['skill_details'][$key_id]);
                                $skill_details = $skillDetailsLater[1]['skill_details'][$key_id];
                                //print_r( $skill_details);
                            @endphp
                            @foreach ($skill_details as $detail)

                                <div class="skills-box">
                                    <div class="col-4 skills">
                                        <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                            <label class="btn btn-default">
                                                <div class="itemcontent">
                                                    <input type="checkbox" name="var_id[]" autocomplete="off"
                                                           value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox">
                                                    <h5>{{ $detail['skill'] }}</h5>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-3-4 skills-bar">
                                        <div class="col-3-4 range">
                                            <input type="hidden" id="mytype" name="mytype" value="1">
                                            <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                            <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                            <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                                   class="class_skilllevel" value="0">
                                            <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                            <output>0</output>
                                        </div>
                                        <div class="col-4">Skills Level</div>
                                        <div class="col-3-4 range">
                                            <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                                   class="class_skillyears" value="0">
                                            <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                            <output>0</output>
                                        </div>
                                        <div class="col-4">Years</div>
                                    </div>
                                </div>
                            {{--@endif--}}

                        @endforeach
                        <!-- Skills Box End here -->
                        </div>
                    </form>
                </div>

                <div data-tabby-content="3">
                    <div class="col-1">
                        <!-- Skills Box starts from here -->

                        @php

                            $key_id = $skillDetailsLater[2]['id'];
                             //tester($pskills['skill_details'][$key_id]);
                            $skill_details = $skillDetailsLater[2]['skill_details'][$key_id];
                            //print_r( $skill_details);
                        @endphp
                        @foreach ($skill_details as $detail)

                            <div class="skills-box">
                                <div class="col-4 skills">
                                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                        <label class="btn btn-default">
                                            <div class="itemcontent">
                                                <input type="checkbox" name="var_id[]" autocomplete="off"
                                                       value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox">
                                                <h5>{{ $detail['skill'] }}</h5>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-3-4 skills-bar">
                                    <div class="col-3-4 range">
                                        <input type="hidden" id="mytype" name="mytype" value="1">
                                        <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                        <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                               class="class_skilllevel" value="0">
                                        <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Skills Level</div>
                                    <div class="col-3-4 range">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                               class="class_skillyears" value="0">
                                        <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Years</div>
                                </div>
                            </div>

                    @endforeach
                    <!-- Skills Box End here -->
                    </div>
                </div>
                <div data-tabby-content="4">
                    <div class="col-1">
                        <!-- Skills Box starts from here -->

                        @php

                            $key_id = $skillDetailsLater[3]['id'];
                             //tester($pskills['skill_details'][$key_id]);
                            $skill_details = $skillDetailsLater[3]['skill_details'][$key_id];
                            //print_r( $skill_details);
                        @endphp
                        @foreach ($skill_details as $detail)

                            <div class="skills-box">
                                <div class="col-4 skills">
                                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                        <label class="btn btn-default">
                                            <div class="itemcontent">
                                                <input type="checkbox" name="var_id[]" autocomplete="off"
                                                       value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox">
                                                <h5>{{ $detail['skill'] }}</h5>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-3-4 skills-bar">
                                    <div class="col-3-4 range">
                                        <input type="hidden" id="mytype" name="mytype" value="1">
                                        <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                        <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                               class="class_skilllevel" value="0">
                                        <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Skills Level</div>
                                    <div class="col-3-4 range">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                               class="class_skillyears" value="0">
                                        <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Years</div>
                                </div>
                            </div>

                    @endforeach
                    <!-- Skills Box End here -->
                    </div>
                </div>
                <div data-tabby-content="5">
                    <div class="col-1">
                        <!-- Skills Box starts from here -->

                        @php

                            $key_id = $skillDetailsLater[4]['id'];
                             //tester($pskills['skill_details'][$key_id]);
                            $skill_details = $skillDetailsLater[4]['skill_details'][$key_id];
                            //print_r( $skill_details);
                        @endphp
                        @foreach ($skill_details as $detail)

                            <div class="skills-box">
                                <div class="col-4 skills">
                                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                        <label class="btn btn-default">
                                            <div class="itemcontent">
                                                <input type="checkbox" name="var_id[]" autocomplete="off"
                                                       value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox">
                                                <h5>{{ $detail['skill'] }}</h5>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-3-4 skills-bar">
                                    <div class="col-3-4 range">
                                        <input type="hidden" id="mytype" name="mytype" value="1">
                                        <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                        <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                               class="class_skilllevel" value="0">
                                        <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Skills Level</div>
                                    <div class="col-3-4 range">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                               class="class_skillyears" value="0">
                                        <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Years</div>
                                </div>
                            </div>

                    @endforeach
                    <!-- Skills Box End here -->
                    </div>
                </div>
                <div data-tabby-content="6">
                    <div class="col-1">
                        <!-- Skills Box starts from here -->

                        @php

                            $key_id = $skillDetailsLater[5]['id'];
                             //tester($pskills['skill_details'][$key_id]);
                            $skill_details = $skillDetailsLater[5]['skill_details'][$key_id];
                            //print_r( $skill_details);
                        @endphp
                        @foreach ($skill_details as $detail)

                            <div class="skills-box">
                                <div class="col-4 skills">
                                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                        <label class="btn btn-default">
                                            <div class="itemcontent">
                                                <input type="checkbox" name="var_id[]" autocomplete="off"
                                                       value="{{ $detail['id'] }}" id="{{ $detail['id'] }}_btn" class="checkbox">
                                                <h5>{{ $detail['skill'] }}</h5>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-3-4 skills-bar">
                                    <div class="col-3-4 range">
                                        <input type="hidden" id="mytype" name="mytype" value="1">
                                        <input type="hidden" id="{{ $detail['id'] }}_cat_id" name="{{ $detail['id'] }}_cat_id" value="{{ $key_id }}">
                                        <input type="hidden" id="{{ $detail['id'] }}_sub_id" name="{{ $detail['id'] }}_sub_id" value="{{ $detail['id'] }}">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skilllevel" name="{{ $detail['id'] }}_skilllevel"
                                               class="class_skilllevel" value="0">
                                        <input id="{{ $detail['id'] }}_skl" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>


                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Skills Level</div>
                                    <div class="col-3-4 range">
                                        <input type="hidden"  id="{{ $detail['id'] }}_skillyears" name="{{ $detail['id'] }}_skillyears"
                                               class="class_skillyears" value="0">
                                        <input id="{{ $detail['id'] }}_sky" type="range" min="0" max="10" step="0" value="0" stick="0" data-rangeSlider>

                                        <output>0</output>
                                    </div>
                                    <div class="col-4">Years</div>
                                </div>
                            </div>


                    @endforeach
                    <!-- Skills Box End here -->
                    </div>
                </div>
                <div data-tabby-content="7">
                    <p></p>
                </div>


            </div>
        </div>
    </div>


</div>