@extends('AdminLte.template')

<!--Title-->
@section('title')
Employee Dependents
@endsection
<!--Title Close-->

<!--External CSS-->
@section('ExternalCss')
@parent
@endsection
<!--External CSS Close-->

@section('Content')
<style>
    tbody{
        overflow:scroll;
        overflow-x:hidden ;
        height:100px;
    }
    .scroll{
        overflow:scroll;
        overflow-x:hidden ;
        height:100px;

    }
    th.yellow{
        background-color: #fcf8e3;
    }
    td.red_table{
        background-color: #F0FFFF;
    }
    .panel-body{

        background-color:whitesmoke;
    }
</style>
<br>
<br>
<div class="container">
    <ul class="nav nav-tabs">
        <li ><a href="{{url('tab').'/'.$id}}">Personal Details</a></li>
        <li ><a href="{{url('contact_details').'/'.$id}}">Contact Details</a></li>
        <li><a href="{{url('emergency').'/'.$id}}">Emergency Details</a></li>
        <li class="active"><a href="{{URL::current()}}">Dependents</a></li>
        <li><a href="{{url('employee_job').'/'.$id}}">Job</a></li>
        <li><a href="{{url('employee_salary_details').'/'.$id}}">Salary</a></li>
        <li><a href="{{url('employee_reporting').'/'.$id}}">Reporting</a></li>
        <li><a href="{{url('employee_qualification').'/'.$id}}">Qualification</a></li>
        <li><a href="{{url('employee_mapping').'/'.$id}}">Mapping</a></li>
    </ul>
    <br>

    <input type="hidden" name="emp_id" value="{{$id}}">
    <div class="panel panel-default" style="width:1100px;">

        <div class="panel-heading fontsize16 borderBottomGray">
            @include('Hrms/display_header')
        </div>
        <div class="panel-body borderBottomGray">
            <table class=" borderNone commonFontSize" style="width:100%">
                <thead>
                    <tr style="width:100%">
                        <th style="width:2%" class="th yellow borderNone"><input type="checkbox" id="check_all_dependent"></th>
                        <th style="width:2%" class="th yellow borderNone">Sr</th>
                        <th style="width:25%" class="th yellow borderNone">Name</th>
                        <th style="width:25%" class="th yellow txtLeft borderNone">Realtionship</th>
                        <th style="width:25%"class="th yellow textRight borderNone">Birth-Date</th>
                        <th style="width:25%"class="th yellow textRight borderNone">Action</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6">
                            <div class="scroll borderBottomGray">
                                <table style="width:100%">
                                                                        @foreach ($employee_d as $key=>$ed)
                                    <tr style="width:100%">
                                        <td style="width:2%" class="td notBold red_table borderTopBottomGray"><input type="checkbox" class="checkbox_dependent" data-ids="{{$ed->employee_dependent_id}}"></td>
                                        <td style="width:2%" class="td notBold red_table borderTopBottomGray">&nbsp;{{$i++}}</td>
                                        <td style="width:25%" class="td notBold red_table borderTopBottomGray">&nbsp;{{ $ed->name }}</td>
                                        <td style="width:25%" class="td notBold red_table borderTopBottomGray">&nbsp;{{$ed->relationship  }}</td>
                                        <td style="width:25%" class="td notBold red_table borderTopBottomGray">&nbsp;{{\Helper::getDisplayDate($ed->dob)}}</td>
                                        <td class="td success notBold red_table borderTopBottomGray">
                                            <button type="button" data-dependent='{{ json_encode($ed)}}' class="btn btn-primary fontsize10 noPaddingTopBottom btnEdit"><span class="glyphicon glyphicon-edit fontsize15"></span>Edit</button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </table>
                            </div>

                        </td>
                    </tr>
                </tbody>
            </table>
            <br>
            <div class="col-md-6">
                <button data-id="{{$id}}"  class="btn btn-success btn-xs  btnAddD"><span class="glyphicon glyphicon-plus"></span> Add New
                </button>
                <button class="btn btn-danger btn-xs delete-all" data-type="dependent" data-url="/dependent"><span class="glyphicon glyphicon-trash"></span> Delete</button>
            </div>
        </div>
    </div>

</div>


@endsection

<!--Bootstrap Modals-->
@section('BootstrapModals')
@include('Components/Bootstrap Modals/hrms_employee_dependent_modal')
@endsection
<!--Bootstrap Modals Close-->

<!--External JS-->
@section('ExternalJs')
<script src="{{ asset ("/js/hrms_employee_dependents.js?$releaseVersion") }}"></script>
<script src="{{ asset ("/js/hrms_deletes_emp_details.js?$releaseVersion") }}"></script>
@endsection
<!--External JS Close-->