CasperSecurity
<div>
<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-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>
</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] 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] 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] whitespace-nowrap text-xs font-medium text-center">
Project
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Invoice Date
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Invoice Cycle
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Client
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Total Quantity
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Gross Amount
</th>
<th class="text-black py-2 px-[0.9375rem] border-2 border-solid border-[#E6E6E6] dark:border-[#444444] whitespace-nowrap text-xs font-medium text-center">
Net Amount
</th>
</tr>
</thead>
<tbody>
@if(sizeof($dataTables)>0)
@foreach($dataTables 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);" title="Send mail to client"
wire:click="mailClick('{{$data['id']}}')"><i class="fa-regular fa-envelope align-middle pr-[1.125rem] text-lg" style='color:#0d99ff'></i></a>
<a href="javascript:void(0);" title="View invoice"
wire:click="viewInvoice('{{$data['id']}}')"><i class='fas fa-file-invoice align-middle pr-[1.125rem] text-lg' style='color:#0d99ff'></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 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 text-xs font-normal text-center">{{$data->project_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 text-xs font-normal text-center">{{\Carbon\Carbon::parse($data->invoice_date)->format('d-m-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] whitespace-nowrap text-xs font-normal text-center">{{$data->invoice_cycle}}</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 text-xs font-normal text-center">{{$data->client_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 text-xs font-normal text-center">{{$data->total_quantity}}</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 text-xs font-normal text-center">{{$data->gross_amount}}</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 text-xs font-normal text-center">{{$data->net_amount}}</td>
</tr>
@endforeach
@else
<tr class="bg-transparent">
<td colspan="9"
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>
{{$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-full md:w-[500px] 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 class="row">
<div class="row w-1/2">
<div class="xl:w-1/2 mb-4">
<label class="form-label">Project Name<span class="text-danger">*</span></label>
<select name="project_id" wire:model.debounce.0ms="project_id"
class="form-select w-full rounded-md style-1 py-2.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 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">
<option value="">Select</option>
@foreach($projects as $project)
<option value="{{$project->id}}">{{$project->project_name}}</option>
@endforeach
</select>
@error('project_id') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/2 mb-4">
<label class="form-label">Work Order No.</label>
<input type="text" name="work_order_no" wire:model.defer="work_order_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"
placeholder="Work Order No." disabled>
@error('work_order_no') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/2 mb-4">
<label class="form-label">Client Name<span class="text-danger">*</span></label>
<select name="client_id" wire:model.debounce.0ms="client_id" disabled
class="form-select w-full rounded-md style-1 py-2.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 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">
<option value="">Select</option>
@foreach($clients as $client)
<option value="{{$client->id}}">{{$client->client_name}}</option>
@endforeach
</select>
@error('client_id') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/2 mb-4">
<label class="form-label">Project Type</label>
<select name="project_type_id" wire:model.debounce.0ms="project_type_id" disabled
class="form-select w-full rounded-md style-1 py-2.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 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">
<option value="">Select</option>
@foreach($projectTypes as $project)
<option value="{{$project->id}}">{{$project->variety_name}}</option>
@endforeach
</select>
@error('project_type_id') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label class="form-label">Invoice Month<span class="text-danger">*</span></label>
<input type="month" name="invoice_month" wire:model.debounce.0ms="invoice_month"
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="Invoice Month">
@error('invoice_month') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label class="form-label">Invoice Cycle<span class="text-danger">*</span></label>
@if($billingCycleType != 'MONTHLY')
<select name="invoice_cycle" wire:model.debounce.0ms="invoice_cycle"
class="form-select w-full rounded-md style-1 py-2.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 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">
<option value="">Select</option>
@if($billingCycleType == 'FORTNIGHT')
<option value="1">1st</option>
<option value="2">2nd</option>
@elseif($billingCycleType == 'WEEKLY')
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
@endif
</select>
@else
<input type="month" name="invoice_cycle" wire:model.defer="invoice_cycle"
disabled
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="Invoice Cycle">
@endif
@error('invoice_cycle') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/3 mb-4">
<label class="form-label">Invoice Date<span class="text-danger">*</span></label>
<input type="date" name="invoice_date" wire:model.defer="invoice_date"
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="Invoice Date">
@error('invoice_date') <span
class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="w-1/2 p-4">
<div class="row" style="border: #ccc solid thin; border-radius: 10px; padding: 10px;">
<h4 style="font-size: 20px;">Billing Details</h4>
<hr/>
<br/>
@for($i=0; $i <= $itemCount; $i++)
<div class="row" wire:key="key-{{$i}}">
<div class="xl:w-2/6 mb-4">
<label for="workOrderItemId.{{$i}}" class="form-label">Item
Name<span
class="text-danger">*</span></label>
<select name="workOrderItemId.{{$i}}"
wire:model.debounce.0ms="workOrderItemId.{{$i}}"
wire:change="setItem('{{$i}}')"
class="form-select w-full rounded-md style-1 py-2.5 px-3 bg-transparent text-[13px] font-normal outline-none relative focus:ring-0 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">
<option value="">Select</option>
@foreach($workOrderItems as $item)
<option value="{{$item->id}}">{{$item->item_name}}</option>
@endforeach
</select>
@error("workOrderItemId.$i") <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/6 mb-4">
<label for="itemRate.{{$i}}" class="form-label">Rate</label>
<input type="text" name="itemRate.{{$i}}"
wire:model.defer="itemRate.{{$i}}" disabled
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"
onkeypress="return onlyNumberKey(event)"
id="itemRate.{{$i}}" placeholder="00.00">
@error("itemRate.$i") <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-1/6 mb-4">
<label for="itemQuantity.{{$i}}" class="form-label">
Quantity<span
class="text-danger">*</span></label>
<input type="text" name="itemQuantity.{{$i}}"
wire:model.defer="itemQuantity.{{$i}}"
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"
onkeypress="return onlyNumberKey(event)"
id="itemQuantity.{{$i}}" placeholder="E.g. 0">
@error("itemQuantity.$i") <span
class="w-full mt-1 text-xs text-danger">{{ $message }}</span> @enderror
</div>
<div class="xl:w-2/6 flex justify-end align-self-center"
style="align-self: center;">
@if($i!=0)
<a style="height: 30px"
class="btn btn-danger duration-500 hover:bg-hover-danger py-[5px] px-3 text-[13px] rounded text-white bg-danger leading-[18px] inline-block border border-danger ml-2 cursor-pointer"
wire:click="removeItem({{$i}})">-</a>
@endif
@if($i == $itemCount)
<a style="height: 30px"
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="addItem">+</a>
@endif
</div>
</div>
@endfor
<div class="flex justify-center"><span
class="font-bold text-danger">{{$itemCountMessage}}</span></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">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">Save
</button>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section('externaljs')
<script>
window.addEventListener('newtab_redirect', event => {
window.open('/invoiceView', '_blank');
});
</script>
@endsection