<div>
    <table class="table">
        <thead>
        <tr>
            <th>NO</th>
            <th>Language</th>
            <th>Level</th>
            <th>  <a href="javascript:void(0)"  class="btn btn-xs btn-default r-add-lang-lang-lang"><i class="fa fa-plus"></i> + </a> </th>
        </tr>
        </thead>
        <tbody class="tbody-lan">
        @if(isset($emp->language))
            @if(is_array($emp->language))
                @if(count($emp->language)>0)
                    @foreach($emp->language as $k => $r)
                        <?php
                        $name = isset($r['name'])?$r['name']:'';
                        $type = isset($r['type'])?$r['type']:'';
                        ?>
                        <tr>
                            <td class="r-no-lan">1</td>
                            <td>
                                <input class="form-control" value="{{$name}}" type="text" name="language[{{ $k }}][name]">
                            </td>
                            <td>
                                <select class="form-control" name="language[{{ $k }}][type]">
                                    <option value=""></option>
                                    <option {{$type=='Beginner'?' selected="selected" ':''}}  value="Beginner">Beginner</option>
                                    <option {{$type=='Advance'?' selected="selected" ':''}}  value="Advance">Advnace</option>
                                    <option {{$type=='Intermediate'?' selected="selected" ':''}}  value="Intermediate">Intermediate</option>
                                </select>
                            </td>
                            <td>
                                <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del"><i class="fa fa-trash"></i> - </a>
                            </td>
                        </tr>
                    @endforeach
                @endif
            @endif
        @endif
        </tbody>
    </table>
</div>

@push('js')
    <script>
        $(function () {

            $('body').on('click', '.r-del-lang', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
                
            });

            $('body').on('click', '.r-add-lang-lang-lang', function (e) {
                e.preventDefault();
                var r =  Math.floor(Math.random() * 26) + Date.now();

                var tr = '<tr>\n' +
                    '                <td class="r-no-lan">1</td>\n' +
                    '                <td>\n' +
                    '                    <input class="form-control" type="text" name="language['+r+'][name]">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="language['+r+'][type]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <option value="Beginner">Beginner </option>\n' +
                    '                        <option value="Advance">Advance </option>\n' +
                    '                        <option value="Intermediate">Intermediate</option>\n' +
                    '                    </select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del-lang"><i class="fa fa-trash"></i> - </a>\n' +
                    '                </td>\n' +
                    '            </tr>';

                $('.tbody-lan').append(tr);

                updateNo();
            });

            updateNo();

            @if(!isset($emp->language))
                $('.r-add-lang-lang-lang').trigger('click');
            @endif
        });

        function updateNo() {
            $('.r-no-lan').each(function (i,item) {
                $(this).text(i+1);
            });
        }
    </script>
@endpush
