203 lines
12 KiB
PHP
203 lines
12 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Invoice List';
|
|
$subTitle = 'Invoice List';
|
|
$script = '<script>
|
|
function printInvoice() {
|
|
var printContents = document.getElementById("invoice").innerHTML;
|
|
var originalContents = document.body.innerHTML;
|
|
|
|
document.body.innerHTML = printContents;
|
|
|
|
window.print();
|
|
|
|
document.body.innerHTML = originalContents;
|
|
}
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="card border-0">
|
|
<div class="card-header">
|
|
<div class="flex flex-wrap items-center justify-end gap-2">
|
|
<a href="javascript:void(0)" class="btn btn-sm bg-primary-600 hover:bg-primary-700 text-white rounded-lg inline-flex items-center gap-1">
|
|
<iconify-icon icon="pepicons-pencil:paper-plane" class="text-xl"></iconify-icon>
|
|
Send Invoice
|
|
</a>
|
|
<a href="javascript:void(0)" class="btn btn-sm bg-warning-600 hover:bg-warning-700 text-white rounded-lg inline-flex items-center gap-1">
|
|
<iconify-icon icon="solar:download-linear" class="text-xl"></iconify-icon>
|
|
Download
|
|
</a>
|
|
<a href="javascript:void(0)" class="btn btn-sm bg-success-600 hover:bg-success-700 text-white rounded-lg inline-flex items-center gap-1">
|
|
<iconify-icon icon="uil:edit" class="text-xl"></iconify-icon>
|
|
Edit
|
|
</a>
|
|
<button type="button" class="btn btn-sm bg-danger-600 hover:bg-danger-700 text-white rounded-lg inline-flex items-center gap-1" onclick="printInvoice()">
|
|
<iconify-icon icon="basil:printer-outline" class="text-xl"></iconify-icon>
|
|
Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body py-[60px]">
|
|
<div class="grid grid-cols-1" id="invoice">
|
|
<div class="max-w-[1174px] mx-auto w-full">
|
|
<div class="shadow-4 border border-neutral-200 dark:border-neutral-600 rounded-lg">
|
|
<div class="p-5 flex flex-wrap justify-between gap-3 border-b border-neutral-200 dark:border-neutral-600">
|
|
<div>
|
|
<h3 class="text-xl">Invoice #3492</h3>
|
|
<p class="mb-1 text-sm">Date Issued: 25/08/2020</p>
|
|
<p class="mb-0 text-sm">Date Due: 29/08/2020</p>
|
|
</div>
|
|
<div>
|
|
<img src="{{ asset('assets/images/logo.png') }}" alt="image" class="mb-2">
|
|
<p class="mb-1 text-sm">4517 Washington Ave. Manchester, Kentucky 39495</p>
|
|
<p class="mb-0 text-sm">random@gmail.com, +1 543 2198</p>
|
|
</div>
|
|
</div>
|
|
<div class="py-7 px-5">
|
|
<div class="flex flex-wrap justify-between align-items-end gap-3">
|
|
<div>
|
|
<h6 class="text-base">Issus For:</h6>
|
|
<table class="text-sm text-secondary-light">
|
|
<tbody>
|
|
<tr>
|
|
<td>Name</td>
|
|
<td class="ps-2">:Will Marthas</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Address</td>
|
|
<td class="ps-2">:4517 Washington Ave.USA</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Phone number</td>
|
|
<td class="ps-2">:+1 543 2198</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<table class="text-sm text-secondary-light">
|
|
<tbody>
|
|
<tr>
|
|
<td>Issus Date</td>
|
|
<td class="ps-2">:25 Jan 2025</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Order ID</td>
|
|
<td class="ps-2">:#653214</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shipment ID</td>
|
|
<td class="ps-2">:#965215</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="table-responsive scroll-sm">
|
|
<table class="table bordered-table text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="text-sm">SL.</th>
|
|
<th scope="col" class="text-sm">Items</th>
|
|
<th scope="col" class="text-sm">Qty</th>
|
|
<th scope="col" class="text-sm">Units</th>
|
|
<th scope="col" class="text-sm">Unit Price</th>
|
|
<th scope="col" class="text-end text-sm">Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>01</td>
|
|
<td>Apple's Shoes</td>
|
|
<td>5</td>
|
|
<td>PC</td>
|
|
<td>$200</td>
|
|
<td class="text-end">$1000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>02</td>
|
|
<td>Apple's Shoes</td>
|
|
<td>5</td>
|
|
<td>PC</td>
|
|
<td>$200</td>
|
|
<td class="text-end">$1000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>03</td>
|
|
<td>Apple's Shoes</td>
|
|
<td>5</td>
|
|
<td>PC</td>
|
|
<td>$200</td>
|
|
<td class="text-end">$1000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>04</td>
|
|
<td>Apple's Shoes</td>
|
|
<td>5</td>
|
|
<td>PC</td>
|
|
<td>$200</td>
|
|
<td class="text-end">$1000.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex flex-wrap justify-between gap-3">
|
|
<div>
|
|
<p class="text-sm mb-0"><span class="text-neutral-600 dark:text-neutral-200 font-semibold">Sales By:</span> Jammal</p>
|
|
<p class="text-sm mb-0">Thanks for your business</p>
|
|
</div>
|
|
<div>
|
|
<table class="text-sm">
|
|
<tbody>
|
|
<tr>
|
|
<td class="pe-[64px]">Subtotal:</td>
|
|
<td class="ps-6">
|
|
<span class="text-neutral-600 dark:text-neutral-200 font-semibold">$4000.00</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-[64px]">Discount:</td>
|
|
<td class="ps-6">
|
|
<span class="text-neutral-600 dark:text-neutral-200 font-semibold">$0.00</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-[64px] border-b border-neutral-200 dark:border-neutral-600 pb-4">Tax:</td>
|
|
<td class="ps-6 border-b border-neutral-200 dark:border-neutral-600 pb-4">
|
|
<span class="text-neutral-600 dark:text-neutral-200 font-semibold">0.00</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-[64px] pt-4">
|
|
<span class="text-neutral-600 dark:text-neutral-200 font-semibold">Total:</span>
|
|
</td>
|
|
<td class="ps-6 pt-4">
|
|
<span class="text-neutral-600 dark:text-neutral-200 font-semibold">$1690</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<p class="text-center text-secondary-light text-sm font-semibold">Thank you for your purchase!</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap justify-between align-items-end mt-16">
|
|
<div class="text-sm border-t border-neutral-200 dark:border-neutral-600 inline-block px-3">Signature of Customer</div>
|
|
<div class="text-sm border-t border-neutral-200 dark:border-neutral-600 inline-block px-3">Signature of Authorized</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |