{% extends 'shared/base.html' %} {% load static %} {% block content %}
<style>
  .card,
  .card-light {
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 30px;
    -webkit-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    -moz-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    border: 0;
  }

  .card .card-header,
  .card-light .card-header {
    padding: 1rem 1.25rem;
    background-color: transparent;
    border-bottom: 1px solid #ebecec !important;
  }

  .card .card-header:first-child,
  .card-light .card-header:first-child {
    border-radius: 0;
  }

  .card .card-header .card-head-row,
  .card-light .card-header .card-head-row {
    display: flex;
    align-items: center;
  }

  .card .card-header .card-head-row .card-tools,
  .card-light .card-header .card-head-row .card-tools {
    margin-left: auto;
    float: right;
    padding-left: 15px;
  }

  .card .separator-solid,
  .card-light .separator-solid {
    border-top: 1px solid #ebecec;
    margin: 15px 0;
  }

  .card .separator-dashed,
  .card-light .separator-dashed {
    border-top: 1px dashed #ebecec;
    margin: 15px 0;
  }

  .card .separator-dot,
  .card-light .separator-dot {
    border-top: 1px dotted #ebecec;
    margin: 15px 0;
  }

  .card .full-width-separator,
  .card-light .full-width-separator {
    margin: 15px -20px 15px;
  }

  .card .b-b1,
  .card-light .b-b1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .card .card-body,
  .card-light .card-body {
    padding: 1.25rem;
  }

  .card .card-footer,
  .card-light .card-footer {
    background-color: transparent;
    line-height: 30px;
    border-top: 1px solid #ebecec !important;
    font-size: 13px;
  }

  .card .pull-in,
  .card-light .pull-in {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .card .pull-in.sparkline-fix,
  .card-light .pull-in.sparkline-fix {
    margin-left: -1.35rem;
    margin-right: -1.35rem;
    margin-bottom: -3px;
  }

  .card .chart-as-background,
  .card-light .chart-as-background {
    position: absolute;
    bottom: 0;
    width: calc(100% + 2px);
  }

  .card .card-action,
  .card-light .card-action {
    padding: 30px;
    background-color: transparent;
    line-height: 30px;
    border-top: 1px solid #ebecec !important;
    font-size: 14px;
  }

  .card .card-footer hr,
  .card-light .card-footer hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .card .card-footer .legend,
  .card-light .card-footer .legend {
    display: inline-block;
  }

  @media screen and (max-width: 476px) {
    .card .card-header .card-head-row:not(.card-tools-still-right) {
      flex-direction: column;
      align-items: unset;
    }

    .card .card-header .card-head-row:not(.card-tools-still-right) .card-tools {
      margin-left: 0;
      float: left;
      padding-left: 0;
      padding-top: 10px;
    }
  }

  .card.full-height {
    height: calc(100% - 30px);
  }

  .card-space {
    padding: 0 30px;
  }

  .card-space>.card-action,
  .card-space>.card-body,
  .card-space>.card-footer,
  .card-space>.card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card-with-nav .card-header {
    border-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .card-with-nav .card-body {
    padding: 15px 25px !important;
  }

  .card-list {
    padding: 10px 0;
  }

  .card-list .item-list {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    align-items: center;
  }

  .card-list .item-list .info-user {
    flex: 1;
  }

  .card-list .item-list .info-user .username,
  .card-list .item-list .info-user a.username {
    color: #1572e8;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 400;
  }

  .card-list .item-list .info-user .status {
    font-size: 11px;
    color: #7d7b7b;
  }

  .card-title {
    margin: 0;
    color: #575962;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
  }

  .card-title a,
  .card-title a:focus,
  .card-title a:hover {
    color: #575962;
    text-decoration: none;
  }

  .card-sub {
    display: block;
    margin: 5px 0 10px 0;
    font-size: 0.9rem;
    background: #f7f8fa;
    color: #575962;
    padding: 0.85rem 1.5rem;
    border-radius: 4px;
    line-height: 1.82;
  }

  .card-category {
    margin-top: 8px;
    font-size: 14px;
    color: #8d9498;
    margin-bottom: 0;
    word-break: normal;
  }

  label {
    font-size: 14px;
    font-weight: 400;
    color: #8d9498;
    margin-bottom: 0;
  }

  .card-transparent {
    background: 0 0 !important;
    box-shadow: none;
    border-color: transparent !important;
  }

  .card-stats .card-body {
    padding: 15px !important;
  }

  .card-stats .card-title {
    margin-bottom: 0 !important;
  }

  .card-stats .card-category {
    margin-top: 0;
  }

  .card-stats .col-icon {
    width: 90px;
    height: 65px;
    margin-left: 15px;
  }

  .card-stats .icon-big {
    width: 100%;
    height: 100%;
    font-size: 2.2em;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-stats .icon-big.icon-danger,
  .card-stats .icon-big.icon-default,
  .card-stats .icon-big.icon-info,
  .card-stats .icon-big.icon-primary,
  .card-stats .icon-big.icon-secondary,
  .card-stats .icon-big.icon-success,
  .card-stats .icon-big.icon-warning {
    border-radius: 5px;
  }

  .card-stats .icon-big.icon-danger i,
  .card-stats .icon-big.icon-default i,
  .card-stats .icon-big.icon-info i,
  .card-stats .icon-big.icon-primary i,
  .card-stats .icon-big.icon-secondary i,
  .card-stats .icon-big.icon-success i,
  .card-stats .icon-big.icon-warning i {
    color: #fff !important;
  }

  .card-stats .icon-big.round {
    border-radius: 50% !important;
  }

  .card-stats .col-stats {
    align-items: center;
    display: flex;
    padding-left: 15px;
  }

  .card-tasks .table {
    margin-bottom: 0;
  }

  .card-tasks .table .form-check {
    padding: 0 0 0 0.75rem !important;
  }

  .card-tasks .table .form-check label {
    margin-bottom: 0 !important;
  }

  .card-tasks .table tbody td:first-child,
  .card-tasks .table thead th:first-child {
    padding-left: 15px;
    padding-right: 15px;
  }

  .card-tasks .table tbody td:last-child,
  .card-tasks .table thead th:last-child {
    padding-right: 15px;
  }

  .card-tasks .table tbody tr:last-child td {
    border-bottom-width: 0 !important;
  }

  .card-tasks .card-body {
    padding-top: 0;
    padding-bottom: 0;
  }

  .card-tasks .card-body .table td {
    font-size: 13px;
  }

  .card-tasks .card-body .table td .btn {
    font-size: 15px;
    opacity: 0.7;
    transition: all 0.3s;
  }

  .card-tasks .card-body .table td:hover .btn {
    opacity: 1;
  }

  .card-tasks .form-button-action {
    display: block !important;
  }

  .card-danger,
  .card-dark,
  .card-default,
  .card-info,
  .card-primary,
  .card-secondary,
  .card-success,
  .card-warning {
    color: #fff;
    border: 0;
  }

  .card-danger .card-header,
  .card-dark .card-header,
  .card-default .card-header,
  .card-info .card-header,
  .card-primary .card-header,
  .card-secondary .card-header,
  .card-success .card-header,
  .card-warning .card-header {
    border-bottom: transparent !important;
  }

  .card-danger .card-category,
  .card-danger .card-title,
  .card-danger label,
  .card-dark .card-category,
  .card-dark .card-title,
  .card-dark label,
  .card-default .card-category,
  .card-default .card-title,
  .card-default label,
  .card-info .card-category,
  .card-info .card-title,
  .card-info label,
  .card-primary .card-category,
  .card-primary .card-title,
  .card-primary label,
  .card-secondary .card-category,
  .card-secondary .card-title,
  .card-success .card-category,
  .card-success .card-title,
  .card-success label,
  .card-warning .card-category,
  .card-warning .card-title,
  .card-warning label {
    color: #fff;
  }

  .card-danger .icon-big>i,
  .card-dark .icon-big>i,
  .card-default .icon-big>i,
  .card-info .icon-big>i,
  .card-primary .icon-big>i,
  .card-secondary .icon-big>i,
  .card-success .icon-big>i,
  .card-warning .icon-big>i {
    color: #fff !important;
  }

  .card-round {
    border-radius: 5px;
  }

  .progress-card {
    margin-bottom: 25px;
  }

  .progress-card .progress-status {
    display: flex;
    margin-bottom: 10px;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .card-post .info-post .username {
    margin-bottom: 0;
    font-weight: 600;
  }

  .card-post .info-post .date {
    margin-bottom: 0;
  }

  .card-pricing {
    padding: 20px 5px;
    text-align: center;
    border-radius: 5px;
  }

  .card-pricing .card-header {
    border-bottom: 0 !important;
  }

  .card-pricing .card-footer {
    border-top: 0 !important;
    padding: 15px 15px 10px 15px;
  }

  .card-pricing .card-title {
    font-weight: 400;
    font-size: 20px;
  }

  .card-pricing .card-price .price {
    font-size: 36px;
    font-weight: 400;
  }

  .card-pricing .card-price .text {
    font-size: 18px;
    font-weight: 400;
    color: #d1d7e3;
  }

  .card-pricing .specification-list {
    list-style: none;
    padding-left: 0;
  }

  .card-pricing .specification-list li {
    padding: 8px 0 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 12px;
    margin-bottom: 5px;
  }

  .card-pricing .specification-list li .name-specification {
    color: #83848a;
  }

  .card-pricing .specification-list li .status-specification {
    margin-left: auto;
    float: right;
    font-weight: 400;
  }

  .card-pricing.card-pricing-focus {
    padding: 40px 5px;
  }

  .card-pricing2 {
    padding-bottom: 10px;
    background: #fff !important;
    border-bottom: 7px solid;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
    box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
  }

  .card-pricing2:before {
    content: "";
    width: 100%;
    height: 350px;
    position: absolute;
    top: -150px;
    left: 0;
    transform: skewY(-20deg);
  }

  .card-pricing2 .price-value:after,
  .card-pricing2 .price-value:before {
    content: "";
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
  }

  .card-pricing2 .value:after,
  .card-pricing2 .value:before {
    content: "";
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
  }

  .card-pricing2 .pricing-header {
    padding: 20px 20px 60px;
    text-align: left;
    position: relative;
  }

  .card-pricing2 .sub-title {
    display: block;
    font-size: 16px;
  }

  .card-pricing2 .value {
    background: #fff;
  }

  .card-pricing2 .price-value {
    display: inline-block;
    width: 170px;
    height: 110px;
    padding: 15px;
    border: 2px solid;
    border-top: none;
    border-bottom: none;
    position: relative;
  }

  .card-pricing2 .price-value:after,
  .card-pricing2 .price-value:before {
    width: 121px;
    height: 121px;
    border: 3px solid;
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: -60px;
  }

  .card-pricing2 .price-value:after {
    border-top: none;
    border-left: none;
    border-bottom: 3px solid;
    border-right: 3px solid;
    top: auto;
    bottom: -60px;
  }

  .card-pricing2 .value {
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-top: none;
    border-bottom: none;
    z-index: 1;
    position: relative;
  }

  .card-pricing2 .value:after,
  .card-pricing2 .value:before {
    width: 97px;
    height: 97px;
    background: #fff;
    border: 3px solid;
    border-bottom: none;
    border-right: none;
    position: absolute;
    top: -48px;
    z-index: -1;
  }

  .card-pricing2 .value:after {
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-top: none;
    border-left: none;
    top: auto;
    bottom: -48px;
  }

  .card-pricing2 .currency {
    display: inline-block;
    font-size: 30px;
    margin-top: 7px;
    vertical-align: top;
  }

  .card-pricing2 .amount {
    display: inline-block;
    font-size: 40px;
    font-weight: 600;
    line-height: 65px;
  }

  .card-pricing2 .amount span {
    display: inline-block;
    font-size: 30px;
    font-weight: 400;
    vertical-align: top;
    margin-top: -7px;
  }

  .card-pricing2 .month {
    display: block;
    font-size: 16px;
    line-height: 0;
  }

  .card-pricing2 .pricing-content {
    padding: 50px 0 0 80px;
    margin-bottom: 20px;
    list-style: none;
    text-align: left;
    transition: all 0.3s ease 0s;
  }

  .card-pricing2 .pricing-content li {
    padding: 7px 0;
    font-size: 13px;
    color: grey;
    position: relative;
  }

  .card-pricing2 .pricing-content li.disable:before,
  .card-pricing2 .pricing-content li:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #98c458;
    text-align: center;
    color: #fff;
    position: absolute;
    left: -50px;
    font-size: 9px;
  }

  .row-cardProduct {
    padding: 0 5px;
    white-space: nowrap;
    overflow-x: auto;
    display: block !important;
    margin-right: -2rem;
    width: unset !important;
  }

  .col-cardProduct {
    width: 225px;
    padding: 0 10px;
    display: inline-block;
  }

  .card-product {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.12);
    margin-bottom: 15px;
  }

  .card-product .product-summary {
    padding: 15px;
  }

  @media screen and (max-width: 768px) {
    .col-cardProduct {
      width: 175px;
    }

    .card-product .title-product {
      font-size: 14px;
    }

    .card-product .price-product {
      font-size: 18px;
    }
  }

  .skew-shadow {
    position: relative;
    overflow: hidden;
  }

  .skew-shadow:before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    width: 50%;
    min-width: 150px;
    height: 100%;
    top: 0;
    right: -25%;
    transform: skewX(-32.5deg);
  }

  .bubble-shadow {
    position: relative;
    overflow: hidden;
  }

  .bubble-shadow:before {
    position: absolute;
    top: -10%;
    right: -140px;
    width: 300px;
    height: 300px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
  }

  .bubble-shadow:after {
    position: absolute;
    top: -65px;
    right: 80px;
    width: 150px;
    height: 150px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
  }

  .curves-shadow {
    position: relative;
    overflow: hidden;
  }

  .curves-shadow:before {
    content: "";
    position: absolute;
    background: url(../img/img-shadow.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  @media only screen and (max-width: 990px) {
    .card-pricing2 {
      margin-bottom: 30px;
    }
  }

  @media only screen and (max-width: 767px) {
    .card-pricing2:before {
      transform: skewY(-15deg);
    }
  }

  .card-annoucement .card-body {
    padding: 50px 25px;
  }

  .card-annoucement .card-opening {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  .card-annoucement .card-desc {
    padding: 15px 0;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 300;
  }

  .card-profile .profile-picture {
    text-align: center;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -41px;
    width: 100%;
    box-sizing: border-box;
  }

  .card-profile .user-profile .name {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 5px;
  }

  .card-profile .user-profile .job {
    color: #83848a;
    margin-bottom: 5px;
  }

  .card-profile .user-profile .desc {
    color: #bbb;
    margin-bottom: 15px;
  }

  .card-profile .user-profile .social-media {
    margin-bottom: 20px;
  }

  .card-profile .user-profile .social-media .btn {
    padding: 5px !important;
  }

  .card-profile .user-profile .social-media .btn i {
    font-size: 22px !important;
  }

  .card-profile .user-stats {
    margin-bottom: 10px;
  }

  .card-profile .user-stats [class^="col"] {
    border-right: 1px solid #ebebeb;
  }

  .card-profile .user-stats [class^="col"]:last-child {
    border-right: 0;
  }

  .card-profile .user-stats .number {
    font-weight: 400;
    font-size: 15px;
  }

  .card-profile .user-stats .title {
    color: #7d7b7b;
  }

  .card-profile .card-header {
    border-bottom: 0;
    height: 100px;
    position: relative;
  }

  .card-profile .card-body {
    padding-top: 60px;
  }

  .card-profile .card-footer {
    border-top: 0;
  }

  .card-profile.card-secondary .card-header {
    background: #6861ce;
  }

  .row-card-no-pd {
    border-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    background: #fff;
    margin-bottom: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    -webkit-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    -moz-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    border: 0;
  }

  .row-card-no-pd .card {
    margin-bottom: 0;
    border-width: 0;
    box-shadow: none;
    position: unset;
  }

  .row-card-no-pd .card .card-header {
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
  }

  .row-card-no-pd [class*="col"] .card:before {
    position: absolute;
    height: calc(100%);
    width: 1px;
    background: #eee;
    content: "";
    right: 0;
  }

  .row-card-no-pd [class*="col"]:last-child .card:before {
    width: 0;
  }

  .accordion .card {
    border-radius: 5px !important;
    background: #f7f7f7 !important;
    color: #575962 !important;
    border: 0;
    box-shadow: none;
  }

  .accordion .card .span-icon {
    font-size: 22px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .accordion .card>.card-header {
    border: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border-radius: 0 !important;
  }

  .accordion .card>.card-header>.span-mode {
    margin-left: auto;
  }

  .accordion .card>.card-header>.span-mode:before {
    content: "\f068" !important;
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
    font-size: 16px;
  }

  .accordion .card>.card-header.collapsed>.span-mode:before {
    content: "\f067" !important;
  }

  .accordion .card .card-body {
    border-top: 1px solid #ebebeb;
    padding: 30px;
  }

  .accordion.accordion-danger .card .card-header,
  .accordion.accordion-danger .card .card-header .btn-link,
  .accordion.accordion-default .card .card-header,
  .accordion.accordion-default .card .card-header .btn-link,
  .accordion.accordion-info .card .card-header,
  .accordion.accordion-info .card .card-header .btn-link,
  .accordion.accordion-primary .card .card-header,
  .accordion.accordion-primary .card .card-header .btn-link,
  .accordion.accordion-secondary .card .card-header,
  .accordion.accordion-secondary .card .card-header .btn-link,
  .accordion.accordion-success .card .card-header,
  .accordion.accordion-success .card .card-header .btn-link,
  .accordion.accordion-warning .card .card-header,
  .accordion.accordion-warning .card .card-header .btn-link {
    font-size: 14px;
  }

  .border-transparent {
    border-color: transparent !important;
  }

  .gutters-0 {
    margin-right: 0;
    margin-left: 0;
  }

  .gutters-0>.col,
  .gutters-0>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .gutters-0 .card {
    margin-bottom: 0;
  }

  .gutters-xs {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }

  .gutters-xs>.col,
  .gutters-xs>[class*="col-"] {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  .gutters-xs .card {
    margin-bottom: 0.5rem;
  }

  .gutters-sm {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }

  .gutters-sm>.col,
  .gutters-sm>[class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .gutters-sm .card {
    margin-bottom: 1rem;
  }

  .gutters-lg {
    margin-right: -1rem;
    margin-left: -1rem;
  }

  .gutters-lg>.col,
  .gutters-lg>[class*="col-"] {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .gutters-lg .card {
    margin-bottom: 2rem;
  }

  .gutters-xl {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }

  .gutters-xl>.col,
  .gutters-xl>[class*="col-"] {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .gutters-xl .card {
    margin-bottom: 3rem;
  }

  .card-stats .icon-big.icon-primary {
    background: #198754;
  }
</style>
<style>
  .card-effect-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    position: relative;
    /* Essencial para z-index */
    z-index: 100;
    /* Valor inicial mais alto para garantir sobreposição */
  }

  .card-effect-up:hover {
    transform: translateY(-5px);
    background-color: rgba(40, 167, 69, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    z-index: 1010;
    /* Valor muito maior no hover para superar qualquer elemento interno */
  }

  /* Estilos adicionais para garantir a visibilidade e atração do ícone e texto */
  .icon-big {
    transition: color 0.3s ease;
  }

  .icon-big:hover {
    color: #28a745;
    /* Mudança de cor do ícone para verde */
  }

  .card-title,
  .card-category {
    transition: color 0.3s ease;
  }

  .card:hover .card-title,
  .card:hover .card-category {
    color: #343a40;
    /* Escurecer o texto para melhor contraste no fundo claro */
  }
</style>

{% if messages %}
<div id="welcome-message" class="alert alert-success alert-dismissible fade show" role="alert">
  {% for message in messages %}
  {{ message }}
  {% endfor %}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<div class="col-md-12">
  <div class="card full-height">
    <div class="card-body">
      <div class="card-title">Estatísticas gerais</div>
      <div class="card-category pb-3">
        Informações gerais sobre estatísticas no sistema
      </div>
      <div class="row">

        <!-- Especies -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal"
            data-bs-target="#topEspeciesRegistradas">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-leaf"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Espécies</p>
                    <h4 class="card-title">{{ numero_de_especies }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Especies END -->

        <!-- Modal Especies -->
        <div class="modal fade" id="topEspeciesRegistradas" tabindex="-1" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Espécies</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark" id="nonFinalized-tab" data-bs-toggle="tab"
                      data-bs-target="#" type="button" role="tab" aria-controls="nonFinalized" aria-selected="true">
                      Ultimas Espécies Registradas
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div class="tab-pane fade show active" id="" role="tabpanel" aria-labelledby="nonFinalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Nome Científico</th>
                            <th>Nome Popular</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for especie in ultimas_especies %}
                          <tr>
                            <td class="align-middle text-truncate">
                              {{ especie.especies }}
                            </td>
                            <td class="align-middle text-truncate">
                              {{ especie.nome_popular }}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Especies END -->

        <!-- Lotes -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal"
            data-bs-target="#topLotesRegistradas">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-cubes"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Lotes</p>
                    <h4 class="card-title">{{ numero_de_lotes }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Lotes END -->

        <!-- Modal Lotes -->
        <div class="modal fade" id="topLotesRegistradas" tabindex="-1" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Lotes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark" id="nonFinalized-tab" data-bs-toggle="tab"
                      data-bs-target="#" type="button" role="tab" aria-controls="nonFinalized" aria-selected="true">
                      Ultimos Lotes Registrados
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div class="tab-pane fade show active" id="" role="tabpanel" aria-labelledby="nonFinalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for lotes in ultimos_lotes %}
                          <tr>
                            <td class="align-middle text-truncate">
                              {{ lotes.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate">
                              {{ lotes.especie.especies }} - {{ lotes.especie.nome_popular }}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Lotes END -->

        <!--Div Mudas Produzidas -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal" data-bs-target="#topMudasModal">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-tree"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mudas Produzidas</p>
                    <h4 class="card-title">{{ total_repicada }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Div Mudas Produzidas END -->

        <!-- Modal Mais Mudas Produzidas -->
        <div class="modal fade" id="topMudasModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Mudas Mais Produzidas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark" id="nonFinalized-tab" data-bs-toggle="tab"
                      data-bs-target="#nonFinalizedProd" type="button" role="tab" aria-controls="nonFinalized"
                      aria-selected="true">
                      Em Progresso
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark" id="finalized-tab" data-bs-toggle="tab"
                      data-bs-target="#finalizedProd" type="button" role="tab" aria-controls="finalized"
                      aria-selected="false">
                      Finalizados
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark" id="total-tab" data-bs-toggle="tab"
                      data-bs-target="#totalTabProd" type="button" role="tab" aria-controls="total"
                      aria-selected="false">
                      Total
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div class="tab-pane fade show active" id="nonFinalizedProd" role="tabpanel"
                    aria-labelledby="nonFinalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in mudas_produzidas_nao_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}">
                              {{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_repicada|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>

                  <!-- Tab Finalizados -->
                  <div class="tab-pane fade" id="finalizedProd" role="tabpanel" aria-labelledby="finalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in mudas_produzidas_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}">
                              {{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_repicada|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="totalTabProd" role="tabpanel" aria-labelledby="total-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for item in mudas_produzidas_agrupadas %}
                          <tr>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ item.semeadura__lote__especie__nome_popular }} + {{ item.semeadura__lote__especie__especies }}">
                              {{ item.semeadura__lote__especie__nome_popular }}
                              + {{ item.semeadura__lote__especie__especies }}
                            </td>
                            <td class="align-middle">
                              {{ item.total_mudas_produzidas|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Mudas Mais Produzidas END -->

        <!--Div Mudas Mais vendidas -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal"
            data-bs-target="#topSalesMudasModal">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-shopping-cart"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mudas vendidas</p>
                    <h4 class="card-title">{{ total_mudas_vendidas }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Div Mudas vendidas END -->

        <!-- Modal Protocolos Finalizados -->
        <div class="modal fade" id="topSalesMudasModal" tabindex="-1" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Protocolos Finalizados
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark" id="finalizados-tab" data-bs-toggle="tab"
                      data-bs-target="#finalizadosTab" type="button" role="tab" aria-controls="finalizados"
                      aria-selected="true">
                      Protocolos Finalizados
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="finalizadosTab" role="tabpanel"
                    aria-labelledby="finalizados-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th scope="col">Número do Protocolo</th>
                            <th scope="col">Data de Criação</th>
                            <th scope="col">Quantidade de Mudas</th>
                            <th scope="col">Nome Cliente / Empresa</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for dados in grouped_finalizados %}
                          <tr>
                            <td class="align-middle">{{ dados.numero_protocolo }}</td>
                            <td class="align-middle">{{ dados.data_criacao }}</td>
                            <td class="align-middle">{{ dados.quantidade_mudas }}</td>
                            <td class="align-middle">{{ dados.cliente_nome }}</td>
                          </tr>
                          {% empty %}
                          <tr>
                            <td class="align-middle">Nenhum protocolo finalizado encontrado.</td>
                            <td class="align-middle"></td>
                            <td class="align-middle"></td>
                            <td class="align-middle"></td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Protocolos Finalizados END -->


        <!-- Estoque de sementes -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal"
            data-bs-target="#stockSeedsModal">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-seedling"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Estoque de sementes</p>
                    <h4 class="card-title">{{ total_sementes }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Estoque de Sementes END -->

        <!-- Modal Estoque de sementes -->
        <div class="modal fade" id="stockSeedsModal" tabindex="-1" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Estoque de Sementes
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="table-responsive">
                  <table class="table table-striped table-hover table-bordered">
                    <thead class="bg-success bg-gradient text-white">
                      <tr>
                        <th>Lotes</th>
                        <th>Espécies</th>
                        <th>Estoque</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for lote in dez_maiores_lotes %}
                      <tr>
                        <td class="align-middle">{{ lote.numero_lote }}</td>
                        <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                          title="{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}">
                          {{ lote.especie.nome_popular }} + {{ lote.especie.especies}}
                        </td>

                        <td class="align-middle">
                          {{ lote.entrada_sementes_kg|floatformat:"-3" }} Kg
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Estoque De Sementes END -->

        <!-- Mortalidade de Mudas -->
        <div class="col-sm-6 col-md-4">
          <div class="card card-stats card-round card-effect-up" data-bs-toggle="modal"
            data-bs-target="#mortalitySeedsModal">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div class="icon-big text-center icon-primary bubble-shadow-small">
                    <i class="fas fa-skull-crossbones"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mortalidades Mudas</p>
                    <h4 class="card-title">{{ total_mortalidade }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Mortalidade de Mudas END -->

        <!-- Modal Maiores Mortalidades De Mudas -->
        <div class="modal fade" id="mortalitySeedsModal" tabindex="-1" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Maiores Mortalidades De Mudas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark" id="nonFinalized-tab" data-bs-toggle="tab"
                      data-bs-target="#nonFinalized" type="button" role="tab" aria-controls="nonFinalized"
                      aria-selected="true">
                      Em Progresso
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark" id="finalized-tab" data-bs-toggle="tab"
                      data-bs-target="#finalized" type="button" role="tab" aria-controls="finalized"
                      aria-selected="false">
                      Finalizados
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark" id="total-tab" data-bs-toggle="tab" data-bs-target="#totalTab"
                      type="button" role="tab" aria-controls="total" aria-selected="false">
                      Total
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div class="tab-pane fade show active" id="nonFinalized" role="tabpanel"
                    aria-labelledby="nonFinalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in maiores_mortalidades_nao_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}">
                              {{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_mortalidade|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- Tab Finalizados -->
                  <div class="tab-pane fade" id="finalized" role="tabpanel" aria-labelledby="finalized-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in maiores_mortalidades_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}">
                              {{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_mortalidade|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="totalTab" role="tabpanel" aria-labelledby="total-tab">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-bordered">
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for item in maiores_mortalidades_agrupadas %}
                          <tr>
                            <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                              title="{{ item.semeadura__lote__especie__nome_popular }} + {{ item.semeadura__lote__especie__especies }}">
                              {{ item.semeadura__lote__especie__nome_popular }}
                              + {{ item.semeadura__lote__especie__especies }}
                            </td>
                            <td class="align-middle">
                              {{ item.total_mortalidade|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Maiores Mortalidades De Mudas END -->
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="card full-height">
      <div class="card-body">
        <div class="card-title">Metas</div>
        <div class="card-category pb-3">
          Informações gerais sobre metas no sistema
        </div>
        <div class="mt-3 mb-3">
          <div class="row">
            {% for meta in metas_info %}
            <div class="col-md-4">
              <div class="card p-3 mb-2">
                <div class="d-flex justify-content-between">
                  <div class="d-flex flex-row align-items-center">
                    <div class="ms-2 c-details">
                      <h6 class="mb-0">{{ meta.criado_por }}</h6> <span>Faltam {{ meta.data_final|timeuntil }}</span>
                    </div>
                  </div>
                  <div class="badge"> <span>{{ meta.tipo_meta }}</span> </div>
                </div>
                <div class="mt-5">
                  <h3 class="heading">{{ meta.especie }}</h3>
                  <div class="mt-5">
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" 
                           data-percentage="{{ meta.percentual }}" 
                           style="width: 0%;" 
                           aria-valuenow="0" 
                           aria-valuemin="0" 
                           aria-valuemax="100">
                        0%
                      </div>
                    </div>
                    <div class="mt-3">
                      <span class="text1">
                        {% if meta.tipo_meta == "Semeadura" %}
                        Feito: {{ meta.quantidade_feita|floatformat:3 }} kg
                        {% else %}
                        Feito: {{ meta.quantidade_feita|floatformat:0 }}
                        {% endif %}
                        <span class="text2">
                          / Meta:
                          {% if meta.tipo_meta == "Semeadura" %}
                          {{ meta.quantidade_meta|floatformat:3 }} kg
                          {% else %}
                          {{ meta.quantidade_meta|floatformat:0 }}
                          {% endif %}
                        </span>
                      </span>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% if total_metas > 3 %}
          <div class="d-flex justify-content-end mt-3"> <!-- Utiliza flexbox para alinhar à direita -->
            <a href="{% url 'metas_list' %}" class="btn btn-success">Ver Mais</a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const progressBars = document.querySelectorAll('.progress-bar');
    
    progressBars.forEach(function(bar) {
      const percentage = bar.getAttribute('data-percentage');
      
      // Anima a barra de progresso para o valor real
      setTimeout(function() {
        bar.style.width = percentage + '%';
        bar.setAttribute('aria-valuenow', percentage);
        bar.textContent = percentage + '%';
      }, 100); // Pequena pausa para suavizar a animação
    });
  });
</script>
<style>
  .badge span {
    background-color: #198754;
    width: 110px;
    height: 25px;
    padding-bottom: 3px;
    border-radius: 5px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center
  }

  .progress {
    height: 10px;
    border-radius: 10px
  }

  .progress div {
    background-color: red
  }

  .text1 {
    font-size: 14px;
    font-weight: 600
  }

  .text2 {
    color: #a5aec0
  }
</style>
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <div class="card-head-row">
          <div class="card-title">Entrada Acumulada</div>
          <div id="dadosContainer" data-dados-repicados="{{ dados_repicados|safe }}"></div>
        </div>
      </div>
      <div class="card-body">
        <div class="canvas-wrapper">
          <canvas class="chart" id="saleschart"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Gráfico de Vendas Acumuladas do Mês -->
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <div class="card-head-row">
          <div class="card-title">Vendas Acumuladas do Mês</div>
          <div id="dadosVendasContainer" data-dados-vendas="{{ dados_protocolos|safe }}"></div>
        </div>
      </div>
      <div class="card-body">
        <div class="canvas-wrapper">
          <canvas class="chart" id="trafficflow"></canvas>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-head-row">
            <div class="card-title">Dados dos anos</div>
            <div id="dadosAnuaisContainer" data-dados-anuais="{{ dados_anuais }}"></div>
          </div>
        </div>
        <div class="card-body">
          <div class="canvas-wrapper">
            <canvas class="chart" id="bar-chart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Pie Chart -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-head-row">
            <div class="card-title">Estoque de mudas</div>
          </div>
        </div>
        <div class="card-body">
          <div class="canvas-wrapper">
            <div class="table-responsive">
              <table class="table">
                <thead class="bg-success bg-gradient text-white">
                  <tr>
                    <th>Lote</th>
                    <th>Espécies</th>
                    <th>Estoque</th>
                  </tr>
                </thead>
                <tbody>
                  {% for lote in dez_maiores_lotes %}
                  <tr>
                    <td class="align-middle">{{ lote.numero_lote }}</td>
                    <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                      title="{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}">
                      {{ lote.especie.nome_popular }} + {{ lote.especie.especies}}
                    </td>

                    <td class="align-middle text-end">
                      {{ lote.entrada_sementes_kg|floatformat:"-3" }} Kg
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      $(".table").DataTable({
        paging: false, // Remove a paginação
        searching: false, // Remove a caixa de pesquisa
        lengthChange: false, // Remove o controle de número de registros mostrados
        ordering: false,
        info: false,
      });
    });
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var dadosAnuaisStr = document.getElementById("dadosAnuaisContainer").dataset
        .dadosAnuais;
      var dadosAnuais = JSON.parse(dadosAnuaisStr);
      console.log("Dados Anuais:", dadosAnuais);

      var anos = [];
      var total_sementes = [];
      var total_vendas = [];
      var total_mortalidade = [];

      dadosAnuais.forEach(function (item) {
        anos.push(item.ano);
        total_sementes.push(item.total_sementes);
        total_vendas.push(item.total_vendas);
        total_mortalidade.push(item.total_mortalidade);
      });
      console.log("Anos:", anos);
      console.log("Total de Sementes:", total_sementes);
      console.log("Total de Vendas:", total_vendas);
      console.log("Total de Mortalidade:", total_mortalidade);

      var ctx = document.getElementById("bar-chart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: anos,
          datasets: [
            {
              label: "Total de Sementes",
              data: total_sementes,
              backgroundColor: "rgba(0,0,255, 0.6)", // Azul muito escuro
              borderColor: "rgba(0,0,255, 0.6)", // Azul muito escuro
              borderWidth: 1,
            },
            {
              label: "Total de Vendas",
              data: total_vendas,
              backgroundColor: "rgba(0, 100, 0, 0.6)", // Verde muito escuro
              borderColor: "rgba(0, 100, 0, 1)", // Verde muito escuro
              borderWidth: 1,
            },
            {
              label: "Total de Mortalidade",
              data: total_mortalidade,
              backgroundColor: "rgba(220,20,60, 0.6)", // Vermelho muito escuro
              borderColor: "rgba(220,20,60, 1)", // Vermelho muito escuro
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
          },
        },
      });
    });
  </script>

  <script>
    // Define um tempo de 5 segundos para esconder a mensagem de boas-vindas
    setTimeout(function () {
      var welcomeMessage = document.getElementById("welcome-message");
      if (welcomeMessage) {
        welcomeMessage.classList.remove("show"); // Oculta a mensagem
      }
    }, 4000); // 5000 milissegundos = 5 segundos
  </script>

  {% endblock %}