<app-page-header
title="Invoice List"
title1="Invoice List"
activeitem="Pages"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<div class="box invoice-list">
<div class="box-header lg:flex lg:justify-between">
<h5 class="box-title my-auto">Invoice List</h5>
<a
href="javascript:void(0);"
class="ti-btn ti-btn-primary hs-dropdown-toggle m-0 py-2"
id="invoice-create"
data-hs-overlay="#invoice-modal"
><i class="ri ri-add-line"></i>Create Invoice</a
>
</div>
<div class="box-body">
<div class="xl:flex xl:justify-between space-y-3 xl:space-y-0">
<div
class="sm:flex sm:space-x-3 space-y-3 sm:space-y-0 rtl:space-x-reverse"
>
<div class="relative max-w-xs">
<label for="hs-table-search" class="sr-only">Search</label>
<input
type="text"
name="hs-table-search"
id="hs-table-search"
class="px-3 py-2 ltr:pr-10 rtl:pl-10 ti-form-input invoice-search"
placeholder="Search for items"
/>
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
>
<i class="ri-search-line text-gray-500 dark:text-white/70"></i>
</div>
</div>
<button
aria-label="button"
type="button"
class="ti-btn px-3 py-2 ti-btn-outline me-1 border-gray-200 text-gray-500 dark:text-white/70 hover:text-white hover:bg-gray-500 hover:border-gray-500 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10 m-0"
>
<i class="ri-refresh-line leading-none text-lg"></i>
</button>
<button
aria-label="button"
type="button"
id="delete-btn"
class="ti-btn px-3 py-2 ti-btn-danger m-0"
>
<i class="ri-delete-bin-7-line leading-none text-lg"></i>
</button>
</div>
<div
class="sm:space-x-3 sm:flex space-y-3 sm:space-y-0 rtl:space-x-reverse"
>
<div class="inline-flex">
<div
class="px-4 py-2 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10"
>
<span class="text-sm text-gray-500 dark:text-white/70"
><i class="ri ri-calendar-line"></i
></span>
</div>
<dp-date-picker
class="ti-form-input joining-date input-date-picker flatpickr-input date active"
placeholder="Choose date"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
</div>
<div class="hs-dropdown ti-dropdown">
<button
id="hs-dropdown-transform-style"
type="button"
class="px-3 py-2 hs-dropdown-toggle ti-dropdown-toggle"
>
All Invoices
<svg
class="hs-dropdown-open:rotate-180 ti-dropdown-caret"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</button>
<div class="hs-dropdown-menu hidden z-10">
<div
class="hs-dropdown-open:ease-in hs-dropdown-open:opacity-100 hs-dropdown-open:scale-100 transition ease-out scale-95 duration-200 origin-top-left ti-dropdown-menu block"
aria-labelledby="hs-dropdown-transform-style"
data-hs-transition
>
<a class="ti-dropdown-item" href="javascript:void(0);">
All Invoices
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Paid Invoices
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Unpaid Invoices
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Draft Invoices
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Overdue Invoices
</a>
</div>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<div
class="mt-5 table-bordered rounded-sm ti-custom-table-head overflow-scroll"
>
<table
class="ti-custom-table ti-custom-table-head edit-table whitespace-nowrap text-center"
>
<thead class="bg-gray-50 dark:bg-black/20">
<tr class="cart-box">
<th scope="col" class="dark:text-white/70">
<div class="flex leading-[0] justify-center">
<input
type="checkbox"
(change)="isSelected = true"
class="border-gray-500 ti-form-checkbox mt-0.5 check-all"
id="hs-default-checkbox"
/>
<label
for="hs-default-checkbox"
class="text-sm text-gray-500 dark:text-white/70"
></label>
</div>
</th>
<th scope="col" class="dark:text-white/70">Invoice Id</th>
<th scope="col" class="dark:text-white/70">Customer</th>
<th scope="col" class="dark:text-white/70">Created Date</th>
<th scope="col" class="dark:text-white/70">Due Date</th>
<th scope="col" class="dark:text-white/70">Status</th>
<th scope="col" class="dark:text-white/70">payment Mode</th>
<th scope="col" class="dark:text-white/70">Amount</th>
<th scope="col" class="dark:text-white/70">Action</th>
</tr>
</thead>
<tbody>
<tr class="invoice-list" *ngFor="let payment of Payments">
<td class="">
<div
class="flex items-center h-5 invoice-checkbox justify-center"
>
<input
id="invoice-check-1"
type="checkbox"
[checked]="isSelected"
class="border-gray-500 ti-form-checkbox"
/>
<label for="invoice-check-1" class="sr-only"
>Checkbox</label
>
</div>
</td>
<td>{{ payment.id }}</td>
<td>
<div
class="flex space-x-3 rtl:space-x-reverse text-start truncate"
>
<img
class="avatar avatar-sm rounded-sm"
src="{{ payment.src }}"
alt="Image Description"
/>
<div class="block">
<p
class="block text-sm font-semibold text-gray-800 dark:text-white my-auto"
>
{{ payment.name }}
</p>
<p
class="block text-xs text-gray-500 dark:text-white/70 my-auto"
>
{{ payment.mail }}
</p>
</div>
</div>
</td>
<td>{{ payment.createddate }}</td>
<td>{{ payment.duedate }}</td>
<td>
<span
class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{
payment.background
}}/10 text-{{ payment.text }}/80"
>{{ payment.status }}Paid</span
>
</td>
<td>{{ payment.paymode }}</td>
<td>{{ payment.price }}</td>
<td class="font-medium space-x-2 rtl:space-x-reverse">
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
>
<i class="ti ti-send"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Send
</span>
</a>
</div>
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
data-hs-overlay="#invoice-modal"
class="invoice-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
>
<i class="ti ti-pencil"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Edit
</span>
</a>
</div>
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="invoice-btn m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
(click)="click(payment.id)"
>
<i class="ti ti-trash"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Delete
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<nav
class="flex justify-end items-center space-x-2 rtl:space-x-reverse mt-5"
>
<a
class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
href="javascript:void(0);"
>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a
class="w-10 h-10 bg-primary text-white p-2 inline-flex items-center justify-center text-sm font-medium rounded-full"
href="javascript:void(0);"
aria-current="page"
>1</a
>
<a
class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
href="javascript:void(0);"
>2</a
>
<a
class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
href="javascript:void(0);"
>3</a
>
<a
class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
href="javascript:void(0);"
>
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->
<!-- Start::Invoice Modal-->
<div
id="invoice-modal"
class="hs-overlay hidden ti-modal"
*ngFor="let payment of Payments"
>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out sm:!max-w-6xl">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="ti-modal-title invoice-title">Create Invoice</h3>
<button
type="button"
class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#invoice-modal"
>
<span class="sr-only">Close</span>
<svg
class="w-3.5 h-3.5"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
fill="currentColor"
/>
</svg>
</button>
</div>
<div class="ti-modal-body p-6">
<div class="flex flex-col md:flex-row space-y-6 justify-between mb-5">
<div class="space-y-2">
<div class="mb-2">
<img
src="./assets/img/brand-logos/desktop-logo.png"
alt="logo"
class="flex dark:hidden"
/>
<img
src="./assets/img/brand-logos/desktop-dark.png"
alt="logo"
class="hidden dark:flex"
/>
</div>
<input
type="text"
class="company-name ti-form-input md:w-72"
placeholder="Company Name"
[value]="payment.name"
/>
<input
type="text"
class="company-address ti-form-input md:w-72"
placeholder="Company Address"
[value]="payment.address"
/>
<input
type="text"
class="company-address1 ti-form-input md:w-72"
placeholder="Complete Address"
[value]="payment.mail"
/>
</div>
<div class="space-y-2 text-end inline-block">
<h3 class="text-2xl text-primary uppercase font-semibold">
Invoice
</h3>
<input
type="text"
class="invoice-id ti-form-input md:w-72 inline-block text-start"
placeholder="Invoice Id"
[value]="payment.id"
/>
<dp-date-picker
class="ti-form-input joining-date flatpickr-input date active"
placeholder="Created date"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
<dp-date-picker
class="ti-form-input joining-date flatpickr-input date active"
placeholder="Due date"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
</div>
</div>
<hr class="pb-5 dark:border-t-white/10" />
<div class="grid grid-cols-12 gap-6 mb-5">
<div class="lg:col-span-6 col-span-12">
<div class="space-y-3 inline-block">
<h3 class="font-semibold text-lg">Billed To :</h3>
<input
type="text"
class="company-name ti-form-input md:w-72"
placeholder="Company Name"
[value]="payment.name"
/>
<input
type="text"
class="company-address ti-form-input md:w-72"
placeholder="Company Address"
[value]="payment.address"
/>
<input
type="text"
class="company-address1 ti-form-input md:w-72"
placeholder="Complete Address"
[value]="payment.mail"
/>
</div>
</div>
<div class="lg:col-span-6 col-span-12 text-end">
<div class="space-y-3 inline-block">
<h3 class="font-semibold text-lg">Shipped To :</h3>
<input
type="text"
class="company-name ti-form-input md:w-72 text-end"
placeholder="Company Name"
[value]="payment.name"
/>
<input
type="text"
class="company-address ti-form-input md:w-72 text-end"
placeholder="Company Address"
[value]="payment.address"
/>
<input
type="text"
class="company-address1 ti-form-input md:w-72 text-end"
placeholder="Complete Address"
[value]="payment.mail"
/>
</div>
</div>
</div>
<div class="sm:flex space-y-4 justify-between">
<h5 class="font-semibold text-lg my-auto">Invoic Items</h5>
<a
href="javascript:void(0);"
class="invoice-add-item ti-btn ti-btn-primary m-0 py-2"
><i class="ri ri-add-line"></i>Add Item Deatils</a
>
</div>
<div class="py-5">
<div class="overflow-auto lg:overflow-hidden">
<table
class="ti-custom-table !border dark:border-white/10 !border-x-0 text-center"
>
<thead class="bg-gray-50 dark:bg-black/20 overflow-hidden">
<tr>
<th scope="col" class="!text-center">S.No</th>
<th scope="col" class="!text-center">Product</th>
<th scope="col" class="!text-center">Quantity</th>
<th scope="col" class="!text-center">Unit</th>
<th scope="col" class="!text-center">Amount</th>
<th scope="col" class="!text-center">Action</th>
</tr>
</thead>
<tbody class="invoice-body">
<tr class="invoice-list">
<td class="">
<input
type="number"
class="ti-form-input"
placeholder="s.no"
/>
</td>
<td class="">
<input
type="text"
class="ti-form-input"
placeholder="Product name"
/>
</td>
<td class="font-semibold">
<div class="flex rounded-sm shadow-sm">
<button
aria-label="button"
type="button"
class="quantity-minus inline-flex flex-shrink-0 justify-center items-center h-8 w-8 ltr:rounded-l-sm rtl:rounded-r-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm"
>
<i class="ti ti-minus" (click)="plus()"></i>
</button>
<input
type="text"
id="quantity1"
name="quantity"
value="{{ input }}"
class="p-0 ti-form-input w-20 rounded-none shadow-sm focus:z-10 text-center"
value="0"
readonly
/>
<button
aria-label="button"
type="button"
class="quantity-plus inline-flex flex-shrink-0 justify-center items-center h-8 w-8 ltr:rounded-r-sm rtl:rounded-l-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm"
>
<i class="ti ti-plus" (click)="minus()"></i>
</button>
</div>
</td>
<td class="">
<input
type="number"
class="ti-form-input"
placeholder="value"
/>
</td>
<td class="font-medium">
<input
type="number"
class="ti-form-input"
placeholder="Total amount"
/>
</td>
<td class="font-medium">
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="invoice-btn m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
>
<i class="ti ti-trash"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Delete
</span>
</a>
</div>
</td>
</tr>
</tbody>
<tbody
class="border-t border-b-0 border-x-0 border-gray-200 dark:border-white/10"
>
<tr class="!border-b-0">
<td colspan="3" class="!p-1"></td>
<td class="!pb-1">Sub-Total</td>
<td class="!pb-1">
<input
type="number"
class="ti-form-input"
placeholder="sub Total"
/>
</td>
<td></td>
</tr>
<tr class="!border-b-0 !border-t-0">
<td colspan="3" class="!p-1"></td>
<td class="!py-1">Tax</td>
<td class="!py-1">
<input
type="number"
class="ti-form-input"
placeholder="Tax"
/>
</td>
<td></td>
</tr>
<tr class="!border-b-0 !border-t-0">
<td colspan="3" class="!p-1"></td>
<td class="!py-1">Discount</td>
<td class="!py-1">
<input
type="number"
class="ti-form-input"
placeholder="Discount"
/>
</td>
<td></td>
</tr>
<tr class="!border-t-0">
<td colspan="3" class="!p-1"></td>
<td class="!pt-1">Total</td>
<td class="!pt-1">
<input
type="number"
class="ti-form-input"
placeholder="Total"
/>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 class="font-semibold text-xl mb-4">Payment Details</h3>
<div class="grid grid-cols-12 gap-6 mb-5 invoice-pay">
<div class="lg:col-span-6 col-span-12 max-w-xs">
<div class="space-y-3">
<ng-select
class="ti-form-select"
data-trigger
placeholder="Status"
>
<ng-option value="0">Status</ng-option>
<ng-option value="0">paid</ng-option>
<ng-option value="0">Due</ng-option>
<ng-option value="0">Unpaid</ng-option>
<ng-option value="0">OverDue</ng-option>
</ng-select>
<input
type="text"
class="ti-form-input"
placeholder="Card Holder Name"
/>
<input
type="number"
class="ti-form-input"
placeholder="Card Number"
/>
</div>
</div>
<div class="lg:col-span-6 col-span-12 max-w-xs">
<div class="space-y-3">
<ng-select
class="ti-form-select"
data-trigger
placeholder="Payment Method"
>
<ng-option value="0">Payment Type</ng-option>
<ng-option value="0">Debit/Credit Card</ng-option>
<ng-option value="0">Net Banking</ng-option>
<ng-option value="0">Paypal</ng-option>
<ng-option value="0">Upi</ng-option>
</ng-select>
<input
type="text"
class="ti-form-input"
placeholder="Bank Details"
/>
<input type="number" class="ti-form-input" placeholder="Amount" />
</div>
</div>
</div>
</div>
<div class="ti-modal-footer sm:flex !block space-y-2 text-end">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
<i class="ri-save-line"></i>Save changes
</a>
<a class="ti-btn ti-btn-secondary" href="javascript:void(0);">
<i class="ri-send-plane-line"></i> Send Invoice
</a>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);">
<i class="ri-download-cloud-2-line"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- End::Invoice Modal-->