<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Create New Products"; include('./partials/title-meta.php'); ?>

        <!-- Dropzone Plugin CSS -->
        <link href="assets/plugins/dropzone/dropzone.css" rel="stylesheet" type="text/css" />

        <!-- Quill css -->
        <link href="assets/plugins/quill/quill.core.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/quill/quill.snow.css" rel="stylesheet" type="text/css" />

        <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Ecommerce"; $title = "Add Product"; include('./partials/page-title.php'); ?>

                    <div class="row justify-content-center">
                        <div class="col-xxl-10">
                            <div class="row">
                                <div class="col-xxl-8">
                                    <div class="card">
                                        <div class="card-header d-block p-3">
                                            <h4 class="card-title mb-1">Product Information</h4>
                                            <p class="text-muted mb-0">To add a new product, please provide the necessary details in the fields below.</p>
                                        </div>
                                        <!-- end card-header -->

                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="mb-3">
                                                        <label for="productName" class="form-label">Product Name <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" id="productName" placeholder="Enter product name" required="" />
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="skuId" class="form-label">SKU <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" id="skuId" placeholder="SOFA-10058" required="" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="stockNumber" class="form-label">Stock <span class="text-danger">*</span></label>
                                                        <input type="number" class="form-control" id="stockNumber" placeholder="250" />
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div>
                                                        <label class="form-label">Product Description <span class="text-muted">(Optional)</span></label>
                                                        <div id="snow-editor">
                                                            <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>
                                                                <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>
                                        <!-- end card-body-->
                                    </div>
                                    <!-- end card-->

                                    <div class="card">
                                        <div class="card-header d-block p-3">
                                            <h4 class="card-title mb-1">Product Image</h4>
                                            <p class="text-muted mb-0">To upload a product image, please use the option below to select and upload the relevant file.</p>
                                        </div>
                                        <!-- end card-header -->

                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12">
                                                    <form action="/" method="post" class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate">
                                                        <div class="fallback">
                                                            <input name="file" type="file" />
                                                        </div>

                                                        <div class="dz-message needsclick">
                                                            <div class="avatar-lg mx-auto mb-3">
                                                                <span class="avatar-title bg-info-subtle text-info rounded-circle">
                                                                    <i class="ti ti-cloud-upload fs-24"></i>
                                                                </span>
                                                            </div>
                                                            <h4 class="mb-2">Drop files here or click to upload.</h4>
                                                            <p class="text-muted fst-italic mb-3">You can drag images here, or browse files via the button below.</p>
                                                            <button type="button" class="btn btn-sm shadow btn-default">Browse Images</button>
                                                        </div>
                                                    </form>

                                                    <!-- Preview -->
                                                    <div class="dropzone-previews mt-3" id="file-previews"></div>

                                                    <!-- file preview template -->
                                                    <div class="d-none" id="uploadPreviewTemplate">
                                                        <div class="card mt-1 mb-0 border-dashed border">
                                                            <div class="p-2">
                                                                <div class="row align-items-center">
                                                                    <div class="col-auto">
                                                                        <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="" />
                                                                    </div>
                                                                    <div class="col ps-0">
                                                                        <a href="javascript:void(0);" class="fw-semibold" data-dz-name></a>
                                                                        <p class="mb-0 text-muted" data-dz-size></p>
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <!-- Button -->
                                                                        <a href="" class="btn btn-link btn-lg text-danger" data-dz-remove>
                                                                            <span class="dropzone-close"></span>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end file preview template -->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card-body-->
                                    </div>
                                    <!-- end card-->
                                </div>
                                <!-- end col-->

                                <div class="col-xxl-4">
                                    <div class="card">
                                        <div class="card-header d-block p-3">
                                            <h4 class="card-title mb-1">Pricing</h4>
                                            <p class="text-muted mb-0">Set the base price and applicable discount for the product using the options below.</p>
                                        </div>
                                        <!-- end card-header -->

                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="basePrice" class="form-label">Base Price <span class="text-danger">*</span></label>
                                                <div class="app-search">
                                                    <input type="number" class="form-control" id="basePrice" placeholder="Enter base price (e.g., 199.99)" />
                                                    <i class="ti ti-currency-dollar app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="discount" class="form-label">Discount Type <span class="text-muted">(Optional)</span></label>
                                                <div class="app-search">
                                                    <select class="form-select form-control my-1 my-md-0" 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>
                                                    <i class="ti ti-discount app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-0">
                                                <label for="discountValue" class="form-label">Discount Value <span class="text-muted">(Optional)</span></label>
                                                <div class="app-search">
                                                    <input type="number" class="form-control" id="discountValue" placeholder="Enter discount amount or percentage" />
                                                    <i class="ti ti-tag app-search-icon text-muted"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header d-block p-3">
                                            <h4 class="card-title mb-1">Organize</h4>
                                            <p class="text-muted mb-0">Organize your product by selecting the appropriate brand, category, sub-category, status, and tags.</p>
                                        </div>
                                        <!-- end card-header -->

                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="brand" class="form-label">Brand</label>
                                                <div class="app-search">
                                                    <input type="text" class="form-control" id="brand" placeholder="Enter brand name" />
                                                    <i class="ti ti-stack-2 app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                                                <div class="app-search">
                                                    <select class="form-select form-control my-1 my-md-0" id="category">
                                                        <option selected>Choose Category</option>
                                                        <option value="Furniture">Furniture</option>
                                                        <option value="Electronics">Electronics</option>
                                                        <option value="Fashion">Fashion</option>
                                                    </select>
                                                    <i class="ti ti-category app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="subCategory" class="form-label">Sub Category <span class="text-danger">*</span></label>
                                                <div class="app-search">
                                                    <select class="form-select form-control my-1 my-md-0" id="subCategory">
                                                        <option selected>Choose Sub Category</option>
                                                        <option value="Chairs">Chairs</option>
                                                        <option value="Sofas">Sofas</option>
                                                        <option value="Tables">Tables</option>
                                                    </select>
                                                    <i class="ti ti-list-check app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="statusOne" class="form-label">Status <span class="text-danger">*</span></label>
                                                <div class="app-search">
                                                    <select class="form-select form-control my-1 my-md-0" 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>
                                                    <i class="ti ti-wand app-search-icon text-muted"></i>
                                                </div>
                                            </div>

                                            <div class="mb-0">
                                                <label for="tags" class="form-label">Tags</label>
                                                <div class="app-search">
                                                    <input type="text" class="form-control" id="tags" placeholder="Enter tags separated by commas" />
                                                    <i class="ti ti-tag app-search-icon text-muted"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end row-->

                            <div class="mt-2 mb-4 d-flex gap-2 justify-content-center">
                                <a href="#!" class="btn btn-danger fw-semibold"> Discard </a>
                                <a href="#!" class="btn btn-secondary"> Save as Draft </a>
                                <a href="#!" class="btn btn-success"> Publish </a>
                            </div>
                        </div>
                        <!-- end col-->
                    </div>
                    <!-- end row-->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>

        <!-- Quill Editor js -->
        <script src="assets/plugins/quill/quill.js"></script>

        <!-- Dropzone File Upload js -->
        <script src="assets/plugins/dropzone/dropzone-min.js"></script>

        <!-- Add Product Page js -->
        <script src="assets/js/pages/ecommerce-product-add.js"></script>
    </body>
</html>
