<template>
  <div class="visits-page">
    <h1 class="page-title">
      Visits &nbsp;
      <small>
        <small>The Lucky One</small>
      </small>
    </h1>
    <div class="row">
      <div class="col-lg-7">
        <Widget class="bg-transparent">
          <Map />
        </Widget>
      </div>
      <div class="col-lg-4 offset-lg-1">
        <Widget
          class="bg-transparent mb-4"
          title="<h5>Map<span class='fw-semi-bold'>&nbsp;Statistics</span></h5>"
          settings
          refresh
          close
          custom-header
        >
          <p>Status: <strong>Live</strong></p>
          <p>
            <span class="circle bg-primary text-white"><i class="la la-map-marker" /></span> &nbsp;
            146 Countries, 2759 Cities
          </p>
          <div class="row progress-stats">
            <div class="col-md-9 col-12">
              <h6 class="name">
                Foreign Visits
              </h6>
              <p class="description deemphasize mb-sm-2">
                Some Cool Text
              </p>
              <div class="progress bg-white progress-xs mb-4">
                <div
                  class="progress-bar bg-default"
                  role="progressbar"
                  style="width: 60%"
                />
              </div>
            </div>
            <div class="col-md-3 col-12 text-center">
              <span class="status rounded rounded-lg bg-body-light">
                <span><CountUp
                  :end-val="75"
                  :duration="2"
                />%</span>
              </span>
            </div>
          </div>

          <div class="row progress-stats">
            <div class="col-md-9 col-12">
              <h6 class="name">
                Local Visits
              </h6>
              <p class="description deemphasize mb-sm-2">
                P. to C. Conversion
              </p>
              <div class="progress bg-white progress-xs mb-4">
                <div
                  class="progress-bar bg-warning"
                  role="progressbar"
                  style="width: 39%"
                />
              </div>
            </div>
            <div class="col-md-3 col-12 text-center">
              <span class="status rounded rounded-lg bg-body-light">
                <span><CountUp
                  :end-val="84"
                  :duration="2"
                />%</span>
              </span>
            </div>
          </div>

          <div class="row progress-stats">
            <div class="col-md-9 col-12">
              <h6 class="name">
                Sound Frequencies
              </h6>
              <p class="description deemphasize mb-sm-2">
                Average Bitrate
              </p>
              <div class="progress bg-white progress-xs mb-4">
                <div
                  class="progress-bar bg-danger"
                  role="progressbar"
                  style="width: 80%"
                />
              </div>
            </div>
            <div class="col-md-3 col-12 text-center">
              <span class="status rounded rounded-lg bg-body-light">
                <span><CountUp
                  :end-val="92"
                  :duration="2"
                />%</span>
              </span>
            </div>
          </div>

          <h6 class="fw-semi-bold mt">
            Map Distributions
          </h6>
          <p>Tracking: <strong>Active</strong></p>
          <p>
            <span class="circle bg-primary text-white"><i class="la la-cog" /></span>
            &nbsp; 391 elements installed, 84 sets
          </p>
          <div class="input-group mt">
            <input
              type="text"
              class="form-control"
            >
            <button
              type="submit"
              class="btn btn-gray-default"
            >
              <i class="fa fa-search text-white" />
            </button>
          </div>
        </Widget>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6> USERBASE GROWTH </h6>"
          close
          settings
          custom-header
        >
          <div class="stats-row">
            <div class="stat-item">
              <h6 class="name">
                Overall Growth
              </h6>
              <p class="value">
                76.38%
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name">
                Montly
              </h6>
              <p class="value">
                10.38%
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name">
                24h
              </h6>
              <p class="value">
                3.38%
              </p>
            </div>
          </div>
          <div class="progress bg-gray-lighter progress-xs">
            <div
              class="progress-bar bg-warning"
              role="progressbar"
              style="width: 60%"
            />
          </div>
          <p>
            <small>
              <span class="circle bg-primary text-white">
                <i class="la la-angle-up" />
              </span>
            </small>
            <span class="fw-semi-bold">&nbsp;17% higher</span>
            &nbsp;than last month
          </p>
        </Widget>
      </div>
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6> TRAFFIC VALUES </h6>"
          close
          settings
          custom-header
        >
          <div class="stats-row">
            <div class="stat-item">
              <h6 class="name">
                Overall Values
              </h6>
              <p class="value">
                17 567 318
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name">
                Montly
              </h6>
              <p class="value">
                55 120
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name">
                24h
              </h6>
              <p class="value">
                9 695
              </p>
            </div>
          </div>
          <div class="progress bg-gray-lighter progress-xs">
            <div
              class="progress-bar bg-danger"
              role="progressbar"
              style="width: 60%"
            />
          </div>
          <p>
            <small>
              <span class="circle bg-primary text-white">
                <i class="la la-angle-down" />
              </span>
            </small>
            <span class="fw-semi-bold">&nbsp;8% lower</span>
            &nbsp;than last month
          </p>
        </Widget>
      </div>
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6> RANDOM VALUES </h6>"
          close
          settings
          custom-header
        >
          <div class="stats-row">
            <div class="stat-item">
              <h6 class="name fs-sm">
                Overcome T.
              </h6>
              <p class="value">
                104.85%
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name fs-sm">
                Takeoff
              </h6>
              <p class="value">
                14.29&deg;
              </p>
            </div>
            <div class="stat-item">
              <h6 class="name fs-sm">
                World Pop.
              </h6>
              <p class="value">
                7,211M
              </p>
            </div>
          </div>
          <div class="progress bg-gray-lighter progress-xs">
            <div
              class="progress-bar bg-primary"
              role="progressbar"
              style="width: 60%"
            />
          </div>
          <p>
            <small>
              <span class="circle bg-primary text-white">
                <i class="la la-plus" />
              </span>
            </small>
            <span class="fw-semi-bold">&nbsp;8 734 higher</span>
            &nbsp;than last month
          </p>
        </Widget>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6><span class='badge bg-danger text-white fw-semi-bold px-1 py-1'>New</span> Messages</h6>"
          refresh
          close
          custom-header
        >
          <div class="widget-body p-0">
            <div class="list-group list-group-lg">
              <button class="list-group-item text-start">
                <div class="d-flex flex-row">
                  <div>
                    <span class="thumb-sm float-start me-1">
                      <img
                        class="rounded-circle"
                        src="../../assets/people/a2.jpg"
                        alt="woman"
                      >
                      <i class="status status-bottom bg-success" />
                    </span>
                  </div>
                  <div class="ms-2">
                    <h6 class="m-0">
                      Chris Gray
                    </h6>
                    <p class="help-block text-ellipsis m-0">
                      Hey! What&apos;s up? So many times since we
                    </p>
                  </div>
                </div>
              </button>
              <button class="list-group-item text-start">
                <div class="d-flex flex-row">
                  <div>
                    <span class="thumb-sm float-start me-1">
                      <img
                        class="rounded-circle"
                        src="../../assets/people/a4.jpg"
                        alt="woman"
                      >
                      <i class="status status-bottom bg-success" />
                    </span>
                  </div>
                  <div class="ms-2">
                    <h6 class="m-0">
                      Jamey Brownlow
                    </h6>
                    <p class="help-block m-0">
                      Good news coming tonight. Seems they agreed to proceed
                    </p>
                  </div>
                </div>
              </button>
              <button class="list-group-item text-start">
                <div class="d-flex flex-row">
                  <div>
                    <span class="thumb-sm float-start me-1">
                      <img
                        class="rounded-circle"
                        src="../../assets/people/a1.jpg"
                        alt="woman"
                      >
                      <i class="status status-bottom bg-warning" />
                    </span>
                  </div>
                  <div class="ms-2">
                    <h6 class="m-0">
                      Livia Walsh
                    </h6>
                    <p class="help-block text-ellipsis m-0">
                      Check my latest email plz!
                    </p>
                  </div>
                </div>
              </button>
              <button class="list-group-item text-start">
                <div class="d-flex flex-row">
                  <div>
                    <span class="thumb-sm float-start me-1">
                      <img
                        class="rounded-circle"
                        src="../../assets/people/a5.jpg"
                        alt="man"
                      >
                      <i class="status status-bottom bg-danger" />
                    </span>
                  </div>
                  <div class="ms-2">
                    <h6 class="m-0">
                      Jaron Fitzroy
                    </h6>
                    <p class="help-block text-ellipsis m-0">
                      What about summer break?
                    </p>
                  </div>
                </div>
              </button>
            </div>
          </div>
          <footer class="bg-body-light mt pb-4">
            <input
              type="search"
              class="form-control form-control-sm"
              placeholder="Search"
            >
          </footer>
        </Widget>
      </div>
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6> Market <span class='fw-semi-bold'>Stats</span></h6>"
          close
          custom-header
        >
          <div class="widget-body">
            <h3>$720 Earned</h3>
            <p class="fs-mini text-muted mb mt-sm">
              Target <span class="fw-semi-bold">$820</span> day earnings
              is <span class="fw-semi-bold">96%</span> reached.
            </p>
          </div>
          <div class="widget-table-overflow table-row">
            <table class="table table-striped table-sm">
              <thead class="no-bd">
                <tr>
                  <th>
                    <div class="checkbox abc-checkbox">
                      <input
                        id="checkbox210"
                        type="checkbox"
                        class="mt-0"
                        :checked="checkedArr[0]"
                        @click="checkTable(0)"
                      >
                      <label for="checkbox210" />
                    </div>
                  </th>
                  <th>&nbsp;</th>
                  <th>&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div class="checkbox abc-checkbox">
                      <input
                        id="checkbox212"
                        type="checkbox"
                        class="mt-0"
                        :checked="checkedArr[1]"
                        @click="checkTable(1)"
                      >
                      <label for="checkbox212" />
                    </div>
                  </td>
                  <td>HP Core i7</td>
                  <td class="text-align-right fw-semi-bold">
                    $346.1
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="checkbox abc-checkbox">
                      <input
                        id="checkbox214"
                        type="checkbox"
                        class="mt-0"
                        :checked="checkedArr[2]"
                        @click="checkTable(2)"
                      >
                      <label for="checkbox214" />
                    </div>
                  </td>
                  <td>Air Pro</td>
                  <td class="text-align-right fw-semi-bold">
                    $533.1
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="widget-body mt-xlg chart-overflow-bottom">
            <apexchart
              v-if="areaChartSeries[0].data.length > 0"
              type="area"
              height="100"
              :options="areaChartOptions"
              :series="areaChartSeries"
            />
          </div>
        </Widget>
      </div>
      <div class="col-lg-4 col-12">
        <Widget
          title="<h6>Calendar</h6"
          body-class="p-0"
          settings
          close
          custom-header
        >
          <Calendar />
          <div class="list-group fs-mini">
            <a
              href="#"
              class="list-group-item text-ellipsis"
            >
              <span class="badge bg-pill bg-info float-end">6:45</span>
              Weed out the flower bed
            </a>
            <a
              href="#"
              class="list-group-item text-ellipsis"
            >
              <span class="badge bg-pill bg-success float-end">9:41</span>
              Stop world water pollution
            </a>
          </div>
        </Widget>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import CountUp from 'vue-countup-v3'
