<script>
  // core components
    import axios from 'axios';
    import { onMount } from 'svelte';
    import CardStats from "components/Cards/CardStats.svelte";
    import { getCookie } from "components/Utils/CookieHandler.js";


    let infTable = [];
    let csrftoken = getCookie('csrftoken');
    let authToken = getCookie('Token');

    onMount(async () => {
            let rawResponse = await fetch(
            '/api2/wgClients?param=stats', {
                method: 'GET',
                credentials: 'include',
                mode: 'same-origin',
                headers: {
                  'X-CSRFToken': csrftoken,
                  'Authorization': "Token "+authToken,
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',

                    }
                });
            let rawData = await rawResponse.json();
            console.log(rawData);
            infTable = rawData;
             });

    // infTable = fetch_stats();

    // onMount(async () => {
    //         await axios.get(
    //                 '/api2/wgClients?param=stats', {
    //                     method: 'GET',
    //                     credentials: 'include',
    //                     mode: 'same-origin',
    //                     headers: {
    //                       'X-CSRFToken': csrftoken,
    //                       'Authorization': "Token "+authToken,
    //                       'Accept': 'application/json',
    //                       'Content-Type': 'application/json',

    //                         }
    //                     }
    //             )
    //             .then( response => {
    //                 infTable = response.data
    //                 });
    //         console.log(infTable);
    //         });

</script>

<!-- Header -->
  <div class="px-4 md:px-10 mx-auto w-full">
    <div>
      <!-- Card stats -->
      <div class="flex flex-wrap">
        <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
          <CardStats
            statSubtitle="Connected Now"
            statTitle="{ infTable.connectedtotal }"
            statArrow="down"
            statPercent="3.48"
            statPercentColor="text-red-500"
            statDescripiron="Since last week"
            statIconName="fas fa-chart-pie"
            statIconColor="bg-teal-500"
          />
        </div>
        <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
          <CardStats
            statSubtitle="Total Clients"
            statTitle="{ infTable.clienttotal }"
            statArrow="down"
            statPercent="1.10"
            statPercentColor="text-orange-500"
            statDescripiron="Since yesterday"
            statIconName="fas fa-users"
            statIconColor="bg-teal-500"
          />
        </div>
        <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
          <CardStats
            statSubtitle="TRAFFIC TOTAL"
            statTitle="{ infTable.traffictotal }"
            statArrow="up"
            statPercent="3.48"
            statPercentColor="text-emerald-500"
            statDescripiron="Since last month"
            statIconName="far fa-chart-bar"
            statIconColor="bg-teal-500"
          />
        </div>
        <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
          <CardStats
            statSubtitle="Never Connnected"
            statTitle="{infTable.brokentotal}"
            statArrow="up"
            statPercent="12"
            statPercentColor="text-emerald-500"
            statDescripiron="Since last month"
            statIconName="fas fa-users"
            statIconColor="bg-red-500"
          />
        </div>
      </div>
    </div>
  </div>
