@extends('adminlte::page')

@section('title', 'Dashboard de Pesquisas')

@section('content_header')
    <h1>
        <i class="fas fa-chart-bar"></i> 
        Dashboard de Pesquisas
    </h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            @livewire('pesquisa.dashboard-component')
        </div>
    </div>
@stop

@section('css')
    @livewireStyles
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.css">
    <style>
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
        }
        .stat-card.success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        }
        .stat-card.warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .stat-card.info {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .stat-card h4 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        .stat-card p {
            font-size: 0.95rem;
            opacity: 0.9;
        }
        .chart-container {
            position: relative;
            height: 400px;
            margin-bottom: 30px;
        }
        .filter-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #dee2e6;
        }
        .filter-card label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
        }
        .filter-card .form-control {
            border-radius: 8px;
            border: 1px solid #ced4da;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .filter-card .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .card {
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 25px;
        }
        .card-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px 15px 0 0 !important;
            border-bottom: 1px solid #dee2e6;
            padding: 20px 25px;
        }
        .card-title {
            margin: 0;
            font-weight: 600;
            color: #495057;
        }
        .card-body {
            padding: 25px;
        }
        .table {
            border-radius: 10px;
            overflow: hidden;
        }
        .table thead th {
            background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
            color: white;
            border: none;
            font-weight: 600;
            padding: 15px;
        }
        .table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }
        .badge {
            font-size: 0.8rem;
            padding: 6px 12px;
            border-radius: 20px;
        }
        .progress {
            border-radius: 10px;
            background-color: #e9ecef;
        }
        .progress-bar {
            border-radius: 10px;
        }
        .spinner-border {
            width: 3rem;
            height: 3rem;
            color: #667eea;
        }
        .alert {
            border-radius: 10px;
            border: none;
        }
        .text-truncate {
            max-width: 200px;
        }
        
        /* Estilos específicos para o grid */
        .badge-lg {
            font-size: 0.9rem;
            padding: 8px 12px;
        }
        
        .table-hover tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.1);
            transform: scale(1.01);
            transition: all 0.2s ease;
        }
        
        .progress {
            position: relative;
        }
        
        .progress-bar {
            position: relative;
            overflow: visible;
        }
        
        .progress-bar::after {
            content: attr(aria-valuenow);
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            color: #000;
            font-weight: bold;
            font-size: 0.8rem;
        }
        
        .card-header h5 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-group .btn {
            margin: 0 2px;
        }
        
        .alert-info {
            background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
            border: none;
            color: #0c5460;
        }
        
        /* Responsividade */
        @media (max-width: 768px) {
            .stat-card {
                padding: 20px;
                margin-bottom: 15px;
            }
            .stat-card h4 {
                font-size: 2rem;
            }
            .filter-card {
                padding: 20px;
            }
            .chart-container {
                height: 300px;
            }
            .card-body {
                padding: 20px;
            }
        }
        
        @media (max-width: 576px) {
            .stat-card h4 {
                font-size: 1.8rem;
            }
            .filter-card {
                padding: 15px;
            }
            .chart-container {
                height: 250px;
            }
        }
    </style>
@stop

@section('js')
    @livewireScripts
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script>
        // Variáveis globais para os gráficos
        let charts = {};
        
        // Auto-hide alerts after 5 seconds
        window.addEventListener('load', function() {
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);
        });

        // Função para destruir gráficos existentes
        function destroyCharts() {
            Object.values(charts).forEach(chart => {
                if (chart && typeof chart.destroy === 'function') {
                    chart.destroy();
                }
            });
            charts = {};
        }

        // Função para criar gráfico de pizza
        function createPieChart(canvasId, data, title) {
            const ctx = document.getElementById(canvasId);
            if (!ctx) return;
            
            if (charts[canvasId]) {
                charts[canvasId].destroy();
            }
            
            charts[canvasId] = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.labels,
                    datasets: [{
                        data: data.values,
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                            '#9966FF', '#FF9F40', '#FF6384', '#C9CBCF',
                            '#4BC0C0', '#FF9F40', '#36A2EB', '#FFCE56'
                        ],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true
                            }
                        },
                        title: {
                            display: true,
                            text: title,
                            font: {
                                size: 16,
                                weight: 'bold'
                            }
                        }
                    }
                }
            });
        }

        // Função para criar gráfico de linha
        function createLineChart(canvasId, data, title) {
            const ctx = document.getElementById(canvasId);
            if (!ctx) return;
            
            if (charts[canvasId]) {
                charts[canvasId].destroy();
            }
            
            charts[canvasId] = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: data.datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: title,
                            font: {
                                size: 16,
                                weight: 'bold'
                            }
                        },
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.1)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(0,0,0,0.1)'
                            }
                        }
                    },
                    elements: {
                        point: {
                            radius: 4,
                            hoverRadius: 6
                        }
                    }
                }
            });
        }

        // Função para criar gráfico de barras
        function createBarChart(canvasId, data, title) {
            const ctx = document.getElementById(canvasId);
            if (!ctx) return;
            
            if (charts[canvasId]) {
                charts[canvasId].destroy();
            }
            
            charts[canvasId] = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: data.label || 'Total',
                        data: data.values,
                        backgroundColor: data.colors || [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                            '#9966FF', '#FF9F40', '#FF6384', '#C9CBCF'
                        ],
                        borderColor: data.borderColors || [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                            '#9966FF', '#FF9F40', '#FF6384', '#C9CBCF'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: title,
                            font: {
                                size: 16,
                                weight: 'bold'
                            }
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.1)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(0,0,0,0.1)'
                            }
                        }
                    }
                }
            });
        }

        // Função para exportar dados como CSV
        function exportToCSV(data, filename) {
            if (!data || data.length === 0) {
                alert('Nenhum dado para exportar');
                return;
            }
            
            const headers = Object.keys(data[0]);
            const csvContent = [
                headers.join(','),
                ...data.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
            ].join('\n');
            
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Função para mostrar loading
        function showLoading(element) {
            if (element) {
                element.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Carregando...</span></div></div>';
            }
        }

        // Função para formatar números
        function formatNumber(num) {
            return new Intl.NumberFormat('pt-BR').format(num);
        }

        // Função para formatar data
        function formatDate(date) {
            return new Intl.DateTimeFormat('pt-BR').format(new Date(date));
        }

        // Listen for Livewire events
        window.addEventListener('livewire:load', function () {
            Livewire.on('dashboardUpdated', () => {
                console.log('Dashboard atualizado');
            });
        });
    </script>
@stop