<div>
    {{-- <h4><h4 style="color: green">Family(Spouse)</h4></h4> --}}
    <table class="table">
        <thead>
        <tr>
            <th>No</th>
            <th>Relation</th>
            <th>Name</th>
            <th>Sex</th>
            <th>DOB</th>
            <th>JOB</th>
            <th>Type</th>
            <th>Alive</th>
            <th><a href="javascript:void(0)" class="btn btn-xs btn-default r-add-family"><i class="fa fa-plus"></i> +
                </a></th>
        </tr>
        </thead>
        <tbody class="tbody-family_">
        @if(isset($emp->family))
            @if(is_array($emp->family))
                @if(count($emp->family)>0)
                    @foreach($emp->family as $k => $r)
                        <?php
                        $relation = isset($r['relation']) ? $r['relation'] : '';
                        $name = isset($r['name']) ? $r['name'] : '';
                        $sex = isset($r['sex']) ? $r['sex'] : '';
                        $dob = isset($r['dob']) ? $r['dob'] : '';
                        $job = isset($r['job']) ? $r['job'] : '';
                        $type = isset($r['type']) ? $r['type'] : '';

                        ?>
                        <tr>
                            <td class="r-no-family">1</td>
                            <td>
                                <select class="form-control" name="family[{{ $k }}][relation]">
                                    <option value=""></option>
                                    <option {{$relation=='Father'?' selected="selected" ':''}}  value="Father">Father
                                    </option>
                                    <option {{$relation=='Mother'?' selected="selected" ':''}}  value="Mother">Mother
                                    </option>
                                    <option {{$relation=='Spouse'?' selected="selected" ':''}}  value="Spouse">Spouse
                                    </option>
                                    <option {{$relation=='Sibling'?' selected="selected" ':''}}  value="Sibling">Sibling
                                    </option>
                                    <option {{$relation=='Children'?' selected="selected" ':''}}  value="Children">
                                        Children
                                    </option>
                                </select>
                            </td>
                            <td>
                                <input class="form-control" value="{{$name}}" type="text" name="family[{{ $k }}][name]">
                            </td>
                            <td>
                                <select class="form-control" name="family[{{ $k }}][sex]">
                                    <option value=""></option>
                                    <option {{$sex=='M'?' selected="selected" ':''}}  value="M">Male</option>
                                    <option {{$sex=='F'?' selected="selected" ':''}}  value="F">Female</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" value="{{$dob}}" name="family[{{ $k }}][dob]" class="form-control dob">
                            </td>
                            <td>
                                <select class="form-control" name="family[{{ $k }}][job]">
                                    <option value=""></option>
                                    <option {{$job=='Work'?' selected="selected" ':''}}  value="Work">Work</option>
                                    <option {{$job=='Study'?' selected="selected" ':''}}  value="Study">Study</option>
                                    <option {{$job=='Free'?' selected="selected" ':''}}  value="Free">Free</option>
                                    <option {{$job=='Retirement'?' selected="selected" ':''}}  value="Retirement">
                                        Retirement
                                    </option>
                                </select>
                            </td>
                            <td>
                                <select class="form-control" name="family[{{ $k }}][type]">
                                    <option value=""></option>
                                    <option {{$type=='Dependent'?' selected="selected" ':''}}  value="Dependent">Dependent
                                    </option>
                                    <option {{$type=='Independent'?' selected="selected" ':''}}  value="Independent">
                                        Independent
                                    </option>
                                </select>
                            </td>
                            <td>
                                <select class="form-control" name="family[{{ $k }}][alive]">
                                    <option {{$type=='alive'?' selected="selected" ':''}}  value="alive">alive</option>
                                    <option {{$type=='die'?' selected="selected" ':''}}  value="die">die</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', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
                updateNo_();
            });

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

                var tr = '<tr>\n' +
                    '                <td class="r-no-family">1</td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family[' + r + '][relation]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <option value="Father">Father</option>\n' +
                    '                        <option value="Mother">Mother</option>\n' +
                    '                        <option value="Spouse">Spouse</option>\n' +
                    '                        <option value="Sibling">Sibling</option>\n' +
                    '                        <option value="Children">Children</option>\n' +
                    '                    </select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <input class="form-control" type="text" name="family[' + r + '][name]">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family[' + r + '][sex]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <option value="M">Male</option>\n' +
                    '                        <option value="F">Female</option>\n' +
                    '                    </select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <input type="text" name="family[' + r + '][dob]" class="form-control dob">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family[' + r + '][job]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <option value="Work">Work</option>\n' +
                    '                        <option value="Study">Study</option>\n' +
                    '                        <option value="Free">Free</option>\n' +
                    '                        <option value="Retirement">Retirement</option>\n' +
                    '                    </select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family[' + r + '][type]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <option value="Dependent">Dependent</option>\n' +
                    '                        <option value="Independent">Independent</option>\n' +
                    '                    </select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                   <select class="form-control" name="family[' + r + '][alive]">\n' +
                    '                       <option value="alive">alive</option>\n' +
                    '                       <option value="die">die</option>\n' +
                    '                   </select>\n' +
                    '               </td>' +
                    '                <td>\n' +
                    '                    <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del"><i class="fa fa-trash"></i> - </a>\n' +
                    '                </td>\n' +
                    '            </tr>';

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

                updateNo_();
            });


            updateNo_();

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

        function updateNo_() {

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