<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Analytics Dashboard')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Dashboard', 'title' => 'Analytics')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Dashboard', 'title' => 'Analytics')) ?>

                    <div class="container-fluid">
<div class="card mb-5">
<div class="card-body p-0">
<div class="grid xl:grid-cols-4 grid-cols-1 gap-0">
<div class="flex flex-col xl:order-1 order-2">
<div class="p-5 rounded m-1.25 border border-default-300 border-dashed">
<div class="flex justify-between items-center">
<div>
<h3 class="mb-1.25 text-xl">
<span data-target="14.59">14.59</span>M
                                                        <span class="text-success text-sm">+5.2%
                                                            <i class="iconify tabler--trending-up"></i>
</span>
</h3>
<p class="text-default-400">Total Views</p>
</div>
<div>
<span class="size-12 flex justify-center items-center bg-light rounded-full">
<i class="iconify tabler--eye text-2xl text-default-400"></i>
</span>
</div>
</div>
</div>
<div class="p-5 rounded mt-0 m-1.25 border border-default-300 border-dashed">
<div class="flex justify-between items-center">
<div>
<h3 class="mb-1.25 text-xl">
<span data-target="815.58">815.58</span>K
                                                        <span class="text-success text-sm">+3.9%
                                                            <i class="iconify tabler--activity"></i>
</span>
</h3>
<p class="text-default-400">Sessions</p>
</div>
<div>
<span class="size-12 flex justify-center items-center bg-light rounded-full">
<i class="iconify tabler--clock text-2xl text-default-400"></i>
</span>
</div>
</div>
</div>
<div class="p-5 rounded mt-0 m-1.25 border border-default-300 border-dashed">
<div class="flex justify-between items-center">
<div>
<h3 class="mb-1.25 text-xl">
<span data-target="41.30">41.30</span>%
                                                        <span class="text-danger text-sm">-1.1%
                                                            <i class="iconify tabler--arrow-down-left"></i>
</span>
</h3>
<p class="text-default-400">Bounce Rate</p>
</div>
<div>
<span class="size-12 flex justify-center items-center bg-light rounded-full">
<i class="iconify tabler--repeat-once text-2xl text-default-400"></i>
</span>
</div>
</div>
</div>
<div class="p-5 rounded mt-0 m-1.25 border border-default-300 border-dashed">
<div class="flex justify-between items-center">
<div>
<h3 class="mb-1.25 text-xl">
<span data-target="56.39">56.39</span>K
                                                        <span class="text-success text-sm">+2.3%
                                                            <i class="iconify tabler--users"></i>
