append variables
  - 
    var bestProducts = [
      {
        img: 12,
        title: 'Raven Pro',
        type: 'Landing',
        unit: 19,
        price: 69,
      },
      {
        img: 10,
        title: 'Boots4',
        type: 'Portfolio',
        unit: 10,
        price: 86,
      },
      {
        img: 11,
        title: 'Falcon',
        type: 'Admin',
        unit: 11,
        price: 49,
      },
      {
        img: 14,
        title: 'Slick',
        type: 'Builder',
        unit: 7,
        price: 49,
      },
      {
        img: 13,
        title: 'Reign Pro',
        type: 'Agency',
        unit: 8,
        price: 35,
      },
    ]


mixin ProductItem(product, index, totalPrice)
  - var productTotalPrice = product.unit * product.price;
  - var parcentage = ((productTotalPrice * 100) / totalPrice).toFixed(0);
  tr(class=(index !== bestProducts.length - 1 ? 'border-bottom border-200' : ''))
    td
      .d-flex.align-items-center.position-relative
        img(src=`${CWD}assets/img/products/${product.img}.png`, width="60" alt="").rounded-1.border.border-200
        .flex-1.ms-3
          h6.mb-1.fw-semi-bold
            a(href="#!").text-1100.stretched-link=product.title
          p.fw-semi-bold.mb-0.text-500=product.type
    td.align-middle.text-end.fw-semi-bold $#{productTotalPrice}
    td.align-middle.pe-x1
      .d-flex.align-items-center
        .progress(style=`height: 5px; width:80px;` role='progressbar' aria-valuenow=`${parcentage}`, aria-valuemin='0' aria-valuemax='100').me-3.rounded-3.bg-200
          .progress-bar.rounded-pill(style=`width: ${parcentage}%;`)
        .fw-semi-bold.ms-2 #{parcentage}%


mixin CardBestProducts
  - var totalPrice = bestProducts.map(product => product.unit * product.price).reduce((total, currentValue) => total + currentValue);
  .card.h-lg-100.overflow-hidden&attributes(attributes)
    .card-body.p-0
      .table-responsive.scrollbar
        table.table.table-dashboard.mb-0.table-borderless.fs-10.border-200
          thead.bg-body-tertiary
            tr
              th.text-900 Best Selling Products
              th.text-900.text-end Revenue ($#{totalPrice})
              th.text-900.pe-x1.text-end(style="width: 8rem") Revenue (%)
          tbody
            each product, index in bestProducts
              +ProductItem(product, index, totalPrice)
              
    .card-footer.bg-body-tertiary.py-2
      .row.flex-between-center
        .col-auto
          select.form-select.form-select-sm
            option Last 7 days
            option Last Month
            option Last Year
        .col-auto
          a(href="#!").btn.btn-sm.btn-falcon-default View All