@extends('layouts.admin')

@section('styles')
<style>
    .analytics-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }

    .analytics-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    }

    .analytics-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--card-color-1), var(--card-color-2));
    }

    .analytics-card.card-primary {
        --card-color-1: #667eea;
        --card-color-2: #764ba2;
    }

    .analytics-card.card-success {
        --card-color-1: #11998e;
        --card-color-2: #38ef7d;
    }

    .analytics-card.card-info {
        --card-color-1: #4facfe;
        --card-color-2: #00f2fe;
    }

    .analytics-card.card-warning {
        --card-color-1: #f093fb;
        --card-color-2: #f5576c;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .stat-icon i {
        color: white;
        font-size: 24px;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
    }

    .stat-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
    }

    .chart-container {
        position: relative;
        height: 300px;
    }

    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }

    .date-range-picker {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .badge-source {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
    }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="h3 mb-1 text-gray-800 fw-bold">Analytics Dashboard</h2>
        <p class="text-muted mb-0">Track your website performance and visitor behavior</p>
    </div>
    <div>
        <a href="{{ route('admin.analytics.google.settings') }}" class="btn btn-outline-primary me-2">
            <i class="fas fa-cog me-2"></i>Google Analytics
        </a>
    </div>
</div>

<!-- Date Range Filter -->
<div class="date-range-picker">
    <form method="GET" action="{{ route('admin.analytics.index') }}" class="row g-3 align-items-end">
        <div class="col-md-4">
            <label for="start_date" class="form-label fw-bold">Start Date</label>
            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
        </div>
        <div class="col-md-4">
            <label for="end_date" class="form-label fw-bold">End Date</label>
            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
        </div>
        <div class="col-md-4">
            <button type="submit" class="btn btn-primary w-100">
                <i class="fas fa-filter me-2"></i>Apply Filter
            </button>
        </div>
    </form>
</div>

<!-- Key Metrics -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card analytics-card card-primary shadow-sm h-100 position-relative">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Total Page Views</div>
                        <div class="stat-value">{{ number_format($data['total_views']) }}</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card analytics-card card-success shadow-sm h-100 position-relative">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Unique Visitors</div>
                        <div class="stat-value">{{ number_format($data['unique_visitors']) }}</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card analytics-card card-info shadow-sm h-100 position-relative">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Conversions</div>
                        <div class="stat-value">{{ number_format($data['total_conversions']) }}</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card analytics-card card-warning shadow-sm h-100 position-relative">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Conversion Rate</div>
                        <div class="stat-value">{{ $data['conversion_rate'] }}%</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-4 mb-4">
    <!-- Visitor Trends Chart -->
    <div class="col-lg-8">
        <div class="card shadow border-0">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary">Visitor Trends</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="visitorTrendsChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Traffic Sources Chart -->
    <div class="col-lg-4">
        <div class="card shadow border-0">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary">Traffic Sources</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="trafficSourcesChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tables Row -->
<div class="row g-4">
    <!-- Popular Pages -->
    <div class="col-lg-6">
        <div class="card shadow border-0">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary">Popular Pages</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th class="text-end">Views</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data['popular_pages'] as $page)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $page->page_title ?? 'Untitled' }}</div>
                                        <small class="text-muted">{{ Str::limit($page->url, 50) }}</small>
                                    </td>
                                    <td class="text-end">
                                        <span class="badge bg-primary">{{ number_format($page->views) }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="text-center text-muted py-4">
                                        <i class="fas fa-chart-bar fa-2x mb-2"></i>
                                        <p>No data available</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Traffic Sources -->
    <div class="col-lg-6">
        <div class="card shadow border-0">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary">Top Traffic Sources</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Source</th>
                                <th>Type</th>
                                <th class="text-end">Sessions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data['top_sources'] as $source)
                                <tr>
                                    <td class="fw-bold">{{ $source->source_name ?? 'Direct' }}</td>
                                    <td>
                                        @php
                                            $badgeColors = [
                                                'organic' => 'success',
                                                'direct' => 'secondary',
                                                'referral' => 'info',
                                                'social' => 'primary',
                                                'email' => 'warning',
                                                'paid' => 'danger',
                                            ];
                                            $color = $badgeColors[$source->source_type] ?? 'secondary';
                                        @endphp
                                        <span class="badge bg-{{ $color }}">{{ ucfirst($source->source_type) }}</span>
                                    </td>
                                    <td class="text-end">
                                        <span class="badge bg-primary">{{ number_format($source->count) }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-4">
                                        <i class="fas fa-chart-pie fa-2x mb-2"></i>
                                        <p>No data available</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Conversion Breakdown -->
<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="card shadow border-0">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary">Conversion Breakdown</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Event Type</th>
                                <th class="text-end">Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data['conversion_breakdown'] as $conversion)
                                <tr>
                                    <td class="fw-bold">{{ ucwords(str_replace('_', ' ', $conversion->event_type)) }}</td>
                                    <td class="text-end">
                                        <span class="badge bg-success">{{ number_format($conversion->count) }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="text-center text-muted py-4">
                                        <i class="fas fa-chart-bar fa-2x mb-2"></i>
                                        <p>No conversions yet</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Visitor Trends Chart
    const trendsCtx = document.getElementById('visitorTrendsChart');
    if (trendsCtx) {
        const trendsData = @json($trends);

        new Chart(trendsCtx, {
            type: 'line',
            data: {
                labels: trendsData.views.map(item => item.date),
                datasets: [{
                    label: 'Page Views',
                    data: trendsData.views.map(item => item.count),
                    borderColor: '#4e73df',
                    backgroundColor: 'rgba(78, 115, 223, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Unique Visitors',
                    data: trendsData.unique_visitors.map(item => item.count),
                    borderColor: '#1cc88a',
                    backgroundColor: 'rgba(28, 200, 138, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    // Traffic Sources Chart
    const sourcesCtx = document.getElementById('trafficSourcesChart');
    if (sourcesCtx) {
        const sourcesData = @json($data['traffic_sources']);

        new Chart(sourcesCtx, {
            type: 'doughnut',
            data: {
                labels: sourcesData.map(item => item.source_type.charAt(0).toUpperCase() + item.source_type.slice(1)),
                datasets: [{
                    data: sourcesData.map(item => item.count),
                    backgroundColor: [
                        '#4e73df',
                        '#1cc88a',
                        '#36b9cc',
                        '#f6c23e',
                        '#e74a3b',
                        '#858796',
                        '#5a5c69'
                    ],
                    hoverBackgroundColor: [
                        '#2e59d9',
                        '#17a673',
                        '#2c9faf',
                        '#dda20a',
                        '#be2617',
                        '#60616f',
                        '#484a54'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom'
                    }
                },
                cutout: '70%'
            }
        });
    }
});
</script>
@endpush