@extends('admin.layouts.app')

@section('title', 'Avaliações e Gorjetas')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-star text-warning"></i>
                        Avaliações e Gorjetas
                    </h1>
                    <p class="text-muted">Sistema de avaliação completo como o iFood</p>
                </div>
                <div class="btn-group">
                    <button class="btn btn-outline-primary" onclick="avaliacaoSystem.carregarAvaliacoes()">
                        <i class="fas fa-sync"></i> Atualizar
                    </button>
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalNovaAvaliacao">
                        <i class="fas fa-plus"></i> Nova Avaliação
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalAvaliacoes">-</h4>
                            <small>Total de Avaliações</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-star fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="mediaGeral">-</h4>
                            <small>Média Geral</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalGorjetas">-</h4>
                            <small>Total Gorjetas</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-gift fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="valorGorjetas">-</h4>
                            <small>Valor Total</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-money-bill fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="avaliacaoTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="avaliacoes-tab" data-bs-toggle="tab" 
                                    data-bs-target="#avaliacoes" type="button" role="tab">
                                <i class="fas fa-star"></i> Avaliações
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="gorjetas-tab" data-bs-toggle="tab" 
                                    data-bs-target="#gorjetas" type="button" role="tab">
                                <i class="fas fa-gift"></i> Gorjetas
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="estatisticas-tab" data-bs-toggle="tab" 
                                    data-bs-target="#estatisticas" type="button" role="tab">
                                <i class="fas fa-chart-pie"></i> Estatísticas
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="avaliacaoTabContent">
                        <!-- Tab Avaliações -->
                        <div class="tab-pane fade show active" id="avaliacoes" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <select class="form-select" id="filtroTipoAvaliacao">
                                        <option value="">Todos os tipos</option>
                                        <option value="pedido">Pedido</option>
                                        <option value="loja">Loja</option>
                                        <option value="entregador">Entregador</option>
                                        <option value="cliente">Cliente</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <select class="form-select" id="filtroNota">
                                        <option value="">Todas as notas</option>
                                        <option value="5">5 estrelas</option>
                                        <option value="4">4 estrelas</option>
                                        <option value="3">3 estrelas</option>
                                        <option value="2">2 estrelas</option>
                                        <option value="1">1 estrela</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="date" class="form-control" id="filtroData">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-outline-primary w-100" onclick="avaliacaoSystem.filtrarAvaliacoes()">
                                        Filtrar
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Tipo</th>
                                            <th>Avaliador</th>
                                            <th>Nota</th>
                                            <th>Comentário</th>
                                            <th>Data</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tabelaAvaliacoes">
                                        <!-- Dados carregados via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tab Gorjetas -->
                        <div class="tab-pane fade" id="gorjetas" role="tabpanel">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <select class="form-select" id="filtroStatusGorjeta">
                                        <option value="">Todos os status</option>
                                        <option value="pendente">Pendente</option>
                                        <option value="pago">Pago</option>
                                        <option value="rejeitado">Rejeitado</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <select class="form-select" id="filtroMetodoPagamento">
                                        <option value="">Todos os métodos</option>
                                        <option value="pix">PIX</option>
                                        <option value="cartao">Cartão</option>
                                        <option value="dinheiro">Dinheiro</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="date" class="form-control" id="filtroDataGorjeta">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-outline-success w-100" onclick="avaliacaoSystem.filtrarGorjetas()">
                                        Filtrar
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Cliente</th>
                                            <th>Entregador</th>
                                            <th>Valor</th>
                                            <th>Método</th>
                                            <th>Status</th>
                                            <th>Data</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tabelaGorjetas">
                                        <!-- Dados carregados via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tab Estatísticas -->
                        <div class="tab-pane fade" id="estatisticas" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Distribuição de Notas</h6>
                                    <canvas id="graficoNotas" width="400" height="200"></canvas>
                                </div>
                                <div class="col-md-6">
                                    <h6>Avaliações por Tipo</h6>
                                    <canvas id="graficoTipos" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nova Avaliação -->
