@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