@include('facil.header-facil')
          <main
            class="w-full px-6 pb-6 pt-[100px] sm:pt-[156px] xl:px-12 xl:pb-12"
          >
            <!-- write your code here-->
            <div class="2xl:flex 2xl:space-x-[48px]">
              <section class="mb-6 2xl:mb-0 2xl:flex-1">
                <!-- revenue, flow -->
                <div class="mb-[24px] w-full xl:flex xl:space-x-[24px]">
                  <div
                    class="flex w-full flex-col justify-between rounded-lg bg-white px-[24px] py-3 dark:bg-darkblack-600 xl:w-66"
                  >
                    <div
                      class="mb-2 flex items-center justify-between border-b border-bgray-300 pb-2 dark:border-darkblack-400"
                    >
                      <h3
                        class="text-xl font-bold text-bgray-900 dark:text-white sm:text-2xl"
                      >
                        Revenue Flow
                      </h3>
                      <div class="hidden items-center space-x-[28px] sm:flex">
                        <div class="flex items-center space-x-2">
                          <div
                            class="h-3 w-3 rounded-full bg-warning-300"
                          ></div>
                          <span
                            class="text-sm font-medium text-bgray-700 dark:text-bgray-50"
                            >Pending
                          </span>
                        </div>
                        <div class="flex items-center space-x-2">
                          <div
                            class="h-3 w-3 rounded-full bg-success-300"
                          ></div>
                          <span
                            class="text-sm font-medium text-bgray-700 dark:text-bgray-50"
                            >Signed
                          </span>
                        </div>
                        <div class="flex items-center space-x-2">
                          <div class="h-3 w-3 rounded-full bg-orange"></div>
                          <span
                            class="text-sm font-medium text-bgray-700 dark:text-bgray-50"
                            >Lost
                          </span>
                        </div>
                      </div>
                      <div class="date-filter relative">
                        <button
                          onclick="dateFilterAction('#date-filter-body')"
                          type="button"
                          class="flex items-center space-x-1 overflow-hidden rounded-lg bg-bgray-100 px-3 py-2 dark:bg-darkblack-500 dark:text-white"
                        >
                          <span
                            class="text-sm font-medium text-bgray-900 dark:text-white"
                            >Jan 10 - Jan 16</span
                          >
                          <span>
                            <svg
                              class="stroke-bgray-900 dark:stroke-gray-50"
                              width="16"
                              height="17"
                              viewBox="0 0 16 17"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M4 6.5L8 10.5L12 6.5"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>
                          </span>
                        </button>
                        <div
                          id="date-filter-body"
                          class="absolute right-0 top-[44px] z-10 hidden overflow-hidden rounded-lg bg-white shadow-lg dark:bg-darkblack-500"
                        >
                          <ul>
                            <li
                              onclick="dateFilterAction('#date-filter-body')"
                              class="text-bgray-90 cursor-pointer px-5 py-2 text-sm font-semibold hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                            >
                              Jan 10 - Jan 16
                            </li>
                            <li
                              onclick="dateFilterAction('#date-filter-body')"
                              class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                            >
                              Jan 10 - Jan 16
                            </li>
                            <li
                              onclick="dateFilterAction('#date-filter-body')"
                              class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                            >
                              Jan 10 - Jan 16
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="w-full">
                      <canvas id="revenueFlowUser" height="255"></canvas>
                    </div>
                  </div>
                  <div class="hidden flex-1 xl:block">
                    <div class="rounded-lg bg-white dark:bg-darkblack-600">
                      <div
                        class="flex items-center justify-between border-b border-bgray-300 px-[20px] py-[12px] dark:border-darkblack-400"
                      >
                        <h3
                          class="text-xl font-bold text-bgray-900 dark:text-white"
                        >
                          Efficiency
                        </h3>
                        <div class="date-filter relative">
                          <button
                            onclick="dateFilterAction('#month-filter')"
                            type="button"
                            class="flex items-center space-x-1"
                          >
                            <span
                              class="text-base font-semibold text-bgray-900 dark:text-white"
                              >Monthly</span
                            >
                            <span>
                              <svg
                                class="stroke-bgray-900 dark:stroke-bgray-50"
                                width="16"
                                height="17"
                                viewBox="0 0 16 17"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  d="M4 6.5L8 10.5L12 6.5"
                                  stroke-width="1.5"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                />
                              </svg>
                            </span>
                          </button>
                          <div
                            id="month-filter"
                            class="absolute right-0 top-5 z-10 hidden overflow-hidden rounded-lg bg-white shadow-lg dark:bg-darkblack-500"
                          >
                            <ul>
                              <li
                                onclick="dateFilterAction('#month-filter')"
                                class="text-bgray-90 cursor-pointer px-5 py-2 text-sm font-semibold hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                              >
                                January
                              </li>
                              <li
                                onclick="dateFilterAction('#month-filter')"
                                class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                              >
                                February
                              </li>

                              <li
                                onclick="dateFilterAction('#month-filter')"
                                class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100 dark:text-white hover:dark:bg-darkblack-600"
                              >
                                March
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="px-[20px] py-[12px]">
                        <div class="mb-4 flex items-center space-x-8">
                          <div class="relative w-[180px]">
                            <canvas id="pie_chartSublab" height="168"></canvas>
                            <div
                              class="absolute z-0 h-[34px] w-[34px] rounded-full bg-[#EDF2F7]"
                              style="
                                left: calc(50% - 17px);
                                top: calc(50% - 17px);
                              "
                            ></div>
                          </div>
                          <div class="counting">
                            <div class="mb-6">
                              <div class="flex items-center space-x-[2px]">
                                <p class="text-lg font-bold text-success-300">
                                  $5,230
                                </p>
                                <span
                                  ><svg
                                    width="14"
                                    height="12"
                                    viewBox="0 0 14 12"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fill-rule="evenodd"
                                      clip-rule="evenodd"
                                      d="M10.7749 0.558058C10.5309 0.313981 10.1351 0.313981 9.89107 0.558058L7.39107 3.05806C7.14699 3.30214 7.14699 3.69786 7.39107 3.94194C7.63514 4.18602 8.03087 4.18602 8.27495 3.94194L9.70801 2.50888V11C9.70801 11.3452 9.98783 11.625 10.333 11.625C10.6782 11.625 10.958 11.3452 10.958 11V2.50888L12.3911 3.94194C12.6351 4.18602 13.0309 4.18602 13.2749 3.94194C13.519 3.69786 13.519 3.30214 13.2749 3.05806L10.7749 0.558058Z"
                                      fill="#22C55E"
                                    />
                                    <path
                                      opacity="0.4"
                                      fill-rule="evenodd"
                                      clip-rule="evenodd"
                                      d="M3.22407 11.4419C3.46815 11.686 3.86388 11.686 4.10796 11.4419L6.60796 8.94194C6.85203 8.69786 6.85203 8.30214 6.60796 8.05806C6.36388 7.81398 5.96815 7.81398 5.72407 8.05806L4.29102 9.49112L4.29101 1C4.29101 0.654823 4.01119 0.375001 3.66602 0.375001C3.32084 0.375001 3.04102 0.654823 3.04102 1L3.04102 9.49112L1.60796 8.05806C1.36388 7.81398 0.968151 7.81398 0.724074 8.05806C0.479996 8.30214 0.479996 8.69786 0.724074 8.94194L3.22407 11.4419Z"
                                      fill="#22C55E"
                                    />
                                  </svg>
                                </span>
                              </div>
                              <p class="text-base font-medium text-bgray-600">
                                Arrival
                              </p>
                            </div>
                            <div>
                              <div class="flex items-center space-x-[2px]">
                                <p
                                  class="text-lg font-bold text-bgray-900 dark:text-white"
                                >
                                  $6,230
                                </p>
                                <span>
                                  <svg
                                    class="fill-bgray-900 dark:fill-bgray-50"
                                    width="14"
                                    height="12"
                                    viewBox="0 0 14 12"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      fill-rule="evenodd"
                                      clip-rule="evenodd"
                                      d="M10.7749 0.558058C10.5309 0.313981 10.1351 0.313981 9.89107 0.558058L7.39107 3.05806C7.14699 3.30214 7.14699 3.69786 7.39107 3.94194C7.63514 4.18602 8.03087 4.18602 8.27495 3.94194L9.70801 2.50888V11C9.70801 11.3452 9.98783 11.625 10.333 11.625C10.6782 11.625 10.958 11.3452 10.958 11V2.50888L12.3911 3.94194C12.6351 4.18602 13.0309 4.18602 13.2749 3.94194C13.519 3.69786 13.519 3.30214 13.2749 3.05806L10.7749 0.558058Z"
                                    />
                                    <path
                                      opacity="0.4"
                                      fill-rule="evenodd"
                                      clip-rule="evenodd"
                                      d="M3.22407 11.4419C3.46815 11.686 3.86388 11.686 4.10796 11.4419L6.60796 8.94194C6.85203 8.69786 6.85203 8.30214 6.60796 8.05806C6.36388 7.81398 5.96815 7.81398 5.72407 8.05806L4.29102 9.49112L4.29101 1C4.29101 0.654823 4.01119 0.375001 3.66602 0.375001C3.32084 0.375001 3.04102 0.654823 3.04102 1L3.04102 9.49112L1.60796 8.05806C1.36388 7.81398 0.968151 7.81398 0.724074 8.05806C0.479996 8.30214 0.479996 8.69786 0.724074 8.94194L3.22407 11.4419Z"
                                    />
                                  </svg>
                                </span>
                              </div>
                              <p
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                              >
                                Spending
                              </p>
                            </div>
                          </div>
                        </div>
                        <div class="status">
                          <div class="mb-1.5 flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                              <div
                                class="h-2.5 w-2.5 rounded-full bg-success-300"
                              ></div>
                              <span
                                class="text-sm font-medium text-bgray-600 dark:text-bgray-50"
                                >Goal</span
                              >
                            </div>
                            <p
                              class="text-sm font-bold text-bgray-900 dark:text-bgray-50"
                            >
                              13%
                            </p>
                          </div>
                          <div class="mb-1.5 flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                              <div
                                class="h-2.5 w-2.5 rounded-full bg-warning-300"
                              ></div>
                              <span
                                class="text-sm font-medium text-bgray-600 dark:text-white"
                                >Spending</span
                              >
                            </div>
                            <p
                              class="text-sm font-bold text-bgray-900 dark:text-bgray-50"
                            >
                              28%
                            </p>
                          </div>
                          <div class="mb-1.5 flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                              <div
                                class="h-2.5 w-2.5 rounded-full bg-bgray-200"
                              ></div>
                              <span
                                class="text-sm font-medium text-bgray-600 dark:text-white"
                                >Others</span
                              >
                            </div>
                            <p
                              class="text-sm font-bold text-bgray-900 dark:text-bgray-50"
                            >
                              59%
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <!-- write your code here-->
          </main>


    <!--scripts -->
    <script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('assets/js/aos.js') }}"></script>
    <script src="{{ asset('assets/js/slick.min.js') }}"></script>
    <script>
      AOS.init();
    </script>
    <script src="{{ asset('assets/js/quill.min.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chart.js') }}"></script>
        <script>

      let revenueFlowUserElement = document
        .getElementById("revenueFlowUser")
        .getContext("2d");
      let month = [
        "Jan",
        "Feb",
        "Mar",
        "April",
        "May",
        "Jun",
        "July",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ];
      let dataSetsLight = [
        {
          label: "My First Dataset",
          data: [1, 5, 2, 2, 6, 7, 8, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(250, 204, 21, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
        {
          label: "My First Dataset 2",
          data: [5, 2, 4, 2, 5, 8, 3, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(255, 120, 75, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
        {
          label: "My First Dataset 3",
          data: [2, 5, 3, 2, 5, 6, 9, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(74, 222, 128, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
            "rgba(237, 242, 247, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
      ];
      let dataSetsDark = [
        {
          label: "My First Dataset",
          data: [1, 5, 2, 2, 6, 7, 8, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(250, 204, 21, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
        {
          label: "My First Dataset 2",
          data: [5, 2, 4, 2, 5, 8, 3, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(255, 120, 75, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
        {
          label: "My First Dataset 3",
          data: [2, 5, 3, 2, 5, 6, 9, 7, 3, 4, 1, 3],
          backgroundColor: [
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(74, 222, 128, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
            "rgba(42, 49, 60, 1)",
          ],
          borderWidth: 0,
          borderRadius: 5,
        },
      ];
      let revenueFlowUser = new Chart(revenueFlowUserElement, {
        type: "bar",
        data: {
          labels: month,
          datasets: dataSetsLight,
        },
        options: {
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: "rgb(243 ,246, 255 ,1)",
              },
              gridLines: {
                zeroLineColor: "transparent",
              },
              ticks: {
                callback(value) {
                  return `${value}% `;
                },
              },
            },
            x: {
              grid: {
                color: "rgb(243 ,246, 255 ,1)",
              },
              gridLines: {
                zeroLineColor: "transparent",
              },
            },
          },
          plugins: {
            legend: {
              display: false,
            },
          },
          x: {
            stacked: true,
          },
          y: {
            stacked: true,
          },
        },
      });
      //pie chart
      let pieChartSublab = document.getElementById("pie_chartSublab").getContext("2d");

      const data = {
        labels: [10, 20, 30],
        datasets: [
          {
            label: "My First Dataset",
            data: [15, 20, 35, 40],
            backgroundColor: ["#1A202C", "#61C660", "#F8CC4B", "#EDF2F7"],
            borderColor: ["#ffffff", "#ffffff", "#ffffff", "#1A202C"],
            hoverOffset: 18,
            borderWidth: 0,
          },
        ],
      };
      const customDatalabels = {
        id: "customDatalabels",
        afterDatasetsDraw(chart, args, pluginOptions) {
          const {
            ctx,
            data,
            chartArea: { top, bottom, left, right, width, height },
          } = chart;
          ctx.save();
          data.datasets[0].data.forEach((datapoint, index) => {
            const { x, y } = chart
              .getDatasetMeta(0)
              .data[index].tooltipPosition();
            ctx.font = "bold 12px sans-serif";
            ctx.fillStyle = data.datasets[0].borderColor[index];
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(`${datapoint}%`, x, y);
          });
        },
      };
      const config = {
        type: "doughnut",
        data,
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 10,
              top: 10,
              bottom: 10,
            },
          },
          plugins: {
            legend: {
              display: false,
            },
          },
        },
        plugins: [customDatalabels],
      };

      let pieChartConfiig = new Chart(pieChartSublab, config);

      //chart dark mode
      let themeToggleSwitch = document.getElementById("theme-toggle");

      //onclick

      if (themeToggleSwitch) {
        themeToggleSwitch.addEventListener("click", function () {
          if (
            document.documentElement.classList[0] === "dark" ||
            localStorage.theme === "dark"
          ) {
            revenueFlowUser.data.datasets = dataSetsDark;
            revenueFlowUser.options.scales.y.ticks.color = "white";
            revenueFlowUser.options.scales.x.ticks.color = "white";
            revenueFlowUser.options.scales.x.grid.color = "#222429";
            revenueFlowUser.options.scales.y.grid.color = "#222429";
            revenueFlowUser.update();
          } else {
            revenueFlowUser.data.datasets = dataSetsLight;
            revenueFlowUser.options.scales.y.ticks.color = "black";
            revenueFlowUser.options.scales.x.ticks.color = "black";
            revenueFlowUser.options.scales.x.grid.color = "rgb(243 ,246, 255 ,1)";
            revenueFlowUser.options.scales.y.grid.color = "rgb(243 ,246, 255 ,1)";
            revenueFlowUser.update();
          }
        });
      }

      //initial load
      if (
        localStorage.theme === "dark" ||
        window.matchMedia("(prefers-color-scheme: dark)").matches
      ) {
        revenueFlowUser.data.datasets = dataSetsDark;
        revenueFlowUser.options.scales.y.ticks.color = "white";
        revenueFlowUser.options.scales.x.ticks.color = "white";
        revenueFlowUser.options.scales.x.grid.color = "#222429";
        revenueFlowUser.options.scales.y.grid.color = "#222429";
      } else {
        revenueFlowUser.data.datasets = dataSetsLight;
        revenueFlowUser.options.scales.y.ticks.color = "black";
        revenueFlowUser.options.scales.x.ticks.color = "black";
        revenueFlowUser.options.scales.x.grid.color = "rgb(243 ,246, 255 ,1)";
        revenueFlowUser.options.scales.y.grid.color = "rgb(243 ,246, 255 ,1)";
      }
      revenueFlowUser.update();
    </script>