- var page_Title = 'Add products';
- var form_validation       = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var dropzone              = true;
- var scrollbar             = true;
- var validation_modal      = true;
- var slick                 = true;
- var tooltip               = true;
- var header_slider         = true;
- var select2_options       = true;
- var flatpickr             = true;
- var custom_flatpickr      = true;
- var sweetalert2           = true;
- var editors               = true;
- var editors2              = true;
- var animate               = true;
- var bs_select             = true;
- var page_select4          = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Add Product
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    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
              .grid.grid-cols-12 
                div(class="col-span-12") 
                  .card 
                    .card-header
                      h5 Product Form
                    .card-body
                      .grid.grid-cols-12(class="gap-3 xl:gap-5 tabs !static")
                        div(class="col-span-3 xxl:col-span-4 xl:col-span-12 box-col-4e sidebar-left-wrapper")
                          ul.sidebar-left-icons.nav.tab-links
                            li.nav-item  
                              a.tab-link.active(data-tabfilter="1")
                                .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.tab-link(data-tabfilter="2")
                                .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.tab-link(data-tabfilter="3")
                                .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.tab-link(data-tabfilter="4")
                                .nav-rounded
                                  .product-icons
                                    svg.stroke-icon
                                      use(href="../assets/svg/icon-sprite.svg#pricing") 
                                .product-tab-content
                                  h6 Product Price & Discount
                                  p Add product basic price & discount
                            li.nav-item
                              a.tab-link(data-tabfilter="5")
                                  .nav-rounded
                                    .product-icons
                                      svg.stroke-icon
                                        use(href="../assets/svg/icon-sprite.svg#advance") 
                                  .product-tab-content
                                    h6 Additional Options
                                    p Add meta details & inventory details
                        div(class="col-span-9 xxl:col-span-8 xl:col-span-12 box-col-8")
                          .tab-content.custom-input
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              .sidebar-body
                                form.grid.grid-cols-12.gap-3.common-form(class="!static")
                                  div(class="col-span-12")
                                    label.form-label(for='exampleFormControlInput1') Product SKU 
                                    input#exampleFormControlInput1.form-control(type='text' placeholder='Enter a number')
                                  div(class="col-span-12")
                                    label.form-label(for='validationProductTitle') Product Title
                                    input#validationProductTitle.form-control(type='text' placeholder='Title')
                                  div(class="col-span-12")
                                    label.form-label Product Description
                                    .toolbar-box
                                      #toolbar2
                                        button.ql-bold Bold 
                                        button.ql-italic Italic 
                                        button.ql-underline underline
                                        button.ql-strike Strike 
                                        button.ql-list(value="ordered") List 
                                        button.ql-list(value="bullet") 
                                        button.ql-indent(value="-1") 
                                        button.ql-indent(value="+1")
                                        button.ql-link
                                      #editor2
                                  div(class="col-span-12 product-buttons")
                                    button.btn.m-0(type="button" onclick="handleNextButtonClick('gallery-product-tab')")
                                      | Next
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#front-arrow")  
                            .tab-pan.fade(data-tabcontent="2")
                              .sidebar-body.common-form
                                .product-upload
                                  p Product Thumbnail Image 
                                    span.c-o-light(class="!inline-block [@media(max-width:991px)]:!hidden") &lpar;Main Image&rpar;
                                  form#singleFileUpload.dropzone.dropzone-secondary(action='/upload.php')
                                    .dropzone-wrapper
                                      .dz-message.needsclick
                                        i.fa-solid.fa-cloud-arrow-up.fa-fade
                                        h6 Drop files here or click to upload.
                                        span.note.needsclick
                                          | SVG,PNG,JPG 
                                          strong or
                                          |  GIF
                                .product-upload
                                  p Product Gallery
                                  form#multiFileUpload.dropzone.dropzone-secondary(action='/upload.php')
                                    .dz-message.needsclick
                                      i.fa-solid.fa-cloud-arrow-up.fa-fade
                                      h6 Drop files here or click to upload.
                                      span.note.needsclick
                                        | SVG,PNG,JPG 
                                        strong or
                                        |  GIF
                                .product-buttons
                                  button.btn(type="button" onclick="handleNextButtonClick('detail-product-tab')")
                                    svg
                                      use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                    | Previous
                                  button.btn(type="button" onclick="handleNextButtonClick('category-product-tab')")
                                    | Next
                                    svg
                                      use(href="../assets/svg/icon-sprite.svg#front-arrow")      
                            .tab-pan.fade(data-tabcontent="3")
                              .sidebar-body.common-form.e-category
                                #category-pill-modal.modal.fade(tabindex='-1' aria-hidden='true')
                                  .modal-dialog.modal-dialog-centered.modal-lg
                                    .modal-content.category-popup
                                        .modal-header
                                            h5#modaldashboard.modal-title Add Categories
                                            button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
                                        .modal-body.p-0.custom-input
                                            .text-start
                                              .p-5
                                                form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                                  div(class="col-span-6 md:col-span-12")
                                                    label.form-label(for='validationCategory') Category Name
                                                      span.txt-danger *
                                                    input#validationCategory.form-control(type='text' placeholder='Enter your category name' required='')
                                                    .invalid-feedback 
                                                      | Please choose a category name.
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-6 md:col-span-12")
                                                    label.form-label(for='validationSlug') Slug
                                                      span.txt-danger *
                                                    input#validationSlug.form-control(type='text' placeholder='Enter slug' required='')
                                                    .invalid-feedback 
                                                      | Please choose a slug name.
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-12")
                                                    label.form-label Parent Category
                                                      span.txt-danger *
                                                    select.form-select(aria-label='Select parent category')
                                                      option(selected='') T-shirts
                                                      option(value='1') Purse
                                                      option(value='2') Cameras
                                                      option(value='3') Shoes 
                                                      option(value='4') Handbags
                                                      option(value='5') Sleepers
                                                      option(value='6') Watches
                                                    .invalid-feedback 
                                                      | Please choose a parent category.
                                                    .valid-feedback
                                                        | Looks good!
                                                  div(class="col-span-6 md:col-span-12")
                                                    label.form-label Category Type
                                                      span.txt-danger *
                                                    select.form-select(aria-label='Select parent category')
                                                      option(selected='') Electronic
                                                      option(value='1') Accessories
                                                      option(value='2') Footwear
                                                      option(value='3') Clothing
                                                      option(value='4') Furniture
                                                    .invalid-feedback 
                                                      | Please choose a category type.
                                                    .valid-feedback
                                                        | Looks good!
                                                  div(class="col-span-6 md:col-span-12")
                                                    label.form-label Category Status
                                                      span.txt-danger *
                                                    select.form-select(aria-label='Select parent category')
                                                      option(selected='') Active
                                                      option(value='1') Inactive
                                                    .invalid-feedback 
                                                      | Please choose a category status.
                                                    .valid-feedback
                                                        | Looks good!
                                                  div(class="col-span-12")
                                                    label.form-label(for='validationDescription') Category Description
                                                    textarea#validationDescription.form-control(placeholder='Description here...' required='')
                                                    .invalid-feedback
                                                      | Please enter a category description.
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-12")
                                                    .main-divider
                                                      .divider-body
                                                        h6 SEO Tags
                                                  div(class="col-span-6 lg:col-span-12")
                                                    label.form-label(for='validationMetaTitle1') Meta Title
                                                      span.txt-danger *
                                                    input#validationMetaTitle1.form-control(type='text' placeholder='Enter meta title' required='')
                                                    .invalid-feedback 
                                                      | Please choose a meta title.
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-6 lg:col-span-12")
                                                    label.form-label(for='validationKeywords' class="!inline-block") Meta Keywords
                                                      span.txt-danger *
                                                      span.c-o-light &nbsp;(In comma separated)
                                                    input#validationKeywords.form-control(type='text' placeholder='Enter meta keywords' required='')
                                                    .invalid-feedback 
                                                      | Please enter a meta keywords(In comma separated).
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-12")
                                                    label.form-label Meta Description
                                                    .toolbar-box
                                                      #toolbar3
                                                        button.ql-bold Bold 
                                                        button.ql-italic Italic 
                                                        button.ql-underline underline
                                                        button.ql-strike Strike 
                                                        button.ql-list(value="ordered") List 
                                                        button.ql-list(value="bullet") 
                                                        button.ql-indent(value="-1") 
                                                        button.ql-indent(value="+1")
                                                        button.ql-link
                                                      #editor3
                                                    .invalid-feedback 
                                                      | Please enter a meta description
                                                    .valid-feedback
                                                      | Looks good!
                                                  div(class="col-span-12").flex.justify-end
                                                    button.btn.button-light-primary(type='button' data-bs-dismiss='modal') Cancel
                                                    button.btn.btn-primary.ms-2.text-white(type='submit') Create + 
                                form.grid.grid-cols-12.gap-3.common-form(class="!static")
                                  div(class="col-span-9 xxl:col-span-6 md:col-span-12 box-col-7")
                                    label.form-label Add Category
                                    select.selectpicker(multiple='' aria-label='Default select example' data-live-search='true')
                                      option(value='1') Toys & games
                                      option(value='2' selected) Footwear
                                      option(value='3') Furniture and Decor
                                      option(value='4' selected) Baby Care Products
                                      option(value='5') Accessories
                                      option(value='6') Sportswear
                                  div(class="col-span-3 xxl:col-span-6 md:col-span-12 box-col-5")
                                    .category-btn(class="[@media(max-width:767px)]:mt-[0] [@media(max-width:767px)]:justify-start")
                                      a.btn.button-primary(href="#!" data-bs-toggle='modal' data-bs-target='#category-pill-modal')
                                        i.me-2.fa-solid.fa-plus 
                                        | Create New Category
                                  div(class="col-span-12 common-tagify")
                                    label.form-label Add Tag
                                    input(name='basic-tags' value='watches, sports, clothes, bottles')
                                  div(class="col-span-12 product-buttons")
                                    button.btn(type="button" onclick="handleNextButtonClick('gallery-product-tab')")
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                      | Previous
                                    button.btn(type="button" onclick="handleNextButtonClick('pricings-tab')")
                                      | Next
                                      svg
                                        use(href="../assets/svg/icon-sprite.svg#front-arrow")
                            .tab-pan.fade(data-tabcontent="4" )
                              form.price-wrapper.common-form.grid.grid-cols-12.gap-3(class="!static [@media(max-width:1440px)_and_(min-width:1200px)]:!mb-[100px]")
                                div(class="col-span-6 sm:col-span-12") 
                                  label.form-label(for='initialCost') Initial Price
                                  input#initialCost.form-control(type='number' placeholder='Price')
                                div(class="col-span-6 sm:col-span-12") 
                                  label.form-label(for='sellingPrice') Selling Price 
                                  input#sellingPrice.form-control(type='number' placeholder='Price')
                                div(class="col-span-12 tabs")
                                  label.form-label Product Discount Options
                                    i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Choose the kind of discount that will be used on that particular item.')
                                  ul.tab-links.discount-options
                                    li
                                      a.tab-link.active(data-tabfilter="1")
                                        span Fixed Price Discount
                                    li
                                      a.tab-link(data-tabfilter="2")
                                        span BOGO (Buy One, Get One)
                                    li
                                      a.tab-link(data-tabfilter="3")
                                        span Percentage Based Discount(%)
                                    li
                                      a.tab-link(data-tabfilter="4")
                                        span Volume or Bulk Discount
                                  .tab-content
                                    .tab-pan.fade.show.active(data-tabcontent="1")
                                      .meta-body
                                        .grid.grid-cols-12.gap-3
                                          div(class="col-span-12")
                                            label.form-label(for='validationDiscountPrice') Discount Price
                                            input#validationDiscountPrice.form-control(type='number' placeholder='Discount')
                                    .tab-pan.fade(data-tabcontent="2")
                                      .meta-body
                                        .grid.grid-cols-12.gap-3
                                          div(class="col-span-12") 
                                            label.form-label Product Name
                                              span.c-o-light &nbsp;(Free) 
                                            select.selectpicker.search-picker(aria-label='Product Name' data-live-search='true')
                                              option(value='1' selected) Women Pink T-shirt
                                              option(value='2') Solid Hooded Sweatshirt
                                              option(value='3') Women Flared Jeans
                                              option(value='4') Fresh And Pure Oil
                                              option(value='5') Premium Dumbbells
                                              option(value='6') Organic Long Grain Rice
                                              option(value='7') Delicious Cupcakes
                                          div(class="col-span-6 sm:col-span-12")
                                            label.form-label(for='validationMinQuantity') Minimum Quantity
                                            input#validationMinQuantity.form-control(type='number' placeholder='Quantity')
                                          div(class="col-span-6 sm:col-span-12")
                                            label.form-label(for='validationMaxQuantity') Maximum Quantity
                                            input#validationMaxQuantity.form-control(type='number' placeholder='Quantity')
                                    .tab-pan.fade(data-tabcontent="3")
                                      .meta-body
                                        .grid.grid-cols-12.gap-3
                                          div(class="col-span-12")
                                            label.form-label(for='validationDiscount') Discount Percentage
                                            input#validationDiscount.form-control(type='number' placeholder='Discount')
                                    .tab-pan.fade(data-tabcontent="4")
                                      .meta-body
                                        .grid.grid-cols-12.gap-3
                                          div(class="col-span-12")
                                            label.form-label(for='validationQuantity') Quantity
                                            input#validationQuantity.form-control(type='number' placeholder='Quantity')
                                          div(class="col-span-12") 
                                            .grid.grid-cols-12.gap-3
                                              div(class="col-span-6 sm:col-span-12")
                                                label.form-label(for='projectType') Discount Type
                                                select#projectType.form-select
                                                  option(selected='') Fixed Price 
                                                  option(value='1') Percentage(%)
                                              div(class="col-span-6 sm:col-span-12")
                                                label.form-label(for='projectType') Value
                                                input.form-control(type='number' placeholder="Discount" required='')
                                div(class="col-span-12 product-buttons")
                                  button.btn(type="button" onclick="handleNextButtonClick('category-product-tab')")
                                    svg
                                      use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                    | Previous
                                  button.btn(type="button" onclick="handleNextButtonClick('advance-product-tab')")
                                    | Next
                                    svg
                                      use(href="../assets/svg/icon-sprite.svg#front-arrow")    
                            .tab-pan.fade(data-tabcontent="5")
                              .sidebar-body.advance-options.tabs
                                ul.tab-links.border-tab.mb-0
                                  li
                                      a.tab-link.active(data-tabfilter="1")
                                          | Inventory
                                  li
                                      a.tab-link(data-tabfilter="2")
                                          | SEO Tags
                                  li
                                      a.tab-link(data-tabfilter="3")
                                          | Shipping
                                  li
                                      a.tab-link(data-tabfilter="4")
                                          | Variations
                                  li
                                      a.tab-link(data-tabfilter="5")
                                          | Publish
                                .tab-content
                                  .tab-pan.fade.show.active(data-tabcontent="1")
                                    .meta-body 
                                      form#advance-tab.common-form.grid.grid-cols-12.gap-3(class="!static")
                                        div(class="col-span-6 sm:col-span-12")
                                          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
                                        div(class="col-span-6 sm:col-span-12")
                                          label.form-label Low Stock Level
                                          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)
                                        div(class="col-span-4 xxl:col-span-6 sm:col-span-12")
                                          label.form-label(for='exampleFormControlInputa') Stock Quantity 
                                            span.txt-danger *
                                          input#exampleFormControlInputa.form-control(type='number' placeholder='Quantity')
                                        div(class="col-span-4 xxl:col-span-6 sm:col-span-12") 
                                          label.form-label Restock Date 
                                            span.txt-danger *
                                          .input-group.flatpicker-calender.product-date
                                              input#datetime-local2.form-control(type='date') 
                                        div(class="col-span-4 xxl:col-span-12")
                                          label.form-label(for='exampleFormControlInputc') Pre-Order 
                                            span.txt-danger *
                                          input#exampleFormControlInputc.form-control(type='number' placeholder='Quantity')
                                        div(class="col-span-12") 
                                          .form-check.flex.gap-2
                                            input#gridCheck.form-check-input(type='checkbox')
                                            label.form-check-label.m-0(for='gridCheck')
                                              | This is a digital product.
                                        div(class="col-span-12 product-buttons")
                                          button.btn(type="button" onclick="handleNextButtonClick('pricings-tab')")
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                            | Previous
                                          button.btn(type="button" onclick="handleNextButtonClick('seo-option-tab')")
                                            | Next
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#front-arrow")
                                  .tab-pan.fade(data-tabcontent="2")
                                    .meta-body
                                      form.grid.grid-cols-12.gap-3.common-form(class="!static")
                                        div(class="col-span-6 xxl:col-span-12")
                                          label.form-label(for='validationTitle') Meta Title
                                          input#validationTitle.form-control(type='text' placeholder='Enter meta title')
                                        div(class="col-span-6 xxl:col-span-12")
                                          label.form-label(for='validationCustom-9' class="flex") Meta Keywords
                                            span.c-o-light &nbsp;(In comma separated)
                                          input#validationCustom-9.form-control(type='text' placeholder='Enter meta keywords')
                                        div(class="col-span-12")
                                          label.form-label Meta Description
                                          .toolbar-box
                                            #toolbar4
                                              button.ql-bold Bold 
                                              button.ql-italic Italic 
                                              button.ql-underline underline
                                              button.ql-strike Strike 
                                              button.ql-list(value="ordered") List 
                                              button.ql-list(value="bullet") 
                                              button.ql-indent(value="-1") 
                                              button.ql-indent(value="+1")
                                              button.ql-link
                                            #editor4
                                          p.mb-0.mt-1.f-light Enhance your SEO ranking with an added tag description for the product.
                                        div(class="col-span-12 product-buttons")
                                          button.btn(type="button" onclick="handleNextButtonClick('manifest-option-tab')")
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#back-arrow")
                                            | Previous
                                          button.btn(type="button" onclick="handleNextButtonClick('dropping-option-tab')")
                                            | Next
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#front-arrow")
                                  .tab-pan.fade(data-tabcontent="3")
                                    .meta-body
                                      form.common-form
                                        .grid.grid-cols-12.gap-3(class="!static")
                                          div(class="col-span-12")
                                            .grid.grid-cols-12.card-gap
                                              div(class="col-span-12")
                                                label.form-label(for='exampleFormControlInput1') Weight (kg)
                                                i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='set proper weight for product items.')
                                              div(class="col-span-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.
                                          div(class="col-span-12")
                                            .grid.grid-cols-12.gap-2
                                              div(class="col-span-12")
                                                label.form-label(for='exampleFormControlInput1') Dimensions 
                                                i.icon-help-alt.ms-1(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='set proper length/width and height for product items.')
                                              div(class="col-span-4 md:col-span-6 sm:col-span-12") 
                                                input#inputCityb.form-control(type='number' placeholder="Length[l]")
                                              div(class="col-span-4 md:col-span-6 sm:col-span-12") 
                                                input#inputCityc.form-control(type='number' placeholder="Width[w]")
                                              div(class="col-span-4 md:col-span-12") 
                                                input#inputCityd.form-control(type='number' placeholder="Height[h]")
                                          div(class="col-span-12")
                                            .grid.grid-cols-12
                                              div(class="col-span-12")
                                                label.form-label(for='exampleFormControlInput1') Shipping Class
                                              div(class="col-span-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
                                          div(class="col-span-12 product-buttons")
                                            button.btn(type="button" onclick="handleNextButtonClick('seo-option-tab')")
                                              svg
                                                use(href="../assets/svg/icon-sprite.svg#back-arrow") 
                                              | Previous
                                            button.btn(type="button" onclick="handleNextButtonClick('variation-option-tab')")
                                              | Next
                                              svg
                                                use(href="../assets/svg/icon-sprite.svg#front-arrow") 
                                  .tab-pan.fade(data-tabcontent="4")
                                    .meta-body
                                      form.grid.grid-cols-12.gap-3.common-form(class="!static")
                                        div(class="col-span-12")
                                          .grid.g-2.product-tag
                                            label.form-label.block.m-0 Colors
                                            input(name='basic-tags1' value='Green, Purple, Yellow, Blue')
                                        div(class="col-span-12") 
                                          label.form-label Option Name
                                          select#option-variation.form-select(onchange="configureDropDownLists(this,document.getElementById('option-value'))")
                                            option(value='color' selected='selected') Color
                                            option(value='size') Size
                                            option(value='material') Material
                                            option(value='style') Style 
                                        div(class="col-span-12")
                                          label.form-label Options Value
                                          select#option-value.form-select
                                        div(class="col-span-12 product-buttons")
                                          button.btn(type="button" onclick="handleNextButtonClick('dropping-option-tab')")
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#back-arrow") 
                                            | Previous
                                          button.btn(type="button" onclick="handleNextButtonClick('publish-option-tab')")
                                            | Next
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#front-arrow") 
                                  .tab-pan.fade(data-tabcontent="5")
                                    .meta-body
                                      form.grid.grid-cols-12.gap-3.common-form(class="!static")
                                        div(class="col-span-6 xxl:col-span-12 xl:col-span-6 md:col-span-12")
                                          label.form-label(for='publishStatus') Publish Status
                                          select#publishStatus.form-select(required='')
                                            option(selected='' value='') Publish
                                            option Drafts
                                            option Unpublish
                                        div(class="col-span-6 xxl:col-span-12 xl:col-span-6 md:col-span-12")
                                          label.form-label(for='datetime-local1') Publish Date & Time
                                          .input-group.flatpicker-calender.product-date
                                            input#datetime-local1.form-control(type='date')
                                        div(class="col-span-12 product-buttons")
                                          button.btn(type="button" onclick="handleNextButtonClick('variation-option-tab')")
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#back-arrow") 
                                            | Previous
                                          button.btn.sweet-15(type='button', onclick="handleSubmitButtonClick()")
                                            | Submit
                                            svg
                                              use(href="../assets/svg/icon-sprite.svg#front-arrow")                          
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files