@extends('layouts.admin')

@section('title', 'Gestão Financeira')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4 p-4 rounded" style="background-color: #f8fafc; border-left: 4px solid rgb(1, 15, 27);">
        <div>
            <h3 class="mb-1" style="color: rgb(1, 15, 27); font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Gestão Financeira</h3>
            <p class="text-muted mb-0">Controle e monitoramento de pagamentos</p>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="mb-4 p-4 rounded" style="background-color: white; border: 1px solid #e2e8f0;">
        <form method="GET" action="{{ route('admin.payments') }}">
            <div class="row g-3">
                <div class="col-md-2">
                    <label for="payment_id" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">ID do Pagamento</label>
                    <input type="text" 
                           class="form-control" 
                           id="payment_id" 
                           name="payment_id" 
                           value="{{ request('payment_id') }}"
                           placeholder="Ex: 0001"
                           style="border-color: #d1d5db; padding: 8px 12px;">
                </div>
                
                <div class="col-md-3">
                    <label for="user_name" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Nome do Usuário</label>
                    <input type="text" 
                           class="form-control" 
                           id="user_name" 
                           name="user_name" 
                           value="{{ request('user_name') }}"
                           placeholder="Nome do usuário"
                           style="border-color: #d1d5db; padding: 8px 12px;">
                </div>
                
                <div class="col-md-3">
                    <label for="user_email" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Email do Usuário</label>
                    <input type="email" 
                           class="form-control" 
                           id="user_email" 
                           name="user_email" 
                           value="{{ request('user_email') }}"
                           placeholder="email@exemplo.com"
                           style="border-color: #d1d5db; padding: 8px 12px;">
                </div>
                
                <div class="col-md-2">
                    <label for="status" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Status</label>
                    <select class="form-select" id="status" name="status" style="border-color: #d1d5db; padding: 8px 12px;">
                        <option value="">Todos</option>
                        <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Pagos</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pendentes</option>
                        <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Falharam</option>
                        <option value="refunded" {{ request('status') === 'refunded' ? 'selected' : '' }}>Estornados</option>
                    </select>
                </div>
                

            </div>
            
            <div class="row g-3 mt-2">
                                <div class="col-md-2">
                    <label for="start_date" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Data Inicial</label>
                    <input type="date" 
                           class="form-control" 
                           id="start_date" 
                           name="start_date" 
                           value="{{ request('start_date') }}"
                           style="border-color: #d1d5db; padding: 8px 12px;">
                </div>
                <div class="col-md-2">
                    <label for="end_date" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Data Final</label>
                    <input type="date" 
                           class="form-control" 
                           id="end_date" 
                           name="end_date" 
                           value="{{ request('end_date') }}"
                           style="border-color: #d1d5db; padding: 8px 12px;">
                </div>
                
                <div class="col-md-10 d-flex align-items-end gap-2">
                    <button type="submit" class="btn text-white px-4" style="background-color: rgb(243, 158, 11); border-radius: 6px; border: none;">
                        <i class="fas fa-search me-2"></i>Filtrar
                    </button>
                    <a href="{{ route('admin.payments') }}" class="btn btn-outline-secondary px-4" style="border-radius: 6px;">
                        <i class="fas fa-undo me-2"></i>Limpar Filtros
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="rounded-lg shadow-sm p-4" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background-color: #10b981; color: white;">
                        <i class="fas fa-check fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-muted mb-1" style="font-size: 0.875rem;">Pagos</p>
                        <h4 class="mb-0" style="color: rgb(1, 15, 27); font-weight: 600;">{{ $payments->where('status', 'paid')->count() }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="rounded-lg shadow-sm p-4" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background-color: #f59e0b; color: white;">
                        <i class="fas fa-clock fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-muted mb-1" style="font-size: 0.875rem;">Pendentes</p>
                        <h4 class="mb-0" style="color: rgb(1, 15, 27); font-weight: 600;">{{ $payments->where('status', 'pending')->count() }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="rounded-lg shadow-sm p-4" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background-color: #ef4444; color: white;">
                        <i class="fas fa-times fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-muted mb-1" style="font-size: 0.875rem;">Falharam</p>
                        <h4 class="mb-0" style="color: rgb(1, 15, 27); font-weight: 600;">{{ $payments->where('status', 'failed')->count() }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="rounded-lg shadow-sm p-4" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background-color: rgb(1, 15, 27); color: white;">
                        <i class="fas fa-dollar-sign fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-muted mb-1" style="font-size: 0.875rem;">Total Faturado</p>
                        <h4 class="mb-0" style="color: rgb(1, 15, 27); font-weight: 600;">R$ {{ number_format($payments->where('status', 'paid')->sum('amount'), 2, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payments Table -->
    <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
        <div class="px-4 py-3" style="background-color: rgb(1, 15, 27); border-radius: 8px 8px 0 0;">
            <h6 class="mb-0 text-white" style="font-weight: 500;">
                <i class="fas fa-credit-card me-2"></i>Lista de Pagamentos
            </h6>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background-color: #f8fafc;">
                    <tr>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">ID</th>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Usuário</th>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Email</th>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Valor</th>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Status</th>
                        <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Data</th>
                        <th class="px-4 py-3 fw-medium text-center" style="color: rgb(1, 15, 27); border-color: #e2e8f0;">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $payment)
                    <tr style="border-color: #f1f5f9;">
                        <td class="px-4 py-3">
                            <span class="fw-medium" style="color: rgb(1, 15, 27);">#{{ str_pad($payment->id, 4, '0', STR_PAD_LEFT) }}</span>
                        </td>
                        <td class="px-4 py-3">
                            <span style="color: rgb(1, 15, 27); font-weight: 500;">{{ $payment->user->name ?? 'N/A' }}</span>
                        </td>
                        <td class="px-4 py-3" style="color: #6b7280;">
                            {{ $payment->user->email ?? 'N/A' }}
                        </td>
                        <td class="px-4 py-3">
                            <span class="fw-bold" style="color: rgb(1, 15, 27);">R$ {{ number_format($payment->amount, 2, ',', '.') }}</span>
                        </td>
                        <td class="px-4 py-3">
                            @if($payment->status === 'paid')
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #10b981;"></div>
                                    <span style="color: rgb(1, 15, 27); font-size: 0.875rem;">Pago</span>
                                </div>
                            @elseif($payment->status === 'pending')
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #f59e0b;"></div>
                                    <span style="color: rgb(1, 15, 27); font-size: 0.875rem;">Pendente</span>
                                </div>
                            @elseif($payment->status === 'failed')
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #ef4444;"></div>
                                    <span style="color: rgb(1, 15, 27); font-size: 0.875rem;">Falhou</span>
                                </div>
                            @elseif($payment->status === 'refunded')
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #6b7280;"></div>
                                    <span style="color: rgb(1, 15, 27); font-size: 0.875rem;">Estornado</span>
                                </div>
                            @endif
                        </td>
                        <td class="px-4 py-3" style="color: #6b7280;">{{ $payment->created_at->format('d/m/Y H:i') }}</td>
                        <td class="px-4 py-3 text-center">
                            <div class="d-flex gap-2 justify-content-center">
                                <button type="button" class="btn btn-sm px-3 py-1" 
                                        style="background-color: #f8fafc; border: 1px solid rgb(1, 15, 27); color: rgb(1, 15, 27); border-radius: 6px;"
                                        data-bs-toggle="modal" data-bs-target="#paymentModal{{ $payment->id }}">
                                    <i class="fas fa-eye me-1"></i>Ver
                                </button>
                                
                                @if($payment->status === 'pending')
                                    <button type="button" 
                                            class="btn btn-sm px-3 py-1 approve-payment-btn" 
                                            style="background-color: #10b981; border: 1px solid #10b981; color: white; border-radius: 6px;"
                                            data-payment-id="{{ $payment->id }}"
                                            data-payment-number="{{ str_pad($payment->id, 4, '0', STR_PAD_LEFT) }}">
                                        <i class="fas fa-check me-1"></i>Aprovar
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Modal Payment Details -->
                    <div class="modal fade" id="paymentModal{{ $payment->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content" style="border-radius: 12px; border: none;">
                                <div class="modal-header" style="background-color: rgb(1, 15, 27); border-radius: 12px 12px 0 0;">
                                    <h5 class="modal-title text-white fw-medium">
                                        <i class="fas fa-credit-card me-2"></i>Pagamento #{{ str_pad($payment->id, 4, '0', STR_PAD_LEFT) }}
                                    </h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body p-4">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Usuário</label>
                                                <p class="mb-0" style="color: #6b7280;">{{ $payment->user->name ?? 'N/A' }}</p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Email</label>
                                                <p class="mb-0" style="color: #6b7280;">{{ $payment->user->email ?? 'N/A' }}</p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Valor</label>
                                                <p class="mb-0 fw-bold" style="color: rgb(1, 15, 27); font-size: 1.125rem;">R$ {{ number_format($payment->amount, 2, ',', '.') }}</p>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Status</label>
                                                <div class="mt-1">
                                                    @if($payment->status === 'paid')
                                                        <div class="d-flex align-items-center">
                                                            <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #10b981;"></div>
                                                            <span style="color: rgb(1, 15, 27);">Pago</span>
                                                        </div>
                                                    @elseif($payment->status === 'pending')
                                                        <div class="d-flex align-items-center">
                                                            <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #f59e0b;"></div>
                                                            <span style="color: rgb(1, 15, 27);">Pendente</span>
                                                        </div>
                                                    @elseif($payment->status === 'failed')
                                                        <div class="d-flex align-items-center">
                                                            <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #ef4444;"></div>
                                                            <span style="color: rgb(1, 15, 27);">Falhou</span>
                                                        </div>
                                                    @elseif($payment->status === 'refunded')
                                                        <div class="d-flex align-items-center">
                                                            <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #6b7280;"></div>
                                                            <span style="color: rgb(1, 15, 27);">Estornado</span>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Data e Hora</label>
                                                <p class="mb-0" style="color: #6b7280;">{{ $payment->created_at->format('d/m/Y H:i') }}</p>
                                            </div>
                                            
                                            @if($payment->status === 'failed')
                                            <div class="mb-3">
                                                <label class="fw-medium mb-1" style="color: rgb(1, 15, 27);">Motivo da Falha</label>
                                                <p class="mb-0" style="color: #ef4444;">Cartão de crédito recusado</p>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer" style="border-top: 1px solid #e2e8f0;">
                                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal" style="border-radius: 6px;">
                                        Fechar
                                    </button>
                                    @if($payment->status === 'paid')
                                    <button type="button" class="btn text-white px-4" style="background-color: #ef4444; border-radius: 6px;">
                                        <i class="fas fa-undo me-1"></i>Processar Estorno
                                    </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-5">
                            <div class="text-center">
                                <div class="mb-3">
                                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                                         style="width: 64px; height: 64px; background-color: #f8fafc; color: rgb(1, 15, 27);">
                                        <i class="fas fa-credit-card fa-2x"></i>
                                    </div>
                                </div>
                                <h5 style="color: rgb(1, 15, 27); font-weight: 500;">Nenhum pagamento encontrado</h5>
                                <p style="color: #6b7280; margin-bottom: 0;">Não há registros de pagamentos no sistema.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($payments->hasPages())
        <div class="px-4 py-3" style="border-top: 1px solid #e2e8f0;">
            {{ $payments->appends(request()->query())->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Event listener para botões de aprovação
    const approveButtons = document.querySelectorAll('.approve-payment-btn');
    
    approveButtons.forEach(button => {
        button.addEventListener('click', function() {
            const paymentId = this.getAttribute('data-payment-id');
            const paymentNumber = this.getAttribute('data-payment-number');
            
            // Confirmar ação
            if (confirm(`Tem certeza que deseja aprovar o pagamento #${paymentNumber}?`)) {
                approvePayment(paymentId, this);
            }
        });
    });
    
    function approvePayment(paymentId, button) {
        // Desabilitar botão durante o processamento
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processando...';
        
        // Fazer requisição AJAX
        fetch(`/admin/payments/${paymentId}/approve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Sucesso - mostrar mensagem e recarregar página
                alert(data.message);
                window.location.reload();
            } else {
                // Erro - mostrar mensagem de erro
                alert(data.message);
                
                // Reabilitar botão
                button.disabled = false;
                button.innerHTML = '<i class="fas fa-check me-1"></i>Aprovar';
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            alert('Erro ao processar solicitação. Tente novamente.');
            
            // Reabilitar botão
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-check me-1"></i>Aprovar';
        });
    }
});
</script>
@endpush