<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Create Invoice')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Apps', 'title' => 'Create Invoice')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Apps', 'title' => 'Create Invoice')) ?>

                    <div class="container-fluid">
<div class="lg:w-10/12 w-full mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-base">
<div class="col-span-1 lg:col-span-3">
<div class="card">
<div class="card-body p-7.5">
<div class="mb-7.5 flex flex-wrap items-center justify-between gap-4">
<!-- Logo Upload -->
<div class="border-default-300 relative flex h-15 w-65 items-center justify-between rounded border px-2 text-center">
<label class="absolute inset-0 flex cursor-pointer items-center justify-between px-2" for="invoiceLogo">
<img alt="dark logo" class="h-7 flex dark:hidden print:flex" src="/images/logo-black.png"/>
<img alt="dark logo" class="h-7 hidden dark:flex print:hidden" src="/images/logo.png"/>
<i class="iconify tabler--cloud-upload text-default-400 text-xl"></i>
</label>
<input accept="image/*" class="hidden" id="invoiceLogo" type="file"/>
</div>
<!-- Invoice Number + Currency -->
<div class="text-end">
<div class="flex flex-wrap items-center gap-2.5">
<!-- Invoice Number -->
<div class="flex flex-col">
<label class="form-label" for="invoiceNumber">Invoice #</label>
<input class="form-input w-40" id="invoiceNumber" placeholder="e.g. INV-0001" type="text"/>
</div>
<!-- Currency Select -->
<div class="flex flex-col">
<label class="form-label" for="currency">Currency</label>
<select class="form-select" id="currency">
<option selected="" value="USD">USD ($)</option>
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="INR">INR (₹)</option>
<option value="JPY">JPY (¥)</option>
<option value="AUD">AUD (A$)</option>
<option value="CAD">CAD (C$)</option>
<option value="CNY">CNY (¥)</option>
</select>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-base">
<div>
<label class="form-label" for="invoiceDate">Invoice Date</label>
<input class="form-input flatpickr-input bg-transparent!" data-provider="flatpickr" id="invoiceDate" placeholder="Select Date" readonly="readonly" type="text"/>
</div>
<div>
<label class="form-label" for="dueDate">Due Date</label>
<input class="form-input flatpickr-input bg-transparent!" data-provider="flatpickr" id="dueDate" placeholder="Select Date" readonly="readonly" type="text"/>
</div>
<div>
<label class="form-label" for="paymentMethod">Payment Method</label>
<select class="form-input" id="paymentMethod">
<option value="">Select</option>
<option>Credit / Debit Card</option>
<option>Bank Transfer</option>
<option>PayPal</option>
<option>UPI (GPay)</option>
<option>Cash</option>
</select>
</div>
</div>
<div class="mt-7.5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-base">
<div>
<label class="form-label">Billing Address</label>
<input class="form-input mb-3" placeholder="Name" type="text"/>
<textarea class="form-textarea mb-3" placeholder="Address" rows="3"></textarea>
<div class="input-group flex">
<select class="form-select" style="max-width: 120px">
<option value="+1">+1 (US)</option>
<option selected="" value="+44">+44 (UK)</option>
<option value="+91">+91 (IN)</option>
<option value="+61">+61 (AU)</option>
<option value="+971">+971 (UAE)</option>
</select>
<input class="form-input" placeholder="Phone Number" type="text"/>
</div>
</div>
<div>
<label class="form-label">Shipping Address</label>
<input class="form-input mb-3" placeholder="Name" type="text"/>
<textarea class="form-textarea mb-3" placeholder="Address" rows="3"></textarea>
<div class="input-group flex">
<select class="form-select" style="max-width: 120px">
<option value="+1">+1 (US)</option>
<option selected="" value="+44">+44 (UK)</option>
<option value="+91">+91 (IN)</option>
<option value="+61">+61 (AU)</option>
<option value="+971">+971 (UAE)</option>
</select>
<input class="form-input" placeholder="Phone Number" type="text"/>
</div>
</div>
</div>
</div>
<div class="mt-7.5 table-wrapper">
<table class="table mb-4 min-w-full text-center align-middle">
<thead class="bg-light/25 text-2xs tracking-wider uppercase">
<tr>
<th class="p-2">#</th>
<th class="p-2 text-left">Item Description</th>
<th class="p-2">Qty</th>
<th class="p-2">Unit Price</th>
<th class="p-2">Amount</th>
<th class="p-2">Action</th>
</tr>
</thead>
<tbody id="invoice-items">
<tr>
<td class="px-2.25 py-3">1</td>
<td class="px-2.25 py-3">
<input class="form-input" placeholder="Description" type="text"/>
</td>
<td class="px-2.25 py-3">
<input class="form-input" placeholder="1" type="number"/>
</td>
<td class="px-2.25 py-3">
<input class="form-input" placeholder="0.00" type="number"/>
</td>
<td class="px-2.25 py-3">
<input class="form-input" placeholder="0.00" type="number"/>
</td>
<td class="px-2.25 py-3">
<button class="btn btn-icon bg-danger size-7.5 text-white hover:bg-danger-hover" type="button">×</button>
</td>
</tr>
</tbody>
</table>
<button class="btn bg-primary mt-3 text-white hover:bg-primary-hover" type="button">
<i class="iconify tabler--plus"></i>
                                                    Add Item
                                                </button>
</div>
<div class="mt-7.5 flex justify-end">
<div class="md:w-1/3">
<div class="table-wrapper">
<table class="table table-borderless">
<tr>
<td class="text-end">Subtotal</td>
<td>
<input class="form-input" id="subtotal" placeholder="0.00" type="number"/>
</td>
</tr>
<tr>
<td class="text-end">Tax (%)</td>
<td>
<input class="form-input" id="tax" placeholder="0.00" type="number"/>
</td>
</tr>
<tr>
<td class="text-end">Discount</td>
<td>
<input class="form-input" id="discount" placeholder="0.00" type="number"/>
</td>
</tr>
<tr class="font-bold">
<td class="text-end">Total</td>
<td>
<input class="form-input bg-transparent!" id="total" placeholder="0.00" readonly="" type="number"/>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Notes -->
<div class="mt-7.5">
<label class="form-label" for="invoiceNote">Additional Notes</label>
<textarea class="form-textarea" id="invoiceNote" placeholder="e.g. Thank you for your business!" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="col-span-1">
<div class="sticky top-25">
<div class="card">
<div class="card-body">
<div class="flex flex-col justify-center gap-2.5">
<a class="btn bg-light hover:text-primary" href="javascript: void(0);"> <i class="iconify tabler--eye"></i> Preview </a>
<a class="btn bg-light hover:text-primary" href="javascript: void(0);"> <i class="iconify tabler--download"></i> Download </a>
<a class="btn btn-lg bg-danger text-white hover:bg-danger-hover" href="javascript: void(0);"> <i class="iconify tabler--send-2"></i> Send </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Ecommerce Products view Js -->
<script src="/js/pages/apps-create-invoice.js"></script>
</body>
</html>