@extends('setup.index')
@section('title', __('form.settings') . " : " .__('form.skills'))
@section('setting_page')
<div class="main-content">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
   @lang('form.skills')
   </button>
   <!-- Modal -->
   <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="exampleModalCenterTitle">@lang('form.skills')!!</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <form id="myModalForm" action="" method="POST">
                  <input type="hidden" name="id" value="">
                  <div class="form-group">
                     <label>@lang('form.name') <span class="required">*</span></label>
                     <input type="text" class="form-control form-control-sm" name="name">
                     <div class="invalid-feedback d-block name"></div>
                  </div>

                  <div class="form-group">
                    <label>@lang('form.sub_skill') <span class="required">*</span> </label>
                    <div class="sub_skill-container">
                            <div class="skill-wrapper">
                                <input type="text" class="form-control form-control-sm" name="sub_skill[]" placeholder="Enter Sub Skill">
                            </div>
                    </div>
                    <div class="invalid-feedback d-block name"></div>
                </div>
                
                <button type="button" class="btn btn-primary mt-2 skill_add">
                    <a href="#" style="color: #fff">Add More</a>
                </button>
                <!--Dynamic Field Creation with JavaScript-->
                <script>
                    const addBtn = document.querySelector(".skill_add");
                    const sub_skillContainer = document.querySelector(".sub_skill-container");
            
                    function addInput() {
                        const skillWrapper = document.createElement("div");
                        skillWrapper.className = "skill-wrapper";
            
                        const skillInput = document.createElement("input");
                        skillInput.type = "text";
                        skillInput.className = "form-control form-control-sm mt-2";
                        skillInput.name = "sub_skill[]";
                        skillInput.placeholder="Enter Sub Skill";
            
                        const removeBtn = document.createElement("button");
                        removeBtn.className = "btn btn-danger mt-2 skill_delete";
                        const removeLink = document.createElement("a");
                        removeLink.href = "#";
                        removeLink.style.color = "#fff";
                        removeLink.textContent = "Remove ";
                        removeBtn.appendChild(removeLink);
            
                        skillWrapper.appendChild(skillInput);
                        skillWrapper.appendChild(removeBtn);
                        sub_skillContainer.appendChild(skillWrapper);
            
                        removeBtn.addEventListener("click", function () {
                            skillWrapper.remove();
                        });
                    }
            
                    addBtn.addEventListener("click", addInput);
                </script>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('form.close')</button>
               <button type="button" class="btn btn-primary" id="submitForm">@lang('form.submit')</button>
            </div>
         </div>
      </div>
   </div>
   <hr>
   <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="data">
      <thead>
         <tr>
            <th>@lang("form.name")</th>
            <th>@lang("form.sub_skill")</th>
            <th>@lang("form.options")</th>
         </tr>
      </thead>
   </table>
</div>
@endsection
@section('onPageJs')
    <script>

        $(function() {

            dataTable = $('#data').DataTable({
                dom: 'Bfrtip',
                buttons: [

                    {
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary')
                        },
                        className: "btn-light btn-sm",
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                            'copy',
                            'excel',
                            'csv',
                            'pdf',
                            'print'
                        ]
                    }
                ],

                "language": {
                    "lengthMenu": '_MENU_ ',
                    "search": '',
                    "searchPlaceholder": "{{ __('form.search') }}"
                    // "paginate": {
                    //     "previous": '<i class="fa fa-angle-left"></i>',
                    //     "next": '<i class="fa fa-angle-right"></i>'
                    // }
                }

                ,
                responsive: true,
                processing: true,
                serverSide: true,
                //iDisplayLength: 5
                pageLength: {{ data_table_page_length() }},
                ordering: false,
                // "columnDefs": [
                //     { className: "text-right", "targets": [2,4] },
                //     { className: "text-center", "targets": [5] }
                //
                //
                // ],
                "ajax": {
                    "url": '{!! route("datatables_skills") !!}',
                    "type": "POST",
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            }).
            on('mouseover', 'tr', function() {
                jQuery(this).find('div.row-options').show();
            }).
            on('mouseout', 'tr', function() {
                jQuery(this).find('div.row-options').hide();
            });



            $('#myModal').on('hidden.bs.modal', function (e) {

                $('.error').html("");
                $("#myModal").find("input[type=text], textarea, input[type=hidden]").val("");
            });

            $( "input[type=text], textarea" ).focus(function() {

                $(this).next('.error').html("");
            });

            $('#submitForm').click(function (e) {
                e.preventDefault();

                var postData = $('#myModalForm').serializeArray();
                var getSubSkill=[];

                postData = postData.filter(function (item) {
                    if (item.name === 'sub_skill[]') {
                        getSubSkill.push(item.value);
                        return false; // Exclude from postData array
                    }
                    return true; // Include in postData array
                });
                
                postData.push({ "name": "_token", "value" : "{{ csrf_token() }}" });
                // Push each sub-skill as a separate value in postData array
                for (var i = 0; i < getSubSkill.length; i++) {
                    postData.push({ name: 'sub_skill[]', value: getSubSkill[i] });
                }


                var id = $('input[name=id]').val();

                var url = (id) ? "{{ route('patch_skills', ':id') }}" : "{{ route('post_skills') }}";           
                

                if(id)
                {
                    url = url.replace(':id', id);
                    postData.push({ "name": "_method", "value" : "PATCH" });
                 
                }
                
                console.log(postData);
                
                $.post( url , postData )
                    .done(function( response ) {
                        if(response.status == 2)
                        {

                            $.each(response.errors, function( index, value ) {

                                $('.' + index).html(value.join());
                            });


                        }
                        else
                        {
                            dataTable.draw();

                            $("#myModal").find("input[type=text], textarea").val("");

                            $('#myModal').modal('hide');
                        }
                    });
            });

        });

        $(document).on('click','.edit_item',function(e){
            //  $(this) = your current element that clicked.
            // additional code
            e.preventDefault();
            var id = $(this).data('id');
            var name = $(this).data('name');

            // Splitting the name into skill and subskill dynamically
            var nameSplit = name.split('/');
           
            var skill_name=nameSplit[0];
            var subSkillStr=nameSplit[1];
            var subSkillArr = subSkillStr.split(',');
                  

            $('input[name=id]').val(id);
            $('input[name=name]').val(skill_name);

            //For loop for displaying and for editting the sub skill values 
            for (var i = 0; i < subSkillArr.length; i++) {
            const skillWrapper = document.createElement("div");
            skillWrapper.className = "skill-wrapper";

            const skillInput = document.createElement("input");
            skillInput.type = "text";
            skillInput.className = "form-control form-control-sm mt-2";
            skillInput.name = "sub_skill[]";
            skillInput.placeholder = "Enter Sub Skill";
            skillInput.value = subSkillArr[i];

            const removeBtn = document.createElement("button");
            removeBtn.className = "btn btn-danger mt-2 skill_delete";
            const removeLink = document.createElement("a");
            removeLink.href = "#";
            removeLink.style.color = "#fff";
            removeLink.textContent = "Remove ";
            removeBtn.appendChild(removeLink);

            skillWrapper.appendChild(skillInput);
            skillWrapper.appendChild(removeBtn);
            sub_skillContainer.appendChild(skillWrapper);

            removeBtn.addEventListener("click", function () {
                skillWrapper.remove();
            });
        }

            //Displaying the #myModal form
            $('#myModal').modal('show');
            //Calling submit function for changes made
            $('#submitForm').click();        
            //Removing the additional input text box generated at the top
            $('.skill-wrapper:first-child').remove();
        });


    </script>
@endsection