<!DOCTYPE html>

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

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

                    <div class="container">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-base">
<div class="space-y-base lg:col-span-2">
<div class="card">
<div class="card-header p-5">
<div>
<h4 class="card-title mb-1.25">Product Information</h4>
<p class="text-default-400">To add a new product, please provide the necessary details in the fields below.</p>
</div>
</div>
<!-- end card-header -->
<div class="card-body">
<div class="grid md:grid-cols-2 gap-base">
<div class="col-span-2">
<label class="form-label" for="productName">
                                                    Product Name
                                                    <span class="text-danger">*</span>
</label>
<input class="form-input" id="productName" placeholder="Enter product name" required="" type="text"/>
</div>
<div class="col-span-2 md:col-span-1">
<label class="form-label" for="skuId">
                                                    SKU
                                                    <span class="text-danger">*</span>
</label>
<input class="form-input" id="skuId" placeholder="SOFA-10058" required="" type="text"/>
</div>
<div class="col-span-2 md:col-span-1">
<label class="form-label" for="stockNumber">
                                                    Stock
                                                    <span class="text-danger">*</span>
</label>
<input class="form-input" id="stockNumber" placeholder="250" required="" type="text"/>
</div>
<div class="col-span-2">
<label class="form-label">
                                                    Product Description
                                                    <span class="text-default-400">(Optional)</span>
</label>
<div id="snow-editor" style="height: 140px">
<p>
                                                        Introducing the
                                                        <strong>
<em>Azure Comfort Single Sofa</em>
</strong>
                                                        , a perfect blend of modern design and luxurious comfort.
                                                    </p>
<p>This premium blue single sofa is designed to elevate any living space with its sleek profile and rich, durable fabric. It’s the perfect seating option for your living room, lounge area, or cozy reading nook.</p>
<ul class="list-inside list-disc">
<li>Crafted with a solid mahogany frame for enhanced durability.</li>
<li>Upholstered in a high-quality blue fabric that offers both style and comfort.</li>
</ul>
</div>
<!-- end Snow-editor -->
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-5">
<div>
<h4 class="card-title mb-1.25">Product Image</h4>
<p class="text-default-400">To upload a product image, please use the option below to select and upload the relevant file.</p>
</div>
</div>
<!-- end card-header -->
<div class="card-body">
<div class="border-2 border-dashed border-default-300 rounded-lg p-5">
<form action="/" class="my-8" data-plugin="dropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate" id="myAwesomeDropzone" method="post">
<div class="dz-message needsclick">
<div class="mx-auto mb-5 size-11">
<span class="btn btn-icon bg-info/15 text-info size-11 rounded-full">
<i class="iconify tabler--cloud-upload text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg text-center">Drop files here or click to upload.</h4>
<p class="text-default-400 mb-5 text-center italic">You can drag images here, or browse files via the button below.</p>
<div class="flex justify-center">
<button class="btn btn-sm border-default-300 border shadow" type="button">Browse Images</button>
</div>
</div>
</form>
</div>
<!-- Preview -->
<div class="dropzone-previews mt-5" id="file-previews"></div>
<!-- file preview template -->
<div class="hidden" id="uploadPreviewTemplate">
<div class="card mt-1 border border-dashed border-default-300">
<div class="p-3">
<div class="flex items-center">
<div class="px-3">
<img alt="" class="size-8 rounded bg-light" data-dz-thumbnail="" src="/#"/>
</div>
<div>
<a class="font-semibold text-primary" data-dz-name="" href="javascript:void(0);"></a>
<p class="text-default-400" data-dz-size=""></p>
</div>
<div class="ms-auto">
<!-- Button -->
<a class="btn btn-sm text-danger" data-dz-remove="" href="#">
<i class="iconify tabler--x text-xl dropzone-close"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end file preview template -->
</div>
</div>
</div>
<div class="space-y-base">
<div class="card">
<div class="card-header p-5">
<div>
<h4 class="card-title mb-1.25">Pricing</h4>
<p class="text-default-400">Set the base price and applicable discount for the product using the options below.</p>
</div>
</div>
<div class="card-body">
<div class="space-y-base">
<div>
<label class="form-label" for="basePrice"> Base Price <span class="text-danger">*</span></label>
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<input class="form-input" id="basePrice" placeholder="Enter base price (e.g., 199.99)" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="discount">
                                                    Discount Type
                                                    <span class="text-default-400">(Optional)</span>
</label>
<div class="input-icon-group">
<i class="iconify tabler--discount input-icon"></i>
<select class="form-select" id="discount">
<option selected="">Choose Discount</option>
<option value="No Discount">No Discount</option>
<option value="Flat Discount">Flat Discount</option>
<option value="Percentage Discount">Percentage Discount</option>
</select>
</div>
</div>
<div>
<label class="form-label" for="discountValue"> Discount Value <span class="text-default-400">(Optional)</span></label>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<input class="form-input" id="discountValue" placeholder="Enter discount amount or percentage" required="" type="text"/>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-5">
<div>
<h4 class="card-title mb-1.25">Organize</h4>
<p class="text-default-400">Organize your product by selecting the appropriate brand, category, sub-category, status, and tags.</p>
</div>
</div>
<div class="card-body">
<div class="space-y-base">
<div>
<label class="form-label" for="brand">Brand</label>
<div class="input-icon-group">
<i class="iconify tabler--stack-2 input-icon"></i>
<input class="form-input" id="brand" placeholder="Enter brand name" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="category">Category <span class="text-danger ms-1">*</span></label>
<div class="input-icon-group">
<i class="iconify tabler--category input-icon"></i>
<select class="form-select" id="category">
<option selected="">Choose Category</option>
<option value="Furniture">Furniture</option>
<option value="Electronics">Electronics</option>
<option value="Fashion">Fashion</option>
</select>
</div>
</div>
<div>
<label class="form-label" for="subCategory">Sub Category<span class="text-danger ms-1">*</span></label>
<div class="input-icon-group">
<i class="iconify tabler--list-check input-icon"></i>
<select class="form-select" id="subCategory">
<option selected="">Choose Sub Category</option>
<option value="Chairs">Chairs</option>
<option value="Sofas">Sofas</option>
<option value="Tables">Tables</option>
</select>
</div>
</div>
<div>
<label class="form-label" for="statusOne">
                                                    Status
                                                    <span class="text-danger ms-1">*</span>
</label>
<div class="input-icon-group">
<i class="iconify tabler--wand input-icon"></i>
<select class="form-select" id="statusOne">
<option selected="">Choose Status</option>
<option value="Published">Published</option>
<option value="Inactive">Inactive</option>
<option value="Schedule">Schedule</option>
<option value="Draft">Draft</option>
</select>
</div>
</div>
<div>
<label class="form-label" for="tags">Tags</label>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<input class="form-input" id="tags" placeholder="Enter tags separated by commas" required="" type="text"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-7.5 mb-2.5 flex justify-center gap-2.5">
<a class="btn bg-danger text-white hover:bg-danger-hover" href="#!">Discard</a>
<a class="btn bg-secondary text-white hover:bg-secondary-hover" href="#!">Save as Draft</a>
<a class="btn bg-success text-white hover:bg-success-hover" href="#!">Publish</a>
</div>
</div>
</main>

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

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

        <!-- Quill Editor js -->
<script src="/plugins/quill/quill.js"></script>
<!-- Dropzone File Upload js -->
<script src="/plugins/dropzone/dropzone-min.js"></script>
<!-- Quill Demo Js -->
<script src="/js/pages/ecommerce-product-add.js"></script>
</body>
</html>