@extends('layouts.app')
@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">
            <div class="app-content-header"></div>
            <div class="row  card2-wrapper mb-3 col-lg-10 mx-auto justify-content-between">
                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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 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>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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">Toplam Tıklamalar</p>
                                <h4 class="fw-bold mb-0">{{ $total_clicks }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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" height="200px" width="200px" version="1.1" id="Capa_1"
                                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        viewBox="0 0 60 60" xml:space="preserve">
                                        <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="M57.223,58.309l-5.969-6.244c1.746-1.919,2.82-4.458,2.82-7.25c0-5.953-4.843-10.796-10.796-10.796 s-10.796,4.843-10.796,10.796S37.324,55.61,43.277,55.61c2.441,0,4.688-0.824,6.499-2.196l6.001,6.277 C55.974,59.896,56.236,60,56.5,60c0.249,0,0.497-0.092,0.691-0.277C57.59,59.341,57.605,58.708,57.223,58.309z M43.277,53.61 c-4.85,0-8.796-3.946-8.796-8.796s3.946-8.796,8.796-8.796s8.796,3.946,8.796,8.796S48.127,53.61,43.277,53.61z">
                                                </path>
                                                <path
                                                    d="M29.5,21h-2h-7h-2h-9v9v2v7v2v9h9h2h9v-9v-2v-7h7h2h9V21h-9h-2H29.5z M18.5,48h-7v-7h7V48z M18.5,39h-7v-7h7V39z M18.5,30 h-7v-7h7V30z M27.5,48h-7v-7h7V48z M27.5,39h-7v-7h7V39z M27.5,30h-7v-7h7V30z M36.5,30h-7v-7h7V30z M38.5,23h7v7h-7V23z">
                                                </path>
                                                <path
                                                    d="M31.5,55h-27V16h48v14c0,0.553,0.447,1,1,1s1-0.447,1-1V15V5c0-0.553-0.447-1-1-1h-5V1c0-0.553-0.447-1-1-1h-7 c-0.553,0-1,0.447-1,1v3h-22V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3h-5c-0.553,0-1,0.447-1,1v10v41c0,0.553,0.447,1,1,1 h28c0.553,0,1-0.447,1-1S32.053,55,31.5,55z M41.5,5V2h5v3v3h-5V5z M10.5,5V2h5v3v3h-5V5z M4.5,6h4v3c0,0.553,0.447,1,1,1h7 c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h4v8h-48V6z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="fw-bold mb-1">Dün</p>
                                <h4 class="fw-bold mb-0">{{ $last_yesterday_click }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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" height="200px" width="200px" version="1.1" id="Capa_1"
                                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        viewBox="0 0 60 60" xml:space="preserve">
                                        <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="M57.223,58.309l-5.969-6.244c1.746-1.919,2.82-4.458,2.82-7.25c0-5.953-4.843-10.796-10.796-10.796 s-10.796,4.843-10.796,10.796S37.324,55.61,43.277,55.61c2.441,0,4.688-0.824,6.499-2.196l6.001,6.277 C55.974,59.896,56.236,60,56.5,60c0.249,0,0.497-0.092,0.691-0.277C57.59,59.341,57.605,58.708,57.223,58.309z M43.277,53.61 c-4.85,0-8.796-3.946-8.796-8.796s3.946-8.796,8.796-8.796s8.796,3.946,8.796,8.796S48.127,53.61,43.277,53.61z">
                                                </path>
                                                <path
                                                    d="M29.5,21h-2h-7h-2h-9v9v2v7v2v9h9h2h9v-9v-2v-7h7h2h9V21h-9h-2H29.5z M18.5,48h-7v-7h7V48z M18.5,39h-7v-7h7V39z M18.5,30 h-7v-7h7V30z M27.5,48h-7v-7h7V48z M27.5,39h-7v-7h7V39z M27.5,30h-7v-7h7V30z M36.5,30h-7v-7h7V30z M38.5,23h7v7h-7V23z">
                                                </path>
                                                <path
                                                    d="M31.5,55h-27V16h48v14c0,0.553,0.447,1,1,1s1-0.447,1-1V15V5c0-0.553-0.447-1-1-1h-5V1c0-0.553-0.447-1-1-1h-7 c-0.553,0-1,0.447-1,1v3h-22V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3h-5c-0.553,0-1,0.447-1,1v10v41c0,0.553,0.447,1,1,1 h28c0.553,0,1-0.447,1-1S32.053,55,31.5,55z M41.5,5V2h5v3v3h-5V5z M10.5,5V2h5v3v3h-5V5z M4.5,6h4v3c0,0.553,0.447,1,1,1h7 c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h4v8h-48V6z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div class="card-info flex-grow-1">
                                <p class="fw-bold mb-1">Bugün (00:00'dan beri)</p>
                                <h4 class="fw-bold mb-0">{{ $today_click }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <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="fw-bold mb-1">Son 30 Gün</p>
                                <h4 class="fw-bold mb-0">{{ $last_thirty_days_click }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3">
                </div>

            </div>
            <div class="row  card2-wrapper mb-3 col-lg-10 mx-auto justify-content-between">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Ülke İstatistikleri</div>
                        <div class="card-body chart-container">
                            <canvas id="countryChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Tarayıcı Bazlı Ziyaretler</div>
                        <div class="card-body chart-container">
                            <canvas id="browserChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row  card2-wrapper mb-3 col-lg-10 mx-auto justify-content-between">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">Son 30 Gün Tıklama İstatistikleri</div>
                        <div class="card-body chart-container">
                            <canvas id="lineChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">Son Ziyaretçiler</div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm visitor-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>IP</th>
                                            <th>Ülke</th>
                                            <th>Tarayıcı</th>
                                            <th>İşletim Sistemi</th>
                                            <th>Tarih</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($visitors as $visitor)
                                            <tr>
                                                <td>{{ $visitor->id }}</td>
                                                <td>{{ $visitor->ip }}</td>
                                                <td>{{ $visitor->country_name }}</td>
                                                <td>{{ $visitor->browser }}</td>
                                                <td>{{ $visitor->operating_system }}</td>
                                                <td>{{ date('d.m.Y H:i', $visitor->time) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center text-muted">Ziyaretçi yok.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Ülke verileri
            const countryLabels = @json($countries->pluck('country_name'));
            const countryVisits = @json($countries->pluck('visit_count'));
            const countryPercentages = @json($countries->pluck('percentage'));

            // Tarayıcı verileri
            const browserLabels = @json($browsers->pluck('browser'));
            const browserSessions = @json($browsers->pluck('session_count'));

            // Ülke Grafiği (Bar Chart)
            const ctxCountry = document.getElementById('countryChart').getContext('2d');
            new Chart(ctxCountry, {
                type: 'bar',
                data: {
                    labels: countryLabels,
                    datasets: [{
                        label: 'Ziyaret Sayısı',
                        data: countryVisits,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    let percentage = countryPercentages[context.dataIndex];
                                    return `Ziyaret: ${context.parsed.y} (%${percentage.toFixed(2)})`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Ziyaret Sayısı' }
                        },
                        x: {
                            title: { display: true, text: 'Ülke' }
                        }
                    }
                }
            });

            // Tarayıcı Grafiği (Doughnut Chart)
            const ctxBrowser = document.getElementById('browserChart').getContext('2d');
            new Chart(ctxBrowser, {
                type: 'doughnut',
                data: {
                    labels: browserLabels,
                    datasets: [{
                        label: 'Oturum Sayısı',
                        data: browserSessions,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(153, 102, 255, 0.7)',
                            'rgba(255, 159, 64, 0.7)'
                        ],
                        borderColor: 'rgba(255, 255, 255, 1)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'right' },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = (value / total * 100).toFixed(2);
                                    return `${label}: ${value} (%${percentage})`;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const clicksData = @json(array_values($clicksPerDay));
            const clicksLabels = @json(array_keys($clicksPerDay));

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

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: clicksLabels,
                    datasets: [{
                        label: 'Tıklama Sayısı',
                        data: clicksData,
                        fill: true,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.3,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Tarih'
                            },
                            ticks: {
                                maxRotation: 90,
                                minRotation: 45,
                                maxTicksLimit: 10
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Tıklama Sayısı'
                            },
                            suggestedMax: Math.max(...clicksData) + 5
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
        });
    </script>
@endpush