@extends('dashboard')

@section('page-title', $website->name . ' - Analytics')

@section('content')
<div class="page-container website-analytics-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $website->name }} - Analytics</h1>
            <div class="buttons-container">
                <a href="{{ route('websites.show', $website->id) }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> Back to Website
                </a>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                        {{ $periodLabels[$period] ?? 'Last 30 Days' }}
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="?period=7d" class="dropdown-item {{ $period === '7d' ? 'active' : '' }}">Last 7 Days</a>
                        <a href="?period=30d" class="dropdown-item {{ $period === '30d' ? 'active' : '' }}">Last 30 Days</a>
                        <a href="?period=90d" class="dropdown-item {{ $period === '90d' ? 'active' : '' }}">Last 90 Days</a>
                        <a href="?period=1y" class="dropdown-item {{ $period === '1y' ? 'active' : '' }}">Last Year</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-download"></i> Export Data
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="{{ route('websites.analytics.export', ['websiteId' => $website->id, 'period' => $period, 'format' => 'csv']) }}" class="dropdown-item">CSV Format</a>
                        <a href="{{ route('websites.analytics.export', ['websiteId' => $website->id, 'period' => $period, 'format' => 'json']) }}" class="dropdown-item">JSON Format</a>
                        <a href="#" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#scheduleReportModal">Schedule Reports</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="analytics-summary">
            <div class="summary-card">
                <div class="summary-value">{{ number_format($analytics['visitors']['total']) }}</div>
                <div class="summary-label">Total Visitors</div>
                @if(isset($analytics['trends']['visitors']))
                <div class="trend-indicator {{ $analytics['trends']['visitors'] > 0 ? 'trend-up' : ($analytics['trends']['visitors'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $analytics['trends']['visitors'] > 0 ? '+' : '' }}{{ number_format($analytics['trends']['visitors'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format($analytics['pageviews']['total']) }}</div>
                <div class="summary-label">Total Pageviews</div>
                @if(isset($analytics['trends']['pageviews']))
                <div class="trend-indicator {{ $analytics['trends']['pageviews'] > 0 ? 'trend-up' : ($analytics['trends']['pageviews'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $analytics['trends']['pageviews'] > 0 ? '+' : '' }}{{ number_format($analytics['trends']['pageviews'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format($analytics['bounce_rate'], 1) }}%</div>
                <div class="summary-label">Bounce Rate</div>
                @if(isset($analytics['trends']['bounce_rate']))
                <div class="trend-indicator {{ $analytics['trends']['bounce_rate'] < 0 ? 'trend-up' : ($analytics['trends']['bounce_rate'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $analytics['trends']['bounce_rate'] < 0 ? '+' : '' }}{{ number_format(abs($analytics['trends']['bounce_rate']), 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ gmdate('i:s', $analytics['avg_session_duration']) }}</div>
                <div class="summary-label">Avg. Session Duration</div>
                @if(isset($analytics['trends']['avg_session_duration']))
                <div class="trend-indicator {{ $analytics['trends']['avg_session_duration'] > 0 ? 'trend-up' : ($analytics['trends']['avg_session_duration'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $analytics['trends']['avg_session_duration'] > 0 ? '+' : '' }}{{ number_format($analytics['trends']['avg_session_duration'], 1) }}%
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="analytics-grid">
        <!-- Visitor Trends Chart -->
        <div class="analytics-card full-width">
            <div class="card-header">
                <h3>Visitor Trends</h3>
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline-secondary" id="toggleVisitorChart">Toggle View</button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="visitorTrendsChart" height="300"></canvas>
            </div>
        </div>
        
        <!-- Traffic Sources -->
        <div class="analytics-card">
            <div class="card-header">
                <h3>Traffic Sources</h3>
            </div>
            <div class="card-body">
                <canvas id="trafficSourcesChart" height="250"></canvas>
                <div class="chart-legend" id="trafficSourcesLegend"></div>
            </div>
        </div>
        
        <!-- Device Breakdown -->
        <div class="analytics-card">
            <div class="card-header">
                <h3>Device Breakdown</h3>
            </div>
            <div class="card-body">
                <canvas id="deviceBreakdownChart" height="250"></canvas>
                <div class="chart-legend" id="deviceBreakdownLegend"></div>
            </div>
        </div>
        
        <!-- Top Pages -->
        <div class="analytics-card">
            <div class="card-header">
                <h3>Top Pages</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th>Views</th>
                                <th>Avg. Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($analytics['top_pages'] as $page)
                            <tr>
                                <td>
                                    <div class="page-title">{{ $page['title'] }}</div>
                                    <div class="page-url">{{ $page['url'] }}</div>
                                </td>
                                <td>{{ number_format($page['views']) }}</td>
                                <td>{{ gmdate('i:s', $page['avg_time']) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Geographic Distribution -->
        <div class="analytics-card">
            <div class="card-header">
                <h3>Geographic Distribution</h3>
            </div>
            <div class="card-body">
                <div id="visitorMap" style="height: 300px;"></div>
                <div class="table-responsive mt-3">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Visitors</th>
                                <th>%</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($analytics['countries'] as $country)
                            <tr>
                                <td>{{ $country['name'] }}</td>
                                <td>{{ number_format($country['visitors']) }}</td>
                                <td>{{ number_format($country['percentage'], 1) }}%</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Schedule Report Modal -->
<div class="modal fade" id="scheduleReportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Schedule Analytics Reports</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('websites.analytics.schedule-report', $website->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="reportFrequency" class="form-label">Report Frequency</label>
                        <select class="form-select" id="reportFrequency" name="frequency" required>
                            <option value="daily">Daily</option>
                            <option value="weekly" selected>Weekly</option>
                            <option value="monthly">Monthly</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="reportFormat" class="form-label">Report Format</label>
                        <select class="form-select" id="reportFormat" name="format" required>
                            <option value="pdf">PDF</option>
                            <option value="csv">CSV</option>
                            <option value="json">JSON</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="reportEmail" class="form-label">Email Recipients</label>
                        <input type="text" class="form-control" id="reportEmail" name="recipients" placeholder="email@example.com, another@example.com" required>
                        <div class="form-text">Separate multiple email addresses with commas</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Schedule Reports</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Visitor Trends Chart
        const visitorCtx = document.getElementById('visitorTrendsChart').getContext('2d');
        const visitorData = @json($analytics['visitor_trends']);
        
        const visitorChart = new Chart(visitorCtx, {
            type: 'line',
            data: {
                labels: visitorData.dates,
                datasets: [
                    {
                        label: 'Visitors',
                        data: visitorData.visitors,
                        borderColor: '#4e73df',
                        backgroundColor: 'rgba(78, 115, 223, 0.05)',
                        tension: 0.1,
                        fill: true
                    },
                    {
                        label: 'Pageviews',
                        data: visitorData.pageviews,
                        borderColor: '#36b9cc',
                        backgroundColor: 'rgba(54, 185, 204, 0.05)',
                        tension: 0.1,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // Traffic Sources Chart
        const trafficCtx = document.getElementById('trafficSourcesChart').getContext('2d');
        const trafficData = @json($analytics['traffic_sources']);
        
        const trafficChart = new Chart(trafficCtx, {
            type: 'doughnut',
            data: {
                labels: trafficData.labels,
                datasets: [{
                    data: trafficData.values,
                    backgroundColor: [
                        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b', '#858796'
                    ],
                    hoverBackgroundColor: [
                        '#2e59d9', '#17a673', '#2c9faf', '#dda20a', '#be2617', '#60616f'
                    ],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                cutout: '70%'
            }
        });
        
        // Generate traffic sources legend
        document.getElementById('trafficSourcesLegend').innerHTML = generateChartLegend(trafficChart);
        
        // Device Breakdown Chart
        const deviceCtx = document.getElementById('deviceBreakdownChart').getContext('2d');
        const deviceData = @json($analytics['devices']);
        
        const deviceChart = new Chart(deviceCtx, {
            type: 'doughnut',
            data: {
                labels: deviceData.labels,
                datasets: [{
                    data: deviceData.values,
                    backgroundColor: [
                        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e'
                    ],
                    hoverBackgroundColor: [
                        '#2e59d9', '#17a673', '#2c9faf', '#dda20a'
                    ],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                cutout: '70%'
            }
        });
        
        // Generate device breakdown legend
        document.getElementById('deviceBreakdownLegend').innerHTML = generateChartLegend(deviceChart);
        
        // Geographic Map
        const mapData = @json($analytics['countries_map']);
        const map = new jsVectorMap({
            selector: '#visitorMap',
            map: 'world',
            zoomButtons: true,
            visualizeData: {
                scale: ['#cfe2ff', '#0d6efd'],
                values: mapData
            },
            onRegionTooltipShow: function(event, tooltip, code) {
                if (mapData[code]) {
                    tooltip.text(
                        tooltip.text() + ': ' + mapData[code] + ' visitors'
                    );
                }
            }
        });
        
        // Toggle chart view
        document.getElementById('toggleVisitorChart').addEventListener('click', function() {
            const currentType = visitorChart.config.type;
            let newType = currentType === 'line' ? 'bar' : 'line';
            
            visitorChart.destroy();
            
            visitorChart = new Chart(visitorCtx, {
                type: newType,
                data: {
                    labels: visitorData.dates,
                    datasets: [
                        {
                            label: 'Visitors',
                            data: visitorData.visitors,
                            borderColor: '#4e73df',
                            backgroundColor: newType === 'line' ? 'rgba(78, 115, 223, 0.05)' : 'rgba(78, 115, 223, 0.8)',
                            tension: 0.1,
                            fill: newType === 'line'
                        },
                        {
                            label: 'Pageviews',
                            data: visitorData.pageviews,
                            borderColor: '#36b9cc',
                            backgroundColor: newType === 'line' ? 'rgba(54, 185, 204, 0.05)' : 'rgba(54, 185, 204, 0.8)',
                            tension: 0.1,
                            fill: newType === 'line'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
        
        // Helper function to generate chart legends
        function generateChartLegend(chart) {
            const data = chart.data;
            let legendHtml = '<div class="chart-legend-items">';
            
            for (let i = 0; i < data.labels.length; i++) {
                legendHtml += '<div class="legend-item">';
                legendHtml += '<span class="color-box" style="background-color: ' + data.datasets[0].backgroundColor[i] + '"></span>';
                legendHtml += '<span class="label">' + data.labels[i] + '</span>';
                legendHtml += '<span class="value">' + data.datasets[0].data[i] + '</span>';
                legendHtml += '</div>';
            }
            
            legendHtml += '</div>';
            return legendHtml;
        }
    });
</script>
@endsection