@extends('voyager::master')

@section('content')
    <div class="page-content">
        @include('voyager::alerts')
        @include('voyager::dimmers')
        <div class="page-content browse container-fluid">
            <div class="panel analytics-container">
                <div class="Dashboard Dashboard--full panel-body">
                    <header class="Dashboard-header">
                        <ul class="FlexGrid">
                            <li class="FlexGrid-item">
                                <div class="Titles">
                                    <h1 class="Titles-main" id="view-name">📊 Admin Analytics Dashboard</h1>
                                </div>
                            </li>
                            <li class="FlexGrid-item FlexGrid-item--fixed">
                                <div id="active-users-container"></div>
                            </li>
                        </ul>
                        <div id="view-selector-container"></div>
                    </header>

                    {{--Real-Time Users--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Real-Time Users</h4>
                                <canvas id="realTimeChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Events Trend Over Time--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Total Users by Date</h4>
                                <canvas id="totalUsersChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--total sessions and per user--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Total sessions</h4>
                                <canvas id="sessionsChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Average Session Duration--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Average Session Duration</h4>
                                <canvas id="avgSessionDurationChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Device Breakdown--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Device Breakdown</h4>
                                <canvas id="deviceBreakdownChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Events Tracked--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Events Tracked</h4>
                                <canvas id="eventChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--New vs Returning Users--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">New vs Returning Users</h4>
                                <canvas id="newVsReturningChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Bounce Rate--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Bounce Rate</h4>
                                <canvas id="bounceRateChart" height="100"></canvas>
                            </div>
                        </div>
                    </div>

                    {{--Top Traffic Sources--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Top Traffic Sources</h4>
                                <ul>
                                    @foreach($topTrafficSources as $source)
                                        <li>{{ $source['source'] }} — {{ $source['sessions'] }} sessions</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{--Top Landing Pages--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Top Landing Pages</h4>
                                <table id="dataTable" class="table table-hover dataTable no-footer" role="grid" aria-describedby="dataTable_info">
                                    <thead>
                                    <tr>
                                        <th>Page URL</th>
                                        <th>Sessions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($topLandingPages as $page)
                                        <tr>
                                            <td>{{ $page['landingPagePlusQueryString'] }}</td>
                                            <td>{{ $page['sessions'] }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2">No data found.</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{--Top Exit Pages--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">Top Exit Pages</h4>
                                <table id="dataTable" class="table table-hover dataTable no-footer" role="grid" aria-describedby="dataTable_info">
                                    <thead>
                                    <tr>
                                        <th>Page</th>
                                        <th>Exits</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($topExitPages as $page)
                                        <tr>
                                            <td>{{ $page['pagePath'] }}</td>
                                            <td>{{ $page['exits'] }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2">No data found.</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{--User Location--}}
                    <div class="col-md-6">
                        <div class="card mt-6">
                            <div class="card-body">
                                <h4 class="font-semibold mb-4">User Location</h4>
                                <table id="dataTable" class="table table-hover dataTable no-footer" role="grid" aria-describedby="dataTable_info">
                                    <thead>
                                    <tr>
                                        <th>Country</th>
                                        <th>City</th>
                                        <th>Sessions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($userLocations as $location)
                                        <tr>
                                            <td>{{ $location['country'] }}</td>
                                            <td>{{ $location['city'] }}</td>
                                            <td>{{ $location['sessions'] }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{--User Locations Map--}}
                    <div class="col-md-12">
                        <div class="card mt-6">
                            <div class="card-header">
                                <h4>User Locations (Map)</h4>
                            </div>
                            <div class="card-body">
                                <div id="geoChart" style="width: 900px; height: 500px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

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

    <script>
        const totalUsers = @json($totalUsers);
        const newVsReturning = @json($newVsReturning);
        const sessions = @json($sessions);
        const avgSessionDuration = @json($avgSessionDuration);
        const bounceRate = @json($bounceRate);
        const deviceBreakdown = @json($deviceBreakdown);
        const userLocationData = @json($userLocations);
        const countrySessions = @json($countrySessions);

        const eventLabels = {!! json_encode(collect($trackedEvents)->pluck('eventName')) !!};
        const eventCounts = {!! json_encode(collect($trackedEvents)->pluck('eventCount')->map(fn($v) => (int)$v)) !!};

        const realTimeLabels = {!! json_encode(collect($realtime)->pluck('unifiedScreenName')) !!};
        const realTimeCounts = {!! json_encode(collect($realtime)->pluck('activeUsers')->map(fn($v) => (int)$v)) !!};
    </script>

    /*Real-Time Users*/
    <script>
        const realTimeCtx = document.getElementById('realTimeChart').getContext('2d');
        const realTimeChart = new Chart(realTimeCtx, {
            type: 'bar',
            data: {
                labels: realTimeLabels,
                datasets: [{
                    label: 'Live Users',
                    data: realTimeCounts,
                    backgroundColor: '#ff6384',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Real-Time Users'
                    },
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>

    /*Total Users by Date*/
    <script>
        const totalUsersCtx = document.getElementById('totalUsersChart').getContext('2d');

        new Chart(totalUsersCtx, {
            type: 'line',
            data: {
                labels: totalUsers.map(i => {
                    // تنسيق التاريخ ليظهر بشكل مناسب مثلاً 2025-06-25
                    const d = i.date;
                    return `${d.slice(0,4)}-${d.slice(4,6)}-${d.slice(6,8)}`;
                }),
                datasets: [{
                    label: 'Total Users',
                    data: totalUsers.map(i => parseInt(i.totalUsers)),
                    backgroundColor: 'rgba(54, 162, 235, 0.3)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    </script>

    /*total sessions and per user*/
    <script>
        const sessionsCtx = document.getElementById('sessionsChart').getContext('2d');

        new Chart(sessionsCtx, {
            type: 'line',
            data: {
                labels: sessions.map(i => {
                    const d = i.date;
                    return `${d.slice(0,4)}-${d.slice(4,6)}-${d.slice(6,8)}`;
                }),
                datasets: [{
                    label: 'Sessions',
                    data: sessions.map(i => parseInt(i.sessions)),
                    backgroundColor: 'rgba(255, 206, 86, 0.3)',
                    borderColor: 'rgba(255, 206, 86, 1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    </script>

    /*Average Session Duration*/
    <script>
        const durationCtx = document.getElementById('avgSessionDurationChart').getContext('2d');

        new Chart(durationCtx, {
            type: 'line',
            data: {
                labels: avgSessionDuration.map(i => {
                    const d = i.date;
                    return `${d.slice(0,4)}-${d.slice(4,6)}-${d.slice(6,8)}`;
                }),
                datasets: [{
                    label: 'Avg. Session Duration (sec)',
                    data: avgSessionDuration.map(i => parseFloat(i.averageSessionDuration)),
                    backgroundColor: 'rgba(153, 102, 255, 0.3)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Seconds'
                        }
                    }
                }
            }
        });
    </script>

    /*Device Breakdown*/
    <script>
        const deviceCtx = document.getElementById('deviceBreakdownChart').getContext('2d');

        new Chart(deviceCtx, {
            type: 'bar',
            data: {
                labels: deviceBreakdown.map(i => i.deviceCategory),
                datasets: [{
                    label: 'Sessions by Device',
                    data: deviceBreakdown.map(i => parseInt(i.sessions)),
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.6)',  // mobile
                        'rgba(255, 159, 64, 0.6)',  // desktop
                        'rgba(153, 102, 255, 0.6)'  // tablet or others if available
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });
    </script>

    /*Events Tracked*/
    <script>
        const ctx = document.getElementById('eventChart').getContext('2d');
        const eventChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: eventLabels,
                datasets: [{
                    label: 'Event Count',
                    data: eventCounts,
                    backgroundColor: [
                        '#4dc9f6', '#f67019', '#f53794', '#537bc4', '#acc236'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Tracked Events (Clicks, Scrolls, etc.)'
                    },
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    </script>

    /*New vs Returning Users*/
    <script>
        const newVsCtx = document.getElementById('newVsReturningChart').getContext('2d');

        new Chart(newVsCtx, {
            type: 'pie',
            data: {
                labels: newVsReturning.map(i => i.newVsReturning),
                datasets: [{
                    label: 'Users',
                    data: newVsReturning.map(i => parseInt(i.totalUsers)),
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.6)', // new
                        'rgba(255, 205, 86, 0.6)', // not set
                        'rgba(87,6,108,0.6)'  // returning
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 205, 86, 1)',
                        'rgba(87,6,108,0.6)'  // returning
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            }
        });
    </script>

    /*Bounce Rate*/
    <script>
        const bounceCtx = document.getElementById('bounceRateChart').getContext('2d');

        new Chart(bounceCtx, {
            type: 'line',
            data: {
                labels: bounceRate.map(i => i.date),
                datasets: [{
                    label: 'Bounce Rate (%)',
                    data: bounceRate.map(i => parseFloat(i.bounceRate)),
                    fill: false,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    </script>

    /*Map*/
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages':['geochart'],
        });
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
                ['Country', 'sessions'],
                @foreach($countrySessions as $location)
                ['{{ $location['country'] }}', {{ $location['sessions'] }}],
                @endforeach
            ]);

            var options = {};

            var chart = new google.visualization.GeoChart(document.getElementById('geoChart'));

            chart.draw(data, options);
        }
    </script>
@stop