<div>
    {{-- <h4><h4 style="color: green">Work Experience</h4></h4> --}}
    <table class="table">
        <thead>
        <tr>
            <th>No</th>
            <th>Company Name</th>
            <th>Position/Duties</th>
            <th>Location</th>
            <th>Date Joined</th>
            <th>Date Resigned</th>
            <th>  <a href="javascript:void(0)"  class="btn btn-xs btn-default r-add-exp"><i class="fa fa-plus"></i> + </a> </th>
        </tr>
        </thead>
        <tbody class="tbody-family-exp">
        @if(isset($emp->work_experience))
            @if(is_array($emp->work_experience))
                @if(count($emp->work_experience)>0)
                    @foreach($emp->work_experience as $k => $r)
                        <?php
                        $company_name = isset($r['company_name'])?$r['company_name']:'';
                        $position = isset($r['position'])?$r['position']:'';
                        $location = isset($r['location'])?$r['location']:'';
                        $join_date_w = isset($r['join_date_w'])?$r['join_date_w']:'';
                        $end_date_w = isset($r['end_date_w'])?$r['end_date_w']:'';
                        ?>
                        <tr>
                            <td class="r-no-exp">1</td>
                            <td>
                                <input class="form-control" value="{{$company_name}}" name="work_experience[{{ $k }}][company_name]" >
                            </td>
                            <td>
                                <input class="form-control" value="{{$position}}" type="text" name="work_experience[{{ $k }}][position]">
                            </td>
                            <td>
                                <input class="form-control" value="{{$location}}" type="text" name="work_experience[{{ $k }}][location]">
                            </td>
                            <td>
                                <input class="form-control join_date_w" value="{{$join_date_w}}" type="text" name="work_experience[{{ $k }}][join_date_w]">
                            </td>
                            <td>
                                <input class="form-control end_date_w" value="{{$end_date_w}}" type="text" name="work_experience[{{ $k }}][end_date_w]">
                            </td>
                            <td>
                                <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del-exp"><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-exp', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
                
            });

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

                var tr = '<tr>\n' +
                    '    <td class="r-no-exp">1</td>\n' +
                    '    <td>\n' +
                    '        <input class="form-control"  name="work_experience['+r+'][company_name]" >\n' +
                    '    </td>\n' +
                    '    <td>\n' +
                    '        <input class="form-control"  type="text" name="work_experience['+r+'][position]">\n' +
                    '    </td>\n' +
                    '    <td>\n' +
                    '        <input class="form-control"  type="text" name="work_experience['+r+'][location]">\n' +
                    '    </td>\n' +
                    '    <td>\n' +
                    '        <input class="form-control join_date_w"  type="text" name="work_experience['+r+'][join_date_w]">\n' +
                    '    </td>\n' +
                    '    <td>\n' +
                    '        <input class="form-control end_date_w"  type="text" name="work_experience['+r+'][end_date_w]">\n' +
                    '    </td>\n' +
                    '    <td>\n' +
                    '        <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del-exp"><i class="fa fa-trash"></i> - </a>\n' +
                    '    </td>\n' +
                    '</tr>';

                $('.tbody-family-exp').append(tr);


                
                updateNoExp();
            });

            

            updateNoExp();

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

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