@extends('layouts.principal')

@section('titulo', 'Admin - Pagamentos - MNGD Sistemas')

@section('conteudo')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="dashboard-welcome">
            <h1>Gerenciar Pagamentos</h1>
            <p>Visualize todos os pagamentos</p>
        </div>
        <div class="dashboard-actions">
            <div class="filter-buttons">
                <a href="{{ route('admin.pagamentos.index') }}" class="btn-filter {{ !isset($status) || $status === 'todos' ? 'active' : '' }}">
                    Todos
                </a>
                <a href="{{ route('admin.pagamentos.filtrar', ['status' => 'pendente']) }}" class="btn-filter {{ isset($status) && $status === 'pendente' ? 'active' : '' }}">
                    Pendentes
                </a>
                <a href="{{ route('admin.pagamentos.filtrar', ['status' => 'pago']) }}" class="btn-filter {{ isset($status) && $status === 'pago' ? 'active' : '' }}">
                    Pagos
                </a>
                <a href="{{ route('admin.pagamentos.filtrar', ['status' => 'cancelado']) }}" class="btn-filter {{ isset($status) && $status === 'cancelado' ? 'active' : '' }}">
                    Cancelados
                </a>
            </div>
        </div>
    </div>

    <div class="admin-table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Licença</th>
                    <th>Valor</th>
                    <th>Status</th>
                    <th>Mercado Pago ID</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pagamentos as $pagamento)
                    <tr>
                        <td>{{ $pagamento->id }}</td>
                        <td>
                            @if($pagamento->licenca)
                                Licença #{{ $pagamento->licenca->id }} - {{ $pagamento->licenca->produto->nome }}
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                        <td>R$ {{ number_format($pagamento->valor, 2, ',', '.') }}</td>
                        <td>
                            <span class="status-badge {{ $pagamento->status }}">
                                {{ ucfirst($pagamento->status) }}
                            </span>
                        </td>
                        <td>
                            <code class="mp-id">{{ $pagamento->mercado_pago_id }}</code>
                        </td>
                        <td>{{ $pagamento->created_at->format('d/m/Y H:i') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">Nenhum pagamento encontrado</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<style>
.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-filter {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #e2e8f0;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-filter:hover {
    background: #cbd5e0;
}

.btn-filter.active {
    background: #667eea;
    color: white;
}

.admin-table-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: #f7fafc;
}

.admin-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #2d3748;
    border-bottom: 2px solid #e2e8f0;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.admin-table tr:hover {
    background: #f7fafc;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.status-badge.pendente {
    background: #fed7d7;
    color: #742a2a;
}

.status-badge.pago {
    background: #c6f6d5;
    color: #22543d;
}

.status-badge.cancelado {
    background: #e2e8f0;
    color: #2d3748;
}

.mp-id {
    background: #2d3748;
    color: #68d391;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: #a0aec0;
}

@media (max-width: 768px) {
    .admin-table-container {
        padding: 1rem;
    }

    .admin-table {
        font-size: 0.875rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
    }

    .filter-buttons {
        flex-direction: column;
    }

    .btn-filter {
        width: 100%;
        text-align: center;
    }
}
</style>
@endsection