386 lines
20 KiB
PHP
386 lines
20 KiB
PHP
|
@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
|