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">Attendance Details</h1>
<div class="flex items-center">
<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 cursor-pointer"
wire:click="attendance_format">
<span class="px-1">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1221 15.4361L12.1221 3.39508" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M15.0381 12.5084L12.1221 15.4364L9.20609 12.5084" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M16.7551 8.12799H17.6881C19.7231 8.12799 21.3721 9.77699 21.3721 11.813V16.697C21.3721 18.727 19.7271 20.372 17.6971 20.372L6.55707 20.372C4.52207 20.372 2.87207 18.722 2.87207 16.687V11.802C2.87207 9.77299 4.51807 8.12799 6.54707 8.12799L7.48907 8.12799" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>Download Format</a>
<a class="btn btn-warning duration-500 hover:bg-hover-warning py-[5px] px-3 text-[13px] rounded text-white bg-warning leading-[18px] inline-block border border-warning ml-2 cursor-pointer dz-modal-btn" data-dz-modal="EmployeeUplodModal">+ Upload Monthly Attedance</a>
<a class="btn btn-warning duration-500 hover:bg-hover-warning py-[5px] px-3 text-[13px] rounded text-white bg-danger leading-[18px] inline-block border border-warning ml-2 cursor-pointer dz-modal-btn" data-dz-modal="LeaveUplodModal">+ Upload Leave Details</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 cursor-pointer dz-modal-btn" data-dz-modal="attendacemodal" {{-- wire:click="showmodalclick"--}}>+ Mark Attendance</a>
</div>
</div>
</div>
<div class="card-body">
<div class="flex justify-between mb-2">
<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-2/3 px-1">
<div class="row flex justify-end">
<div class="w-1/6 px-2 py-2 justify-end">
<input name="select_calender" type="month" wire:model="currentmonth" 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]"></input>
</div>
<div class="w-1/6 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>
</select>
</div>
<div class="w-1/6 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/6 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 class="display table w-full">
<thead>
<tr>
<th class="text-[13px] py-2.5 pl-4 pr-0 bg-[#F0F4F9] text-[#374557] capitalize font-medium bg-none whitespace-nowrap text-left style-1">Employee Informations</th>
@foreach($monthlydates as $day)
<th class="text-[13px] py-[15px] px-[5px] bg-[#F0F4F9] text-[#374557] capitalize font-medium bg-none whitespace-nowrap style-1">
<span class="">{{\Carbon\Carbon::parse($day['date'])->format('d')}}</span>
<p class="text-[10px] text-primary">{{$day['day']}}</p>
</th>
@endforeach
<th class="text-center text-[13px] py-[15px] pr-[5px] pl-[25px] bg-[#F0F4F9] text-[#374557] capitalize font-medium bg-none whitespace-nowrap style-1">
<span>Total</span>
</th>
</tr>
</thead>
<tbody>
@foreach($employees as $employee)
<tr>
<td class="border-b border-[#E6E6E6] dark:border-[#444444] text-[13px] py-1.5 px-5 font-normal whitespace-nowrap">
<div class="products flex items-center">
@if($employee->employee_photo)
<img src="{{\Illuminate\Support\Facades\Storage::url($employee->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" alt="">
@else
<img src="assets/images/contacts/pic2.jpg" class="inline-block mr-2.5 w-[2.813rem] min-w-[2.813rem] h-[2.813rem] rounded-md relative object-cover avatar-md" alt="">
@endif
<div>
<h6 class="text-sm">{{$employee->name}}</h6>
<span class="text-xs">{{$employee->designation}}</span>
</div>
</div>
</td>
<?php
$present_count=0;
?>
@foreach($monthlydates as $day)
<td class="border-b border-[#E6E6E6] dark:border-[#444444] text-[13px] py-[15px] px-[7px] font-normal whitespace-nowrap ">
<center>
<?php
$ispresent=\App\Models\EmployeeAttendance::where('employee_id',$employee->id)->where('attendance_date',$day['date'])->first();
// $ispresent=\App\Models\LeaveRequest::where('employee_id',$employee->id)->where('attendance_date',$day['date'])->first();
//dd($ispresent);
if($ispresent){
$present_count=$present_count+1;
}
?>
@if($ispresent)
<span class="text-success"><i class="fa-solid fa-check"></i> </span>
@else
<span class="text-danger"><i class="fa-regular fa-xmark font-black"></i></span>
@endif
</center>
</td>
@endforeach
{{-- <td class="border-b border-[#E6E6E6] dark:border-[#444444] text-[13px] py-[15px] px-[7px] font-normal whitespace-nowrap justify-center">
<center>
<span class="text-danger"><i class="fa-regular fa-xmark font-black"></i></span>
</center>
</td>--}}
<td class="text-center border-b border-[#E6E6E6] dark:border-[#444444] py-[15px] pr-[7px] pl-[25px]"><span class="text-body-color dark:text-white text-[13px]">{{$present_count}}/{{sizeof($monthlydates)}}</span></td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="w-full" wire:ignore.self>
{{$employees->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="attendacemodal">
<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="exampleModalLabel">Add Attendance</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="modal-body relative p-[1.875rem]">
<div class="row">
<div class="w-full px-2 py-2">
<select name="employee_id" wire:model="employee_id" 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="">Select An Employees</option>
@foreach($allemployees as $employee)
<option value="{{$employee['id']}}">{{$employee['name']}}</option>
@endforeach
</select>
</div>
<div class="w-full">
<label class="text-body-color mt-4">Attendance Date<span class="text-danger">*</span></label>
<input 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" type="date">
<div class="row">
<div class="xl:w-1/2 w-full">
<label class="text-body-color mt-4">In Time<span class="text-danger">*</span></label>
<div class="flex items-stretch flex-wrap relative w-full">
<input type="time" class="w-full relative bg-transparent text-[13px] h-[2.813rem] border border-b-color text-body-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none" value="09:30">
</div>
</div>
<div class="xl:w-1/2 w-full">
<label class="text-body-color mt-4">Out Time<span class="text-danger">*</span></label>
<div class="flex items-stretch flex-wrap relative w-full">
<input type="time" class="w-full relative bg-transparent text-[13px] h-[2.813rem] border border-b-color text-body-color block rounded-md py-1.5 px-3 duration-500 focus:border-primary dark:hover:border-b-color outline-none" value="09:30">
</div>
</div>
</div>
</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="save-btn 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">Save changes</button>
</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="exampleModalLabel">Upload Attendance</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="modal-body relative p-[1.875rem]">
<div class="row">
<div class="w-full">
<label class="text-body-color mt-4">Attendance Date<span class="text-danger">*</span></label>
<input 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" wire:model.defer="employee_attendance" type="file">
</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="save-btn 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="upload">Upload</button>
</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="LeaveUplodModal">
<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="exampleModalLabel">Upload Leaves</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="modal-body relative p-[1.875rem]">
<div class="row">
<div class="w-full">
<label class="text-body-color mt-4">Leave Details<span class="text-danger">*</span></label>
<input 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" wire:model.defer="employee_leave" type="file">
</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="save-btn 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="leaveUpload">Upload</button>
</div>
</div>
</div>
</div>
</div>