@extends('adm-embarcador.layout')

@section('title', 'Relatório Financeiro - Adm do Embarcados')

@section('extra_css')
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection

@section('content')
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-chart-line me-2"></i>
                        Relatório Financeiro
                    </h1>
                    <p class="text-muted mb-0">Análise de custos e economia em suas cotações</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-secondary btn-sm" onclick="exportarRelatorio()">
                        <i class="fas fa-download me-1"></i>
                        Exportar
                    </button>
                    <button class="btn btn-primary btn-sm" onclick="agendarRelatorio()">
                        <i class="fas fa-calendar-plus me-1"></i>
                        Agendar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros de Período -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="periodo" class="form-label">Período</label>
                            <select class="form-select" id="periodo">
                                <option value="7">Últimos 7 dias</option>
                                <option value="30" selected>Últimos 30 dias</option>
                                <option value="90">Últimos 3 meses</option>
                                <option value="365">Último ano</option>
                                <option value="custom">Personalizado</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="dataInicio" class="form-label">Data Início</label>
                            <input type="date" class="form-control" id="dataInicio">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="dataFim" class="form-label">Data Fim</label>
                            <input type="date" class="form-control" id="dataFim">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="tipoRelatorio" class="form-label">Tipo de Relatório</label>
                            <select class="form-select" id="tipoRelatorio">
                                <option value="geral">Geral</option>
                                <option value="por-rota">Por Rota</option>
                                <option value="por-transportadora">Por Transportadora</option>
                                <option value="comparativo">Comparativo</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button class="btn btn-primary" onclick="aplicarFiltros()">
                                <i class="fas fa-search me-1"></i>
                                Aplicar Filtros
                            </button>
                            <button class="btn btn-outline-secondary ms-2" onclick="limparFiltros()">
                                <i class="fas fa-times me-1"></i>
                                Limpar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cards de Resumo -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Gastos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R$ 45.680,00</div>
                            <div class="text-xs text-success">
                                <i class="fas fa-arrow-up"></i> 8% vs período anterior
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Economia Total
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R$ 12.450,00</div>
                            <div class="text-xs text-success">
                                <i class="fas fa-arrow-up"></i> 15% vs período anterior
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-piggy-bank fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Cotações Analisadas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">156</div>
                            <div class="text-xs text-info">
                                <i class="fas fa-chart-line"></i> Média de 5,2 por dia
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Economia Média
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">R$ 79,80</div>
                            <div class="text-xs text-warning">
                                <i class="fas fa-percentage"></i> Por cotação
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calculator fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Evolução de Gastos e Economia</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">Opções:</div>
                            <a class="dropdown-item" href="#" onclick="alterarVisualizacao('diaria')">Visualização Diária</a>
                            <a class="dropdown-item" href="#" onclick="alterarVisualizacao('semanal')">Visualização Semanal</a>
                            <a class="dropdown-item" href="#" onclick="alterarVisualizacao('mensal')">Visualização Mensal</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="evolucaoChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Distribuição por Rota</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="rotasChart"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        <span class="mr-2">
                            <i class="fas fa-circle text-primary"></i> SP → RJ
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-success"></i> MG → SP
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-info"></i> RS → PR
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-warning"></i> Outras
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela Comparativa -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Top Transportadoras Mais Econômicas</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Transportadora</th>
                                    <th>Total de Cotações</th>
                                    <th>Valor Médio</th>
                                    <th>Economia Total</th>
                                    <th>Economia Média</th>
                                    <th>% de Economia</th>
                                    <th>Avaliação</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Logo">
                                            <div>
                                                <strong>Transportadora A</strong>
                                                <br><small class="text-muted">Especialista em SP-RJ</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>45</td>
                                    <td>R$ 850,00</td>
                                    <td>R$ 3.450,00</td>
                                    <td>R$ 76,67</td>
                                    <td><span class="badge badge-success">9,0%</span></td>
                                    <td>4.8 ⭐</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Logo">
                                            <div>
                                                <strong>Transportadora B</strong>
                                                <br><small class="text-muted">Nacional</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>38</td>
                                    <td>R$ 920,00</td>
                                    <td>R$ 2.890,00</td>
                                    <td>R$ 76,05</td>
                                    <td><span class="badge badge-success">8,3%</span></td>
                                    <td>4.6 ⭐</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Logo">
                                            <div>
                                                <strong>Transportadora C</strong>
                                                <br><small class="text-muted">Especialista em MG-SP</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>32</td>
                                    <td>R$ 780,00</td>
                                    <td>R$ 2.560,00</td>
                                    <td>R$ 80,00</td>
                                    <td><span class="badge badge-success">10,3%</span></td>
                                    <td>4.7 ⭐</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Logo">
                                            <div>
                                                <strong>Transportadora D</strong>
                                                <br><small class="text-muted">Regional Sul</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>28</td>
                                    <td>R$ 650,00</td>
                                    <td>R$ 1.820,00</td>
                                    <td>R$ 65,00</td>
                                    <td><span class="badge badge-success">10,0%</span></td>
                                    <td>4.5 ⭐</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Logo">
                                            <div>
                                                <strong>Transportadora E</strong>
                                                <br><small class="text-muted">Nacional Premium</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>13</td>
                                    <td>R$ 1.150,00</td>
                                    <td>R$ 1.730,00</td>
                                    <td>R$ 133,08</td>
                                    <td><span class="badge badge-success">11,6%</span></td>
                                    <td>4.9 ⭐</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra_js')
