<%- include('../include/header') %>

    <link rel="stylesheet" href="dropzone/dropzone.min.css">
    <link rel="stylesheet" href="modules/summernote/summernote-bs4.css">
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Product</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="/">Dashboard</a></div>
                    <div class="breadcrumb-item"><a href="javascript:void (0)">Product</a></div>
                    <div class="breadcrumb-item">Add Product</div>
                </div>
            </div>

            <div class="section-body">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12">
                        <div class="card">
                            <form id="addProduct" enctype="multipart/form-data">
                                <div class="card-header">
                                    <h4>Add Product</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Title</label>
                                                <input type="text" id="title" name="title" class="form-control"
                                                    value="1" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label class="col-form-label text-md-right">Description</label>
                                                <textarea name="description" class="summernote"
                                                    id="description">value="1"</textarea>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-group">
                                                <div class="control-label">Is Featured</div>
                                                <label class="custom-switch mt-2">
                                                    <input id="is_featured" type="checkbox" name="is_featured"
                                                        class="custom-switch-input" checked>
                                                    <span class="custom-switch-indicator"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-group">
                                                <div class="control-label">On Sale</div>
                                                <label class="custom-switch mt-2">
                                                    <input id="on_sale" type="checkbox" name="on_sale"
                                                        class="custom-switch-input" checked>
                                                    <span class="custom-switch-indicator"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label>Display Price</label>
                                                <input id="display_price" type="number" name="display_price"
                                                    class="form-control" value="1" />
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label>Selling Price</label>
                                                <input id="selling_price" type="number" name="selling_price"
                                                    class="form-control" value="1" />
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-group">
                                                <label>GST (%)</label>
                                                <input id="gst" type="number" name="gst" class="form-control"
                                                    value="1" />
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label>Product Discount (%)</label>
                                                <input id="discount" type="number" name="discount" class="form-control"
                                                    value="1" />
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label>Shipping Charges (₹)</label>
                                                <input id="shipping_charges" type="number" name="shipping_charges"
                                                    class="form-control" value="1" />
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-group">
                                                <label>Total Qty</label>
                                                <input id="total_qty" type="number" name="total_qty"
                                                    class="form-control" value="1" />
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="form-group">
                                                <label>Category</label>
                                                <select id="addProductCategory" name="category_id"
                                                    class="form-control ">
                                                    <% if(categories.length> 0) { %>
                                                        <option value="" selected>Select Categories</option>
                                                        <% categories.forEach((category, index)=> { %>
                                                            <option value="<%= category.category %>">
                                                                <%= category.category %>
                                                            </option>
                                                            <% })} else {%>
                                                                <option value="1" selected>No Category Found</option>
                                                                <% } %>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="variant d-none"></div>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label>Product Image (max-size: 1mb)</label>
                                                <div class="custom-file mb-4">
                                                    <input type="file" class="custom-file-input" id="thumbnail"
                                                        name="thumbnail">
                                                    <label class="custom-file-label" for="thumbnail">Choose file</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="gallery gallery-md" id="gallery-thumbnail"> </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label>Product Multiple Image</label>
                                                <div class="custom-file mb-4">
                                                    <input type="file" class="custom-file-input" id="multipleImage"
                                                        multiple name="multi_img[]">
                                                    <label class="custom-file-label" for="multipleImage">Choose
                                                        file</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="gallery gallery-md" id="gallery-multithumbnail"> </div>
                                        </div>
                                    </div>
                                </div>
                        </div>

                        <div class="card-footer text-right">
                            <button id="submitBtn" type="submit" class="btn btn-primary">Add Product</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
    </div>

    </section>
    </div>
    <%- include('../include/footer') %>

        <script>

//     $(function() {
//     // Multiple images preview in browser
//     var imagesPreview = function(input, placeToInsertImagePreview) {
//         if (input.files) {
//             var filesAmount = input.files.length;
//             for (i = 0; i < filesAmount; i++) {
//                 var reader = new FileReader();
//                 reader.onload = function(event) {
//                     $($.parseHTML('<div>')).attr('class', 'gallery-item text-center').attr('data-title',`Image ${i+1}`).attr('style',`background-image:url('${event.target.result}')`).appendTo(placeToInsertImagePreview);
//                 }
//                 reader.readAsDataURL(input.files[i]);
//             }
//         }

//     };

//     $('#multipleImage').on('change', function() {
//         imagesPreview(this, 'div.gallery');
//     });
// });

        </script>