@extends('layouts.app')

@section('title', 'Transações - Sistema Financeiro')
@section('page-title', 'Transações')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Transações</h1>
            <p class="text-gray-600">Controle suas receitas e despesas</p>
        </div>
        <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-plus mr-2"></i>
            Nova Transação
        </a>
    </div>
    
    <!-- Filtros -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Período</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option>Este mês</option>
                    <option>Últimos 30 dias</option>
                    <option>Últimos 3 meses</option>
                    <option>Este ano</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Tipo</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option>Todos</option>
                    <option>Receitas</option>
                    <option>Despesas</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Categoria</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option>Todas</option>
                    <option>Salário</option>
                    <option>Alimentação</option>
                    <option>Transporte</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Conta</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option>Todas</option>
                    <option>Conta Corrente</option>
                    <option>Poupança</option>
                </select>
            </div>
        </div>
    </div>
    
    <!-- Resumo -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-arrow-up text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Receitas</p>
                    <p class="text-2xl font-bold text-green-600">R$ 8.500,00</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-600">
                    <i class="fas fa-arrow-down text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Despesas</p>
                    <p class="text-2xl font-bold text-red-600">R$ 3.250,00</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-balance-scale text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Saldo</p>
                    <p class="text-2xl font-bold text-blue-600">R$ 5.250,00</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Lista de Transações -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Transações Recentes</h3>
        </div>
        
        <div class="divide-y divide-gray-200">
            <!-- Transação 1 -->
            <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                    <div class="p-2 rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-arrow-up"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium text-gray-900">Salário Junho</p>
                        <p class="text-sm text-gray-600">Conta Corrente • Salário</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-green-600">+R$ 5.000,00</p>
                    <p class="text-xs text-gray-500">01/06/2025</p>
                </div>
            </div>
            
            <!-- Transação 2 -->
            <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                    <div class="p-2 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-arrow-down"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium text-gray-900">Supermercado</p>
                        <p class="text-sm text-gray-600">Conta Corrente • Alimentação</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-red-600">-R$ 450,00</p>
                    <p class="text-xs text-gray-500">20/06/2025</p>
                </div>
            </div>
            
            <!-- Transação 3 -->
            <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                    <div class="p-2 rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-arrow-up"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium text-gray-900">Freelance Design</p>
                        <p class="text-sm text-gray-600">Conta Corrente • Freelances</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-green-600">+R$ 1.200,00</p>
                    <p class="text-xs text-gray-500">18/06/2025</p>
                </div>
            </div>
            
            <!-- Transação 4 -->
            <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                    <div class="p-2 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-arrow-down"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium text-gray-900">Combustível</p>
                        <p class="text-sm text-gray-600">Conta Corrente • Transporte</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-red-600">-R$ 180,00</p>
                    <p class="text-xs text-gray-500">17/06/2025</p>
                </div>
            </div>
            
            <!-- Transação 5 -->
            <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                    <div class="p-2 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-arrow-down"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium text-gray-900">Energia Elétrica</p>
                        <p class="text-sm text-gray-600">Conta Corrente • Utilidades</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-red-600">-R$ 320,00</p>
                    <p class="text-xs text-gray-500">15/06/2025</p>
                </div>
            </div>
        </div>
        
        <!-- Paginação -->
        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <p class="text-sm text-gray-700">Mostrando 1 a 5 de 23 transações</p>
            <div class="flex space-x-2">
                <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">Anterior</button>
                <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm">1</button>
                <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">2</button>
                <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">3</button>
                <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">Próximo</button>
            </div>
        </div>
    </div>
</div>
@endsection