<div>
    {{-- <h4><h4 style="color: green">Family</h4></h4> --}}
    <table class="table">
        <thead>
        <tr>
            <th>{{__('administrator.no.')}}</th>
            <th>{{__('administrator.relation')}}</th>
            <th>{{__('administrator.name')}}</th>
            <th>{{__('administrator.sex')}}</th>
            <th>{{__('administrator.dob')}}</th>
            <th>{{__('administrator.job')}}</th>
            <th>{{__('administrator.type')}}</th>
            <th>{{__('administrator.alive')}}</th>
            <th style="width: 100px;">  <a href="javascript:void(0)"  class="btn btn-xs btn-default r-add-family-full"><i class="fa fa-plus"></i> + </a> </th>
        </tr>
        </thead>
        <tbody class="tbody-family-full_">
        @if(isset($emp->family_full))
            @if(is_array($emp->family_full))
                @if(count($emp->family_full)>0)
                    @foreach($emp->family_full 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-full">1</td>
                            <td>
                                <select class="form-control" name="family_full[{{ $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_full[{{ $k }}][name]">
                            </td>
                            <td>
                                <select class="form-control" name="family_full[{{ $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_full[{{ $k }}][dob]" class="form-control dob">
                            </td>
                            <td>
                                <select class="form-control" name="family_full[{{ $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_full[{{ $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_full[{{ $k }}][alive]">
                                    <option {{$type=='alive'?' selected="selected" ':''}}  value="alive">alive</option>
                                    <option {{$type=='die'?' selected="selected" ':''}}  value="die">die</option>
                                </select>
                            </td>
                            <td style="text-align:center">
                                <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('script')
    <script>
        $(function () {

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

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

                var tr = '<tr>\n' +
                    '                <td class="r-no-family-full">1</td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family_full['+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_full['+r+'][name]">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family_full['+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_full['+r+'][dob]" class="form-control dob">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control" name="family_full['+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_full['+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_full['+r+'][alive]">\n' +
                    '                       <option value="alive">alive</option>\n' +
                    '                       <option value="die">die</option>\n' +
                    '                   </select>\n' +
                    '                </td>' +
                    '                <td style="text-align:center">\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-full_').append(tr);

                // $('.dob').bootstrapDP({
                //     format: 'yyyy-mm-dd'
                // });
                updateNoFF();
            });

            // $('.dob').bootstrapDP({
            //     format: 'yyyy-mm-dd'
            // });
            updateNoFF();

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

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