@extends('layouts.base')
@section('content')
    <div class="page-inner">
        <div class="modal fade" id="searchCustomerModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLongTitle">{{ trans('labels.employee_detail') }}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body  bg-light">
                        <form id="searchForm" name="searchForm">
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}" />
                            <input type="hidden" id="_idpk" name="_idpk" value="" />
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h4 class="card-title">{{ trans('labels.search') }}</h4>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4></h4>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-group-default">
                                            <label for="employeeCategory">{{ trans('labels.employee_category') }} <span
                                                    class="required-label">*</span></label>
                                            <select id="employeeCategory" name="employeeCategory" class="form-control"
                                                autocomplete="off" autocomplete="off">
                                                <option value="">{{ trans('labels.select_all') }}</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->description }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group form-group-default">
                                            <label for="employeeDesignation">{{ trans('labels.employee_designation') }}
                                                <span class="required-label">*</span></label>
                                            <select id="employeeDesignation" name="employeeDesignation" class="form-control"
                                                autocomplete="off">
                                                <option value="">{{ trans('labels.select_all') }}</option>
                                                @foreach ($designations as $designation)
                                                    <option value="{{ $designation->id }}">{{ $designation->description }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group form-group-default">
                                            <label for="search">{{ trans('labels.employee_search') }} <span
                                                    class="required-label">*</span></label>
                                            <input type="text" class="form-control uppercase" id="search"
                                                name="search" maxlength="100">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <button class="btn btn-primary btn-lg mt-2 pull-right" id="btnSearch"
                                            type="button">
                                            <i class="fas fa-search"></i> &nbsp;
                                            {{ trans('labels.search_button') }}
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <small class="text-default" style="font-size:12px;"><b>(USE AS A PART OF <u>NAME,
                                                    CONTACT NUMBER OR NIC</u>)</b></small>
                                    </div>
                                </div>
                            </div>
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h4 class="card-title">{{ trans('labels.search_result') }}</h4>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="tblData" class="display table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th style="width:25px;">#</th>
                                                <th>{{ trans('labels.employee_no') }} </th>
                                                <th>{{ trans('labels.employee_name') }} </th>
                                                <th>{{ trans('labels.nic') }} </th>
                                                <th>{{ trans('labels.action') }}</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        @include('partials.bread-crumbs')

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <button class="btn btn-primary" id="btnLoadSearch" type="button">
                            <span class="btn-label"><i class="fas fa-search"></i>
                                {{ trans('labels.employee_list') }}</span>
                        </button>

                    </div>
                    <div class="card-body">
                        <form id="form" name="form">
                            <input type="hidden" id="_idpk" name="_idpk" />
                            <h6 class="custom-h6">{{ trans('labels.personal_detail') }}</h6>
                            <hr>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeNo">{{ trans('labels.employee_no') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase num" id="employeeNo"
                                            name="employeeNo" maxlength="5" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeRefNo">{{ trans('labels.ref_no') }} </label>
                                        <input type="text" class="form-control uppercase" id="employeeRefNo"
                                            name="employeeRefNo" maxlength="10" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeNIC">{{ trans('labels.nic') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="employeeNIC"
                                            name="employeeNIC" maxlength="12" required autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeTitle">{{ trans('labels.title') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeTitle" name="employeeTitle" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach (trans('constants.title') as $k => $v)
                                                <option value="{{ $k }}">{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group form-group-default">
                                        <label for="employeeFullName">{{ trans('labels.full_name') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="employeeFullName"
                                            name="employeeFullName" maxlength="200" required autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeInitials">{{ trans('labels.initials') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="employeeInitials"
                                            name="employeeInitials" maxlength="20" required autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeFirstName">{{ trans('labels.first_name') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="employeeFirstName"
                                            name="employeeFirstName" maxlength="100" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default form-input-readonly">
                                        <label for="employeeLastName">{{ trans('labels.last_name') }} </label>
                                        <input type="text" class="form-control uppercase" id="employeeLastName"
                                            name="employeeLastName" maxlength="100" required readonly autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeCallingName">{{ trans('labels.calling_name') }} </label>
                                        <input type="text" class="form-control uppercase" id="employeeCallingName"
                                            name="employeeCallingName" maxlength="50" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeGender">{{ trans('labels.gender') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeGender" name="employeeGender" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach (trans('constants.gender') as $k => $v)
                                                <option value="{{ $k }}">{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default form-input-readonly">
                                        <label for="employeeDOB">{{ trans('labels.dob') }} </label>
                                        <input type="text" class="form-control uppercase" id="employeeDOB"
                                            name="employeeDOB" maxlength="10" required readonly autocomplete="off" />
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="civilStatus">{{ trans('labels.civil_status') }} <span
                                                class="required-label">*</span></label>
                                        <select id="civilStatus" name="civilStatus" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach (trans('constants.civil_status') as $k => $v)
                                                <option value="{{ $k }}">{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="location">{{ trans('labels.location') }} <span
                                                class="required-label">*</span></label>
                                        <select id="location" name="location" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach ($locations as $location)
                                                <option value="{{ $location->id }}">{{ $location->location_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeDepartment">{{ trans('labels.employee_department') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeDepartment" name="employeeDepartment" class="form-control"
                                            required autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}">{{ $department->description }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeDesignation">{{ trans('labels.employee_designation') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeDesignation" name="employeeDesignation" class="form-control"
                                            required autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            {{-- @foreach ($designations as $designation)
                                                <option value="{{ $designation->id }}">{{ $designation->description }}
                                                </option>
                                            @endforeach --}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeCategory">{{ trans('labels.employee_category') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeCategory" name="employeeCategory" class="form-control"
                                            required autocomplete="off" autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->description }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeContactNo">{{ trans('labels.contact_no') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase num" id="employeeContactNo"
                                            name="employeeContactNo" maxlength="9" required autocomplete="off">
                                    </div>
                                </div>
								<div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeContactNo2">{{ trans('labels.contact_no') }} </label>
                                        <input type="text" class="form-control uppercase num" id="employeeContactNo2"
                                            name="employeeContactNo2" maxlength="9" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                
                                <div class="col-md-8">
                                    <div class="form-group form-group-default">
                                        <label for="employeeEmail">{{ trans('labels.email') }} <span
                                                class="required-label"></span></label>
                                        <input type="text" class="form-control" id="employeeEmail"
                                            name="employeeEmail" maxlength="100" autocomplete="off">
                                    </div>
                                </div>
								<div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="joinedDate">{{ trans('labels.joined_date') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control datepicker" id="joinedDate"
                                            name="joinedDate" maxlength="14">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                
                            </div>
                            <h6 class="custom-h6">{{ trans('labels.bank_detail') }}</h6>
                            <hr>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeBank">{{ trans('labels.bank') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeBank" name="employeeBank" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach ($banks as $bank)
                                                <option value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeBankBranch">{{ trans('labels.bank_branch') }} <span
                                                class="required-label">*</span></label>
                                        <select id="employeeBankBranch" name="employeeBankBranch" class="form-control"
                                            required autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeAccountNo">{{ trans('labels.account_no') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control" id="employeeAccountNo"
                                            name="employeeAccountNo" maxlength="100" autocomplete="off">
                                    </div>
                                </div>

                            </div>
                            <h6 class="custom-h6">{{ trans('labels.user_detail') }}</h6>
                            <hr>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="username">{{ trans('labels.username') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control" id="username" name="username"
                                            maxlength="20" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="password">{{ trans('labels.password') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control" id="password" name="password"
                                            maxlength="20" autocomplete="off">
                                    </div>
                                </div>


                            </div>
                        </form>
                        <form id="formAddress" name="formAddress">
                            <h6 class="custom-h6">{{trans('labels.address_detail')}}</h6>
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="addressType">{{trans('labels.address_type')}} <span class="required-label">*</span></label>
                                        <select id="addressType" name="addressType" class="form-control uppercase" required autocomplete="off"  autocomplete="off">
                                            <option value="">{{trans('labels.select')}}</option>
                                            <option value="1">{{trans('labels.permanent')}}</option>
                                            <option value="2">{{trans('labels.mailing')}}</option>
                                        
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="addressLine1">{{trans('labels.address_line1')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="addressLine1" name="addressLine1" maxlength="100"  autocomplete="off">
                                    </div>
                                </div>  
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="addressLine2">{{trans('labels.address_line2')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="addressLine2" name="addressLine2" maxlength="100"  autocomplete="off">
                                    </div>
                                </div> 
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="addressLine3">{{trans('labels.address_line3')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="addressLine3" name="addressLine3" maxlength="100"  autocomplete="off">
                                    </div>
                                </div>  
                                <div class="col-md-8 ">
                                    <button class="btn btn-primary pull-right" id="btnAddAddress" type="button">
                                        <span class="btn-label"><i class="fas fa-check-circle"></i> {{trans('labels.add_address_button')}}</span>
                                    </button>
                                </div> 
                            </div>
                            <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>
                                                    <th>{{trans('labels.action')}} </th>
                                                    <th></th>
                                                    <th></th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <form id="formFamily" name="formFamily">
                            <h6 class="custom-h6">{{trans('labels.family_detail')}}</h6>
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="relationType">{{trans('labels.relation_type')}} <span class="required-label">*</span></label>
                                        <select id="relationType" name="relationType" class="form-control" required
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select') }}</option>
                                            @foreach (trans('constants.relation_types') as $k => $v)
                                                <option value="{{ $k }}">{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group form-group-default">
                                        <label for="name">{{trans('labels.name')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control uppercase" id="name" name="name" maxlength="200"  autocomplete="off">
                                    </div>
                                </div>  
                                
                            </div>
                            <div class="row">
                                  
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="dob">{{trans('labels.dob')}} <span class="required-label">*</span></label>
                                        <input type="text" class="form-control datepicker" id="dob" name="dob" maxlength="14"  autocomplete="off">
                                    </div>
                                </div>  

                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="nic">{{trans('labels.nic')}} </label>
                                        <input type="text" class="form-control uppercase" id="nic" name="nic" maxlength="12"  autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-4 ">
                                    <button class="btn btn-primary pull-right" id="btnAddFamily" type="button">
                                        <span class="btn-label"><i class="fas fa-check-circle"></i> {{trans('labels.add_family_button')}}</span>
                                    </button>
                                </div> 
                            </div>
                            <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>
                                                    <th>{{trans('labels.action')}} </th>
                                                    <th></th>
                                                    <th></th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <form id="formProfilePhoto" name="formProfilePhoto">
                            <h6 class="custom-h6">{{trans('labels.profile_photo')}} / {{trans('labels.curriculum_vitae')}}</h6>
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="input-file input-file-image">
                                        <img class="img-upload-preview img-profile" src="{{asset('images/150place-holder.png')}}" alt="preview" width="150">
                                        <input type="file" class="form-control form-control-file" id="uploadImg1" name="uploadImg1" accept="image/*" required="">
                                        <label for="uploadImg1" class="label-input-file btn btn-primary">
                                            <span class="btn-label">
                                                <i class="fa fa-file-image"></i>
                                            </span>
                                            Select Photo
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-file input-file-file" > 
                                        <img class="img-upload-preview img-cv" src="{{ asset('images/doc-file.png') }}" alt="CV Preview" width="150">
                                        <input type="file" class="form-control form-control-file" id="uploadCV" name="uploadCV" accept=".pdf,.doc,.docx" required>
                                        <label for="uploadCV" class="label-input-file btn btn-primary" >
                                            <span class="btn-label">
                                                <i class="fa fa-file"></i>
                                            </span>
                                            Select CV
                                        </label>
                                        <a href="#" id="viewCV" class="label-input-file btn btn-warning" style="display:none" target="_blank">
                                            <span class="btn-label">
                                                <i class="fa fa-file"></i>
                                            </span>
                                            View CV
                                        </a>
                                        <a href="#" id="clearCV" class="label-input-file btn btn-danger" style="display:none"  target="_blank">
                                            <span class="btn-label">
                                                <i class="fas fa-trash-alt"></i>
                                            </span>
                                            Clear CV
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            
                        </form>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-12">
                                @can('employee_create')
                                    @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/employee/employee-creation.js?v=3') }}"></script>
    <script type="text/javascript" src="{{ asset('js/datatables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/autoNumeric1.6.2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/services/constant.js') }}"></script>
@endsection

@section('custom_styles')
<style type="text/css">
.input-file.input-file-file img.img-upload-preview {
    max-width: 100%;
    display: block;
    margin-bottom: 15px;
    /* box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);  */
}    
    
</style>

@endsection