New-OMIS/resources/views/invoice.blade.php
2024-04-11 16:37:12 +05:45

386 lines
20 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('layouts.app')
@section('content')
<div class="page-content">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="card">
<form class="needs-validation" novalidate id="invoice_form">
<div class="card-body border-bottom border-bottom-dashed p-4">
<div class="row">
<div class="col-lg-4">
<div class="profile-user mx-auto mb-3">
<input id="profile-img-file-input" type="file" class="profile-img-file-input" />
<label for="profile-img-file-input" class="d-block" tabindex="0">
<span
class="d-flex align-items-center justify-content-center overflow-hidden rounded border border-dashed"
style="height: 60px; width: 256px;">
<img src="assets/images/logo-dark.png"
class="card-logo card-logo-dark user-profile-image img-fluid" alt="logo dark">
<img src="assets/images/logo-light.png"
class="card-logo card-logo-light user-profile-image img-fluid" alt="logo light">
</span>
</label>
</div>
<div>
<div>
<label for="companyAddress">Address</label>
</div>
<div class="mb-2">
<textarea class="form-control bg-light border-0" id="companyAddress" rows="3" placeholder="Company Address"
required></textarea>
<div class="invalid-feedback">
Please enter a address
</div>
</div>
<div>
<input type="text" class="form-control bg-light border-0" id="companyaddpostalcode"
minlength="5" maxlength="6" placeholder="Enter Postal Code" required />
<div class="invalid-feedback">
The US zip code must contain 5 digits, Ex. 45678
</div>
</div>
</div>
</div>
<!--end col-->
<div class="col-lg-4 ms-auto">
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" id="registrationNumber" maxlength="12"
placeholder="Legal Registration No" required />
<div class="invalid-feedback">
Please enter a registration no, Ex., 012345678912
</div>
</div>
<div class="mb-2">
<input type="email" class="form-control bg-light border-0" id="companyEmail"
placeholder="Email Address" required />
<div class="invalid-feedback">
Please enter a valid email, Ex., example@gamil.com
</div>
</div>
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" id="companyWebsite"
placeholder="Website" required />
<div class="invalid-feedback">
Please enter a website, Ex., www.example.com
</div>
</div>
<div>
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone"
id="compnayContactno" placeholder="Contact No" required />
<div class="invalid-feedback">
Please enter a contact number
</div>
</div>
</div>
</div>
<!--end row-->
</div>
<div class="card-body p-4">
<div class="row g-3">
<div class="col-lg-3 col-sm-6">
<label for="invoicenoInput">Invoice No</label>
<input type="text" class="form-control bg-light border-0" id="invoicenoInput"
placeholder="Invoice No" value="#VL25000355" readonly="readonly" />
</div>
<!--end col-->
<div class="col-lg-3 col-sm-6">
<div>
<label for="date-field">Date</label>
<input type="text" class="form-control bg-light border-0" id="date-field"
data-provider="flatpickr" data-time="true" placeholder="Select Date-time">
</div>
</div>
<!--end col-->
<div class="col-lg-3 col-sm-6">
<label for="choices-payment-status">Payment Status</label>
<div class="input-light">
<select class="form-control bg-light border-0" data-choices data-choices-search-false
id="choices-payment-status" required>
<option value="">Select Payment Status</option>
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
<option value="Refund">Refund</option>
</select>
</div>
</div>
<!--end col-->
<div class="col-lg-3 col-sm-6">
<div>
<label for="totalamountInput">Total Amount</label>
<input type="text" class="form-control bg-light border-0" id="totalamountInput"
placeholder="$0.00" readonly />
</div>
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<div class="card-body border-top border-top-dashed p-4">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div>
<label for="billingName" class="text-muted text-uppercase fw-semibold">Billing Address</label>
</div>
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" id="billingName"
placeholder="Full Name" required />
<div class="invalid-feedback">
Please enter a full name
</div>
</div>
<div class="mb-2">
<textarea class="form-control bg-light border-0" id="billingAddress" rows="3" placeholder="Address" required></textarea>
<div class="invalid-feedback">
Please enter a address
</div>
</div>
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone"
id="billingPhoneno" placeholder="(123)456-7890" required />
<div class="invalid-feedback">
Please enter a phone number
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control bg-light border-0" id="billingTaxno"
placeholder="Tax Number" required />
<div class="invalid-feedback">
Please enter a tax number
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="same" name="same"
onchange="billingFunction()" />
<label class="form-check-label" for="same">
Will your Billing and Shipping address same?
</label>
</div>
</div>
<!--end col-->
<div class="col-sm-6 ms-auto">
<div class="row">
<div class="col-lg-8">
<div>
<label for="shippingName" class="text-muted text-uppercase fw-semibold">Shipping
Address</label>
</div>
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" id="shippingName"
placeholder="Full Name" required />
<div class="invalid-feedback">
Please enter a full name
</div>
</div>
<div class="mb-2">
<textarea class="form-control bg-light border-0" id="shippingAddress" rows="3" placeholder="Address" required></textarea>
<div class="invalid-feedback">
Please enter a address
</div>
</div>
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone"
id="shippingPhoneno" placeholder="(123)456-7890" required />
<div class="invalid-feedback">
Please enter a phone number
</div>
</div>
<div>
<input type="text" class="form-control bg-light border-0" id="shippingTaxno"
placeholder="Tax Number" required />
<div class="invalid-feedback">
Please enter a tax number
</div>
</div>
</div>
</div>
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<div class="card-body p-4">
<div class="table-responsive">
<table class="invoice-table table-borderless table-nowrap mb-0 table">
<thead class="align-middle">
<tr class="table-active">
<th scope="col" style="width: 50px;">#</th>
<th scope="col">
Product Details
</th>
<th scope="col" style="width: 120px;">
<div class="d-flex currency-select input-light align-items-center">
Rate
<select class="form-selectborder-0 bg-light" data-choices data-choices-search-false
id="choices-payment-currency" onchange="otherPayment()">
<option value="$">($)</option>
<option value="£">(£)</option>
<option value="">()</option>
<option value="">()</option>
</select>
</div>
</th>
<th scope="col" style="width: 120px;">Quantity</th>
<th scope="col" class="text-end" style="width: 150px;">Amount</th>
<th scope="col" class="text-end" style="width: 105px;"></th>
</tr>
</thead>
<tbody id="newlink">
<tr id="1" class="product">
<th scope="row" class="product-id">1</th>
<td class="text-start">
<div class="mb-2">
<input type="text" class="form-control bg-light border-0" id="productName-1"
placeholder="Product Name" required />
<div class="invalid-feedback">
Please enter a product name
</div>
</div>
<textarea class="form-control bg-light border-0" id="productDetails-1" rows="2" placeholder="Product Details"></textarea>
</td>
<td>
<input type="number" class="form-control product-price bg-light border-0" id="productRate-1"
step="0.01" placeholder="0.00" required />
<div class="invalid-feedback">
Please enter a rate
</div>
</td>
<td>
<div class="input-step">
<button type="button" class='minus'></button>
<input type="number" class="product-quantity" id="product-qty-1" value="0" readonly>
<button type="button" class='plus'>+</button>
</div>
</td>
<td class="text-end">
<div>
<input type="text" class="form-control bg-light product-line-price border-0"
id="productPrice-1" placeholder="$0.00" readonly />
</div>
</td>
<td class="product-removal">
<a href="javascript:void(0)" class="btn btn-success">Delete</a>
</td>
</tr>
</tbody>
<tbody>
<tr id="newForm" style="display: none;">
<td class="d-none" colspan="5">
<p>Add New Form</p>
</td>
</tr>
<tr>
<td colspan="5">
<a href="javascript:new_link()" id="add-item" class="btn btn-soft-secondary fw-medium"><i
class="ri-add-fill me-1 align-bottom"></i> Add Item</a>
</td>
</tr>
<tr class="border-top border-top-dashed mt-2">
<td colspan="3"></td>
<td colspan="2" class="p-0">
<table class="table-borderless table-sm table-nowrap mb-0 table align-middle">
<tbody>
<tr>
<th scope="row">Sub Total</th>
<td style="width:150px;">
<input type="text" class="form-control bg-light border-0" id="cart-subtotal"
placeholder="$0.00" readonly />
</td>
</tr>
<tr>
<th scope="row">Estimated Tax (12.5%)</th>
<td>
<input type="text" class="form-control bg-light border-0" id="cart-tax"
placeholder="$0.00" readonly />
</td>
</tr>
<tr>
<th scope="row">Discount <small class="text-muted">(VELZON15)</small></th>
<td>
<input type="text" class="form-control bg-light border-0" id="cart-discount"
placeholder="$0.00" readonly />
</td>
</tr>
<tr>
<th scope="row">Shipping Charge</th>
<td>
<input type="text" class="form-control bg-light border-0" id="cart-shipping"
placeholder="$0.00" readonly />
</td>
</tr>
<tr class="border-top border-top-dashed">
<th scope="row">Total Amount</th>
<td>
<input type="text" class="form-control bg-light border-0" id="cart-total"
placeholder="$0.00" readonly />
</td>
</tr>
</tbody>
</table>
<!--end table-->
</td>
</tr>
</tbody>
</table>
<!--end table-->
</div>
<div class="row mt-3">
<div class="col-lg-4">
<div class="mb-2">
<label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Payment
Details</label>
<div class="input-light">
<select class="form-control bg-light border-0" data-choices data-choices-search-false
data-choices-removeItem id="choices-payment-type">
<option value="">Payment Method</option>
<option value="Mastercard">Mastercard</option>
<option value="Credit Card">Credit Card</option>
<option value="Visa">Visa</option>
<option value="Paypal">Paypal</option>
</select>
</div>
</div>
<div class="mb-2">
<input class="form-control bg-light border-0" type="text" id="cardholderName"
placeholder="Card Holder Name">
</div>
<div class="mb-2">
<input class="form-control bg-light border-0" type="text" id="cardNumber"
placeholder="xxxx xxxx xxxx xxxx">
</div>
<div>
<input class="form-control bg-light border-0" type="text" id="amountTotalPay"
placeholder="$0.00" readonly />
</div>
</div>
<!--end col-->
</div>
<!--end row-->
<div class="mt-4">
<label for="exampleFormControlTextarea1"
class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
<textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2"
required>All accounts are to be paid within 7 days from receipt of invoice. To be paid by cheque or credit card or direct payment online. If account is not paid within 7 days the credits details supplied as confirmation of work undertaken will be charged the agreed quoted fee noted above.</textarea>
</div>
<div class="hstack justify-content-end d-print-none mt-4 gap-2">
<button type="submit" class="btn btn-success"><i class="ri-printer-line me-1 align-bottom"></i>
Save</button>
<a href="javascript:void(0);" class="btn btn-primary"><i
class="ri-download-2-line me-1 align-bottom"></i> Download Invoice</a>
<a href="javascript:void(0);" class="btn btn-danger"><i
class="ri-send-plane-fill me-1 align-bottom"></i> Send Invoice</a>
</div>
</div>
</form>
</div>
</div>
<!--end col-->
</div>
</div>
</div>
@endsection
@push('js')
<script src="{{ asset('assets/js/pages/invoicecreate.init.js') }}"></script>
@endpush