@php
    $skill_category = @$step_verified_data['skill_category'];
    $ev_skill_category_ids = @$step_verified_data['ev_skill_category_ids'];
@endphp
<div class="app-status-panel-content">
    
    <div class="addinfo_notify"></div>
    <form class="m-b-10 custom_form adi-info-form-1" name="add_skill_category" id="add_skill_category">
        <input type="hidden" name="btn_action" value="" />
        <div id="popup_notify_id"></div>
        <div id="skill_category_div">
            <div class="row m-b-12 pd-20">
                <h3 class="d-inline-b">SELECT SKILLS</h3>
                <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Skill','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button> 
                <p>Begin by selecting the skill categories for activities you believe you can lead, teach or assist with at camp. You will choose the specific skills on the next page.</p>
                
                <div class="col-sm-12">
                    <div class="row">
                        @php $no=0; @endphp
                        @if(!empty($skill_category))
                            @foreach($skill_category as $category)
                            @php $no++; @endphp 
                            <label class="skill_cat_lable cpointer" for="skill_category_{{ $category['skill_category_id'] }}">
                            <div class="col-sm-4 col-md-4 col-xs-12 m-t-10 text-center p-5">
                                <div class="col-md-12 skill_cat_box p-r-0 p-l-0">
                                    <div class="text-center p-5 skill_cat_img_div">
                                    <img class="cpointer" src="{{ $category['document_download_link'] }}" style=" width: 90px; height: 90px;"/> 
                                    </div>
                                    @php
                                        $checked = in_array($category['skill_category_id'],$ev_skill_category_ids)?'checked':'';
                                    @endphp
                                    <div class="checkbox checkbox-info">
                                    <input type="checkbox" class="chk" id="skill_category_{{ $category['skill_category_id'] }}" name="skill_category[]" value="{{ $category['skill_category_id'] }}" {{$checked}} /> <label class="text-center text-info" for="skill_category_{{ $category['skill_category_id'] }}"> {{ $category['skill_category_name'] }}</label>
                                    </div>
                                </div>
                            </div> 
                            </label>
                            @if($no%3==0) </div><p class="p-3"></p><div class="row">@endif 
                            @endforeach
                        @endif 
                    </div> 
                    <div class="row"> 
                        <div class="clearfix"></div>
                        <div class="form-actions m-t-40">
                            <button type="button" name="get_skills" id="get_skills" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" >Next</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="skills_div" class="hide"></div>
        <div id="add_more_skill_detail_div" class="hide"></div>
    </form>
</div>
<script>
    $(document).ready(function(){        
        var user_id = $('meta[name="user_token"]').attr('content');
        var form_selector = "#add_skill_category";
        $(document).off("click","#get_skills").on("click","#get_skills",function(e){
            e.preventDefault();
            show_inner_loader(".timeline_stp_desc","#all_tab_data");         
            var url = "{{ route('getskills') }}";
            var categories = [];
            var notify_id = "popup_notify_id";
            if($('input[name="skill_category[]"]:checked').length > 0){
                $('#'+notify_id).empty();
                $("input[name='skill_category[]']").each(function (index, obj) {
                    if(this.checked) {
                        categories.push($(this).val());
                    }
                });
                $.ajax({
                    type: 'post',
                    url: url,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: { 
                        'categories': categories, 
                        'action': 'getskills'
                    }, 
                    success: function(response) {
                        if(response.type=='success')
                        {
                            var messages = response.message;
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
//                            notifyResponse("#"+notify_id,messages,response.type);
                            $("#skill_category_div").addClass("hide");
                            $("#skills_div").removeClass("hide");
                            $("#skills_div").html(response.data);
                        } else {
                            var messages = response.message;
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                            notifyResponse("#"+notify_id,messages,response.type);
                        }
                    }                                  
                });
            }
            else {
                notifyResponse("#"+notify_id,"Please select Skill Category","error");
                hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
            }            
        });
        
        $(document).off("click","#submit_skills").on("click","#submit_skills",function(){
            show_inner_loader(".timeline_stp_desc","#all_tab_data");               
            var url = "{{ route('updateskills') }}";
            var skill_length = $("select[name='skills[]'] option:selected").length;
            
            var notify_id = "popup_notify_id";
          
            if($("select[name='skills[]'] option:selected").length > 0){
                if(skill_length > 10){
                    notifyResponse("#"+notify_id,"You can select maximum ten skills.","error");
                    hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                }else{
                    var skills = $("#skills").val();
                    $.ajax({
                        type: 'post',
                        url: url,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        data: { 
                            'skills': skills, 
                            'action': 'updateSkills'
                        }, 
                        success: function(response) {
                            var messages = response.message;
                            if(response.type == "success")
                            {
                                //notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                                notifyResponse("#"+notify_id,messages,response.type);
//                                setTimeout(function(){
//                                    navigateStages('1','{{ $next_step_key }}');
//                                },3000);
                                $("#skills_div").addClass("hide");
                                $("#add_more_skill_detail_div").removeClass("hide");
                                $("#add_more_skill_detail_div").html(response.data);

                            }
                            else if(response.type == "validation_error"){
                                var Html = '<div class="alert swl-alert-danger"><ul>'; 
                                $.each( messages, function( key, value ) {
                                    Html += '<li>' + value+ '</li>';  
                                });
                                Html += '</ul></div>';  
                                notifyResponseTimerAlert(Html,"error","Error");
                            }
                            else{
                                notifyResponse("#"+notify_id,messages,response.type);
                            }
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                        }
                    });
                }
            }
            else {
                notifyResponse("#"+notify_id,"Please select Skills","error");
                hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
            }  
        });
        
        $(document).on("click","#back_btn",function(){
            $("#skills_div").addClass("hide");
            $("#skill_category_div").removeClass("hide");            
        });
                
    }); 
</script>