@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('admin_page_title', 'Admin Dashboard')

@section('admin_content')
<main class="app-main">
  <div class="container-fluid">
    <!-- Start Container Fluid -->
    <div class="row">
        <div class="col-12 mb-3 text-center">
            <button onclick="location.href='{{ $action }}?clearlog';" type="button" class="btn btn-info">
                <i class="bx bx-x me-1"></i>ZİYARET LOGLARINI TEMİZLE
            </button>
        </div>
        <div class="col-12 mb-4">
            <div class="d-flex flex-wrap justify-content-center gap-4">
                <div class="stat-box bg-white shadow rounded p-3 text-center">
                    <div class="fs-4 fw-bold text-primary">{{ $total_clicks }}</div>
                    <div class="text-muted">Toplam Tıklama</div>
                </div>
                <div class="stat-box bg-white shadow rounded p-3 text-center">
                    <div class="fs-4 fw-bold text-success">{{ $last_30_days_clicks }}</div>
                    <div class="text-muted">Son 30 Gün Tıklama</div>
                </div>
            </div>
        </div>
          <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                      <div class="card-body">
                            <div class="row">
                                  <div class="col-6">
                                        <div class="avatar-md bg-light bg-opacity-50 rounded">
                                              <iconify-icon icon="solar:leaf-bold-duotone" class="fs-32 text-success avatar-title"></iconify-icon>
                                        </div>
                                  </div>
                                  <div class="col-6 text-end">
                                        <p class="text-muted mb-0 text-truncate">SON 1 SAAT</p>
                                        <h3 class="text-dark mt-1 mb-0">{{ $last_one_hour_click }}</h3>
                                  </div>
                            </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>
                                      <span class="text-muted ms-1 fs-12">Geçen 1 Saate Göre Artış</span>
                                </div>
                            </div>
                      </div>
                </div>
          </div>
          <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                      <div class="card-body">
                            <div class="row">
                                  <div class="col-6">
                                        <div class="avatar-md bg-light bg-opacity-50 rounded">
                                              <iconify-icon icon="solar:cpu-bolt-line-duotone" class="fs-32 text-success avatar-title"></iconify-icon>
                                        </div>
                                  </div>
                                  <div class="col-6 text-end">
                                        <p class="text-muted mb-0 text-truncate">SON 6 SAAT</p>
                                        <h3 class="text-dark mt-1 mb-0">{{ $last_six_hours_click }}</h3>
                                  </div>
                            </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>
                                      <span class="text-muted ms-1 fs-12">Bir Önceki 6 Saate Göre Artış</span>
                                </div>
                            </div>
                      </div>
                </div>
          </div>
          <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                      <div class="card-body">
                            <div class="row">
                                  <div class="col-6">
                                        <div class="avatar-md bg-light bg-opacity-50 rounded">
                                              <iconify-icon icon="solar:layers-bold-duotone" class="fs-32 text-success avatar-title"></iconify-icon>
                                        </div>
                                  </div>
                                  <div class="col-6 text-end">
                                        <p class="text-muted mb-0 text-truncate">SON 12 SAAT</p>
                                        <h3 class="text-dark mt-1 mb-0">{{ $last_twelve_hours_click }}</h3>
                                  </div>
                            </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>
                                      <span class="text-muted ms-1 fs-12">Bir Önceki 6 Saate Göre Artış</span>
                                </div>
                            </div>
                      </div>
                </div>
          </div>
          <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                      <div class="card-body">
                            <div class="row">
                                  <div class="col-6">
                                        <div class="avatar-md bg-light bg-opacity-50 rounded">
                                              <iconify-icon icon="solar:layers-bold-duotone" class="fs-32 text-success avatar-title"></iconify-icon>
                                        </div>
                                  </div>
                                  <div class="col-6 text-end">
                                        <p class="text-muted mb-0 text-truncate">SON 24 SAAT</p>
                                        <h3 class="text-dark mt-1 mb-0">{{ $last_twentyfour_hours_click }}</h3>
                                  </div>
                            </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>
                                      <span class="text-muted ms-1 fs-12">Bir Önceki 24 Saate Göre Artış</span>
                                </div>
                            </div>
                      </div>
                </div>
          </div>
    </div>
    <!-- İstatistik kartları sonu -->
    <!-- Ülke istatistikleri ve son ziyaretçiler -->
    <div class="row">
      <div class="col-lg-6 mb-4">
        <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">
            <!-- Buraya ülke istatistik tablosu gelecek -->
            {!! $country_table !!}
          </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 100 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')

    <!--end::OverlayScrollbars Configure-->
    <!-- OPTIONAL SCRIPTS -->
    <!-- apexcharts -->
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
      crossorigin="anonymous"
    ></script>
    <script>
      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
      // IT'S ALL JUST JUNK FOR DEMO
      // ++++++++++++++++++++++++++++++++++++++++++

      const visitors_chart_options = {
        series: [
          {
            name: 'High - 2023',
            data: [100, 120, 170, 167, 180, 177, 160],
          },
          {
            name: 'Low - 2023',
            data: [60, 80, 70, 67, 80, 77, 100],
          },
        ],
        chart: {
          height: 200,
          type: 'line',
          toolbar: {
            show: false,
          },
        },
        colors: ['#0d6efd', '#adb5bd'],
        stroke: {
          curve: 'smooth',
        },
        grid: {
          borderColor: '#e7e7e7',
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5,
          },
        },
        legend: {
          show: false,
        },
        markers: {
          size: 1,
        },
        xaxis: {
          categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
        },
      };

      const visitors_chart = new ApexCharts(
        document.querySelector('#visitors-chart'),
        visitors_chart_options,
      );
      visitors_chart.render();

      const sales_chart_options = {
        series: [
          {
            name: 'Net Profit',
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
          },
          {
            name: 'Revenue',
            data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
          },
          {
            name: 'Free Cash Flow',
            data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
          },
        ],
        chart: {
          type: 'bar',
          height: 200,
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded',
          },
        },
        legend: {
          show: false,
        },
        colors: ['#0d6efd', '#20c997', '#ffc107'],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent'],
        },
        xaxis: {
          categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
        },
        fill: {
          opacity: 1,
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return '$ ' + val + ' thousands';
            },
          },
        },
      };

      const sales_chart = new ApexCharts(
        document.querySelector('#sales-chart'),
        sales_chart_options,
      );
      sales_chart.render();
    </script>
@endpush