<div class="modal fade" id="modalNovaAvaliacao" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nova Avaliação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formNovaAvaliacao">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="selectPedidoAvaliacao" class="form-label">Pedido</label>
                                <select class="form-select" id="selectPedidoAvaliacao" required>
                                    <option value="">Selecione um pedido</option>
                                    <!-- Carregado via JavaScript -->
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="selectTipoAvaliacao" class="form-label">Tipo de Avaliação</label>
                                <select class="form-select" id="selectTipoAvaliacao" required>
                                    <option value="">Selecione o tipo</option>
                                    <option value="pedido">Pedido</option>
                                    <option value="loja">Loja</option>
                                    <option value="entregador">Entregador</option>
                                    <option value="cliente">Cliente</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Nota Geral</label>
                        <div class="rating-input" id="ratingInput">
                            <!-- Estrelas geradas via JavaScript -->
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="comentarioAvaliacao" class="form-label">Comentário</label>
                        <textarea class="form-control" id="comentarioAvaliacao" rows="3" 
                                  placeholder="Compartilhe sua experiência..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Critérios Específicos</label>
                        <div id="criteriosEspecificos">
                            <!-- Carregado via JavaScript baseado no tipo -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Enviar Avaliação</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Nova Gorjeta -->
<div class="modal fade" id="modalNovaGorjeta" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nova Gorjeta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formNovaGorjeta">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="selectPedidoGorjeta" class="form-label">Pedido</label>
                        <select class="form-select" id="selectPedidoGorjeta" required>
                            <option value="">Selecione um pedido</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="selectEntregadorGorjeta" class="form-label">Entregador</label>
                        <select class="form-select" id="selectEntregadorGorjeta" required>
                            <option value="">Selecione o entregador</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Valor da Gorjeta</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="number" class="form-control" id="valorGorjeta" 
                                       min="0.50" step="0.50" placeholder="0.00">
                            </div>
                            <div class="col-6">
                                <select class="form-select" id="percentualGorjeta">
                                    <option value="">Percentual</option>
                                    <option value="5">5%</option>
                                    <option value="10">10%</option>
                                    <option value="15">15%</option>
                                    <option value="20">20%</option>
                                    <option value="custom">Personalizado</option>
                                </select>
                            </div>
                        </div>
                        <div id="sugestoesGorjeta" class="mt-2">
                            <!-- Sugestões geradas via JavaScript -->
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="metodoPagamentoGorjeta" class="form-label">Método de Pagamento</label>
                        <select class="form-select" id="metodoPagamentoGorjeta" required>
                            <option value="">Selecione o método</option>
                            <option value="pix">PIX</option>
                            <option value="cartao">Cartão</option>
                            <option value="dinheiro">Dinheiro</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="observacaoGorjeta" class="form-label">Observação (Opcional)</label>
                        <textarea class="form-control" id="observacaoGorjeta" rows="2" 
                                  placeholder="Alguma observação para o entregador..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Enviar Gorjeta</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Visualizar Avaliação -->
<div class="modal fade" id="modalVisualizarAvaliacao" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalhes da Avaliação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detalhesAvaliacao">
                <!-- Conteúdo carregado via JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

