@extends('layouts.base')
@section('content')
<div class="page-inner">
    
    @include('partials.bread-crumbs')
    
    
    <div class="row">
        <div class="col-md-12">
            <form id="searchForm" name="searchForm">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{trans('labels.search_employee_detail')}}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4" >
                                <div class="form-group form-group-default">
                                    <label for="employeeNo">{{trans('labels.employee_no')}} </label>
                                    <select id="employeeNo" name="employeeNo" class="form-control"  autocomplete="off"  >
                                        <option value="">{{trans('labels.select')}}</option>
                                        @foreach ($employees as $emp)
                                            <option value="{{$emp->id}}">{{$emp->employee_no}}-{{$emp->calling_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <button class="btn btn-primary btn-lg mt-2"  id="btnSearch" type="button">
                                    <i class="fas fa-search"></i> &nbsp;
                                    {{trans('labels.search_button') }}
                                </button>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </form>
            <div class="card employee-details" style="display:none">
                <div class="card-header">
                    <div class="align-items-center">
                        <h4 class="card-title">{{trans('labels.employee_details')}}</h4>
                    </div>
                </div>
                <div class="card-body">
                   
                    <h6 class="custom-h6">{{trans('labels.personal_detail')}}</h6>
                    <hr>
                    <div class="row mb-4">
                        <div class="col-12 col-sm-2 text-center mb-3 mb-sm-0">
                            <div class="">
                                <img id="profileEmployeeAvatar" src="{{asset('images/profiles/avatar.png')}}" alt="profile" class="rounded-circle border border-white" style="border-radius: 5% !important; width: 125px; height: 150px; object-fit: cover;">
                            </div>
                        </div>
                        <div class="col-12 col-sm-10 text-center mb-2 mb-sm-0">
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label for="profileEmployeeNo" class="text-common-label">{{trans('labels.employee_no')}} </label>
                                    <br>
                                    <label id="profileEmployeeNo" class="text-highlight">-</label>
                                </div>
                                <div class="col-md-4">
                                    <label for="profileEmployeeRefNo"  class="text-common-label">{{trans('labels.ref_no')}} </label>
                                    <br>
                                    <label id="profileEmployeeRefNo" class="text-highlight">-</label>
                                </div>
                                <div class="col-md-4">
                                    <label for="profileEmployeeNIC"  class="text-common-label">{{trans('labels.nic')}} </label>
                                    <br>
                                    <label id="profileEmployeeNIC" class="text-highlight">-</label>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label for="profileEmployeeName"  class="text-common-label">{{trans('labels.name')}} </label>
                                    <br>
                                    <label id="profileEmployeeName" class="text-highlight">-</label>
                                </div>
        
                                <div class="col-md-4">
                                    <label for="profileEmployeeGender"  class="text-common-label">{{trans('labels.gender')}} </label>
                                    <br>
                                    <label id="profileEmployeeGender" class="text-highlight">-</label>
                                </div>
                                <div class="col-md-4">
                                    <label for="profileEmployeeDOB"  class="text-common-label">{{trans('labels.dob')}} </label>
                                    <br>
                                    <label id="profileEmployeeDOB" class="text-highlight">-</label>
                                </div>
        
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row mb-2 ">
                        <div class="col-md-4">
                            <label for="profileEmployeeContactNo"  class="text-common-label">{{trans('labels.contact_no')}} </label>
                            <br>
                            <label id="profileEmployeeContactNo" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeEmail" class="text-common-label">{{trans('labels.email')}} </label>
                            <br>
                            <label id="profileEmployeeEmail" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeStatus" class="text-common-label">{{trans('labels.status')}} </label>
                            <br>
                            <label id="profileEmployeeStatus"></label>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="profileEmployeeLocation"  class="text-common-label">{{trans('labels.location')}} </label>
                            <br>
                            <label id="profileEmployeeLocation" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeDepartment"  class="text-common-label">{{trans('labels.employee_department')}} </label>
                            <br>
                            <label id="profileEmployeeDepartment" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeDesignation"  class="text-common-label">{{trans('labels.employee_designation')}} </label>
                            <br>
                            <label id="profileEmployeeDesignation" class="text-highlight">-</label>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="profileEmployeeCategory" class="text-common-label">{{trans('labels.employee_category')}} </label>
                            <br>
                            <label id="profileEmployeeCategory" class="text-highlight">-</label>
                        </div>
                    </div>

                    <h6 class="custom-h6">{{trans('labels.bank_detail')}}</h6>
                    <hr>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="profileEmployeeBank" class="text-common-label">{{trans('labels.bank')}} </label>
                            <br>
                            <label id="profileEmployeeBank" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeBankBranch" class="text-common-label">{{trans('labels.bank_branch')}} </label>
                            <br>
                            <label id="profileEmployeeBankBranch" class="text-highlight">-</label>
                        </div>
                        <div class="col-md-4">
                            <label for="profileEmployeeAccountNo"  class="text-common-label">{{trans('labels.account_no')}} </label>
                            <br>
                            <label id="profileEmployeeAccountNo" class="text-highlight">-</label>
                        </div>
                    </div>
                    <h6 class="custom-h6">{{trans('labels.address_detail')}}</h6>
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="tblAddressData" class="display table table-striped table-hover" >
                                    <thead>
                                        <tr>
                                            <th style="width:25px;">#</th>
                                            <th>{{trans('labels.address_type')}} </th>
                                            <th>{{trans('labels.address_line1')}} </th>
                                            <th>{{trans('labels.address_line2')}} </th>
                                            <th>{{trans('labels.address_line3')}} </th>
                                        
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <h6 class="custom-h6">{{trans('labels.family_detail')}}</h6>
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="tblFamilyData" class="display table table-striped table-hover" >
                                    <thead>
                                        <tr>
                                            <th style="width:25px;">#</th>
                                            <th>{{trans('labels.relation_type')}} </th>
                                            <th>{{trans('labels.name')}} </th>
                                            <th>{{trans('labels.dob')}} </th>
                                            <th>{{trans('labels.nic')}} </th>
                                           
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <h6 class="custom-h6">{{trans('labels.employee_history')}}</h6>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="tblHistoryData" class="display table table-striped table-hover" >
                                    <thead >
                                        <tr>
                                            <th width:25px;">#</th>
                                            <th>{{trans('labels.reassignment_type')}} </th>
                                            <th>{{trans('labels.effective_date')}} </th>
                                            <th>{{trans('labels.location')}} </th>
                                            <th>{{trans('labels.department')}} </th>
                                            <th>{{trans('labels.designation')}} </th>
                                            <th>{{trans('labels.remark')}} </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <h6 class="custom-h6">{{trans('labels.attachments')}}</h6>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="tblAttachmentData" class="display table table-striped table-hover" >
                                    <thead >
                                        <tr>
                                            <th width:25px;">#</th>
                                            <th>{{trans('labels.type')}} </th>
                                            <th>{{trans('labels.attachment')}} </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <h6 class="custom-h6">{{trans('labels.superior_details')}}</h6>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table id="tblSuperiorData" class="display table table-striped table-hover" >
                                    <thead >
                                        <tr>
                                            <th width:25px;">#</th>
                                            <th>{{trans('labels.superior_type')}} </th>
                                            <th>{{trans('labels.superior_employee_no')}} </th>
                                            <th>{{trans('labels.superior_name')}} </th>
                                            <th>{{trans('labels.superior_department')}} </th>
                                            <th>{{trans('labels.superior_designation')}} </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="divEmployeeLeaveSummary" class="employee-leave-request" style="overflow-x:auto; display:none;">
                        <h6 class="custom-h6">{{trans('labels.leave_summary')}}</h6>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <thead>
                                            <tr>
                                                <th style="width: 40%; vertical-align: middle; font-weight:normal" colspan="4">Leave Summary - @php echo date('Y'); @endphp</th>
                                            </tr>
                                            </thead>
                                            <tr>
                                                <th style="width: 40%; vertical-align: middle;background:#f1f1f1">{{trans('labels.leave_type')}}</th>
                                                <th style="background:#f1f1f1">{{trans('labels.allocated_leaves')}}</th>
                                                <th style="background:#f1f1f1">{{trans('labels.taken_leaves')}}</th>
                                                <th style="background:#f1f1f1">{{trans('labels.balance_leaves')}}</th>
                                            </tr>
                                            <tr>
                                                <td style="width: 40%; vertical-align: middle;">{{trans('labels.annual_leave')}}</td>
                                                <td id="annualLeaveAllocation" style="text-align: center">-</td>
                                                <td id="annualLeaveTaken" style="text-align: center">-</td>
                                                <td id="annualLeaveBalance" style="text-align: center">-</td>
                                            </tr>
                                            <tr>
                                                <td style="width: 40%; vertical-align: middle;">{{trans('labels.casual_leave')}}</td>
                                                <td id="casualLeaveAllocation" style="text-align: center">-</td>
                                                <td id="casualLeaveTaken" style="text-align: center">-</td>
                                                <td id="casualLeaveBalance" style="text-align: center">-</td>
                                            </tr>
                                            <tr>
                                                <td style="width: 40%; vertical-align: middle;">{{trans('labels.sick_leave')}}</td>
                                                <td id="sickLeaveAllocation" style="text-align: center">-</td>
                                                <td id="sickLeaveTaken" style="text-align: center">-</td>
                                                <td id="sickLeaveBalance" style="text-align: center">-</td>
                                            </tr>
                                            <tr>
                                                <td style="width: 40%; vertical-align: middle;">{{trans('labels.lieu_leave')}}</td>
                                                <td id="lieuLeaveAllocation" style="text-align: center">-</td>
                                                <td id="lieuLeaveTaken" style="text-align: center">-</td>
                                                <td id="lieuLeaveBalance" style="text-align: center">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <div class="card-footer employee-superior" style="display:none"> 
                    <div class="row">
                        <div class="col-md-12">
                            @can('leave_allocation_update')
                                @include('partials.buttons.save')
                            @endcan
                                @include('partials.buttons.reset')
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
    </div>  
</div>


@endsection


@section('custom_scripts')
<script type="text/javascript" src="{{asset('js/xhr.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/services/constant.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/datatables.min.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/employee/employee-profile.js?v=1')}}"> </script>
<script type="text/javascript" src="{{asset('js/employee/employee.js')}}"> </script>
@endsection