</span>
</h3>
<p class="text-default-400">Active Users</p>
</div>
<div>
<span class="size-12 flex justify-center items-center bg-light rounded-full">
<i class="iconify tabler--user text-2xl text-default-400"></i>
</span>
</div>
</div>
</div>
</div>
<div class="xl:col-span-3 border-s border-default-300 border-dashed xl:order-2 order-1">
<div class="card-header">
<h4 class="card-title">Analytics Overview</h4>
<div>
<a class="btn btn-sm bg-primary text-white" href="javascript:void(0);"> <i class="iconify tabler--download me-1"></i> Export CSV </a>
</div>
</div>
<div class="card-body">
<div dir="ltr">
<div class="apex-charts" id="analytics-overview-chart" style="min-height: 341px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-3 grid-cols-1 gap-base mb-5">
<div class="card">
<div class="card-header">
<h4 class="card-title">Sessions Device</h4>
<div class="flex gap-1">
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-toggle" href="#!">
<i class="iconify tabler--chevron-up"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-refresh" href="#!">
<i class="iconify tabler--refresh"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-close" href="#!">
<i class="iconify tabler--x"></i>
</a>
</div>
</div>
<div class="card-body pb-0">
<div class="apex-chart" id="devices-chart" style="min-height: 223px"></div>
</div>
<div class="card-body p-0">
<div class="table-wrapper whitespace-nowrap">
<table class="table table-hover mb-0">
<thead class="bg-light/25 thead-sm">
<tr class="uppercase text-2xs">
<th class="text-default-400">Device</th>
<th class="text-default-400">Sessions</th>
<th class="text-default-400">Change</th>
<th class="text-default-400 text-end">Traffic %</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h5 class="text-sm">Mobile</h5>
<p class="text-2xs text-default-400">- Android / iOS</p>
</td>
<td>4620</td>
<td class="text-success">+3.4%</td>
<td class="text-end">58%</td>
</tr>
<tr>
<td>
<h5 class="text-sm">Desktop</h5>
<p class="text-2xs text-default-400">- Windows / Mac</p>
</td>
<td>2510</td>
<td class="text-success">+1.9%</td>
<td class="text-end">32%</td>
</tr>
<tr>
<td>
<h5 class="text-sm">Tablet</h5>
<p class="text-2xs text-default-400">- iPad / Android Tabs</p>
</td>
<td>820</td>
<td class="text-danger">-0.8%</td>
<td class="text-end">10%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Traffic Sources</h4>
<div class="flex gap-1">
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-toggle" href="#!">
<i class="iconify tabler--chevron-up"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-refresh" href="#!">
<i class="iconify tabler--refresh"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-close" href="#!">
<i class="iconify tabler--x"></i>
</a>
</div>
</div>
<div class="card-body">
<div class="flex justify-between gap-base mb-2.5">
<div>
<h3 class="mb-2.5 text-xl font-bold"><span data-target="8,975">8,975</span></h3>
<p class="mb-2.5 text-default-400 font-semibold">Right Now</p>
</div>
<!--end col-->
<div class="self-center">
<ul class="leading-6">
<li class="flex items-center gap-1.25">
<i class="iconify tabler--caret-right-filled text-lg align-middle text-primary"></i>
<span class="text-default-400">Organic</span>
</li>
<li class="flex items-center gap-1.25">
<i class="iconify tabler--caret-right-filled text-lg align-middle text-success"></i>
<span class="text-default-400">Direct</span>
</li>
<li class="flex items-center gap-1.25">
<i class="iconify tabler--caret-right-filled text-lg align-middle"></i>
<span class="text-default-400">Campaign</span>
</li>
</ul>
</div>
</div>
<div class="mb-5 h-5 w-full overflow-hidden rounded bg-default-200 flex">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="h-full bg-primary" role="progressbar" style="width: 25%"></div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="h-full bg-success" role="progressbar" style="width: 50%"></div>
<div aria-valuemax="100" aria-valuemin="100" aria-valuenow="25" class="h-full bg-info" role="progressbar" style="width: 15%"></div>
</div>
<div class="table-wrapper whitespace-nowrap">
<table class="table table-sm table-hover mb-0">
<thead class="bg-light/25 thead-sm">
<tr class="uppercase text-2xs">
<th class="text-default-400">URL</th>
<th class="text-default-400 text-end">Views</th>
<th class="text-default-400 text-end">Uniques</th>
</tr>
</thead>
<tbody class="border-b border-default-300 thead-sm">
<tr>
<td class="underline">/dashboard</td>
<td class="text-end">9.8k</td>
<td class="text-end">8.5k</td>
</tr>
<tr>
<td class="underline">/ecommerce-index</td>
<td class="text-end">8.2k</td>
<td class="text-end">7.1k</td>
</tr>
<tr>
<td class="underline">/apps/projects-overview</td>
<td class="text-end">7.6k</td>
<td class="text-end">6.2k</td>
</tr>
<tr>
<td class="underline">/pages/contact</td>
<td class="text-end">5.9k</td>
<td class="text-end">4.8k</td>
</tr>
<tr>
<td class="underline">/support/faq</td>
<td class="text-end">5.2k</td>
<td class="text-end">4.3k</td>
</tr>
<tr>
<td class="underline">/login</td>
<td class="text-end">4.7k</td>
<td class="text-end">3.9k</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center mt-5">
<a class="hover:text-primary underline underline-offset-4 font-semibold flex items-center gap-1.25 justify-end" href="#!"> View all Links<i class="iconify tabler--link"></i> </a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Top 10 Countries</h4>
<div class="flex gap-1">
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-toggle" href="#!">
<i class="iconify tabler--chevron-up"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-refresh" href="#!">
<i class="iconify tabler--refresh"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-close" href="#!">
<i class="iconify tabler--x"></i>
</a>
</div>
</div>
<div class="card-body">
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">01.</span>
<img alt="Germany" class="size-4 rounded" src="/images/flags/de.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Germany</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">10,412</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+1.5%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">02.</span>
<img alt="France" class="size-4 rounded" src="/images/flags/fr.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">France</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">8,934</p>
<p class="badge badge-label text-2xs bg-danger/15 text-danger mb-0">-0.8%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">03.</span>
<img alt="India" class="size-4 rounded" src="/images/flags/in.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">India</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">14,217</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+3.2%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">04.</span>
<img alt="United States" class="size-4 rounded" src="/images/flags/us.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">United States</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">18,522</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+2.1%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">05.</span>
<img alt="United Kingdom" class="size-4 rounded" src="/images/flags/gb.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">United Kingdom</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">7,614</p>
<p class="badge badge-label text-2xs bg-danger/15 text-danger mb-0">-1.2%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">06.</span>
<img alt="Canada" class="size-4 rounded" src="/images/flags/ca.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Canada</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">6,221</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+0.9%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">07.</span>
<img alt="Japan" class="size-4 rounded" src="/images/flags/jp.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Japan</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">5,785</p>
<p class="badge badge-label text-2xs bg-warning/15 text-warning mb-0">0.0%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">08.</span>
<img alt="Australia" class="size-4 rounded" src="/images/flags/au.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Australia</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">4,918</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+1.1%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5 mb-5">
<span class="text-sm font-medium italic text-default-400">09.</span>
<img alt="Brazil" class="size-4 rounded" src="/images/flags/br.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Brazil</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">3,874</p>
<p class="badge badge-label text-2xs bg-danger/15 text-danger mb-0">-0.5%</p>
</div>
</div>
</div>
<div class="flex items-center gap-2.5">
<span class="text-sm font-medium italic text-default-400">10.</span>
<img alt="Italy" class="size-4 rounded" src="/images/flags/it.svg"/>
<h5 class="font-medium"><a class="hover:text-primary" href="#!">Italy</a></h5>
<div class="ms-auto">
<div class="flex items-center gap-5">
<p class="font-medium">4,105</p>
<p class="badge badge-label text-2xs bg-success/15 text-success mb-0">+0.7%</p>
</div>
</div>
</div>
<div class="text-center mt-2.5">
<a class="hover:text-primary underline font-semibold link-offset-3" href="/chat"> View all Countries <i class="iconify tabler--world"></i> </a>
</div>
</div>
<!-- end card-body -->
</div>
</div>
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h5 class="card-title">Top Campaign Performance</h5>
<div class="flex gap-1">
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-toggle" href="#!">
<i class="iconify tabler--chevron-up"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-refresh" href="#!">
<i class="iconify tabler--refresh"></i>
</a>
<a class="btn size-6 rounded-full bg-light text-dark hover:text-primary hover:bg-primary/15" data-action="card-close" href="#!">
<i class="iconify tabler--x"></i>
</a>
</div>
</div>
<div class="card-body p-0">
<div class="table-wrapper whitespace-nowrap">
<table class="table table-hover mb-0">
<thead class="bg-light/25 thead-sm">
<tr class="uppercase text-2xs">
<th class="text-default-400">Campaign</th>
<th class="text-default-400" data-table-sort="">Visitors</th>
<th class="text-default-400" data-table-sort="">New Users</th>
<th class="text-default-400" data-table-sort="">Sessions</th>
<th class="text-default-400" data-table-sort="">Bounce Rate</th>
<th class="text-default-400" data-table-sort="">Pages/Visit</th>
<th class="text-default-400" data-table-sort="">Avg. Duration</th>
<th class="text-default-400" data-table-sort="">Leads</th>
<th class="text-default-400" data-table-sort="">Revenue</th>
<th class="text-default-400" data-table-sort="">Conversion</th>
</tr>
</thead>
<tbody class="text-sm">
<tr>
<td><i class="iconify tabler--rocket text-primary me-1 text-base"></i> Spring Launch</td>
<td>502</td>
<td>260</td>
<td>6,845</td>
<td><span class="text-success">18.22%</span></td>
<td>3.15</td>
<td>01:40</td>
<td>432</td>
<td><span class="text-success">$3.64M</span></td>
<td>6.15%</td>
</tr>
<tr>
<td><i class="iconify tabler--brand-facebook text-info text-base me-1"></i> Facebook Push</td>
<td>478</td>
<td>245</td>
<td>6,120</td>
<td><span class="text-warning">21.03%</span></td>
<td>2.87</td>
<td>01:28</td>
<td>398</td>
<td>$3.10M</td>
<td>5.65%</td>
</tr>
<tr>
<td><i class="iconify tabler--speakerphone text-success text-base me-1"></i> Holiday Buzz</td>
<td>445</td>
<td>230</td>
<td>5,710</td>
<td>23.12%</td>
<td>2.45</td>
<td>01:22</td>
<td>372</td>
<td>$2.86M</td>
<td>5.12%</td>
</tr>
<tr>
<td><i class="iconify tabler--mail-fast text-warning text-base me-1"></i> Email Reconnect</td>
<td>392</td>
<td>190</td>
<td>5,210</td>
<td>25.74%</td>
<td>2.18</td>
<td>01:50</td>
<td>340</td>
<td>$2.45M</td>
<td>4.88%</td>
</tr>
<tr>
<td><i class="iconify tabler--broadcast text-muted text-base me-1"></i> Display Retarget</td>
<td>338</td>
<td>160</td>
<td>4,670</td>
<td>19.88%</td>
<td>1.92</td>
<td>02:05</td>
<td>298</td>
<td>$1.95M</td>
<td>4.62%</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end card-body-->
<div class="card-footer">
<div data-table-pagination-info=""></div>
<div data-table-pagination=""></div>
</div>
<!-- end row-->
</div>
<!-- end card-footer-->
<button aria-controls="asidebar-offcanvas" aria-expanded="false" aria-haspopup="dialog" class="lg:hidden fixed md:top-20 top-26 inset-e-0 btn bg-danger btn-icon rounded-e-none text-white focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#asidebar-offcanvas" type="button">
<i class="iconify tabler--adjustments-horizontal text-lg"></i>
</button>
</div>
<!-- end card-->
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
<!-- Apex Chart js -->
<script src="/plugins/apexcharts/apexcharts.min.js"></script>
<!-- Dashboard js -->
<script src="/js/pages/dashboard-analytics.js"></script>
</body>
</html>