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">Wage Details</h1>
<div class="flex items-baseline">
{{-- <a class="btn btn-primary duration-500 hover:bg-hover-primary py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[20px] inline-block border border-primary ml-2 cursor-pointer"--}}
{{-- wire:click="exportWage">--}}
{{-- <span class="px-1">--}}
{{-- <svg width="20" height="20" 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="salaryinof_upload">
<span class="px-1">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.38948 8.98403H6.45648C4.42148 8.98403 2.77148 10.634 2.77148 12.669V17.544C2.77148 19.578 4.42148 21.228 6.45648 21.228H17.5865C19.6215 21.228 21.2715 19.578 21.2715 17.544V12.659C21.2715 10.63 19.6265 8.98403 17.5975 8.98403L16.6545 8.98403" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.0215 2.19051V14.2315" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.10645 5.11884L12.0214 2.19084L14.9374 5.11884" stroke="var(--white)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span> Upload salary</a>
<a class="btn btn-primary duration-500 hover:bg-hover-primary py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[20px] inline-block border border-primary ml-2 cursor-pointer"
wire:click="salary_view">+Views Salary</a>
</div>
</div>
</div>
<div class="card-body">
<div class="p-[1.563rem]">
<div class="flex justify-between">
<div class="w-1/2 px-1">
<div class="row flex justify-between">
<div class="w-1/3 px-2 py-2 justify-between">
<h6 class="heading text-[0.8rem] font-medium">filter</h6>
<select name="filter_type" wire:model="filter_type"
class="form-select w-half rounded-md style-2 py-0.5 px-4 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 border border-dark text-dark h-[2.375rem] leading-[1.813rem]">
<option value="Choose Filter">Choose Filter</option>
<option value="by_employee_id">By userID</option>
<option value="by_department">By department</option>
<option value="by_name">By Name</option>
<option value="by_location">By Location</option>
</select>
</div>
<div class="w-1/3 px-2 py-2 justify-between">
<h6 class="heading text-[0.8rem] font-medium">Search</h6>
<input wire:model="search_info" type="text"
class="form-control relative text-[13px] text-dark h-[2.375rem] border border-dark block rounded-md py-2.5 px-3 duration-500 dark:hover:border-b-color outline-none w-half"
id="search" placeholder="Search ..." autocomplete="off"/>
</div>
<div class="w-1/3 px-2 py-2 justify-end">
<h6 class="heading text-[0.8rem] font-medium">Select Month</h6>
<input wire:model="month" type="month"
class="form-control relative text-[13px] text-dark h-[2.375rem] border border-dark block rounded-md py-1.5 px-3 duration-500 dark:hover:border-b-color outline-none w-half"
autocomplete="off" />
</div>
</div>
</div>
{{-- <div class="w-1/2 px-4">--}}
{{-- <div class="row flex justify-between">--}}
{{-- </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">--}}
{{-- EMP 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">
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">
MONTH
</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">
YEAR
</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">
Total Earnign
</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">
Total Deduction
</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">
IN HAND
</th>
</tr>
</thead>
<tbody>
@if(sizeof($employees)>0)
@foreach($employees as $key=>$sal)
<tr class="bg-transparent">
<td 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">
{{$sal['name']}}
</td>
<td 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">
{{$sal['month']}}
</td>
<td 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">
{{$sal['year']}}
</td>
<td 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">
{{$sal['gross_pay']}}
</td>
<td 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">
{{$sal['total_deduction']}}
</td>
<td 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">
{{$sal['net_pay']}}
</td>
<td 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">
<button 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" wire:click="showmodalclick('{{$key}}','{{$sal['id']}}','{{$sal['month']}}','{{$sal['year']}}')">Slip</button>
</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] capitalize 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>
{{-- {{$dataTables->links('livewire.pagination-livewire')}}--}}
</div>
</div>
</div>
</div>
<div wire:ignore.self>
<div class="fixed top-0 right-0 flex flex-col xl:w-1/2 md:w-1/2 w-1/2 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">
<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 id="salarySlip">
<section>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<span style="display: block;float: right; font-size: 10px; margin-top: 24px;" class="d-flex">
<h4 style="font-family: arial, sans-serif; font-size: 12px;">Oriental Security Service Plot no. - 418, 1st Floor<br>Saheed Nagar, Bhubaneswar -751007</h4>
</span>
<span style="display: block;float: left;" class="d-flex">
<img src="{{asset('assets/icons/oss logo.jpg')}}" alt="nexhs_logo" width="120"
height="40" style="align-item: end; margin-top: 10px;">
</span>
</tr>
</table>
</section>
<section>
<span style="display: block; font-size: 10px; text-align:center; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin-top:10px;" class="d-flex">
<p style="font-size: 15px; font-family: arial, sans-serif;"> Pay silp for the month of <b>{{$slip_month}}</b></p>
<br/>
</span>
<table style="border-collapse: collapse; width: 100%;font-size: 12px; font-family: arial, sans-serif;">
<tr>
<th style="width:20%; border: 1px solid #1C1010; text-align: left; padding: 8px;">Employee Name</th>
<th style="width:30%; border: 1px solid #1C1010; text-align: left; padding: 8px;">{{$this->emp_name}}</th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;">UAN No.</th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;">N/A</th>
</tr>
<tr>
<th style="width:20%; border: 1px solid #1C1010; text-align: left; padding: 8px;">Designation</th>
<th style="width:30%; border: 1px solid #1C1010; text-align: left; padding: 8px;">{{$this->emp_designation}}</th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;">ESI No.</th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;">N/A</th>
</tr>
<tr>
<th style="width:20%; border: 1px solid #1C1010; text-align: left; padding: 8px;">Location</th>
<th style="width:30%; border: 1px solid #1C1010; text-align: left; padding: 8px;"></th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;"></th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;"></th>
</tr>
<tr>
<th style="width:20%; border: 1px solid #1C1010; text-align: left; padding: 8px;">Attendance</th>
<th style="width:30%; border: 1px solid #1C1010; text-align: left; padding: 8px;">{{$emp_attendance}}</th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;"></th>
<th style="width:25%; border: 1px solid #1C1010; text-align: left; padding: 8px;"></th>
</tr>
</table>
</section>
<section>
<table class="table table-row-success-900" style="border-collapse: collapse; font-size: 12px; width: 100%; font-family: arial, sans-serif;">
<thead style="background-color: #9ec221; color: white;">
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<th colspan="2" style="padding: 5px; height: 50px; border: 1px solid #1C1010; text-align: left; font-weight: bold; font-size:20px;">Earnings</th>
<th colspan="2" style="padding: 5px; height: 50px; border: 1px solid #1C1010; text-align: left; font-weight: bold; font-size:20px;">Deductions</th>
</tr>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<th style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold; font-size: 12px;">Description</th>
<th style="padding: 5px; border: 1px solid #1C1010; text-align: center; font-weight: bold; font-size: 12px;">Current (INR)</th>
<th style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold; font-size: 12px;">Description</th>
<th style="padding: 5px; border: 1px solid #1C1010; text-align: center; font-weight: bold; font-size: 12px;">Current (INR)</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">Basic Salary</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">@if($earning_array!=null){{$earning_array[0]}} @endif</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">PF</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">@if($deduction_array!=null){{$deduction_array[0]}} @endif</td>
</tr>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">Extra Wages</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">@if($earning_array!=null){{$earning_array[1]}}@endif</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">ESIC</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">@if($deduction_array!=null){{$deduction_array[1]}}@endif</td>
</tr>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">HRA</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">0</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">Other Deduction</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">0</td>
</tr>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">Medical Allowances</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">0</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;"></td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;"></td>
</tr>
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;">Other Allowances</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;">0</td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: left; font-weight: bold;"></td>
<td style="padding: 5px; border: 1px solid #1C1010; text-align: right; font-weight: bold;"></td>
</tr>
</tbody>
<tfoot style="background-color: #9ec221; color: white;">
<tr style="border-bottom: #211f1c solid thin !important; border:#211f1c solid thin !important;">
<th colspan="" style="padding: 5px; text-align: right; border: 1px solid #1C1010; font-weight: bold; font-size: 15px;">Total Gross Earning</th>
<th style="padding: 5px; text-align: right; border: 1px solid #1C1010; font-weight: bold; font-size: 15px;">{{$gross_salary}}</th>
<th colspan="" style="padding: 5px; text-align: right; border: 1px solid #1C1010; font-weight: bold; font-size: 15px;">Total Deductions</th>
<th style="padding: 5px; text-align: right; border: 1px solid #1C1010; font-weight: bold; font-size: 15px;">{{$total_deduction}}</th>
</tr>
</tfoot>
</table>
</section>
<section>
<table
style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin-top: 10px;">
<!-- <tr>
<th style="width: 40%; background-color: #00c931; color: white; border: 1px solid #1C1010; text-align: left; padding: 8px; font-size: 15px;">
Gross Pay <span style="font-size:12px;">(INR) (A + B) </span> </th>
<th style="text-align: right; border: 1px solid #1C1010; padding: 8px; font-size: 15px;"></th>
</tr> -->
<tr>
<th style="width: 40%; background-color: #9ec221; color: white; border: 1px solid #1C1010; text-align: left; padding: 8px; font-size: 15px;">
Net Pay <span style="font-size:12px;">(INR) </span> </th>
<th style="text-align: right; border: 1px solid #1C1010; padding: 8px; font-size: 15px;">{{$net_salary}}</th>
</tr>
<tr>
<th style="width: 40%; background-color: #9ec221; color: white; border: 1px solid #1C1010; text-align: left; padding: 8px; font-size: 15px;">
In Words
</th>
<th style="text-align: right; border: 1px solid #1C1010; padding: 8px; font-size: 15px;">{{$netPayInWords}}</th>
</tr>
</table>
<!-- <table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin-top: 10px;">
<tr>
<th style="text-align: right; border: 1px solid #1C1010; padding: 8px; font-size: 15px;">*Food allowance for the site employees Rs9000/- PM</th>
</tr>
</table> -->
</section>
<section>
<span class="table" style="display: block; font-size: 12px; margin-top: 15px; text-align:center;" class="d-flex">
<h6>This is a computer generated document, hence no signature is required</h6>
</span>
</section>
</div>
<div class="flex justify-center mt-6">
<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>
<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="downloadPdf">Print</button>
</div>
</div>
</div>
</div>
@if($showmodal)
<x-notify::notify />
@endif
</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="salaryinof_upload">
<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 Salary Info</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="flex justify-end px-8 py-2">
<p class="modal-title text-base text-danger cursor-pointer" id="exampleModalLabel" wire:click="exportWage">Download wage sheet format</p>
</div>
<div class="modal-body relative p-[1.875rem]">
<div class="row">
<div class="w-1/2">
<label class="text-body-color mt-4">Enter Month<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="month_year" type="month">
</div>
<div class="w-1/2">
<label class="text-body-color mt-4">Wage 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_wages" 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="importWageSheet">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] dz-modal-box model-close bd-example-modal-lg" id="slip_modal">
<div class="modal-dialog modal-lg">
<div class="modal-content 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">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close">
</button>
</div>
<div class="modal-body relative p-[1.875rem] text-body-color sm:text-sm text-xs">Modal body text goes here.</div>
<div class="modal-footer py-4 px-[1.875rem] flex items-center justify-end flex-wrap border-t border-b-color">
<button type="button" class="close-btn btn btn-danger sm:py-[0.719rem] px-4 sm:px-[1.563rem] py-2.5 sm:text-[15px] text-xs font-medium rounded text-danger bg-danger-light leading-5 inline-block border border-danger-light duration-500 hover:bg-danger hover:border-danger-light hover:text-white m-1 dz-modal-box">Close</button>
<button type="button" class="save-btn btn btn-primary sm:py-[0.719rem] px-4 sm:px-[1.563rem] py-2.5 sm:text-[15px] text-xs font-medium rounded text-white bg-primary leading-5 inline-block border border-primary duration-500 hover:bg-hover-primary m-1 dz-modal-box">Save changes</button>
</div>
</div>
</div>
</div>
</div>
@section('externaljs')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
async function generatePDF() {
const { jsPDF } = window.jspdf;
// A4 dimensions in points (595.28 x 841.89)
const pdf = new jsPDF('p', 'pt', 'a4');
const content = document.getElementById('salarySlip');
const options = {
html2canvas: {
scale: 3, // Higher scale for better quality
useCORS: true // Enable cross-origin images
},
callback: function (doc) {
doc.save('SalarySlip.pdf'); // Save the PDF
},
x: 10, // Left margin
y: 10, // Top margin
width: 575 // Ensure it fits within A4 dimensions
};
try {
await pdf.html(content, options);
} catch (error) {
console.error("Error generating A4 PDF:", error);
}
}
window.addEventListener('slip_modal', event => {
$('#slip_modal').modal('show');
});
</script>
@endsection