@extends('layouts.app')

@section('title')Scandia Bemanning: {{__('CV Database')}} @endsection

@section('description')Explore the list of our resources and contact our sales to make a commitment. @endsection

@section('content')

    <!-- Page title -->
    <section id="page-title" class="page-title-classic">
        <div class="container">
            <div class="page-title">
                <h1>{{__("CV Database")}}</h1>
                <span>Explore the list of our resources and contact our sales to make a commitment.</span>
            </div>
        </div>
    </section>
    <!-- end: Page title -->
    @php
        $year_default_value = 5;
        $year_max_value = 10;
        $level_default_value = 5;

    @endphp

    <div id="wrapper">
        <!--Main Content Area-->
        <main id="content">
            <section id="service-list">
                <div class="top-bar row bg-light p-0">
                        @foreach ($skillCategory as $skillCategories)
                            @if($skillCategories->id == $selectedSkillCategory)
                            <div class="top-bar-item col-lg-4 col-md-12 p-3 font-size-18 text-center text-uppercase text-bold active"  id="parent_category" onclick="selectedParentCategory({{$skillCategories->id}})">{{$skillCategories->skill_category}}</div>
                            @else
                            <div class="top-bar-item col-lg-4 col-md-12 p-3 font-size-18 text-center text-uppercase text-bold" name="parent_category" onclick="selectedParentCategory({{$skillCategories->id}})">{{$skillCategories->skill_category}}</div>
                        @endif

                            @endforeach
                </div>

                @include('partials.cv_skills',[$skillDetails])


            </section>
            <!-- Candidate list Strats from here -->
            <section id="candidate-list">
                <div class="row clearfix">
                    <div class="col-1">
                        <div style="width: 100%; margin: 10px 40% 10px 40%;"><div id="loader" class="loader"></div></div>


                        <div  id="responseToDisplay" >

                        </div>







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

        </main>
    </div>


    <script  src="{{ asset('js/index.js') }}"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {

            $( "#tags" ).autocomplete({
                source: "autocomplete",
                minLength: 3,
                select: function(event, ui) {
                    $('#tags').val(ui.item.value);
                    $('#auto_ids').val(ui.item.id);
                    var skill_major = $('#skill_major').val();
                    if(skill_major==99999)
                    {
                        searchDataAdv();
                        
                    }else{
                        autocomplete_result(ui.item.id);
                    }

                }
            });
        } );

        function autocomplete_result(id) {
            $( "#loader" ).show();
            qryStr = "id="+id;
            jQuery.ajax({
                url: '{{route('search_profile_autocomplete')}}',
                data: qryStr,
                type: "POST",
                dataType: "json",
                _token: "{{csrf_token()}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    //console.log(data['html']);
                    $( "#loader" ).hide();
                    $('#responseToDisplay').show();

                    $('#responseToDisplay').html(data.html);

                }

            });
        }

        function selectedParentCategory($id) {
            parent_category = $id;
            var main_path = '{{ url('/') }}';
            window.location = main_path + '/cv-database/' + parent_category;
        }
    </script>


    <script>
        const myTab = Tabby.init({
            animation: 'fade'
        });

        function set_major_skill(obj) {

            $('input:checkbox').removeAttr('checked');
            $('#skill_major').val(obj.id);
            $('#skill_rank_cat').val(0);
            $('#selected_skills').val(0);
            //add atrribute to checkbox
            $('.class_skill_name').attr('skillid', obj.id);


            $('#tags').val('');
            $('#auto_ids').val(0);
            searchDataAdv();
            
            // selectedParentCategory(1);
        }
        function get_query_str() {
            var qryStr = '';
            var skill_major = $('#skill_major').val();
            var skill_rank_cat = $('#skill_rank_cat').val();
            var selected_skills = $('#selected_skills').val();
            // if(selected_skills)
            // {
            //     qryStr = "&skill_major="+skill_major;
            // }
            //console.log('sel='+selected_skills);
            if((selected_skills) && (selected_skills !=0))
            {
                qryStr = qryStr+'&selected_skills='+selected_skills;
            }else{
                qryStr = "&skill_major="+skill_major;
            }

            if(skill_rank_cat)
            {
                qryStr = qryStr+'&skill_rank='+skill_rank_cat;
            }

            //pass this param for rank
            qryStr = qryStr+'&triple_a='+skill_major;
            qryStr = qryStr+'&triple_a='+skill_major+'&auto_ids='+$('#auto_ids').val();
            return qryStr;

        }
        function searchDataAdv() {


            qryStr = get_query_str();
            console.log("searchDataAdv "+qryStr);



            $( "#loader" ).show();
            jQuery.ajax({
                url: '{{route('search_category_adv')}}',
                data: qryStr,
                type: "POST",
                dataType: "json",
                _token: "{{csrf_token()}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    //console.log(data['html']);
                    $( "#loader" ).hide();
                    $('#responseToDisplay').show();
                    $('#responseToDisplay').html(data.html);
                }

            });
        }




        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();



            //cal function by default


            searchDataAdv();

            // $("#parent_category").addClass("active");

            $(".checkbox").change(function() {

                var chkd = $("input[class='checkbox']:checked");
                var vals = chkd.map(function() {
                    var value = $(this).val();
                    var myarr = this.id;
                    myarr = myarr.split("_");
                    var myid = myarr[0];
                    //console.log("id="+myid);
                   var my_val =  $('#'+myid+"_cat_id").val();
                   //console.log('myv='+my_val);
                   var major_val = $('#skill_major').val();
                  // console.log('major='+major_val);
                    if(major_val == my_val)
                    {
                        var skilllevel = $('#'+myid+"_skilllevel").val();
                        var skillyear = $('#'+myid+"_skillyears").val();
                        //return this.value;
                        return "( skill_id = "+ value +" and " +
                            "(user_skill_exp >= "+ skillyear +" AND " +
                            "user_skill_level >= "+ skilllevel +" ))";
                    }

                }).get().join(',');
                //console.log('selected_skills='+v  als);

                $('#selected_skills').val(vals);
                searchDataAdv();
                
            });

            $(".class_skill_name").change(function() {
                var value = $(this).val();

                var chkd = $("input[class='class_skill_name']:checked");

                var major_val = $('#skill_major').val();
                var my_val = $(this).attr("skillid");

                console.log(my_val +"=="+major_val);


                var vals = chkd.map(function() {
                    if(major_val == my_val)
                    {
                        var value = $(this).val();
                        return this.value;
                    }


                }).get().join(',');


                $('#skill_rank_cat').val(vals);

                //console.log('AAA values ='+vals);
                searchDataAdv();
                
            });



        });

        (function () {

            var selector = '[data-rangeSlider]',
                elements = document.querySelectorAll(selector);

            // Example functionality to demonstrate a value feedback
            function valueOutput(element) {
                var value = element.value,
                    output = element.parentNode.getElementsByTagName('output')[0];
                output.innerHTML = value;



                var myarr =element.id;

                 myarr = myarr.split("_");
                 myid = myarr[0];


                selected_buttons = $('#selected_skills').val();
                if (selected_buttons.indexOf(myid) >= 0)
                {
                    //console.log(myid+" = this button selected");
                }else{
                    //console.log(myid+" = this button not selected");
                    return false;
                }


                 if(myarr[1] == "skl")
                 {
                     $('#'+myid+"_skilllevel").val(value);
                     //console.log("setting _skilllevel");
                     var cur_val = $('#selected_skills').val();
                     var nv = "( skill_id = "+ myid +" and " +
                        "(user_skill_level >= "+ value +" ))";
                    $('#selected_skills').val(cur_val + "," + nv);


                 }else{
                     $('#'+myid+"_skillyears").val(value);
                     var cur_val = $('#selected_skills').val();
                     var nv = "( skill_id = "+ myid +" and " +
                         "(user_skill_exp >= "+ value +" ))";
                     $('#selected_skills').val(cur_val + "," + nv);

                 }
                searchDataAdv();
                

            }

            for (var i = elements.length - 1; i >= 0; i--) {
               // valueOutput(elements[i]);
            }

            Array.prototype.slice.call(document.querySelectorAll('input[type="range"]')).forEach(function (el) {
                el.addEventListener('input', function (e) {
                    valueOutput(e.target);
                }, false);
            });
            rangeSlider.create(elements, {
                onInit: function () {
                },
                onSlideEnd: function (value, percent, position) {
                    console.warn('onSlideEnd', 'value: ' + value, 'percent: ' + percent, 'position: ' + position);
                }
            });

            rangeSlider.create(document.querySelector('#vertical'), {
                vertical: true
            });

        })();



    </script>
@endsection