@extends('layouts.app')
@section('title', 'Survey Dashboard' . ($survey_type ? ' - ' . $survey_type : ''))

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Dashboard{{ $survey_type ? ' - ' . $survey_type : '' }}</div>
        <div class="d-flex align-items-center gap-2">
            <div class="dropdown">
                <button class="btn filter-btn btn-sm dropdown-toggle " type="button" data-bs-toggle="dropdown" id="filterDropdown">
                    {{-- <i class="fas fa-filter me-1"></i> --}}
                    <span id="currentFilter">
                        @php
                            $filter = request()->get('filter', '30d');
                            $filterText = [
                                '7d' => 'Last 7 days',
                                '30d' => 'Last 30 days',
                                '90d' => 'Last 90 days'
                            ][$filter] ?? 'Last 30 days';
                            echo $filterText;
                        @endphp
                    </span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item {{ request()->get('filter', '30d') === '7d' ? 'active' : '' }}" href="#" data-filter="7d">Last 7 days</a></li>
                    <li><a class="dropdown-item {{ request()->get('filter', '30d') === '30d' ? 'active' : '' }}" href="#" data-filter="30d">Last 30 days</a></li>
                    <li><a class="dropdown-item {{ request()->get('filter', '30d') === '90d' ? 'active' : '' }}" href="#" data-filter="90d">Last 90 days</a></li>
                </ul>
            </div>
            <button class="btn btn-primary btn-sm border-0 ml-2" onclick="refreshDashboard()">
                <i class="fas fa-sync-alt me-1"></i> Refresh
            </button>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mt-3 mb-4 g-3">
        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Total Surveys</div>
                    <div class="h3 mb-0 theme-blue">{{ $totalSurveys }}</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Total Attempts</div>
                    <div class="h3 mb-0" style="color: #17a2b8;">{{ $totalAttempts }}</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Submitted</div>
                    <div class="h3 mb-0 text-success">{{ $submittedAttempts }}</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <div class="h6 text-muted">Drafts</div>
                    <div class="h3 mb-0 text-warning">{{ $draftAttempts }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4 g-3">
        <div class="col-lg-8 d-flex">
            <div class="card flex-fill d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        Attempts - 
                        <span id="timeRangeText">
                            @php
                                $filter = request()->get('filter', '30d');
                                $rangeText = [
                                    '7d' => 'Last 7 Days',
                                    '30d' => 'Last 30 Days',
                                    '90d' => 'Last 90 Days'
                                ][$filter] ?? 'Last 30 Days';
                                echo $rangeText;
                            @endphp
                        </span>
                    </h5>
                </div>
                <div class="card-body d-flex flex-column" style="min-height: 300px;">
                    <div class="chart-container" style="position: relative; flex-grow: 1;">
                        <canvas id="attemptsOverTimeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 d-flex">
            <div class="card flex-fill d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Attempts by Channel</h5>
                    <button class="btn export-btn btn-sm" onclick="toggleChartType()">
                        <i class="fas fa-exchange-alt"></i>
                    </button>
                </div>
                <div class="card-body d-flex flex-column" style="min-height: 300px;">
                    <div class="chart-container" style="position: relative; flex-grow: 1;">
                        <canvas id="attemptsByChannelChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Stats -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Performance Overview</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="h4 text-success">{{ $totalAttempts > 0 ? round(($submittedAttempts / $totalAttempts) * 100, 1) : 0 }}%</div>
                                <small class="text-muted">Completion Rate</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="h4 theme-blue">{{ $totalSurveys }}</div>
                                <small class="text-muted">Active Surveys</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="h4 text-warning">{{ $draftAttempts + $submittedAttempts > 0 ? round(($draftAttempts / ($draftAttempts + $submittedAttempts)) * 100, 1) : 0 }}%</div>
                                <small class="text-muted">Draft Rate</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    /* Simple card hover effect */
    .card {
        transition: box-shadow 0.3s ease;
    }

    .card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Static styles - no animations */
    .progress-bar {
        transition: none !important;
        animation: none !important;
    }

    /* Button loading state */
    .fa-sync-alt.loading {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Remove any other animations */
    * {
        animation-play-state: paused !important;
    }

    /* Allow only the loading spinner */
    .fa-sync-alt.loading {
        animation-play-state: running !important;
    }
</style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let timeChart, channelChart;
        
        // Static chart configuration - no animations
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            interaction: {
                intersect: false
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    cornerRadius: 4
                }
            }
        };

        function initializeCharts() {
            // Time Chart
            const timeCtx = document.getElementById('attemptsOverTimeChart');
            const overTime = @json($attemptsOverTime);
            
            timeChart = new Chart(timeCtx, {
                type: 'line',
                data: {
                    labels: overTime.map(x => new Date(x.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })),
                    datasets: [{
                        data: overTime.map(x => x.attempts),
                        borderColor: '#f1c40f',
                        backgroundColor: 'rgba(241, 196, 15, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.1,
                        pointRadius: 3,
                        pointHoverRadius: 5
                    }]
                },
                options: {
                    ...chartOptions,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: '#f0f0f0' }
                        },
                        x: {
                            grid: { display: false }
                        }
                    }
                }
            });

            // Channel Chart
            const channelCtx = document.getElementById('attemptsByChannelChart');
            const byChannel = @json($attemptsByChannel);
            
            channelChart = new Chart(channelCtx, {
                type: 'doughnut',
                data: {
                    labels: byChannel.map(x => x.channel),
                    datasets: [{
                        data: byChannel.map(x => x.attempts),
                        backgroundColor: ['#f1c40f', '#D11A2A', '#28a745', '#17a2b8', '#6f42c1'],
                        borderWidth: 2,
                        borderColor: '#fff'
                    }]
                },
                options: {
                    ...chartOptions,
                    cutout: '50%',
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: { padding: 10, usePointStyle: true }
                        }
                    }
                }
            });
        }

        function toggleChartType() {
            const currentType = channelChart.config.type;
            const newType = currentType === 'doughnut' ? 'bar' : 'doughnut';
            
            channelChart.destroy();
            
            const ctx = document.getElementById('attemptsByChannelChart');
            const byChannel = @json($attemptsByChannel);
            
            channelChart = new Chart(ctx, {
                type: newType,
                data: {
                    labels: byChannel.map(x => x.channel),
                    datasets: [{
                        data: byChannel.map(x => x.attempts),
                        backgroundColor: newType === 'bar' ? '#f1c40f' : ['#f1c40f', '#D11A2A', '#28a745', '#17a2b8', '#6f42c1'],
                        borderWidth: 2,
                        borderColor: '#fff'
                    }]
                },
                options: {
                    ...chartOptions,
                    ...(newType === 'doughnut' ? {
                        cutout: '50%',
                        plugins: {
                            legend: { display: true, position: 'bottom' }
                        }
                    } : {
                        scales: {
                            y: { beginAtZero: true }
                        }
                    })
                }
            });
        }

        // function exportChart(chartType) {
        //     const chart = chartType === 'time' ? timeChart : channelChart;
        //     const link = document.createElement('a');
        //     link.download = `${chartType}-chart.png`;
        //     link.href = chart.toBase64Image();
        //     link.click();
        // }

        function refreshDashboard() {
            const button = event.target.closest('button');
            const icon = button.querySelector('i');
            
            icon.classList.add('loading');
            button.disabled = true;
            
            setTimeout(() => {
                location.reload();
            }, 1000);
        }

        // Initialize when ready
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            
            // Initialize Bootstrap dropdowns
            var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
            var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
                return new bootstrap.Dropdown(dropdownToggleEl);
            });
            
            // Add click handlers for filter dropdown items
            document.querySelectorAll('.dropdown-item[data-filter]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const filterValue = this.getAttribute('data-filter');
                    const url = new URL(window.location.href);
                    url.searchParams.set('filter', filterValue);
                    
                    // Show loading state
                    const button = document.querySelector('#filterDropdown');
                    const icon = document.createElement('i');
                    icon.className = 'fas fa-spinner fa-spin me-1';
                    button.disabled = true;
                    
                    // Remove existing icons and add spinner
                    const existingIcons = button.querySelectorAll('i');
                    existingIcons.forEach(icon => icon.remove());
                    button.insertBefore(icon, button.firstChild);
                    
                    // Close the dropdown
                    const dropdown = bootstrap.Dropdown.getInstance(button);
                    if (dropdown) {
                        dropdown.hide();
                    }
                    
                    // Update the time range text immediately for better UX
                    const rangeTexts = {
                        '7d': 'Last 7 Days',
                        '30d': 'Last 30 Days',
                        '90d': 'Last 90 Days'
                    };
                    const timeRangeElement = document.getElementById('timeRangeText');
                    if (timeRangeElement) {
                        timeRangeElement.textContent = rangeTexts[filterValue] || 'Last 30 Days';
                    }
                    
                    // Reload the page with the new filter after a short delay
                    setTimeout(() => {
                        window.location.href = url.toString();
                    }, 100);
                });
            });
        });
    </script>
@endpush