@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('admin_page_title', 'Admin Dashboard')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
@endpush
@section('admin_content')
    <main class="app-main">
        <div class="container-fluid">
            <!-- Start Container Fluid -->
            <div class="row g-3 mt-3 card2-wrapper mx-auto justify-content-center">
                <h4 class="fw-bold">Başlangıç</h4>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm active border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg fill="#000000" viewBox="0 0 100.4 100.4" id="Layer_1" version="1.1"
                                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path
                                                    d="M56.6,16.5v-4.4h4.1c0.8,0,1.5-0.7,1.5-1.5V3.4c0-0.8-0.7-1.5-1.5-1.5H43.2c-0.8,0-1.5,0.7-1.5,1.5v7.2 c0,0.8,0.7,1.5,1.5,1.5h4.1v4.4c-9.7,1.1-18.3,5.6-24.8,12.2L20.8,27l2.8-2.8c0.6-0.6,0.6-1.5,0-2.1l-5.8-5.8 c-0.6-0.6-1.5-0.6-2.1,0L7.8,24c-0.6,0.6-0.6,1.5,0,2.1l5.8,5.8c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.9-2.9l1.9,1.9 C14.6,38,11,47.2,11,57.2c0,22.6,18.4,41,41,41s41-18.4,41-41C92.9,36.2,77,18.8,56.6,16.5z M14.7,28.8L11,25l5.6-5.6l3.7,3.7 l-2.2,2.2c-0.3,0.3-0.7,0.7-1.1,1.1L14.7,28.8z M48.8,9.1h-4.1V4.9h14.5v4.2h-4.1c-0.8,0-1.5,0.7-1.5,1.5v5.7c-0.5,0-1.1,0-1.6,0 s-1.1,0-1.6,0v-5.7C50.3,9.7,49.6,9.1,48.8,9.1z M51.9,95.2c-20.9,0-38-17-38-38s17-38,38-38c0.8,0,1.6,0,2.4,0.1 c0.4,0,0.8,0.1,1.2,0.1c19.3,1.8,34.4,18.1,34.4,37.8C89.9,78.2,72.9,95.2,51.9,95.2z">
                                                </path>
                                                <path
                                                    d="M73.5,32.6c-0.1-0.1-0.2-0.2-0.3-0.3c-5.7-4.9-13.1-7.8-21.2-7.8c-18.1,0-32.7,14.7-32.7,32.7S33.9,90,51.9,90 s32.7-14.7,32.7-32.7C84.7,47.4,80.3,38.6,73.5,32.6z M51.9,87c-16.4,0-29.7-13.3-29.7-29.7s13.3-29.7,29.7-29.7 c6.9,0,13.2,2.4,18.2,6.3L53.9,52.5c-0.6-0.2-1.3-0.4-1.9-0.4c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5-2.3,5-5.1 c0-1-0.3-2-0.8-2.8l16.3-18.7c5.7,5.4,9.2,13,9.2,21.5C81.7,73.6,68.3,87,51.9,87z M54,57.2c0,1.2-0.9,2.1-2.1,2.1 s-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1S54,56.1,54,57.2z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 mt-3 fw-bold">Son <span class="text-danger">1</span> Saat</p>
                                <h4 class="fw-bold mb-0">{{ $last_one_hour_click }}</h4>
                            </div>
                        </div>
                        <div class="card-footer border-0 py-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i>+{{
        $last_one_hour_percentage_change }} %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg fill="#000000" viewBox="0 0 100.4 100.4" id="Layer_1" version="1.1"
                                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path
                                                    d="M56.6,16.5v-4.4h4.1c0.8,0,1.5-0.7,1.5-1.5V3.4c0-0.8-0.7-1.5-1.5-1.5H43.2c-0.8,0-1.5,0.7-1.5,1.5v7.2 c0,0.8,0.7,1.5,1.5,1.5h4.1v4.4c-9.7,1.1-18.3,5.6-24.8,12.2L20.8,27l2.8-2.8c0.6-0.6,0.6-1.5,0-2.1l-5.8-5.8 c-0.6-0.6-1.5-0.6-2.1,0L7.8,24c-0.6,0.6-0.6,1.5,0,2.1l5.8,5.8c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.9-2.9l1.9,1.9 C14.6,38,11,47.2,11,57.2c0,22.6,18.4,41,41,41s41-18.4,41-41C92.9,36.2,77,18.8,56.6,16.5z M14.7,28.8L11,25l5.6-5.6l3.7,3.7 l-2.2,2.2c-0.3,0.3-0.7,0.7-1.1,1.1L14.7,28.8z M48.8,9.1h-4.1V4.9h14.5v4.2h-4.1c-0.8,0-1.5,0.7-1.5,1.5v5.7c-0.5,0-1.1,0-1.6,0 s-1.1,0-1.6,0v-5.7C50.3,9.7,49.6,9.1,48.8,9.1z M51.9,95.2c-20.9,0-38-17-38-38s17-38,38-38c0.8,0,1.6,0,2.4,0.1 c0.4,0,0.8,0.1,1.2,0.1c19.3,1.8,34.4,18.1,34.4,37.8C89.9,78.2,72.9,95.2,51.9,95.2z">
                                                </path>
                                                <path
                                                    d="M73.5,32.6c-0.1-0.1-0.2-0.2-0.3-0.3c-5.7-4.9-13.1-7.8-21.2-7.8c-18.1,0-32.7,14.7-32.7,32.7S33.9,90,51.9,90 s32.7-14.7,32.7-32.7C84.7,47.4,80.3,38.6,73.5,32.6z M51.9,87c-16.4,0-29.7-13.3-29.7-29.7s13.3-29.7,29.7-29.7 c6.9,0,13.2,2.4,18.2,6.3L53.9,52.5c-0.6-0.2-1.3-0.4-1.9-0.4c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5-2.3,5-5.1 c0-1-0.3-2-0.8-2.8l16.3-18.7c5.7,5.4,9.2,13,9.2,21.5C81.7,73.6,68.3,87,51.9,87z M54,57.2c0,1.2-0.9,2.1-2.1,2.1 s-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1S54,56.1,54,57.2z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Son <span class="text-danger">6</span> Saat</p>
                                <h4 class="fw-bold mb-0">{{ $last_six_hours_click }}</span></h4>
                            </div>
                        </div>
                        <div class="card-footer border-0 py-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i>+{{
        $last_six_hour_percentage_change }} %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg fill="#000000" viewBox="0 0 100.4 100.4" id="Layer_1" version="1.1"
                                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path
                                                    d="M56.6,16.5v-4.4h4.1c0.8,0,1.5-0.7,1.5-1.5V3.4c0-0.8-0.7-1.5-1.5-1.5H43.2c-0.8,0-1.5,0.7-1.5,1.5v7.2 c0,0.8,0.7,1.5,1.5,1.5h4.1v4.4c-9.7,1.1-18.3,5.6-24.8,12.2L20.8,27l2.8-2.8c0.6-0.6,0.6-1.5,0-2.1l-5.8-5.8 c-0.6-0.6-1.5-0.6-2.1,0L7.8,24c-0.6,0.6-0.6,1.5,0,2.1l5.8,5.8c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.9-2.9l1.9,1.9 C14.6,38,11,47.2,11,57.2c0,22.6,18.4,41,41,41s41-18.4,41-41C92.9,36.2,77,18.8,56.6,16.5z M14.7,28.8L11,25l5.6-5.6l3.7,3.7 l-2.2,2.2c-0.3,0.3-0.7,0.7-1.1,1.1L14.7,28.8z M48.8,9.1h-4.1V4.9h14.5v4.2h-4.1c-0.8,0-1.5,0.7-1.5,1.5v5.7c-0.5,0-1.1,0-1.6,0 s-1.1,0-1.6,0v-5.7C50.3,9.7,49.6,9.1,48.8,9.1z M51.9,95.2c-20.9,0-38-17-38-38s17-38,38-38c0.8,0,1.6,0,2.4,0.1 c0.4,0,0.8,0.1,1.2,0.1c19.3,1.8,34.4,18.1,34.4,37.8C89.9,78.2,72.9,95.2,51.9,95.2z">
                                                </path>
                                                <path
                                                    d="M73.5,32.6c-0.1-0.1-0.2-0.2-0.3-0.3c-5.7-4.9-13.1-7.8-21.2-7.8c-18.1,0-32.7,14.7-32.7,32.7S33.9,90,51.9,90 s32.7-14.7,32.7-32.7C84.7,47.4,80.3,38.6,73.5,32.6z M51.9,87c-16.4,0-29.7-13.3-29.7-29.7s13.3-29.7,29.7-29.7 c6.9,0,13.2,2.4,18.2,6.3L53.9,52.5c-0.6-0.2-1.3-0.4-1.9-0.4c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5-2.3,5-5.1 c0-1-0.3-2-0.8-2.8l16.3-18.7c5.7,5.4,9.2,13,9.2,21.5C81.7,73.6,68.3,87,51.9,87z M54,57.2c0,1.2-0.9,2.1-2.1,2.1 s-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1S54,56.1,54,57.2z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Son <span class="text-danger">12</span> Saat</p>
                                <h4 class="fw-bold mb-0">{{ $last_twelve_hours_click }}</span></h4>
                            </div>
                        </div>
                        <div class="card-footer border-0 py-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i>+{{
        $last_twelve_hours_percentage_change }} %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg fill="#000000" viewBox="0 0 100.4 100.4" id="Layer_1" version="1.1"
                                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path
                                                    d="M56.6,16.5v-4.4h4.1c0.8,0,1.5-0.7,1.5-1.5V3.4c0-0.8-0.7-1.5-1.5-1.5H43.2c-0.8,0-1.5,0.7-1.5,1.5v7.2 c0,0.8,0.7,1.5,1.5,1.5h4.1v4.4c-9.7,1.1-18.3,5.6-24.8,12.2L20.8,27l2.8-2.8c0.6-0.6,0.6-1.5,0-2.1l-5.8-5.8 c-0.6-0.6-1.5-0.6-2.1,0L7.8,24c-0.6,0.6-0.6,1.5,0,2.1l5.8,5.8c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.9-2.9l1.9,1.9 C14.6,38,11,47.2,11,57.2c0,22.6,18.4,41,41,41s41-18.4,41-41C92.9,36.2,77,18.8,56.6,16.5z M14.7,28.8L11,25l5.6-5.6l3.7,3.7 l-2.2,2.2c-0.3,0.3-0.7,0.7-1.1,1.1L14.7,28.8z M48.8,9.1h-4.1V4.9h14.5v4.2h-4.1c-0.8,0-1.5,0.7-1.5,1.5v5.7c-0.5,0-1.1,0-1.6,0 s-1.1,0-1.6,0v-5.7C50.3,9.7,49.6,9.1,48.8,9.1z M51.9,95.2c-20.9,0-38-17-38-38s17-38,38-38c0.8,0,1.6,0,2.4,0.1 c0.4,0,0.8,0.1,1.2,0.1c19.3,1.8,34.4,18.1,34.4,37.8C89.9,78.2,72.9,95.2,51.9,95.2z">
                                                </path>
                                                <path
                                                    d="M73.5,32.6c-0.1-0.1-0.2-0.2-0.3-0.3c-5.7-4.9-13.1-7.8-21.2-7.8c-18.1,0-32.7,14.7-32.7,32.7S33.9,90,51.9,90 s32.7-14.7,32.7-32.7C84.7,47.4,80.3,38.6,73.5,32.6z M51.9,87c-16.4,0-29.7-13.3-29.7-29.7s13.3-29.7,29.7-29.7 c6.9,0,13.2,2.4,18.2,6.3L53.9,52.5c-0.6-0.2-1.3-0.4-1.9-0.4c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5-2.3,5-5.1 c0-1-0.3-2-0.8-2.8l16.3-18.7c5.7,5.4,9.2,13,9.2,21.5C81.7,73.6,68.3,87,51.9,87z M54,57.2c0,1.2-0.9,2.1-2.1,2.1 s-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1S54,56.1,54,57.2z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Son <span class="text-danger">24</span> Saat</p>
                                <h4 class="fw-bold mb-0">{{ $last_twentyfour_hours_click }}</span></h4>
                            </div>
                        </div>
                        <div class="card-footer border-0 py-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i>+{{
        $last_twentyfour_hours_percentage_change }} %</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3 mt-3 mb-4 card2-wrapper mx-auto justify-content-center">

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg fill="#000000" viewBox="0 0 100.4 100.4" id="Layer_1" version="1.1"
                                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path
                                                    d="M56.6,16.5v-4.4h4.1c0.8,0,1.5-0.7,1.5-1.5V3.4c0-0.8-0.7-1.5-1.5-1.5H43.2c-0.8,0-1.5,0.7-1.5,1.5v7.2 c0,0.8,0.7,1.5,1.5,1.5h4.1v4.4c-9.7,1.1-18.3,5.6-24.8,12.2L20.8,27l2.8-2.8c0.6-0.6,0.6-1.5,0-2.1l-5.8-5.8 c-0.6-0.6-1.5-0.6-2.1,0L7.8,24c-0.6,0.6-0.6,1.5,0,2.1l5.8,5.8c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.9-2.9l1.9,1.9 C14.6,38,11,47.2,11,57.2c0,22.6,18.4,41,41,41s41-18.4,41-41C92.9,36.2,77,18.8,56.6,16.5z M14.7,28.8L11,25l5.6-5.6l3.7,3.7 l-2.2,2.2c-0.3,0.3-0.7,0.7-1.1,1.1L14.7,28.8z M48.8,9.1h-4.1V4.9h14.5v4.2h-4.1c-0.8,0-1.5,0.7-1.5,1.5v5.7c-0.5,0-1.1,0-1.6,0 s-1.1,0-1.6,0v-5.7C50.3,9.7,49.6,9.1,48.8,9.1z M51.9,95.2c-20.9,0-38-17-38-38s17-38,38-38c0.8,0,1.6,0,2.4,0.1 c0.4,0,0.8,0.1,1.2,0.1c19.3,1.8,34.4,18.1,34.4,37.8C89.9,78.2,72.9,95.2,51.9,95.2z">
                                                </path>
                                                <path
                                                    d="M73.5,32.6c-0.1-0.1-0.2-0.2-0.3-0.3c-5.7-4.9-13.1-7.8-21.2-7.8c-18.1,0-32.7,14.7-32.7,32.7S33.9,90,51.9,90 s32.7-14.7,32.7-32.7C84.7,47.4,80.3,38.6,73.5,32.6z M51.9,87c-16.4,0-29.7-13.3-29.7-29.7s13.3-29.7,29.7-29.7 c6.9,0,13.2,2.4,18.2,6.3L53.9,52.5c-0.6-0.2-1.3-0.4-1.9-0.4c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5-2.3,5-5.1 c0-1-0.3-2-0.8-2.8l16.3-18.7c5.7,5.4,9.2,13,9.2,21.5C81.7,73.6,68.3,87,51.9,87z M54,57.2c0,1.2-0.9,2.1-2.1,2.1 s-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1S54,56.1,54,57.2z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Dün Tıklanma</p>
                                <h4 class="fw-bold mb-0">{{ $prev_twentyfour_hours_click }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <path
                                                d="M13.172 5.717l2.71-1.297.432.902-2.865 1.372zm.203-4.301l-.943-.333-1.028 2.915.872.535zm-9.219 8.616l.432.902 2.865-1.37-.587-.829zM6.978 2.03L8.06 4.291l.902-.431L7.88 1.599zm-.342 4.25L3.72 5.252l-.332.943 3.117 1.1zM21.813 15H16.36l3.032 6.049-3.94 1.981-3.106-6.152L9 21.462V5.65zm-7.074-1h4.007L10 7.618v10.777l2.501-3.427 3.393 6.72 2.155-1.084z">
                                            </path>
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                        </g>
                                    </svg>

                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Toplam Tıklama</p>
                                <h4 class="fw-bold mb-0">{{ $total_clicks }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="text-white rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 50px; height: 50px;">
                                    <svg width="224px" height="224px" viewBox="0 0 48.00 48.00"
                                        xmlns="http://www.w3.org/2000/svg" fill="#fa0000" stroke="#fa0000"
                                        transform="rotate(0)">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"
                                            stroke="#CCCCCC" stroke-width="1.9200000000000004">
                                            <defs>
                                                <style>
                                                    .a,
                                                    .b {
                                                        fill: none;
                                                        stroke: #ff0000;
                                                        stroke-linecap: round;
                                                        stroke-linejoin: round;
                                                    }

                                                    .b {
                                                        stroke-width: 0.00048000000000000007;
                                                    }
                                                </style>
                                            </defs>
                                            <path class="a"
                                                d="M25.3847,31a5.9751,5.9751,0,0,0,6,6,5.7905,5.7905,0,0,0,5.7778-6V25a5.9315,5.9315,0,0,0-5.7778-6,6.12,6.12,0,0,0-6,6Z">
                                            </path>
                                            <line class="b" x1="35.8291" y1="21.2222" x2="26.9402" y2="34.7778"></line>
                                            <path class="a"
                                                d="M18.1709,27.8889a4.4575,4.4575,0,0,1,4.4444,4.4444h0a4.4575,4.4575,0,0,1-4.4444,4.4445H16.3931c-3.1111,0-4.2222-.4445-5.5556-1.5556">
                                            </path>
                                            <path class="a"
                                                d="M10.8376,20.5556C12.1709,19.4445,13.5042,19,16.3931,19h1.7778a4.4575,4.4575,0,0,1,4.4444,4.4444h0a4.4575,4.4575,0,0,1-4.4444,4.4445H13.7264">
                                            </path>
                                            <circle class="a" cx="32.5" cy="11" r="2.5"></circle>
                                            <circle class="a" cx="15.5" cy="11" r="2.5"></circle>
                                            <path class="a"
                                                d="M7.5,5.5a2,2,0,0,0-2,2v33a2,2,0,0,0,2,2h33a2,2,0,0,0,2-2V7.5a2,2,0,0,0-2-2Z">
                                            </path>
                                        </g>
                                        <g id="SVGRepo_iconCarrier">
                                            <defs>
                                                <style>
                                                    .a,
                                                    .b {
                                                        fill: none;
                                                        stroke: #ff0000;
                                                        stroke-linecap: round;
                                                        stroke-linejoin: round;
                                                    }

                                                    .b {
                                                        stroke-width: 0.00048000000000000007;
                                                    }
                                                </style>
                                            </defs>
                                            <path class="a"
                                                d="M25.3847,31a5.9751,5.9751,0,0,0,6,6,5.7905,5.7905,0,0,0,5.7778-6V25a5.9315,5.9315,0,0,0-5.7778-6,6.12,6.12,0,0,0-6,6Z">
                                            </path>
                                            <line class="b" x1="35.8291" y1="21.2222" x2="26.9402" y2="34.7778"></line>
                                            <path class="a"
                                                d="M18.1709,27.8889a4.4575,4.4575,0,0,1,4.4444,4.4444h0a4.4575,4.4575,0,0,1-4.4444,4.4445H16.3931c-3.1111,0-4.2222-.4445-5.5556-1.5556">
                                            </path>
                                            <path class="a"
                                                d="M10.8376,20.5556C12.1709,19.4445,13.5042,19,16.3931,19h1.7778a4.4575,4.4575,0,0,1,4.4444,4.4444h0a4.4575,4.4575,0,0,1-4.4444,4.4445H13.7264">
                                            </path>
                                            <circle class="a" cx="32.5" cy="11" r="2.5"></circle>
                                            <circle class="a" cx="15.5" cy="11" r="2.5"></circle>
                                            <path class="a"
                                                d="M7.5,5.5a2,2,0,0,0-2,2v33a2,2,0,0,0,2,2h33a2,2,0,0,0,2-2V7.5a2,2,0,0,0-2-2Z">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="mb-1 fw-bold">Son <span class="text-danger">30</span> Gün Tıklama</p>
                                <h4 class="fw-bold mb-0">{{ $last_30_days_clicks }}</span></h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mb-3 text-center position-absolute" style="right:0; top:0;text-align: right !important;">
                    <button onclick="location.href='{{ $action }}?clearlog';" type="button" class="btn btn-outline-primary">
                        <i class="fa-solid fa-trash bx bx-x me-1"></i>Ziyaret Loglarını Temizle</button>
                </div>
            </div>
            <!-- İstatistik kartları sonu -->
            <!-- Ülke istatistikleri ve son ziyaretçiler -->
            <div class="row card2-wrapper">
                <div class="col-lg-6 mb-4 country-stats">
                    <div class="card" style="min-height: 375px;">
                        <div
                            class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
                            <h4 class="card-title">Ülke İstatistikleri</h4>
                        </div>
                        <div class="card-body chart-container">
                            <!-- Buraya ülke istatistik tablosu gelecek -->
                            <canvas id="countryVisitsChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card" style="min-height: 375px;">
                        <div
                            class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
                            <h4 class="card-title">Son 10 Ziyaretçi</h4>
                        </div>
                        <div class="card-body">
                            <!-- Buraya son ziyaretçiler tablosu gelecek -->
                            {!! $last_visitors_table !!}
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
    </main>


@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // Get the data passed from your PHP controller
        const countryLabels = @json($country_labels); // This will convert PHP array to JavaScript array
        const countryData = @json($country_data);     // This will convert PHP array to JavaScript array

        const ctx = document.getElementById('countryVisitsChart').getContext('2d');

        new Chart(ctx, {
            type: 'bar', // You can change this to 'pie', 'doughnut', 'line', etc.
            data: {
                labels: countryLabels,
                datasets: [{
                    label: 'Ülke Ziyaret Sayısı',
                    data: countryData,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(255, 206, 86, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(153, 102, 255, 0.6)',
                        'rgba(255, 159, 64, 0.6)',
                        'rgba(199, 199, 199, 0.6)',
                        'rgba(83, 102, 255, 0.6)',
                        'rgba(10, 200, 100, 0.6)',
                        'rgba(200, 10, 10, 0.6)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(199, 199, 199, 1)',
                        'rgba(83, 102, 255, 1)',
                        'rgba(10, 200, 100, 1)',
                        'rgba(200, 10, 10, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false, // Set to false if you want to control aspect ratio via CSS
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Ziyaret Sayısı'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Ülke'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false // Hide the legend if there's only one dataset
                    },
                    title: {
                        display: true,
                        text: 'Ülke İstatistikleri (Son 10 Ülke)'
                    }
                }
            }
        });
    </script>
@endpush