@extends('AdminLte.template')

<!--Title-->
@section('title')

@endsection
<!--Title Close-->

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

@section('Content')
<br>
<br>
<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>

<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 class="active"><a href="{{ URL::current()}}">Emergency Details</a></li>
        <li><a href="{{url('employee_dependent').'/'.$id}}">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>
    <div class="panel panel-default" style="width:97%">
        <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>
                        <th style="width:2%" class="th yellow borderNone"><input type="checkbox" id="check_all_contact"></th>
                        <th style="width:2%" class="th yellow borderNone txtLeft">Sr</th>
                        <th style="width:16%" class="th yellow borderNone txtLeft">Name</th>
                        <th style="width:13%" class="th yellow txtLeft borderNone">Realtionship</th>
                        <th style="width:16%"class="th yellow txtLeft borderNone">Home-Telephone</th>
                        <th style="width:16%"class="th yellow txtLeft borderNone">Office-Telephone</th>
                        <th style="width:18%"class="th yellow txtLeft borderNone">Mobile</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="8">
                            <div class="scroll borderBottomGray">
                                <table style="width:100%">
                                                                        @foreach ($contactDetails as $key=>$cd)
                                    <tr style="width:100%">
                                        <td style="width:2%" class="td notBold red_table borderTopBottomGray"><input type="checkbox" class="checkbox_contact" data-ids="{{$cd->employee_emergency_contact_id}}"></td>
                                        <td style="width:2%" class="td notBold red_table  borderTopBottomGray">{{ $i++ }}</td>
                                        <td style="width:17%" class="td notBold red_table  borderTopBottomGray">{{ $cd->name }}</td>
                                        <td style="width:13%" class="td notBold red_table  borderTopBottomGray">{{$cd->relationship  }}</td>
                                        <td style="width:17%" class="td notBold red_table  borderTopBottomGray">{{$cd->home_telephone }}</td>
                                        <td style="width:16%" class="td notBold red_table  borderTopBottomGray">{{$cd->office_telephone  }}</td>
                                        <td style="width:18%" class="td notBold red_table txtleft borderTopBottomGray">{{$cd->mobile  }}</td>
                                    </tr>
                                    @endforeach
                                </table>
                            </div>

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

<!--Bootstrap Modals-->
@section('BootstrapModals')
@include('Components/Bootstrap Modals/hrms_employee_emergency_contact_modal')
@endsection
<!--Bootstrap Modals Close-->
<!--External JS-->
@section('ExternalJs')
<script src="{{ asset ("/js/hrms_employee_contact_details.js?$releaseVersion") }}"></script>
<script src="{{ asset ("/js/hrms_deletes_emp_details.js?$releaseVersion") }}"></script>
@endsection
<!--External JS Close-->