- var theme_customizer      = true;
- var sidebar               = true;
- var dropzone              = true;
- var page_select4          = true;
- var select2_options       = true;
- var flatpickr             = true;
- var slick                 = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
- var tooltip               = true;
- var editors               = true;
- var editors2              = true;
- var header_slider         = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Add Product
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item ECommerce
                    li.breadcrumb-item.active Add Product
          // Container-fluid starts
          .container-fluid
              .row 
                .col-12 
                  .card 
                    .card-header
                      h5 Product Form
                    .card-body
                      .row.g-xl-5.g-3
                        .col-xxl-3.col-xl-4.box-col-4e.sidebar-left-wrapper
                            ul.sidebar-left-icons#add-product-pills-tab.nav.nav-pills(role='tablist')
                              li.nav-item  
                                a#detail-product-tab.nav-link.active(data-bs-toggle='pill' href='#detail-product' role='tab' aria-controls='detail-product' aria-selected='false')
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#product-detail")
                                  .product-tab-content
                                    h6 Add Product Details
                                    p Add Product name & details
                              li.nav-item 
                                a#gallery-product-tab.nav-link(data-bs-toggle='pill' href='#gallery-product' role='tab' aria-controls='gallery-product' aria-selected='false')
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#product-gallery")
                                  .product-tab-content
                                    h6 Product gallery
                                    p thumbnail & Add Product Gallery
                              li.nav-item 
                                a#category-product-tab.nav-link(data-bs-toggle='pill' href='#category-product' role='tab' aria-controls='category-product' aria-selected='false')
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#product-category")
                                  .product-tab-content
                                    h6 Product Categories
                                    p Add Product category, Status and Tags
                              li.nav-item
                                a#pricings-tab.nav-link(data-bs-toggle='pill' href='#pricings' role='tab' aria-controls='pricings' aria-selected='false')
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#pricing") 
                                  .product-tab-content
                                    h6 Selling prices
                                    p Add Product basic price & Discount
                              li.nav-item
                                a#advance-product-tab.nav-link(data-bs-toggle='pill' href='#advance-product' role='tab' aria-controls='advance-product' aria-selected='false')
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#advance") 
                                  .product-tab-content
                                    h6 Advance
                                    p Add Meta details & Inventory details

                        .col-xxl-9.col-xl-8.box-col-8.position-relative
                          #add-product-pills-tabContent.tab-content
                            #detail-product.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='detail-product-tab')
                              .sidebar-body
                                form.row.g-2
                                  label.form-label.col-12.m-0(for='productTitle1') Product Title 
                                    span.txt-danger  *
                                  .col-12.custom-input
                                    input#productTitle1.form-control.is-invalid(type='text' required='')
                                    .valid-feedback
                                      | Looks good!
                                    .invalid-feedback
                                      | A product name is required and recommended to be unique.
                                  .col-12 
                                    .toolbar-box
                                      #toolbar2
                                          span.ql-formats
                                            select.ql-size
                                          span.ql-formats
                                            button.ql-bold Bold 
                                            button.ql-italic Italic 
                                            button.ql-underline underline
                                            button.ql-strike Strike 
                                          span.ql-formats
                                            button.ql-list(value="ordered") List 
                                            button.ql-list(value="bullet") 
                                            button.ql-indent(value="-1") 
                                            button.ql-indent(value="+1")
                                          span.ql-formats
                                            button.ql-link
                                            button.ql-image
                                            button.ql-video
                                      #editor2
                                    p.f-light Improve product visibility by adding a compelling description.
                                .product-buttons
                                  .btn
                                    .d-flex.align-items-center.gap-sm-2.gap-1
                                        | Next
                                        svg
                                          use(href="../assets/svg/icon-sprite.svg#front-arrow")   
                            #gallery-product.tab-pane.fade(role='tabpanel' aria-labelledby='gallery-product-tab')
                              .sidebar-body
                                .product-upload
                                  p Product Image 
                                  form#multiFileUploadA.dropzone.dropzone-light(action='/upload.php')
                                    .dz-message.needsclick
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#file-upload")
                                      h6 Drag your image here, or 
                                        a.txt-primary(href="#!") browser
                                      span.note.needsclick
                                        | SVG,PNG,JPG or GIF
                                .product-upload
                                  p Product Gallery
                                  form#multiFileUploadB.dropzone.dropzone-light(action='/upload.php')
                                    .dz-message.needsclick
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#file-upload1")
                                      h6 Drag files here
                                      span.note.needsclick
                                        | Add Product Gallery Images
                                .product-buttons
                                  .btn
                                    .d-flex.align-items-center.gap-sm-2.gap-1
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                      | Previous
                                  .btn
                                    .d-flex.align-items-center.gap-sm-2.gap-1
                                        | Next
                                        svg
                                          use(href="../assets/svg/icon-sprite.svg#front-arrow")      
                            #category-product.tab-pane.fade(role='tabpanel' aria-labelledby='category-product-tab')
                              .sidebar-body
                                form
                                  .row.g-lg-4.g-3
                                    .col-12
                                      .row.g-3
                                        .col-sm-6
                                          .row.g-2 
                                            .col-12
                                              label.form-label.m-0(for='validationDefault04') Add Category
                                            .col-12
                                              select#validationDefault04.form-select(required='')
                                                option(selected='' value='') Toys & games
                                                option Sportswear 
                                                option Jewellery 
                                                option Furniture and Decor
                                                option Health, Personal Care, and Beauty
                                                option Auto and Parts 
                                                option Baby Care Products
                                              p.f-light A product can be added to a category
                                        .col-sm-6
                                          .row.g-2.product-tag
                                            .col-12
                                              label.form-label.d-block.m-0 Add Tag
                                            .col-12
                                              input(name='basic-tags' value='watches, sports, clothes, bottles')
                                              p.f-light Products can be tagged
                                        .col-12
                                          .category-buton
                                            a.btn.button-primary(href="#!" data-bs-toggle='modal' data-bs-target='#category-pill-modal')
                                              i.me-2.fa.fa-plus 
                                              | Create New Category 
                                          #category-pill-modal.modal.fade(tabindex='-1' aria-hidden='true')
                                            .modal-dialog.modal-lg
                                                .modal-content
                                                    .modal-header
                                                        h3.modal-title.fs-5 Create new category
                                                        button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
                                                    .modal-body.custom-input  
                                                      .create-category
                                                        div
                                                          label.form-label(for='categoryName') Category Name 
                                                            span.txt-danger  *
                                                          input#categoryName.form-control.m-0(type='text' required='')
                                                          .toolbar-box
                                                            #toolbar3
                                                                span.ql-formats
                                                                  select.ql-size
                                                                span.ql-formats
                                                                  button.ql-bold Bold 
                                                                  button.ql-italic Italic 
                                                                  button.ql-underline underline
                                                                  button.ql-strike Strike 
                                                                span.ql-formats
                                                                  button.ql-list(value="ordered") List 
                                                                  button.ql-list(value="bullet") 
                                                                  button.ql-indent(value="-1") 
                                                                  button.ql-indent(value="+1")
                                                                span.ql-formats
                                                                  button.ql-link
                                                                  button.ql-image
                                                                  button.ql-video
                                                            #editor3
                                                        p.f-light Improve product visibility by adding a compelling description.
                                                    .modal-footer
                                                        button.btn.btn-light(type='button' data-bs-dismiss='modal') Cancel
                                                        button.btn.btn-primary(type='button') Add
                                    .col-12 
                                      .row.g-3
                                        .col-sm-6
                                          .row
                                            .col-12
                                              label.form-label(for='publishStatus') Publish Status
                                              select#publishStatus.form-select(required='')
                                                option(selected='' value='') Publish
                                                option Drafts
                                                option Unpublish
                                              p.f-light Choose the status
                                        .col-sm-6
                                          .row
                                            .col-12
                                              label.form-label(for='datetime-local1') Publish Date & Time
                                              .input-group.flatpicker-calender.product-date
                                                input#datetime-local1.form-control(type='date')
                                  .product-buttons
                                    .btn
                                      .d-flex.align-items-center.gap-sm-2.gap-1
                                        svg
                                          use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                        | Previous
                                    .btn
                                      .d-flex.align-items-center.gap-sm-2.gap-1
                                          | Next
                                          svg
                                            use(href="../assets/svg/icon-sprite.svg#front-arrow")
                            #pricings.tab-pane.fade(role='tabpanel' aria-labelledby='pricings-tab')
                              .sidebar-body
                                form.price-wrapper
                                  .row.g-3.custom-input
                                    .col-sm-6 
                                      label.form-label(for='initialCost') Initial cost 
                                        span.txt-danger *
                                      input#initialCost.form-control(type='number')
                                    .col-sm-6 
                                      label.form-label(for='sellingPrice') Selling price 
                                        span.txt-danger *
                                      input#sellingPrice.form-control(type='number')
                                    .col-sm-6
                                      label.form-label Choose your currency
                                      select.form-select(aria-label='Default select example')
                                        option(selected='') Dollar $
                                        option(value='1') Euro €
                                        option(value='2') Rupees ₹
                                        option(value='3') British pounds £
                                        option(value='4') Russian Ruble ₽
                                        option(value='5') Japanese Yen ¥
                                        option(value='6') Singapore Dollar S$
                                    .col-sm-6 
                                      label.form-label(for='productStock1') Product stocks
                                        span.txt-danger *
                                      input#productStock1.form-control(type='number')
                                    .col-12
                                      label.form-label Types of product discount
                                        i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Choose the kind of discount that will be used on that particular item.')
                                      ul.radio-wrapper 
                                        li 
                                          input#radio-icon.form-check-input(type='radio', name='radio5', value='option5')
                                          label.form-check-label(for='radio-icon')
                                            span Fixed Price
                                        li 
                                          input#radio-icon4.form-check-input(type='radio', name='radio5', value='option5' checked='')
                                          label.form-check-label(for='radio-icon4')
                                            span BOGO(Buy one, Get one)
                                        li 
                                          input#radio-icon5.form-check-input(type='radio', name='radio5', value='option5')
                                          label.form-check-label(for='radio-icon5')
                                            span Seasonal or holiday discount
                                        li 
                                          input#radio-icon6.form-check-input(type='radio', name='radio5', value='option5')
                                          label.form-check-label(for='radio-icon6')
                                            span Percentage-based discount(%)
                                        li 
                                          input#radio-icon7.form-check-input(type='radio', name='radio5', value='option5')
                                          label.form-check-label(for='radio-icon7')
                                            span Volume or bulk discount
                                  .product-buttons
                                      .btn
                                        .d-flex.align-items-center.gap-sm-2.gap-1
                                          svg
                                            use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                          | Previous
                                      .btn
                                        .d-flex.align-items-center.gap-sm-2.gap-1
                                            | Next
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#front-arrow")    
                            #advance-product.tab-pane.fade(role='tabpanel' aria-labelledby='advance-product-tab')
                              .sidebar-body.advance-options
                                ul#advance-option-tab.nav.nav-tabs.border-tab.mb-0(role='tablist')
                                  li.nav-item
                                      a#manifest-option-tab.nav-link.active(data-bs-toggle='tab' href='#manifest-option' role='tab' aria-controls='manifest-option' aria-selected='true')
                                          | Inventory
                                  li.nav-item
                                      a#additional-option-tab.nav-link(data-bs-toggle='tab' href='#additional-option' role='tab' aria-controls='additional-option' aria-selected='false')
                                          | Additional Options
                                  li.nav-item
                                      a#dropping-option-tab.nav-link(data-bs-toggle='tab' href='#dropping-option' role='tab' aria-controls='dropping-option' aria-selected='false')
                                          | Shipping
                                #advance-option-tabContent.tab-content
                                  #manifest-option.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='manifest-option-tab')
                                    .meta-body 
                                      form#advance-tab
                                        .row.g-3.custom-input
                                          .col-sm-6
                                            label.form-label Stock Availability
                                            select.form-select(aria-label='Default select example')
                                              option(selected='') In stock
                                              option(value='1') Out of stock
                                              option(value='2') Pre-order
                                          .col-sm-6
                                            label.form-label Low Stock
                                            select.form-select(aria-label='Default select example')
                                              option(selected='') Low Stock (5 or less)
                                              option(value='1') Low Stock (10 or less)
                                              option(value='2') Low Stock (20 or less)
                                              option(value='2') Low Stock (25 or less)
                                              option(value='2') Low Stock (30 or less)
                                          .col-lg-3.col-sm-6
                                            label.form-label(for='exampleFormControlInput1') SKU 
                                              span.txt-danger *
                                            input#exampleFormControlInput1.form-control(type='text')
                                          .col-lg-3.col-sm-6
                                            label.form-label(for='exampleFormControlInputa') Stock Quantity 
                                              span.txt-danger *
                                            input#exampleFormControlInputa.form-control(type='number' value="7" min="0")
                                            
                                          .col-lg-3.col-sm-6 
                                            label.form-label(for='exampleFormControlInputb') Restock Date 
                                              span.txt-danger *
                                            input#exampleFormControlInputb.form-control(type='number')
                                          .col-lg-3.col-sm-6 
                                            label.form-label(for='exampleFormControlInputc') Pre-Order 
                                              span.txt-danger *
                                            input#exampleFormControlInputc.form-control(type='number')
                                          .col-12 
                                            label.form-label Allow Backorders
                                            .form-check
                                              input#gridCheck.form-check-input(type='checkbox')
                                              label.form-check-label.m-0(for='gridCheck')
                                                | This is a digital Product
                                              p.f-light Decide if the product is a digital or physical item. Shipping may be necessary for real-world items.
                                        .product-buttons
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                svg
                                                  use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                                | Previous
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                  | Next
                                                  svg
                                                    use(href="../assets/svg/icon-sprite.svg#front-arrow")
                                  #additional-option.tab-pane.fade(role='tabpanel' aria-labelledby='additional-option-tab')
                                    .meta-body
                                      form
                                        .row.g-3 
                                          .col-12 
                                            .row.g-3
                                              .col-sm-6
                                                .row.custom-input
                                                  .col-12
                                                    label.form-label(for='tagTitle') Additional Tag Title
                                                  .col-12
                                                    input#tagTitle.form-control(type='text')
                                                    p.f-light Add a new tag title. Keywords should be simple and accurate.
                                              .col-sm-6
                                                .row.product-tag
                                                  label.form-label.col-12 Specific Tags
                                                  .col-12 
                                                    input#specificTag(name='basic-tags1' value='watches, sports, clothes, bottles')
                                              .col-12
                                                .row
                                                  .col-12
                                                    label.form-label.col-12 Additional Description
                                                    .toolbar-box
                                                      #toolbar4
                                                          span.ql-formats
                                                            select.ql-size
                                                          span.ql-formats
                                                            button.ql-bold Bold 
                                                            button.ql-italic Italic 
                                                            button.ql-underline underline
                                                            button.ql-strike Strike 
                                                          span.ql-formats
                                                            button.ql-list(value="ordered") List 
                                                            button.ql-list(value="bullet") 
                                                            button.ql-indent(value="-1") 
                                                            button.ql-indent(value="+1")
                                                          span.ql-formats
                                                            button.ql-link
                                                            button.ql-image
                                                            button.ql-video
                                                      #editor4
                                                    p.f-light Enhance your SEO ranking with an added tag description for the product.
                                        .product-buttons
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                svg
                                                  use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                                | Previous
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                  | Next
                                                  svg
                                                    use(href="../assets/svg/icon-sprite.svg#front-arrow")
                                  #dropping-option.tab-pane.fade(role='tabpanel' aria-labelledby='dropping-option-tab')
                                    .meta-body
                                      form
                                        .row.g-3.custom-input
                                          .col-12
                                            .row.gx-xl-3.gx-md-2.gy-md-0.g-2
                                              .col-12
                                                label.form-label(for='exampleFormControlInput1') Where can I pick up my order?
                                              .col-md-4.col-sm-6
                                                input#inputZip.form-control(type='number' placeholder="Zip code (10001)")
                                              .col-md-4.col-sm-6
                                                input#inputCity.form-control(type='text' placeholder="City")
                                              .col-md-4
                                                select#inputState.form-select
                                                  option(selected='') State
                                                  option Gujarat
                                                  option Punjab
                                                  option Himachal pradesh
                                                  option Goa 
                                                  option Sikkim 
                                                  option Telangana
                                          .col-12
                                            .row
                                              .col-12
                                                label.form-label(for='exampleFormControlInput1') Weight (kg)
                                                i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='set proper weight for product items.')
                                              .col-12
                                                input#inputCitya.form-control(type='number')
                                                p.f-light Decide if the product is a digital or physical item. Shipping may be necessary for real-world items.
                                          .col-12
                                            .row.gx-xl-3.gx-md-2.gy-md-0.g-2
                                              .col-12
                                                label.form-label(for='exampleFormControlInput1') Dimensions 
                                                i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='set proper length/width and height for product items.')
                                              .col-md-4.col-sm-6 
                                                input#inputCityb.form-control(type='number' placeholder="Length[l]")
                                              .col-md-4.col-sm-6 
                                                input#inputCityc.form-control(type='number' placeholder="Width[w]")
                                              .col-md-4 
                                                input#inputCityd.form-control(type='number' placeholder="Height[h]")
                                          .col-12
                                            .row
                                              .col-12
                                                label.form-label(for='exampleFormControlInput1') Shipping Class
                                              .col-md-12
                                                select#inputState1.form-select
                                                  option(selected='') Basic Shipping
                                                  option Expedited Shipping
                                                  option International Shipping
                                                  option Free Shipping
                                                  option Same-Day or Next-Day Shipping
                                                  option Flat Rate Shipping
                                                  option Local Pickup
                                        .product-buttons
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                svg
                                                  use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                                | Previous
                                            .btn
                                              .d-flex.align-items-center.gap-sm-2.gap-1
                                                  | Submit
                                                  svg
                                                    use(href="../assets/svg/icon-sprite.svg#front-arrow")
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files