@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">

@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Data passed from the controller
            var visitorData = @json($chartData);

            // Extract dates for x-axis labels
            var dates = visitorData.map(item => new Date(item.x).toLocaleDateString());

            // Extract visitor counts for y-axis data
            var visitorCounts = visitorData.map(item => item.y);

            // Basic Line Chart for Visitors
            var options = {
                chart: {
                    type: 'line',
                    height: 350
                },
                series: [{
                    name: "Visitors",
                    data: visitorCounts // Data for visitors
                }],
                xaxis: {
                    categories: dates // Use dates for x-axis labels
                },
                yaxis: {
                    title: {
                        text: 'Number of Visitors'
                    }
                },
                title: {
                    text: 'Website Visitors',
                    align: 'left'
                },
                tooltip: {
                    x: {
                        format: 'dd MMM yyyy'
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#visitorLineChart"), options);
            chart.render();
        });
    </script>
@endsection
@section('content')
<div class="row mb-3">
    <div class="col-md-9">
        <div class="card h-100">
            <div class="card-body">
                <h4 class="card-title mb-9 text-truncate">Congratulations <span
                        class="fw-bold">Zillion!</span>🎉</h4>
                <p class="mb-0">
                    @if ($visitorsCount > 1000)
                        Your website is booming with {{ $visitorsCount }} visitors! 🚀 Keep up the
                        amazing work!
                    @elseif ($visitorsCount > 500)
                        Great job! You’ve had {{ $visitorsCount }} visitors. Keep pushing for more!
                        🎉
                    @elseif ($visitorsCount > 100)
                        You’ve had {{ $visitorsCount }} visitors today. Solid growth! 👍
                    @else
                        You’ve had {{ $visitorsCount }} visitors so far. Let’s aim for more! 💪
                    @endif
                </p>

            </div>
        </div>
    </div>
    <div class="col-xxl-3 col-md-6">
        <div class="card h-100">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap" style="position: relative;">
              <div class="me-3">
                <h5 class="mb-1">CRM Calendar</h5>
             
                <div class="d-flex align-items-center">
                  
                  <p class="text-success mb-0"> <i class="ri-arrow-up-s-line ri-24px"></i><a href="/calendar">View details</a></p>
                </div>
              </div>
              
             <img src="{{ asset('assets/img/calendar.png') }}" class="w-25">
            <div class="resize-triggers"><div class="expand-trigger">
                <div style="width: 449px; height: 155px;">
                    </div>
                </div>
                <div class="contract-trigger">
                    </div>
                </div>
            </div>
          </div>
      </div>



</div>


    <div class="row gy-4">
        <div class="col-md-12 userarea">
            @if (auth()->check())
                <div class="row">
                    <div class="col-md-12">
                

<div class="row mt-4">
    <div class="col-md-12">
        <!-- Zoomable Timeseries Chart -->
        <div class="card mt-8">
            <div class="card-body">
                <div id="visitorLineChart"></div>
            </div>
        </div>
    </div>
</div>

                    </div>

                </div>
            @else
                <h4 class="card-title mb-1">Welcome! Please log in.</h4>
                <p></p>
            @endif
        </div>
    </div>

@endsection