CasperSecurity
<div class="row">
<div class="card z-auto p-[25px]" style="min-height: 690px;">
<div class="card-header">
<div class="flex justify-between items-center mb-2">
<h1 class="heading text-[1.8rem] font-medium uppercase">{{$page_name}}</h1>
<div class="flex items-center">
<a class="btn btn-secondary duration-500 hover:bg-hover-secondary py-[5px] px-3 text-[13px] rounded text-white bg-secondary leading-[18px] inline-block border border-secondary ml-2 cursor-pointer dz-modal-btn" data-dz-modal="EmployeeOrgChartModal">Organizational Chart</a>
<a class="btn btn-success duration-500 hover:bg-hover-success py-[5px] px-3 text-[13px] rounded text-white bg-success leading-[18px] inline-block border border-success ml-2 cursor-pointer dz-modal-btn" data-dz-modal="EmployeeUplodModal">+ Upload {{$page_name}}</a>
<a class="btn btn-primary duration-500 hover:bg-hover-primary py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[18px] inline-block border border-primary ml-2 offcanvas-toggle cursor-pointer" wire:click="showmodalclick">+ Add {{$page_name}}</a>
</div>
</div>
</div>
<div class="card-body">
<div class="p-[1.563rem]">
<div class="flex justify-between">
<div class="w-1/4 px-0 py-2">
<input wire:model="search" type="text" class="form-control relative text-[13px] text-dark h-[2.813rem] border border-dark block rounded-md py-1.5 px-3 duration-500 dark:hover:border-b-color outline-none w-full" id="search" placeholder="Search ..." autocomplete="off" />
</div>
<div class="w-1/3 px-1">
<div class="row flex justify-between">
<div class="w-1/3 px-2 py-2 justify-end">
<select name="orderBy" wire:model="orderBy" class="form-select w-full rounded-md style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.813rem] leading-[1.813rem]">
<option value="id">ID</option>
<option value="name">Employee Name</option>
<option value="employee_id">Employee ID</option>
<option value="mobile_no">Mobile No</option>
</select>
</div>
<div class="w-1/3 px-2 py-2 justify-end">
<select name="orderAsc" wire:model="orderAsc" class="form-select w-full rounded-md style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.813rem] leading-[1.813rem]">
<option value="1">Ascending</option>
<option value="0">Descending</option>
</select>
</div>
<div class="w-1/3 px-2 py-2 justify-end">
<select name="perPage" wire:model="perPage" class="form-select w-full rounded-md style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.813rem] leading-[1.813rem]">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto table-scroll">
<table id="dept_datatable" class="display table w-full" >
<thead>
<tr class="bg-transparent">
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Action
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Status
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
#ID
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Employee ID
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Employee Name
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Email ID
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Contact No.
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
City
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Date Of Joining
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Wages Type
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Employment
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] capitalize whitespace-nowrap text-xs font-medium text-center">
Created At
</th>
</tr>
</thead>
<tbody>
@if(sizeof($datatable)>0)
@foreach($datatable as $data)
<tr class="bg-transparent">
<td class="bg-transparent border-2 border-solid border-[#E6E6E6] dark:border-[#444444] py-2 px-[0.9375rem] whitespace-nowrap text-[15px] font-normal text-center">
<div class="flex justify-center">
<a href="javascript:void(0);" wire:click="updateclick('{{$data['id']}}')" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-primary hover:bg-hover-primary duration-300 mr-1 offcanvas-toggle"><i class="fas fa-pencil-alt text-[0.875em]"></i></a>
<a href="javascript:void(0);" wire:click="deleteclick('{{$data['id']}}')" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-danger hover:bg-danger-hover duration-300"><i class="fa fa-trash text-[0.875em]"></i></a>
</div>
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-center">
@if($data->status == '1')
<span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] text-success bg-success-light">Active</span>
@else
<span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] text-dark bg-d-light-2">Inactive</span>
@endif
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-center">
@if($data->id<10)
#EMP00{{$data->id}}
@elseif($data->id<100)
#EMP0{{$data->id}}
@else
#EMP{{$data->id}}
@endif
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-center">{{$data->employee_id}}</td>
<td class=" text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-left">
<div class="row">
<div class="w-1/3">
@if($data->employee_photo)
<img src="{{\Illuminate\Support\Facades\Storage::url($data->employee_photo)}}" class="inline-block mr-2.5 w-[2.813rem] min-w-[2.813rem] h-[2.813rem] rounded-md relative object-cover avatar-md" width="50px" height="50px" />
@else
@if($data->gender=="Male")
<img src="{{asset('icons/employee_male.png')}}" class="inline-block mr-2.5 w-[2.813rem] min-w-[2.813rem] h-[2.813rem] rounded-md relative object-cover avatar-md" width="50px" height="50px" />
@else
<img src="{{asset('icons/employee_female.png')}}" class="inline-block mr-2.5 w-[2.813rem] min-w-[2.813rem] h-[2.813rem] rounded-md relative object-cover avatar-md" width="50px" height="50px" />
@endif
@endif
</div>
<div class="w-2/3" style="align-content: center;">
{{$data->name}}<br/>
{{-- {{$data->getDesignation->designation_name}}--}}
</div>
</div>
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-left">
{{$data->email_id}}
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-left">
{{$data->mobile_no}}
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-left">
{{$data->city_name}}
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-left">
{{\Carbon\Carbon::parse($data->date_of_joining)->format('d-F-Y')}}
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] capitalize whitespace-nowrap xl:text-xs text-xs font-normal text-center">
@if($data->wages_type=='DAILY')
<span class="py-[5px] px-3 rounded border border-transparent text-xs leading-[1.5] bg-warning-light text-black">DAILY</span>
@elseif($data->wages_type=='MONTHLY')
<span class="py-[5px] px-3 rounded border border-transparent text-xs leading-[1.5] bg-danger-light text-black">MONTHLY</span>
@endif
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-center">
<span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] text-dark dark:text-white bg-info-light">{{$data->employee_type_name}}</span>
</td>
<td class="text-black border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-xs text-xs font-normal text-center">{{\Carbon\Carbon::parse($data->created_at)->format('d-m-Y H:i A')}}</td>
</tr>
@endforeach
@else
<tr class="bg-transparent">
<td colspan="13" class="text-danger border-2 border-solid border-[#E6E6E6] dark:border-[#444444] bg-transparent xl:py-2 py-2 xl:px-[0.9375rem] px-[0.9375rem] whitespace-nowrap xl:text-[15px] text-[15px] font-bold text-center">No Data Available</td>
</tr>
@endif
</tbody>
</table>
</div>
<div class="w-full" wire:ignore.self>
{{$datatable->links('livewire.pagination-livewire')}}
</div>
</div>
</div>
<div wire:ignore.self class="modal fade fixed top-0 right-0 overflow-y-auto overflow-x-hidden dz-scroll w-full h-full z-[1055] translate-y-[-50px] dz-modal-box model-close" id="EmployeeOrgChartModal">
<div class="modal-dialog modal-dialog-center max-w-[500px] mx-auto my-[1.75rem] w-auto relative pointer-events-none">
<div class="modal-content mx-[10px] flex flex-col relative rounded-md bg-white dark:bg-[#242424] w-full pointer-events-auto" style="width: 1800px !important;">
<div class="modal-header flex justify-between items-center flex-wrap py-4 px-[1.875rem] relative z-[2] border-b border-b-color">
<h1 class="modal-title text-base" id="exampleModalLabel1">Organisation Chart</h1>
<button type="button" class="btn-close p-4">X</button>
</div>
<div class="modal-body relative p-[1.875rem]">
<div class="row">
<div class="w-full" id="org_chart">
</div>
</div>
</div>
</div>
</div>
</div>
<div wire:ignore.self class="modal fade fixed top-0 right-0 overflow-y-auto overflow-x-hidden dz-scroll w-full h-full z-[1055] translate-y-[-50px] dz-modal-box model-close" id="EmployeeUplodModal">
<div class="modal-dialog modal-dialog-center max-w-[500px] mx-auto my-[1.75rem] w-auto relative pointer-events-none">
<div class="modal-content mx-[10px] flex flex-col relative rounded-md bg-white dark:bg-[#242424] w-full pointer-events-auto">
<div class="modal-header flex justify-between items-center flex-wrap py-4 px-[1.875rem] relative z-[2] border-b border-b-color">
<h1 class="modal-title text-base" id="exampleModalLabel1">Upload Employee</h1>
<button type="button" class="btn-close p-4">X</button>
</div>
<div class="modal-body relative p-[1.875rem]"
x-data="{ uploading: false, progress: 0 }"
x-on:livewire-upload-start="uploading = true"
x-on:livewire-upload-finish="uploading = false; progress = 0;"
x-on:livewire-upload-progress="progress = $event.detail.progress">
<div class="row">
<div class="w-full">
<label class="form-label text-[#7a7676] dark:text-white">Upload CSV Document<span class="text-danger">*</span></label>
<input type="file" wire:model.defer="upload_csv_file" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" placeholder="Upload CSV">
{{--<div wire:loading wire:target="uplodEmployee">Please wait while uploading, It will take sometime.</div>--}}
<div x-show="uploading">
<div class="w-full h-4 bg-slate-100 rounded-lg shadow-inner mt-3">
<div class="bg-green-500 h-4 rounded-lg" :style="{ width: `${progress}%` }"></div>
</div>
</div>
@error('upload_csv_file') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
</div>
</div>
<div class="modal-footer flex items-center justify-end flex-wrap py-4 px-[1.875rem] border-t border-b-color">
<button type="button" class="close-btn btn xl:py-[0.719rem] py-2.5 xl:px-[1.563rem] px-4 m-1 duration-300 xl:text-[15px] text-[13px] font-medium rounded text-danger bg-danger-light leading-5 inline-block border border-danger-light btn-danger light hover:text-white hover:bg-danger">Close</button>
<button type="button" class=" btn btn-primary xl:py-[0.719rem] py-2.5 xl:px-[1.563rem] px-4 m-1 duration-300 xl:text-[15px] text-[13px] font-medium rounded text-white bg-primary leading-5 inline-block border border-primary hover:bg-hover-primary" wire:click="uplodEmployee" wire:loading.attr="disabled">Upload</button>
</div>
</div>
</div>
</div>
</div>
<div wire:ignore.self>
<div class="fixed top-0 right-0 flex flex-col xl:w-full md:w-full w-[350px] h-[100vh] z-[1045] bg-white dark:bg-[#1E1E1E] text-body-color duration-500 ease-in-out offcanvas @if($showmodal) @else is-closed @endif" id="offcanvasExample">
<div class="ml-4 flex items-center justify-between p-4">
<h5 class="modal-title" id="#gridSystemModal">
@if($modelid)
Update {{$page_name}}
@else
Add New {{$page_name}}
@endif
</h5>
<button type="button" class="offcanvas-close h-6 w-6 box-content bg-danger-light rounded-md text-lg mr-4 p-2 opacity-50 hover:opacity-100 text-red" wire:click="closemodalclick">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="p-4 overflow-y-auto overflow-x-hidden dz-scroll">
<div class="container-fluid px-[15px] py-0">
<div>
<div class="row">
<div class="w-1/3 p-4" style="min-height: 300px;">
<div class="row">
<div class="w-full mb-4">
<h4>Upload Employee Photo (If Available)</h4>
</div>
<div class="mb-4 md:w-full text-center">
<center>
@if($employee_photo != null)
<img src="{{ \Illuminate\Support\Facades\Storage::url($employee_photo) }}"
width='50%' height='50%' alt="$employee_photo"/>
@else
<img src="{{asset('assets/images/no_image.jpg')}}" width='50%' height='50%'/>
@endif
</center>
</div>
<div class="mb-4 md:w-full">
<label class="form-label text-body-color dark:text-white">Upload Photo</label>
{{--<input type="file" accept="img/*"
class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full input-default "
wire:model="employee_photo"/>--}}
<x-forms.filepond
wire:model="employee_photo"
allowImagePreview
imagePreviewMaxHeight="200"
allowFileTypeValidation
acceptedFileTypes="['image/png', 'image/jpg', 'image/jpeg']"
allowFileSizeValidation
maxFileSize="4mb"
/>
@error('employee_photo') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
</div>
</div>
<div class="w-2/3 p-4" style=" min-height: 300px;">
<div class="row mb-4">
<div class="w-full mb-4">
<h4>Employee Information</h4>
</div>
@if($modelid)
<div class="xl:w-1/3 mb-4">
<label for="employee_id" class="form-label">Employee ID<span class="text-danger">*</span></label>
<input type="text" name="employee_id" id="employee_id" disabled placeholder="Enter Employee ID" wire:model.defer="employee_id" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('employee_id') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
@endif
@if($modelid)
<div class="xl:w-1/3 mb-4">
<label for="name" class="form-label">Employee Name<span class="text-danger">*</span></label>
<input type="text" name="name" id="name" placeholder="Enter Employee Name" wire:model.defer="name" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('name') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
@else
<div class="xl:w-2/3 mb-4">
<label for="name" class="form-label">Employee Name<span class="text-danger">*</span></label>
<input type="text" name="name" id="name" placeholder="Enter Employee Name" wire:model.defer="name" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('name') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
@endif
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Gender<span
class="text-danger">*</span></label>
<select id="gender" name="gender"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="gender">
<option selected value="">Choose...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Others</option>
</select>
@error('gender') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label for="email_id" class="form-label">Email ID</label>
<input type="email" name="email_id" id="email_id" placeholder="Enter Email ID" wire:model.defer="email_id" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('email_id') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label for="mobile_no" class="form-label">Mobile No.<span class="text-danger">*</span></label>
<input type="text" maxlength="10" onkeypress="return onlyNumberKey(event)" name="mobile_no" id="mobile_no" placeholder="Enter Mobile No." wire:model.defer="mobile_no" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('mobile_no') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Blood Group<span
class="text-danger">*</span></label>
<select id="inputState"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="blood_group">
<option selected value="">Choose...</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
@error('blood_group') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/2 mb-4">
<label for="date_of_birth" class="form-label">Date Of Birth<span class="text-danger">*</span></label>
<input type="date" max="{{date('Y-m-d')}}" name="date_of_birth" id="date_of_birth" placeholder="Enter Date Of Birth" wire:model.defer="date_of_birth" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('date_of_birth') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/2 mb-4">
<label for="qualification" class="form-label">Qualification<span class="text-danger">*</span></label>
<input type="text" name="qualification" id="qualification" placeholder="Enter Qualification" wire:model.defer="qualification" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('qualification') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="row mb-4">
<div class="w-full mb-4">
<h4>Official Information</h4>
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Designation<span
class="text-danger">*</span></label>
<select id="designation" name="designation"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="designation">
<option selected value="">Choose...</option>
@foreach($designations as $designation)
<option value="{{$designation['id']}}">{{$designation['designation_name']}}</option>
@endforeach
</select>
@error('designation') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Department<span
class="text-danger">*</span></label>
<select id="team_id" name="team_id"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="team_id">
<option selected value="">Choose...</option>
@foreach($departments as $department)
<option value="{{$department['id']}}">{{$department['display_name']}}</option>
@endforeach
</select>
@error('team_id') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Role<span
class="text-danger">*</span></label>
<select id="role_id" name="role_id"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="role_id">
<option selected value="">Choose...</option>
@foreach($roles as $role)
<option value="{{$role['id']}}">{{$role['display_name']}}</option>
@endforeach
</select>
@error('role_id') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/2">
<label class="form-label text-body-color dark:text-white">Manager</label>
<select id="manager_id" name="manager_id"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="manager_id">
<option selected value="">Choose...</option>
@foreach($employees as $employee)
<option value="{{$employee['id']}}">{{$employee['name']}} ({{$employee['designation']}})</option>
@endforeach
</select>
@error('manager_id') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/2">
<label class="form-label text-body-color dark:text-white">HR</label>
<select id="hr_id" name="hr_id"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="hr_id">
<option selected value="">Choose...</option>
@foreach($employees as $employee)
<option value="{{$employee['id']}}">{{$employee['name']}} ({{$employee['designation']}})</option>
@endforeach
</select>
@error('hr_id') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Work Location (City)<span
class="text-danger">*</span></label>
<select id="city" name="city"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="city">
<option selected value="">Choose...</option>
@foreach($cities as $city)
<option value="{{$city['id']}}">{{$city['city_name']}}</option>
@endforeach
</select>
@error('city') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label for="date_of_birth" class="form-label">Date Of Joining<span class="text-danger">*</span></label>
<input type="date" max="{{date('Y-m-d')}}" name="date_of_joining" id="date_of_joining" placeholder="Enter Date Of Joining" wire:model.defer="date_of_joining" class="form-control relative text-[13px] text-body-color h-[2.813rem] border border-b-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none w-full" >
@error('date_of_joining') <span class="error text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Employment Status<span
class="text-danger">*</span></label>
<select id="employment_status" name="employment_status"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="employment_status">
<option selected value="">Choose...</option>
@foreach($employeetypes as $employeetype)
<option value="{{$employeetype['id']}}">{{$employeetype['emp_type_name']}}</option>
@endforeach
</select>
@error('employment_status') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Employee Category</label>
<select id="employee_category" name="employee_category"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="employee_category">
<option selected value="">Choose...</option>
<option value="SKILL">SKILL</option>
<option value="SEMI SKILL">SEMI SKILL</option>
<option value="UN SKILL">UN SKILL</option>
</select>
@error('employee_category') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Wages Type</label>
<select id="wages_type" name="wages_type"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="wages_type">
<option selected value="">Choose...</option>
<option value="DAILY">DAILY</option>
<option value="MONTHLY">MONTHLY</option>
</select>
@error('wages_type') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
@if($modelid)
<div class="mb-4 md:w-1/3">
<label class="form-label text-body-color dark:text-white">Status</label>
<select id="status" name="status"
class="form-select w-full style-1 py-1.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-b-color text-[#a5a5a5] h-[2.813rem] leading-[1.813rem] rounded-md"
wire:model.defer="status">
<option selected value="">Choose...</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
@error('status') <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
@endif
</div>
</div>
</div>
<div class="flex justify-center">
<button class="btn xl:py-[0.719rem] mr-4 py-2.5 xl:px-[1.563rem] px-4 duration-300 xl:text-[15px] text-[13px] font-medium rounded text-danger bg-danger-light leading-5 inline-block border border-danger-light btn-danger light hover:text-white hover:bg-danger offcanvas-close" wire:click="closemodalclick">Cancel</button>
@if($modelid)
<button class="btn btn-primary xl:py-[0.719rem] py-2.5 xl:px-[1.563rem] px-4 duration-300 xl:text-[15px] text-[13px] font-medium rounded text-white bg-primary leading-5 inline-block border border-primary hover:bg-hover-primary" wire:click="update" wire:keydown.enter="update" wire:loading.attr="disabled">Update</button>
@else
<button class="btn btn-primary xl:py-[0.719rem] py-2.5 xl:px-[1.563rem] px-4 duration-300 xl:text-[15px] text-[13px] font-medium rounded text-white bg-primary leading-5 inline-block border border-primary hover:bg-hover-primary" wire:click="save" wire:keydown.enter="save" wire:loading.attr="disabled">Save</button>
@endif
</div>
</div>
</div>
</div>
@if($showmodal)
<x-notify::notify />
@endif
</div>
</div>
</div>
@section('externaljs')
<script src="https://cdn.jsdelivr.net/npm/apextree"></script>
<script>
const data = {!! json_encode(json_decode($allemployees)) !!};
const options = {
contentKey: 'data',
width: 1200,
height: 600,
nodeWidth: 150,
nodeHeight: 100,
fontColor: '#000',
borderColor: '#333',
childrenSpacing: 50,
siblingSpacing: 20,
direction: 'top',
enableExpandCollapse: true,
nodeTemplate: (content) =>
`<div style='display: flex;flex-direction: column;gap: 10px;justify-content: center;align-items: center;height: 100%;'>
<img style='width: 50px;height: 50px;border-radius: 50%;' src='${content.imageURL}' alt='' />
<div style="font-weight: bold; font-family: Arial; font-size: 10px">${content.name}</div>
</div>`,
canvasStyle: 'border: 1px solid black;background: #fff;',
enableToolbar: false,
};
const tree = new ApexTree(document.getElementById('org_chart'), options);
tree.render(data);
</script>
@endsection