@extends('superadmin.layout.main')

<!-- Page header -->
@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Overview
                    </div>
                    <h2 class="page-title">
                        Tracking Summary
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    {{-- <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="#" class="btn">
                                New view
                            </a>
                        </span>
                        <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal"
                            data-bs-target="#modal-report">
                            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg>
                            Create new report
                        </a>
                        <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal"
                            data-bs-target="#modal-report" aria-label="Create new report">
                            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg>
                        </a>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- main container -->
@section('main-container')
    <div class="row row-deck row-cards">

        <!-- Todays visitors -->
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">

                    <div class="d-flex align-items-center">
                        <div class="subheader">Today's Visitors</div>
                    </div>
                    <div class="h1 mb-3">{{ $getTodaysVisitorsCount }}</div>
                    <div class="d-flex mb-2">
                        <div>Yesterday <span
                                class="badge bg-indigo-lt">{{ $getTodayYesterdayComparison['yesterday_count'] }} </span>
                        </div>
                        <div class="ms-auto">
                            @if ($getTodayYesterdayComparison['today_percentage_change'] >= 0)
                                <span class="text-green d-inline-flex align-items-center lh-1">
                                    {{ $getTodayYesterdayComparison['today_percentage_change'] }}%
                                    {!! $ARROW_UPWARD !!}
                                </span>
                            @else
                                <span class="text-red d-inline-flex align-items-center lh-1">
                                    {{ $getTodayYesterdayComparison['today_percentage_change'] }}%
                                    {!! $ARROW_DOWNWARD !!}
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar {{ $getTodayYesterdayComparison['today_percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                            style="width: {{ abs($getTodayYesterdayComparison['today_percentage_change']) }}%"
                            role="progressbar"
                            aria-valuenow="{{ abs($getTodayYesterdayComparison['today_percentage_change']) }}"
                            aria-valuemin="0" aria-valuemax="100"
                            aria-label="{{ abs($getTodayYesterdayComparison['today_percentage_change']) }}% Complete">
                            <span
                                class="visually-hidden">{{ abs($getTodayYesterdayComparison['today_percentage_change']) }}%
                                Complete</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Yesterday visitors -->
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader">Yesterday's Visitors</div>
                    </div>
                    <div class="h1 mb-3">{{ $getTodayYesterdayComparison['yesterday_count'] }}</div>
                    <div class="d-flex mb-2">
                        <div>{{ \Carbon\Carbon::yesterday()->subDay()->format('j F') }} <span
                                class="badge bg-indigo-lt">{{ $getTodayYesterdayComparison['previous_yesterday_count'] }}
                            </span></div>
                        <div class="ms-auto">
                            @if ($getTodayYesterdayComparison['yesterday_percentage_change'] >= 0)
                                <span class="text-green d-inline-flex align-items-center lh-1">
                                    {{ $getTodayYesterdayComparison['yesterday_percentage_change'] }}%
                                    {!! $ARROW_UPWARD !!}
                                </span>
                            @else
                                <span class="text-red d-inline-flex align-items-center lh-1">
                                    {{ $getTodayYesterdayComparison['yesterday_percentage_change'] }}%
                                    {!! $ARROW_DOWNWARD !!}
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar {{ $getTodayYesterdayComparison['yesterday_percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                            style="width: {{ abs($getTodayYesterdayComparison['yesterday_percentage_change']) }}%"
                            role="progressbar"
                            aria-valuenow="{{ abs($getTodayYesterdayComparison['yesterday_percentage_change']) }}"
                            aria-valuemin="0" aria-valuemax="100"
                            aria-label="{{ abs($getTodayYesterdayComparison['yesterday_percentage_change']) }}% Complete">
                            <span
                                class="visually-hidden">{{ abs($getTodayYesterdayComparison['yesterday_percentage_change']) }}%
                                Complete</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- All Visitors -->
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader">All Visitors</div>
                        <div class="ms-auto lh-1">
                            <div class="dropdown">
                                <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown"
                                    aria-haspopup="true" id="comparison-dropdown" aria-expanded="false">This Week</a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item active" href="#" id="last-7-days">This Week</a>
                                    <a class="dropdown-item" href="#" id="last-30-days">This Month</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Week comparison -->
                    <div id="week-comparison" class="comparison-data">
                        <div class="h1 mb-3">{{ $getWeekComparison['current_week_count'] }}</div>
                        <div class="d-flex mb-2">
                            <div>
                                Previous Week
                                <span class="badge bg-indigo-lt">{{ $getWeekComparison['previous_week_count'] }}</span>
                            </div>
                            <div class="ms-auto">
                                @if ($getWeekComparison['percentage_change'] >= 0)
                                    <span class="text-green d-inline-flex align-items-center lh-1">
                                        {{ $getWeekComparison['percentage_change'] }}%
                                        {!! $ARROW_UPWARD !!}
                                    </span>
                                @else
                                    <span class="text-red d-inline-flex align-items-center lh-1">
                                        {{ $getWeekComparison['percentage_change'] }}%
                                        {!! $ARROW_DOWNWARD !!}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar {{ $getWeekComparison['percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                                style="width: {{ abs($getWeekComparison['percentage_change']) }}%" role="progressbar"
                                aria-valuenow="{{ abs($getWeekComparison['percentage_change']) }}" aria-valuemin="0"
                                aria-valuemax="100"
                                aria-label="{{ abs($getWeekComparison['percentage_change']) }}% Complete">
                                <span class="visually-hidden">{{ abs($getWeekComparison['percentage_change']) }}%
                                    Complete</span>
                            </div>
                        </div>
                    </div>

                    <!-- Month comparison -->
                    <div id="month-comparison" class="comparison-data d-none">
                        <div class="h1 mb-3">{{ $getMonthComparison['current_month_count'] }}</div>
                        <div class="d-flex mb-2">
                            <div>
                                Previous Month
                                <span class="badge bg-indigo-lt">{{ $getMonthComparison['previous_month_count'] }}</span>
                            </div>
                            <div class="ms-auto">
                                @if ($getMonthComparison['percentage_change'] >= 0)
                                    <span class="text-green d-inline-flex align-items-center lh-1">
                                        {{ $getMonthComparison['percentage_change'] }}%
                                        {!! $ARROW_UPWARD !!}
                                    </span>
                                @else
                                    <span class="text-red d-inline-flex align-items-center lh-1">
                                        {{ $getMonthComparison['percentage_change'] }}%
                                        {!! $ARROW_DOWNWARD !!}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar {{ $getMonthComparison['percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                                style="width: {{ abs($getMonthComparison['percentage_change']) }}%" role="progressbar"
                                aria-valuenow="{{ abs($getMonthComparison['percentage_change']) }}" aria-valuemin="0"
                                aria-valuemax="100"
                                aria-label="{{ abs($getMonthComparison['percentage_change']) }}% Complete">
                                <span class="visually-hidden">{{ abs($getMonthComparison['percentage_change']) }}%
                                    Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- New Visitors -->
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader">New Visitors</div>
                        <div class="ms-auto lh-1">
                            <div class="dropdown">
                                <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown"
                                    aria-haspopup="true" id="new-comparison-dropdown" aria-expanded="false">This Week</a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item active" href="#" id="new-last-7-days">This Week</a>
                                    <a class="dropdown-item" href="#" id="new-last-30-days">This Month</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Week comparison -->
                    <div id="new-week-comparison" class="comparison-data">
                        <div class="h1 mb-3">{{ $getNewVisitorsWeekComparison['current_week_unique_visitors'] }}</div>
                        <div class="d-flex mb-2">
                            <div>
                                Previous Week
                                <span
                                    class="badge bg-indigo-lt">{{ $getNewVisitorsWeekComparison['previous_week_unique_visitors'] }}</span>
                            </div>
                            <div class="ms-auto">
                                @if ($getNewVisitorsWeekComparison['percentage_change'] >= 0)
                                    <span class="text-green d-inline-flex align-items-center lh-1">
                                        {{ $getNewVisitorsWeekComparison['percentage_change'] }}%
                                        {!! $ARROW_UPWARD !!}
                                    </span>
                                @else
                                    <span class="text-red d-inline-flex align-items-center lh-1">
                                        {{ $getNewVisitorsWeekComparison['percentage_change'] }}%
                                        {!! $ARROW_DOWNWARD !!}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar {{ $getNewVisitorsWeekComparison['percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                                style="width: {{ abs($getNewVisitorsWeekComparison['percentage_change']) }}%"
                                role="progressbar"
                                aria-valuenow="{{ abs($getNewVisitorsWeekComparison['percentage_change']) }}"
                                aria-valuemin="0" aria-valuemax="100"
                                aria-label="{{ abs($getNewVisitorsWeekComparison['percentage_change']) }}% Complete">
                                <span
                                    class="visually-hidden">{{ abs($getNewVisitorsWeekComparison['percentage_change']) }}%
                                    Complete</span>
                            </div>
                        </div>
                    </div>

                    <!-- Month comparison -->
                    <div id="new-month-comparison" class="comparison-data d-none">
                        <div class="h1 mb-3">{{ $getNewVisitorsMonthComparison['current_month_unique_visitors'] }}</div>
                        <div class="d-flex mb-2">
                            <div>
                                Previous Month
                                <span
                                    class="badge bg-indigo-lt">{{ $getNewVisitorsMonthComparison['previous_month_unique_visitors'] }}</span>
                            </div>
                            <div class="ms-auto">
                                @if ($getNewVisitorsMonthComparison['percentage_change'] >= 0)
                                    <span class="text-green d-inline-flex align-items-center lh-1">
                                        {{ $getNewVisitorsMonthComparison['percentage_change'] }}%
                                        {!! $ARROW_UPWARD !!}
                                    </span>
                                @else
                                    <span class="text-red d-inline-flex align-items-center lh-1">
                                        {{ $getNewVisitorsMonthComparison['percentage_change'] }}%
                                        {!! $ARROW_DOWNWARD !!}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar {{ $getNewVisitorsMonthComparison['percentage_change'] >= 0 ? 'bg-primary' : 'bg-danger' }}"
                                style="width: {{ abs($getNewVisitorsMonthComparison['percentage_change']) }}%"
                                role="progressbar"
                                aria-valuenow="{{ abs($getNewVisitorsMonthComparison['percentage_change']) }}"
                                aria-valuemin="0" aria-valuemax="100"
                                aria-label="{{ abs($getNewVisitorsMonthComparison['percentage_change']) }}% Complete">
                                <span
                                    class="visually-hidden">{{ abs($getNewVisitorsMonthComparison['percentage_change']) }}%
                                    Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        {{-- <div class="col-12">
            <div class="row row-cards">
                <div class="col-sm-6 col-lg-3">
                    <div class="card card-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span
                                        class="bg-primary text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/currency-dollar -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
                                            <path d="M12 3v3m0 12v3" />
                                        </svg>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">
                                        132 Sales
                                    </div>
                                    <div class="text-secondary">
                                        12 waiting payments
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card card-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span
                                        class="bg-green text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/shopping-cart -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                            <path d="M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                            <path d="M17 17h-11v-14h-2" />
                                            <path d="M6 5l14 1l-1 7h-13" />
                                        </svg>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">
                                        78 Orders
                                    </div>
                                    <div class="text-secondary">
                                        32 shipped
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card card-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span
                                        class="bg-twitter text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" />
                                        </svg>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">
                                        623 Shares
                                    </div>
                                    <div class="text-secondary">
                                        16 today
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card card-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span
                                        class="bg-facebook text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                        </svg>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">
                                        132 Likes
                                    </div>
                                    <div class="text-secondary">
                                        21 today
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Traffic Summary (Last 30 Days)</h3>
                    <div id="chart-mentions" class="chart-lg"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Traffic Locations (Last 30 Days)</h3>
                    <div class="ratio ratio-21x9">
                        <div>
                            <div id="map-world" class="w-100 h-100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-lg-6">
            <div class="row row-cards">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
                            <div class="progress progress-separated mb-3">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: 44%"
                                    aria-label="Regular"></div>
                                <div class="progress-bar bg-info" role="progressbar" style="width: 19%"
                                    aria-label="System"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 9%"
                                    aria-label="Shared"></div>
                            </div>
                            <div class="row">
                                <div class="col-auto d-flex align-items-center pe-2">
                                    <span class="legend me-2 bg-primary"></span>
                                    <span>Regular</span>
                                    <span
                                        class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
                                </div>
                                <div class="col-auto d-flex align-items-center px-2">
                                    <span class="legend me-2 bg-info"></span>
                                    <span>System</span>
                                    <span
                                        class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
                                </div>
                                <div class="col-auto d-flex align-items-center px-2">
                                    <span class="legend me-2 bg-success"></span>
                                    <span>Shared</span>
                                    <span
                                        class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
                                </div>
                                <div class="col-auto d-flex align-items-center ps-2">
                                    <span class="legend me-2"></span>
                                    <span>Free</span>
                                    <span
                                        class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div> --}}

        <!-- Most visisted Tools -->
        <div class="col-md-12 col-lg-12" id="mostVisitedTool">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Most Visited Page</h3>
                    <form action="{{ route('admin.dashboard') }}" method="GET">
                      @csrf
                      <div class="row mx-5">
                          <div class="col-md-4">
                              <div class="input-icon">
                                  <span
                                      class="input-icon-addon">
                                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                                  </span>
                                  <input name="tool_from" class="form-control" placeholder="Select a date"
                                      id="datepicker-icon-prepend-3" value="2020-06-20">
                              </div>
                          </div>
                          <div class="col-md-4">
                              <div class="input-icon">
                                  <span
                                      class="input-icon-addon"><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
                                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                                  </span>
                                  <input name="tool_to" class="form-control" placeholder="Select a date"
                                      id="datepicker-icon-prepend-4" value="2020-06-20">
                              </div>
                          </div>
                          <div class="col-md-4">
                              <button type="submit" class="btn btn-primary">Apply</button>
                          </div>
                      </div>
                  </form>
                </div>
                <div class="card-table table-responsive">
                    <table class="table table-vcenter">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>All Visitors</th>
                                {{-- <th>Unique</th> --}}
                                <th>New Visitors</th>
                                <th colspan="2">Converison Rate</th>
                            </tr>
                        </thead>
                        @foreach ($getMostVisitedTool as $tool)
                            <tr>
                                <td>
                                    {{ $tool->name }}
                                    <a href="{{ url($tool->url) }}" class="ms-1" aria-label="Open website"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg></a>
                                </td>
                                <td class="text-secondary">{{ $tool->visit_count }}</td>
                                {{-- <td class="text-secondary">{{ $tool->unique_visitor_count }}</td> --}}
                                <td class="text-secondary">{{ $tool->new_visitor_count }}</td>
                                <td class="text-secondary">{{ $tool->percentage_change }}%</td>
                                <td class="text-end w-1">
                                    @if ($tool->percentage_change >= 0)
                                        <span style="color: green">{!! $ARROW_UPWARD !!}</span>
                                    @else
                                        <span style="color: red"> {!! $ARROW_DOWNWARD !!} </span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
            </div>
        </div>

        <!-- Most Visited Countries -->
        <div class="col-md-12 col-lg-12" id="mostVisitedCountry">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Most Visited Country</h3>

              <form action="{{ route('admin.dashboard') }}" method="GET">
                  @csrf
                  <div class="row mx-5">
                      <div class="col-md-4">
                          <div class="input-icon">
                              <span
                                  class="input-icon-addon">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                              </span>
                              <input name="country_from" class="form-control" placeholder="Select a date"
                                  id="datepicker-icon-prepend-1" value="2020-06-20">
                          </div>
                      </div>
                      <div class="col-md-4">
                          <div class="input-icon">
                              <span
                                  class="input-icon-addon"><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                              </span>
                              <input name="country_to" class="form-control" placeholder="Select a date"
                                  id="datepicker-icon-prepend-2" value="2020-06-20">
                          </div>
                      </div>
                      <div class="col-md-4">
                          <button type="submit" class="btn btn-primary">Apply</button>
                      </div>
                  </div>
              </form>
            </div>
            <div class="card-table table-responsive">
                <table class="table table-vcenter">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>All Visitors</th>
                            {{-- <th>Unique</th> --}}
                            <th>New Visitors</th>
                            <th colspan="2">Converison Rate</th>
                        </tr>
                    </thead>
                    @foreach ($getMostVisitedCountry as $country)
                        <tr>
                            <td>
                                <span
                                    class="flag flag-xs flag-country-{{ strtolower($country->name) == 'uk' ? 'gb' : strtolower($country->name) }} me-2"></span>
                                {{ $country->name }}
                            </td>
                            <td class="text-secondary">{{ $country->visit_count }}</td>
                            {{-- <td class="text-secondary">{{ $country->unique_visitor_count }}</td> --}}
                            <td class="text-secondary">{{ $country->new_visitor_count }}</td>
                            <td class="text-secondary">{{ $country->percentage_change }}%</td>
                            <td class="text-end w-1">
                                @if ($country->percentage_change >= 0)
                                    <span style="color: green">{!! $ARROW_UPWARD !!}</span>
                                @else
                                    <span style="color: red"> {!! $ARROW_DOWNWARD !!} </span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </table>
            </div>
          </div>
        </div>


    </div>
@endsection

@section('script')
    <!-- Make sure you include jsVectorMap library -->
    <script src="{{ asset('assets/dist/libs/litepicker/dist/litepicker.js') }}" defer></script>
    <script>
        // @formatter:off
        const seriesData = @json($getDailyUsersCount['series']);
        const labelsData = @json($getDailyUsersCount['labels']);
        document.addEventListener("DOMContentLoaded", function() {
            window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
                chart: {
                    type: "bar",
                    fontFamily: 'inherit',
                    height: 240,
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false,
                    },
                    animations: {
                        enabled: false
                    },
                    stacked: true,
                },
                plotOptions: {
                    bar: {
                        columnWidth: '50%',
                    }
                },
                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: 1,
                },
                series: seriesData,
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                    xaxis: {
                        lines: {
                            show: true
                        }
                    },
                },
                xaxis: {
                    labels: {
                        padding: 0,
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false,
                    },
                    type: 'datetime',
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                labels: labelsData,
                colors: [tabler.getColor("primary"), tabler.getColor(
                    "green", 0.8), tabler.getColor("primary", 0.8)],
                legend: {
                    show: false,
                },
            })).render();
        });
        // @formatter:on
    </script>

    <script>
        // @formatter:on
        document.addEventListener("DOMContentLoaded", function() {
            const valuesData = {
                "AF": 16,
                "AL": 11,
                "DZ": 158,
                "AO": 85,
                "AG": 1,
                "AR": 351,
                "AM": 8,
                "AU": 1219,
                "AT": 366,
                "AZ": 52,
                "BS": 7,
                "BH": 21,
                "BD": 105,
                "BB": 3,
                "BY": 52,
                "BE": 461,
                "BZ": 1,
                "BJ": 6,
                "BT": 1,
                "BO": 19,
                "BA": 16,
                "BW": 12,
                "BR": 2023,
                "BN": 11,
                "BG": 44,
                "BF": 8,
                "BI": 1,
                "KH": 11,
                "CM": 21,
                "CA": 1563,
                "CV": 1,
                "CF": 2,
                "TD": 7,
                "CL": 199,
                "CN": 5745,
                "CO": 283,
                "KM": 0,
                "CD": 12,
                "CG": 11,
                "CR": 35,
                "CI": 22,
                "HR": 59,
                "CY": 22,
                "CZ": 195,
                "DK": 304,
                "DJ": 1,
                "DM": 0,
                "DO": 50,
                "EC": 61,
                "EG": 216,
                "SV": 21,
                "GQ": 14,
                "ER": 2,
                "EE": 19,
                "ET": 30,
                "FJ": 3,
                "FI": 231,
                "FR": 2555,
                "GA": 12,
                "GM": 1,
                "GE": 11,
                "DE": 3305,
                "GH": 18,
                "GR": 305,
                "GD": 0,
                "GT": 40,
                "GN": 4,
                "GW": 0,
                "GY": 2,
                "HT": 6,
                "HN": 15,
                "HK": 226,
                "HU": 132,
                "IS": 12,
                "IN": 1430,
                "ID": 695,
                "IR": 337,
                "IQ": 84,
                "IE": 204,
                "IL": 201,
                "IT": 2036,
                "JM": 13,
                "JP": 5390,
                "JO": 27,
                "KZ": 129,
                "KE": 32,
                "KI": 0,
                "KR": 986,
                "KW": 117,
                "KG": 4,
                "LA": 6,
                "LV": 23,
                "LB": 39,
                "LS": 1,
                "LR": 0,
                "LY": 77,
                "LT": 35,
                "LU": 52,
                "MK": 9,
                "MG": 8,
                "MW": 5,
                "MY": 218,
                "MV": 1,
                "ML": 9,
                "MT": 7,
                "MR": 3,
                "MU": 9,
                "MX": 1004,
                "MD": 5,
                "MN": 5,
                "ME": 3,
                "MA": 91,
                "MZ": 10,
                "MM": 35,
                "NA": 11,
                "NP": 15,
                "NL": 770,
                "NZ": 138,
                "NI": 6,
                "NE": 5,
                "NG": 206,
                "NO": 413,
                "OM": 53,
                "PK": 174,
                "PA": 27,
                "PG": 8,
                "PY": 17,
                "PE": 153,
                "PH": 189,
                "PL": 438,
                "PT": 223,
                "QA": 126,
                "RO": 158,
                "RU": 1476,
                "RW": 5,
                "WS": 0,
                "ST": 0,
                "SA": 434,
                "SN": 12,
                "RS": 38,
                "SC": 0,
                "SL": 1,
                "SG": 217,
                "SK": 86,
                "SI": 46,
                "SB": 0,
                "ZA": 354,
                "ES": 1374,
                "LK": 48,
                "KN": 0,
                "LC": 1,
                "VC": 0,
                "SD": 65,
                "SR": 3,
                "SZ": 3,
                "SE": 444,
                "CH": 522,
                "SY": 59,
                "TW": 426,
                "TJ": 5,
                "TZ": 22,
                "TH": 312,
                "TL": 0,
                "TG": 3,
                "TO": 0,
                "TT": 21,
                "TN": 43,
                "TR": 729,
                "TM": 0,
                "UG": 17,
                "UA": 136,
                "AE": 239,
                "GB": 2258,
                "US": 46,
                "UY": 40,
                "UZ": 37,
                "VU": 0,
                "VE": 285,
                "VN": 101,
                "YE": 30,
                "ZM": 15,
                "ZW": 5
            };

            const visitorCounts = @json($getThisMonthCountryUsers);
            // Normalize the visitor counts to a range of 0 to 5000
            const maxVisitors = 6000; // Set the maximum value for normalization

            for (const country in valuesData) {
                if (visitorCounts[country]) {
                    const normalizedValue = (visitorCounts[country] / maxVisitors) * 100;
                    valuesData[country] = normalizedValue;
                } else {
                    valuesData[country] = 0; // Set to light silver if not in visitorCounts
                }
            }

            const map = new jsVectorMap({
                selector: '#map-world',
                map: 'world',
                backgroundColor: 'transparent',
                regionStyle: {
                    initial: {
                        fill: tabler.getColor('body-bg'),
                        stroke: tabler.getColor('border-color'),
                        strokeWidth: 2,
                    }
                },
                zoomOnScroll: false,
                zoomButtons: false,
                // -------- Series --------
                visualizeData: {
                    scale: [tabler.getColor('bg-surface'), tabler.getColor('success')],
                    values: valuesData,
                },

                onRegionTooltipShow: function(e, el, code) {
                    const countryCode = code.toUpperCase();
                    if (visitorCounts[countryCode]) {
                        el.text(
                        `Country: ${countryCode} Visitors: ${visitorCounts[countryCode]}`); // Show visitors data
                    } else {
                        el.text(
                        `Country: ${countryCode} Visitors: 0`); // Fallback if no data is defined
                    }
                }
            });
            window.addEventListener("resize", () => {
                map.updateSize();
            });



        });
        // @formatter:off
    </script>


    <script>
        // all visitors
        document.getElementById('last-7-days').addEventListener('click', function(e) {
            e.preventDefault();

            // Show week comparison, hide month comparison
            document.getElementById('week-comparison').classList.remove('d-none');
            document.getElementById('month-comparison').classList.add('d-none');

            // Update the text in #comparison-dropdown
            document.getElementById('comparison-dropdown').textContent = this.textContent;

            // Add 'active' to the clicked item, remove from the other
            this.classList.add('active');
            document.getElementById('last-30-days').classList.remove('active');
        });

        document.getElementById('last-30-days').addEventListener('click', function(e) {
            e.preventDefault();

            // Show month comparison, hide week comparison
            document.getElementById('month-comparison').classList.remove('d-none');
            document.getElementById('week-comparison').classList.add('d-none');

            // Update the text in #comparison-dropdown
            document.getElementById('comparison-dropdown').textContent = this.textContent;

            // Add 'active' to the clicked item, remove from the other
            this.classList.add('active');
            document.getElementById('last-7-days').classList.remove('active');
        });

        //new visitors
        document.getElementById('new-last-7-days').addEventListener('click', function(e) {
            e.preventDefault();

            // Show week comparison, hide month comparison
            document.getElementById('new-week-comparison').classList.remove('d-none');
            document.getElementById('new-month-comparison').classList.add('d-none');

            // Update the text in #comparison-dropdown
            document.getElementById('new-comparison-dropdown').textContent = this.textContent;

            // Add 'active' to the clicked item, remove from the other
            this.classList.add('active');
            document.getElementById('new-last-30-days').classList.remove('active');
        });

        document.getElementById('new-last-30-days').addEventListener('click', function(e) {
            e.preventDefault();

            // Show month comparison, hide week comparison
            document.getElementById('new-month-comparison').classList.remove('d-none');
            document.getElementById('new-week-comparison').classList.add('d-none');

            // Update the text in #comparison-dropdown
            document.getElementById('new-comparison-dropdown').textContent = this.textContent;

            // Add 'active' to the clicked item, remove from the other
            this.classList.add('active');
            document.getElementById('new-last-7-days').classList.remove('active');
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            window.Litepicker && (new Litepicker({
          element: document.getElementById('datepicker-icon-prepend-1'),
          buttonText: {
              previousMonth: `{!! $PREV_ICON !!}`,
              nextMonth: `{!! $NEXT_ICON !!}`,
          },
          startDate: new Date(new URLSearchParams(window.location.search).get('country_from') || new Date(new Date().setDate(new Date().getDate() - 30))),
            }));
        });
        document.addEventListener("DOMContentLoaded", function() {
            window.Litepicker && (new Litepicker({
          element: document.getElementById('datepicker-icon-prepend-3'),
          buttonText: {
              previousMonth: `{!! $PREV_ICON !!}`,
              nextMonth: `{!! $NEXT_ICON !!}`,
          },
          startDate: new Date(new URLSearchParams(window.location.search).get('tool_from') || new Date(new Date().setDate(new Date().getDate() - 30))),
            }));
        });
        
        document.addEventListener("DOMContentLoaded", function() {
            window.Litepicker && (new Litepicker({
          element: document.getElementById('datepicker-icon-prepend-2'),
          buttonText: {
          previousMonth: `{!! $PREV_ICON !!}`,
          nextMonth: `{!! $NEXT_ICON !!}`,
          },
          startDate: new Date(new URLSearchParams(window.location.search).get('country_to') || new Date()),
            }));
        });
        document.addEventListener("DOMContentLoaded", function() {
            window.Litepicker && (new Litepicker({
          element: document.getElementById('datepicker-icon-prepend-4'),
          buttonText: {
          previousMonth: `{!! $PREV_ICON !!}`,
          nextMonth: `{!! $NEXT_ICON !!}`,
          },
          startDate: new Date(new URLSearchParams(window.location.search).get('tool_to') || new Date()),
            }));
        });
        // Scroll to Most Visited Tool or Most Visited Country based on URL query parameters
        document.addEventListener("DOMContentLoaded", function() {
          const urlParams = new URLSearchParams(window.location.search);
          if (urlParams.has('tool_from')) {
            document.getElementById('mostVisitedTool').scrollIntoView({ behavior: 'smooth' });
          } else if (urlParams.has('country_from')) {
            document.getElementById('mostVisitedCountry').scrollIntoView({ behavior: 'smooth' });
          }
        });
    </script>
@endsection