<script>
    $(document).ready(function() {
        // Configurar datas padrão (últimos 30 dias)
        const hoje = new Date();
        const trintaDiasAtras = new Date(hoje.getTime() - (30 * 24 * 60 * 60 * 1000));

        $('#dataInicio').val(trintaDiasAtras.toISOString().split('T')[0]);
        $('#dataFim').val(hoje.toISOString().split('T')[0]);

        // Inicializar gráficos
        inicializarGraficos();

        // Event listeners
        $('#periodo').on('change', function() {
            const periodo = $(this).val();
            if (periodo !== 'custom') {
                const hoje = new Date();
                const diasAtras = parseInt(periodo);
                const dataInicio = new Date(hoje.getTime() - (diasAtras * 24 * 60 * 60 * 1000));

                $('#dataInicio').val(dataInicio.toISOString().split('T')[0]);
                $('#dataFim').val(hoje.toISOString().split('T')[0]);
            }
        });
    });

    function inicializarGraficos() {
        // Gráfico de evolução
        const evolucaoCtx = document.getElementById('evolucaoChart').getContext('2d');
        new Chart(evolucaoCtx, {
            type: 'line',
            data: {
                labels: ['01/01', '05/01', '10/01', '15/01', '20/01', '25/01', '30/01'],
                datasets: [{
                    label: 'Gastos (R$)',
                    data: [1200, 1350, 980, 1450, 1100, 1300, 1250],
                    borderColor: 'rgb(220, 53, 69)',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    tension: 0.1
                }, {
                    label: 'Economia (R$)',
                    data: [180, 220, 150, 280, 200, 250, 230],
                    borderColor: 'rgb(40, 167, 69)',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Gráfico de rotas
        const rotasCtx = document.getElementById('rotasChart').getContext('2d');
        new Chart(rotasCtx, {
            type: 'doughnut',
            data: {
                labels: ['SP → RJ', 'MG → SP', 'RS → PR', 'Outras'],
                datasets: [{
                    data: [35, 25, 20, 20],
                    backgroundColor: [
                        'rgb(78, 115, 223)',
                        'rgb(40, 167, 69)',
                        'rgb(23, 162, 184)',
                        'rgb(255, 193, 7)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }

    function aplicarFiltros() {
        const periodo = $('#periodo').val();
        const dataInicio = $('#dataInicio').val();
        const dataFim = $('#dataFim').val();
        const tipoRelatorio = $('#tipoRelatorio').val();

        // Simulação de aplicação de filtros
        Swal.fire({
            title: 'Aplicando Filtros...',
            text: 'Atualizando relatório com os novos parâmetros',
            icon: 'info',
            timer: 1500,
            showConfirmButton: false
        }).then(() => {
            Swal.fire({
                title: 'Filtros Aplicados!',
                text: 'Relatório atualizado com sucesso.',
                icon: 'success',
                timer: 1000,
                showConfirmButton: false
            });
        });
    }

    function limparFiltros() {
        $('#periodo').val('30');
        $('#dataInicio').val('');
        $('#dataFim').val('');
        $('#tipoRelatorio').val('geral');

        // Configurar datas padrão
        const hoje = new Date();
        const trintaDiasAtras = new Date(hoje.getTime() - (30 * 24 * 60 * 60 * 1000));

        $('#dataInicio').val(trintaDiasAtras.toISOString().split('T')[0]);
        $('#dataFim').val(hoje.toISOString().split('T')[0]);
    }

    function alterarVisualizacao(tipo) {
        Swal.fire({
            title: 'Alterando Visualização',
            text: `Mudando para visualização ${tipo}`,
            icon: 'info',
            timer: 1000,
            showConfirmButton: false
        });
    }

    function exportarRelatorio() {
        Swal.fire({
            title: 'Exportando Relatório...',
            text: 'Preparando arquivo para download',
            icon: 'info',
            timer: 2000,
            showConfirmButton: false
        }).then(() => {
            Swal.fire({
                title: 'Relatório Exportado!',
                text: 'Arquivo PDF gerado com sucesso.',
                icon: 'success'
            });
        });
    }

    function agendarRelatorio() {
        Swal.fire({
            title: 'Agendar Relatório',
            html: `
                <div class="text-left">
                    <div class="mb-3">
                        <label class="form-label">Frequência</label>
                        <select class="form-select" id="frequenciaRelatorio">
                            <option value="semanal">Semanal</option>
                            <option value="mensal">Mensal</option>
                            <option value="trimestral">Trimestral</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" id="emailRelatorio" placeholder="seu@email.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Formato</label>
                        <select class="form-select" id="formatoRelatorio">
                            <option value="pdf">PDF</option>
                            <option value="excel">Excel</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Agendar',
            cancelButtonText: 'Cancelar',
            preConfirm: () => {
                const frequencia = document.getElementById('frequenciaRelatorio').value;
                const email = document.getElementById('emailRelatorio').value;
                const formato = document.getElementById('formatoRelatorio').value;

                if (!email) {
                    Swal.showValidationMessage('Por favor, informe um email válido');
                    return false;
                }

                return { frequencia, email, formato };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Relatório Agendado!',
                    text: 'Você receberá o relatório por email conforme agendado.',
                    icon: 'success'
                });
            }
        });
    }
</script>
@endsection