import Widget from '@/components/Widget/Widget.vue'
import Map from './components/Map/Map.vue'
import Calendar from './components/Calendar/Calendar.vue'

const appConfig = inject('appConfig')

const checkedArr = ref([false, false, false])

function checkTable(id) {
  const arr = [...checkedArr.value]
  if (id === 0) {
    const val = !arr[0]
    for (let i = 0; i < arr.length; i += 1) {
      arr[i] = val
    }
  } else {
    arr[id] = !arr[id]
  }
  if (arr[0]) {
    let count = 1
    for (let i = 1; i < arr.length; i += 1) {
      if (arr[i]) {
        count += 1
      }
    }
    if (count !== arr.length) {
      arr[0] = !arr[0]
    }
  }
  checkedArr.value = arr
}

function getRandomInt() {
  return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}

// Area chart configuration (replacing Chart.js)
const areaChartOptions = computed(() => ({
  chart: {
    type: 'area',
    height: 100,
    sparkline: { enabled: true },
    toolbar: { show: false }
  },
  stroke: { curve: 'smooth', width: 0 },
  fill: { opacity: [0.5, 1] },
  colors: ['rgba(111, 176, 249, 0.5)', appConfig.colors.primary],
  tooltip: { enabled: false },
  legend: { show: false },
  xaxis: { labels: { show: false } },
  yaxis: { show: false }
}))

const areaChartSeries = ref([
  {
    name: 'Data One',
    data: []
  },
  {
    name: 'Data Two',
    data: []
  }
])

function fillData() {
  areaChartSeries.value = [
    {
      name: 'Data One',
      data: [getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt()]
    },
    {
      name: 'Data Two',
      data: [getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt(), getRandomInt()]
    }
  ]
}

onMounted(() => {
  fillData()
})
</script>

<style src="./Visits.scss" lang="scss" />