<script>
// Sistema de Avaliações e Gorjetas
const avaliacaoSystem = {
    avaliacoes: [],
    gorjetas: [],
    stats: {},
    notaAtual: 0,

    async init() {
        await this.carregarAvaliacoes();
        await this.carregarGorjetas();
        await this.carregarEstatisticas();
        this.bindEvents();
        this.inicializarGraficos();
    },

    bindEvents() {
        // Modal Nova Avaliação
        document.getElementById('selectTipoAvaliacao').addEventListener('change', () => {
            this.carregarCriteriosEspecificos();
        });

        document.getElementById('formNovaAvaliacao').addEventListener('submit', (e) => {
            e.preventDefault();
            this.salvarAvaliacao();
        });

        // Modal Nova Gorjeta
        document.getElementById('selectPedidoGorjeta').addEventListener('change', () => {
            this.carregarEntregadoresPedido();
        });

        document.getElementById('percentualGorjeta').addEventListener('change', () => {
            this.calcularValorGorjeta();
        });

        document.getElementById('formNovaGorjeta').addEventListener('submit', (e) => {
            e.preventDefault();
            this.salvarGorjeta();
        });

        // Inicializar estrelas de avaliação
        this.criarRatingInput();
    },

    async carregarAvaliacoes() {
        try {
            const response = await fetch('/admin/avaliacoes');
            const data = await response.json();
            
            if (data.success) {
                this.avaliacoes = data.avaliacoes.data;
                this.stats = data.stats;
                this.renderizarTabelaAvaliacoes();
                this.atualizarCards();
            }
        } catch (error) {
            console.error('Erro ao carregar avaliações:', error);
        }
    },

    async carregarGorjetas() {
        try {
            const response = await fetch('/admin/gorjetas');
            const data = await response.json();
            
            if (data.success) {
                this.gorjetas = data.gorjetas.data;
                this.renderizarTabelaGorjetas();
                this.atualizarCards();
            }
        } catch (error) {
            console.error('Erro ao carregar gorjetas:', error);
        }
    },

    renderizarTabelaAvaliacoes() {
        const tbody = document.getElementById('tabelaAvaliacoes');
        
        if (this.avaliacoes.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        <i class="fas fa-star fa-2x mb-2"></i>
                        <p>Nenhuma avaliação encontrada</p>
                    </td>
                </tr>
            `;
            return;
        }

        const html = this.avaliacoes.map(avaliacao => {
            const tipoNome = {
                'pedido': 'Pedido',
                'loja': 'Loja', 
                'entregador': 'Entregador',
                'cliente': 'Cliente'
            }[avaliacao.tipo] || 'Desconhecido';

            const estrelas = '★'.repeat(avaliacao.nota) + '☆'.repeat(5 - avaliacao.nota);
            const corNota = avaliacao.nota >= 4 ? 'text-success' : 
                          avaliacao.nota >= 3 ? 'text-warning' : 'text-danger';

            return `
                <tr>
                    <td>#${avaliacao.pedido?.numero_pedido || 'N/A'}</td>
                    <td><span class="badge bg-secondary">${tipoNome}</span></td>
                    <td>${avaliacao.avaliador?.name || 'N/A'}</td>
                    <td>
                        <span class="${corNota}">${estrelas}</span>
                        <small class="text-muted">(${avaliacao.nota})</small>
                    </td>
                    <td>
                        <div class="text-truncate" style="max-width: 200px;" title="${avaliacao.comentario || ''}">
                            ${avaliacao.comentario || '<em>Sem comentário</em>'}
                        </div>
                    </td>
                    <td>${this.formatarData(avaliacao.created_at)}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" onclick="avaliacaoSystem.visualizarAvaliacao(${avaliacao.id})">
                            <i class="fas fa-eye"></i>
                        </button>
                    </td>
                </tr>
            `;
        }).join('');

        tbody.innerHTML = html;
    },

    renderizarTabelaGorjetas() {
        const tbody = document.getElementById('tabelaGorjetas');
        
        if (this.gorjetas.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center text-muted">
                        <i class="fas fa-gift fa-2x mb-2"></i>
                        <p>Nenhuma gorjeta encontrada</p>
                    </td>
                </tr>
            `;
            return;
        }

        const html = this.gorjetas.map(gorjeta => {
            const statusCor = {
                'pendente': 'bg-warning',
                'pago': 'bg-success',
                'rejeitado': 'bg-danger'
            }[gorjeta.status] || 'bg-secondary';

            const statusNome = {
                'pendente': 'Pendente',
                'pago': 'Pago',
                'rejeitado': 'Rejeitado'
            }[gorjeta.status] || 'Desconhecido';

            const metodoNome = {
                'pix': 'PIX',
                'cartao': 'Cartão',
                'dinheiro': 'Dinheiro'
            }[gorjeta.metodo_pagamento] || 'Desconhecido';

            return `
                <tr>
                    <td>#${gorjeta.pedido?.numero_pedido || 'N/A'}</td>
                    <td>${gorjeta.cliente?.name || 'N/A'}</td>
                    <td>${gorjeta.entregador?.name || 'N/A'}</td>
                    <td><strong>R$ ${parseFloat(gorjeta.valor).toFixed(2)}</strong></td>
                    <td><span class="badge bg-info">${metodoNome}</span></td>
                    <td><span class="badge ${statusCor}">${statusNome}</span></td>
                    <td>${this.formatarData(gorjeta.created_at)}</td>
                    <td>
                        <div class="btn-group">
                            ${gorjeta.status === 'pendente' ? `
                                <button class="btn btn-sm btn-outline-success" onclick="avaliacaoSystem.aprovarGorjeta(${gorjeta.id})">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="avaliacaoSystem.rejeitarGorjeta(${gorjeta.id})">
                                    <i class="fas fa-times"></i>
                                </button>
                            ` : ''}
                        </div>
                    </td>
                </tr>
            `;
        }).join('');

        tbody.innerHTML = html;
    },

    criarRatingInput() {
        const container = document.getElementById('ratingInput');
        const html = Array.from({length: 5}, (_, i) => `
            <i class="fas fa-star star-rating ${i < this.notaAtual ? 'text-warning' : 'text-muted'}" 
               data-nota="${i + 1}" onclick="avaliacaoSystem.setNota(${i + 1})"></i>
        `).join('');
        
        container.innerHTML = html;
    },

    setNota(nota) {
        this.notaAtual = nota;
        const estrelas = document.querySelectorAll('#ratingInput .star-rating');
        estrelas.forEach((estrela, index) => {
            estrela.className = `fas fa-star star-rating ${index < nota ? 'text-warning' : 'text-muted'}`;
        });
    },

    carregarCriteriosEspecificos() {
        const tipo = document.getElementById('selectTipoAvaliacao').value;
        const container = document.getElementById('criteriosEspecificos');
        
        const criterios = {
            pedido: [
                { id: 'tempo_entrega', label: 'Tempo de Entrega' },
                { id: 'qualidade_comida', label: 'Qualidade da Comida' },
                { id: 'embalagem', label: 'Embalagem' },
                { id: 'temperatura', label: 'Temperatura dos Alimentos' }
            ],
            loja: [
                { id: 'tempo_preparo', label: 'Tempo de Preparo' },
                { id: 'qualidade_comida', label: 'Qualidade da Comida' },
                { id: 'atendimento', label: 'Atendimento' },
                { id: 'higiene', label: 'Higiene' }
            ],
            entregador: [
                { id: 'pontualidade', label: 'Pontualidade' },
                { id: 'cortesia', label: 'Cortesia' },
                { id: 'cuidados_entrega', label: 'Cuidados na Entrega' },
                { id: 'comunicacao', label: 'Comunicação' }
            ]
        };

        if (criterios[tipo]) {
            const html = criterios[tipo].map(criterio => `
                <div class="mb-2">
                    <label class="form-label">${criterio.label}</label>
                    <div class="rating-input">
                        ${Array.from({length: 5}, (_, i) => `
                            <i class="fas fa-star text-muted" data-criterio="${criterio.id}" data-nota="${i + 1}"
                               onclick="avaliacaoSystem.setNotaCriterio('${criterio.id}', ${i + 1})"></i>
                        `).join('')}
                    </div>
                </div>
            `).join('');
            
            container.innerHTML = html;
        } else {
            container.innerHTML = '<p class="text-muted">Nenhum critério específico para este tipo</p>';
        }
    },

    setNotaCriterio(criterioId, nota) {
        const criterios = document.querySelectorAll(`[data-criterio="${criterioId}"]`);
        criterios.forEach((estrela, index) => {
            estrela.className = `fas fa-star ${index < nota ? 'text-warning' : 'text-muted'}`;
        });
    },

    async salvarAvaliacao() {
        try {
            const formData = new FormData();
            formData.append('pedido_id', document.getElementById('selectPedidoAvaliacao').value);
            formData.append('tipo', document.getElementById('selectTipoAvaliacao').value);
            formData.append('nota', this.notaAtual);
            formData.append('comentario', document.getElementById('comentarioAvaliacao').value);

            const response = await fetch('/admin/avaliacoes', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            
            if (data.success) {
                // Fechar modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('modalNovaAvaliacao'));
                modal.hide();
                
                // Limpar formulário
                document.getElementById('formNovaAvaliacao').reset();
                this.notaAtual = 0;
                this.criarRatingInput();
                
                // Recarregar dados
                await this.carregarAvaliacoes();
                
                this.mostrarSucesso('Avaliação salva com sucesso!');
            }
        } catch (error) {
            console.error('Erro ao salvar avaliação:', error);
            this.mostrarErro('Erro ao salvar avaliação');
        }
    },

    async carregarEntregadoresPedido() {
        const pedidoId = document.getElementById('selectPedidoGorjeta').value;
        if (!pedidoId) return;

        try {
            // Buscar dados do pedido para pegar o entregador
            const response = await fetch(`/admin/avaliacoes/pedido/${pedidoId}`);
            const data = await response.json();
            
            if (data.success && data.avaliacoes.length > 0) {
                const pedido = data.avaliacoes[0].pedido;
                if (pedido.entregador_id) {
                    // Buscar dados do entregador
                    // Por simplicidade, vamos assumir que temos a informação
                }
            }
        } catch (error) {
            console.error('Erro ao carregar entregadores:', error);
        }
    },

    calcularValorGorjeta() {
        const percentual = document.getElementById('percentualGorjeta').value;
        const valorGorjeta = document.getElementById('valorGorjeta');
        
        if (percentual === 'custom') {
            valorGorjeta.removeAttribute('readonly');
            valorGorjeta.focus();
        } else if (percentual) {
            // Calcular baseado no valor do pedido
            valorGorjeta.value = ''; // Reset para cálculo posterior
        }
    },

    async salvarGorjeta() {
        try {
            const formData = new FormData();
            formData.append('pedido_id', document.getElementById('selectPedidoGorjeta').value);
            formData.append('entregador_id', document.getElementById('selectEntregadorGorjeta').value);
            formData.append('valor', document.getElementById('valorGorjeta').value);
            formData.append('metodo_pagamento', document.getElementById('metodoPagamentoGorjeta').value);
            formData.append('observacao', document.getElementById('observacaoGorjeta').value);

            const response = await fetch('/admin/gorjetas', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('modalNovaGorjeta'));
                modal.hide();
                
                document.getElementById('formNovaGorjeta').reset();
                
                await this.carregarGorjetas();
                this.mostrarSucesso('Gorjeta salva com sucesso!');
            }
        } catch (error) {
            console.error('Erro ao salvar gorjeta:', error);
            this.mostrarErro('Erro ao salvar gorjeta');
        }
    },

    async visualizarAvaliacao(id) {
        try {
            const response = await fetch(`/admin/avaliacoes/${id}`);
            const data = await response.json();
            
            if (data.success) {
                const avaliacao = data.avaliacao;
                
                const html = `
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Informações Básicas</h6>
                            <p><strong>Pedido:</strong> #${avaliacao.pedido.numero_pedido}</p>
                            <p><strong>Tipo:</strong> ${avaliacao.tipo}</p>
                            <p><strong>Avaliador:</strong> ${avaliacao.avaliador.name}</p>
                            <p><strong>Nota:</strong> ${'★'.repeat(avaliacao.nota)}${'☆'.repeat(5 - avaliacao.nota)}</p>
                            <p><strong>Data:</strong> ${this.formatarData(avaliacao.created_at)}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Comentário</h6>
                            <p>${avaliacao.comentario || 'Sem comentário'}</p>
                        </div>
                    </div>
                    ${avaliacao.criterios ? this.renderizarCriterios(avaliacao.criterios) : ''}
                `;
                
                document.getElementById('detalhesAvaliacao').innerHTML = html;
                
                const modal = new bootstrap.Modal(document.getElementById('modalVisualizarAvaliacao'));
                modal.show();
            }
        } catch (error) {
            console.error('Erro ao visualizar avaliação:', error);
        }
    },

    renderizarCriterios(criterios) {
        const html = Object.entries(criterios).map(([chave, nota]) => `
            <div class="d-flex justify-content-between">
                <span>${chave.replace(/_/g, ' ').toUpperCase()}</span>
                <span>${'★'.repeat(nota)}${'☆'.repeat(5 - nota)}</span>
            </div>
        `).join('');
        
        return `
            <div class="mt-3">
                <h6>Critérios Específicos</h6>
                ${html}
            </div>
        `;
    },

    atualizarCards() {
        document.getElementById('totalAvaliacoes').textContent = this.stats.total || 0;
        document.getElementById('mediaGeral').textContent = (this.stats.media_geral || 0).toFixed(1);
        document.getElementById('totalGorjetas').textContent = this.stats.total_gorjetas || 0;
        document.getElementById('valorGorjetas').textContent = 'R$ ' + (this.stats.valor_total || 0).toFixed(2);
    },

    inicializarGraficos() {
        // Gráfico de distribuição de notas
        const ctxNotas = document.getElementById('graficoNotas').getContext('2d');
        new Chart(ctxNotas, {
            type: 'bar',
            data: {
                labels: ['1 ★', '2 ★', '3 ★', '4 ★', '5 ★'],
                datasets: [{
                    label: 'Quantidade',
                    data: [0, 0, 0, 0, 0], // Dados reais a serem carregados
                    backgroundColor: ['#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997']
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Gráfico de avaliações por tipo
        const ctxTipos = document.getElementById('graficoTipos').getContext('2d');
        new Chart(ctxTipos, {
            type: 'doughnut',
            data: {
                labels: ['Pedido', 'Loja', 'Entregador', 'Cliente'],
                datasets: [{
                    data: [0, 0, 0, 0], // Dados reais a serem carregados
                    backgroundColor: ['#007bff', '#28a745', '#ffc107', '#17a2b8']
                }]
            },
            options: {
                responsive: true
            }
        });
    },

    formatarData(data) {
        return new Date(data).toLocaleDateString('pt-BR');
    },

    mostrarSucesso(mensagem) {
        alert(mensagem);
    },

    mostrarErro(mensagem) {
        alert(mensagem);
    }
};

// Inicializar sistema
document.addEventListener('DOMContentLoaded', function() {
    avaliacaoSystem.init();
});
</script>

<style>
.star-rating {
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 0.25rem;
    transition: color 0.2s ease;
}

.star-rating:hover {
    color: #ffc107 !important;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.text-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

.badge {
    font-size: 0.75em;
}
</style>
@endpush