@extends('layouts.default')
@section('title', 'DashBoard')

@section('content')

<!-- Container Principal -->
<div class="card border-0 shadow-lg" style="border-radius: 8px; overflow: hidden;">
    <!-- Header do Dashboard -->
    <div class="card-header bg-white border-0 py-3" style="background: linear-gradient(135deg, var(--corPrincipal) 0%, var(--corSecundaria) 100%); border-radius: 0;">
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-white">
                <h2 class="h4 mb-0">
                    <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                </h2>
            </div>
            <div class="text-white text-right" style="margin-right: 50px;">
                <div class="h6 mb-0">
                    <i class="fas fa-calendar-alt mr-1"></i>{{ now()->setTimezone('America/Sao_Paulo')->format('d/m/Y H:i') }}
                </div>
            </div>
        </div>
    </div>

    <!-- Conteúdo do Dashboard -->
    <div class="card-body p-4">
        <!-- Cards de Estatísticas Principais -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{{ route('validaviagem', []) }}" class="card-link">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #ff6b6b;">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="stat-content">
                            <h5>Validação de Viagens</h5>
                            <p class="stat-value">Pendente</p>
                            <span class="stat-link">
                                <i class="fas fa-arrow-right"></i> Validar
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{{ route('listadaer.index', []) }}" class="card-link">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #4ecdc4;">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <div class="stat-content">
                            <h5>Lista do DAER</h5>
                            <p class="stat-value">Relatório</p>
                            <span class="stat-link">
                                <i class="fas fa-arrow-right"></i> Gerar
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{{ route('associadosativos.download', []) }}" target="_blank" class="card-link">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #45b7d1;">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <div class="stat-content">
                            <h5>Associados Ativos</h5>
                            <p class="stat-value">PDF</p>
                            <span class="stat-link">
                                <i class="fas fa-arrow-right"></i> Gerar
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card">
                    <div class="stat-icon" style="background: #a55eea;">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="stat-content">
                        <h5>Sistema</h5>
                        <p class="stat-value">Ativo</p>
                        <div class="stat-status">
                            <i class="fas fa-circle text-success"></i> Online
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cards de Estatísticas com Dados Dinâmicos -->
        <div class="row mb-4">
            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{{ route('associadovalidacao', []) }}" class="card-link">
                    <div class="data-card">
                        <div class="data-icon" style="background: #fd79a8;">
                            <i class="fas fa-user-clock"></i>
                        </div>
                        <div class="data-content">
                            <h2 class="data-number">{{$contValidacoes}}</h2>
                            <h5>Perfis Aguardando</h5>
                            <p class="data-subtitle">Análise</p>
                            <span class="data-link">
                                <i class="fas fa-arrow-right"></i> Acessar
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{{ route('associadosativos', []) }}" class="card-link">
                    <div class="data-card">
                        <div class="data-icon" style="background: #00b894;">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <div class="data-content">
                            <h2 class="data-number">{{$contAssociadosAtivos}}</h2>
                            <h5>Associados Ativos</h5>
                            <p class="data-subtitle">Membros</p>
                            <span class="data-link">
                                <i class="fas fa-arrow-right"></i> Acessar
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{{ route('associados', []) }}" class="card-link">
                    <div class="data-card">
                        <div class="data-icon" style="background: #6c5ce7;">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                        <div class="data-content">
                            <h2 class="data-number">{{$contAssociados}}</h2>
                            <h5>Total de Associados</h5>
                            <p class="data-subtitle">Registros</p>
                            <span class="data-link">
                                <i class="fas fa-arrow-right"></i> Acessar
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Seção de Ações Rápidas -->
        <div class="row">
            <div class="col-12">
                <div class="section-title">
                    <div class="title-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h4 class="title-text">Ações Rápidas</h4>
                    <div class="title-line"></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ route('associados', []) }}" class="card-link">
                            <div class="action-card">
                                <div class="action-icon" style="background: #1254ce;">
                                    <i class="fas fa-user-graduate"></i>
                                </div>
                                <div class="action-content">
                                    <h6>Associados</h6>
                                    <p>Gerenciar</p>
                                    <span class="action-link">
                                        <i class="fas fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ route('associadovalidacao', []) }}" class="card-link">
                            <div class="action-card">
                                <div class="action-icon" style="background: #ffa726;">
                                    <i class="fas fa-user-clock"></i>
                                </div>
                                <div class="action-content">
                                    <h6>Validações</h6>
                                    <p>Aprovar</p>
                                    <span class="action-link">
                                        <i class="fas fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ route('associadosativos', []) }}" class="card-link">
                            <div class="action-card">
                                <div class="action-icon" style="background: #66bb6a;">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div class="action-content">
                                    <h6>Ativos</h6>
                                    <p>Visualizar</p>
                                    <span class="action-link">
                                        <i class="fas fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ route('listadaer.index', []) }}" class="card-link">
                            <div class="action-card">
                                <div class="action-icon" style="background: #17a2b8;">
                                    <i class="fas fa-clipboard-list"></i>
                                </div>
                                <div class="action-content">
                                    <h6>Lista DAER</h6>
                                    <p>Gerar</p>
                                    <span class="action-link">
                                        <i class="fas fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Importar FontAwesome */
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

    /* Links dos cards */
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .card-link:hover {
        text-decoration: none;
        color: inherit;
    }

    /* Cards de Estatísticas */
    .stat-card {
        background: #fafbfc;
        border: none;
        border-radius: 15px;
        padding: 20px;
        height: 100%;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(var(--corPrincipal), 0.1);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(var(--corPrincipal), 0.2);
        background: #f0f4ff;
        border: 1px solid var(--corPrincipal);
        border-top: 4px solid var(--corPrincipal);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        color: white;
        font-size: 1.5rem;
    }

    .stat-content h5 {
        color: #333;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .stat-value {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .stat-link {
        color: var(--corPrincipal);
        font-size: 0.9rem;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .stat-card:hover .stat-link {
        color: var(--corSecundaria);
    }

    .stat-status {
        color: #666;
        font-size: 0.9rem;
    }

    /* Cards de Dados */
    .data-card {
        background: #fafbfc;
        border: none;
        border-radius: 15px;
        padding: 25px;
        height: 100%;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(var(--corPrincipal), 0.1);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .data-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(var(--corPrincipal), 0.2);
        background: #f0f4ff;
        border: 1px solid var(--corPrincipal);
        border-top: 4px solid var(--corPrincipal);
    }

    .data-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: white;
        font-size: 2rem;
    }

    .data-number {
        font-size: 2.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .data-content h5 {
        color: #333;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .data-subtitle {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .data-link {
        color: var(--corPrincipal);
        font-size: 0.9rem;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .data-card:hover .data-link {
        color: var(--corSecundaria);
    }

    /* Cards de Ação */
    .action-card {
        background: #fafbfc;
        border: none;
        border-radius: 15px;
        padding: 20px;
        height: 100%;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(var(--corPrincipal), 0.1);
        position: relative;
        overflow: hidden;
        text-align: center;
        cursor: pointer;
    }

    .action-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(var(--corPrincipal), 0.2);
        background: #f0f4ff;
        border: 1px solid var(--corPrincipal);
        border-top: 4px solid var(--corPrincipal);
    }

    .action-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: white;
        font-size: 1.5rem;
    }

    .action-content h6 {
        color: #333;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .action-content p {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .action-link {
        color: var(--corPrincipal);
        font-size: 1.2rem;
        transition: all 0.3s ease;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e8f0ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .action-card:hover .action-link {
        color: white;
        background: var(--corPrincipal);
        transform: scale(1.1);
    }

    /* Título Moderno */
    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        position: relative;
    }

    .title-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, var(--corPrincipal), var(--corSecundaria));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        margin-right: 15px;
        box-shadow: 0 4px 15px rgba(var(--corPrincipal), 0.3);
        animation: pulse 2s ease-in-out;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .title-text {
        color: #333;
        font-weight: 700;
        margin: 0;
        font-size: 1.5rem;
        position: relative;
    }

    .title-text::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient(135deg, var(--corPrincipal), var(--corSecundaria));
        animation: expandWidth 1.5s ease-in-out forwards;
    }

    @keyframes expandWidth {
        0% { width: 0; }
        100% { width: 100%; }
    }

    .title-line {
        flex: 1;
        height: 2px;
        background: linear-gradient(90deg, var(--corPrincipal), transparent);
        margin-left: 20px;
        border-radius: 1px;
        animation: fadeIn 1s ease-in-out 0.5s both;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Animações de entrada */
    .stat-card, .data-card, .action-card {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .stat-card, .data-card, .action-card {
            margin-bottom: 15px;
        }

        .data-number {
            font-size: 2rem;
        }

        .stat-icon, .data-icon, .action-icon {
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }

        .section-title {
            flex-direction: column;
            text-align: center;
        }

        .title-icon {
            margin-right: 0;
            margin-bottom: 10px;
        }

        .title-line {
            display: none;
        }
    }
</style>

<script>
    // Garantir que os ícones apareçam
    document.addEventListener('DOMContentLoaded', function() {
        // Verificar se FontAwesome está carregado
        if (typeof FontAwesome === 'undefined') {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
            document.head.appendChild(link);
        }

        // Animações de entrada sequenciais
        const cards = document.querySelectorAll('.stat-card, .data-card, .action-card');
        cards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });
    });
</script>

@stop