@extends('layouts.admin')
@section('title', 'Transações Financeiras')
@section('breadcrumb')
    <span class="breadcrumb-current">Transações</span>
@endsection
@push('styles')
<style>
.rp-nav { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.rp-nav a { padding:7px 14px; border-radius:8px; font-size:.8rem; font-weight:600; text-decoration:none; border:1.5px solid #e5e7eb; color:#374151; background:#fff; }
.rp-nav a.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.filter-bar { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 20px; margin-bottom:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group label { font-size:.72rem; font-weight:600; color:#6b7280; }
.filter-group input, .filter-group select { padding:7px 10px; border:1.5px solid #e5e7eb; border-radius:7px; font-size:.82rem; }
.totals-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.tot-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px 20px; }
.tot-card .l { font-size:.72rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.tot-card .v { font-size:1.3rem; font-weight:800; }
.rp-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.tx-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.tx-table th { padding:8px 16px; text-align:left; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af; border-bottom:1px solid #f1f5f9; background:#fafafa; }
.tx-table td { padding:10px 16px; border-bottom:1px solid #f8fafc; vertical-align:middle; }
.tx-table tr:last-child td { border-bottom:none; }
.tx-table tr:hover td { background:#fafafa; }
.pill-credit { background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700; }
.pill-debit  { background:#fee2e2; color:#991b1b; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700; }
</style>
@endpush
@section('content')

<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:20px;">
    <div class="rp-nav" style="margin-bottom:0;">
        <a href="{{ route('admin.reports.index') }}">🏠 Relatórios</a>
        <a href="{{ route('admin.reports.revenue') }}">📈 Receitas</a>
        <a href="{{ route('admin.reports.occupancy') }}">🛏 Ocupação</a>
        <a href="{{ route('admin.financial.transactions') }}" class="active">📋 Transações</a>
        <a href="{{ route('admin.financial.cashbox') }}">💰 Caixa</a>
    </div>
    <div style="display:flex;gap:6px;flex-wrap:wrap;">
        <a href="{{ route('admin.reports.pdf.transactions', ['from'=>$from,'to'=>$to,'type'=>$type]) }}"
           style="display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#ef4444;color:#fff;border-radius:8px;font-size:.79rem;font-weight:700;text-decoration:none;"
           target="_blank">
            <i data-lucide="file-down" style="width:13px;height:13px;"></i> Exportar PDF
        </a>
    </div>
</div>

<form method="GET" class="filter-bar">
    <div class="filter-group">
        <label>De</label>
        <input type="date" name="from" value="{{ $from }}">
    </div>
    <div class="filter-group">
        <label>Até</label>
        <input type="date" name="to" value="{{ $to }}">
    </div>
    <div class="filter-group">
        <label>Tipo</label>
        <select name="type">
            <option value="" {{ !$type ? 'selected' : '' }}>Todos</option>
            <option value="credit" {{ $type === 'credit' ? 'selected' : '' }}>Entradas</option>
            <option value="debit"  {{ $type === 'debit'  ? 'selected' : '' }}>Saídas</option>
        </select>
    </div>
    <button type="submit" style="padding:8px 16px;background:var(--color-primary);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;">Filtrar</button>
    <a href="{{ route('admin.financial.transactions') }}"
       style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;color:#374151;background:#fff;">Limpar</a>
</form>

{{-- Totais --}}
<div class="totals-row">
    <div class="tot-card" style="border-top:3px solid #22c55e;">
        <div class="l">Total Entradas</div>
        <div class="v" style="color:#16a34a;">R$ {{ number_format((float)$totals->total_credit, 2, ',', '.') }}</div>
    </div>
    <div class="tot-card" style="border-top:3px solid #ef4444;">
        <div class="l">Total Saídas</div>
        <div class="v" style="color:#dc2626;">R$ {{ number_format((float)$totals->total_debit, 2, ',', '.') }}</div>
    </div>
    <div class="tot-card" style="border-top:3px solid var(--color-primary);">
        <div class="l">Saldo Líquido</div>
        @php $net = (float)$totals->total_credit - (float)$totals->total_debit; @endphp
        <div class="v" style="color:{{ $net >= 0 ? '#16a34a' : '#dc2626' }};">
            R$ {{ number_format(abs($net), 2, ',', '.') }}
            <span style="font-size:.75rem;font-weight:400;">{{ $net >= 0 ? '▲' : '▼' }}</span>
        </div>
    </div>
</div>

{{-- Tabela --}}
<div class="rp-card">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #f1f5f9;background:#fafafa;font-size:.85rem;font-weight:700;">
        <span>Transações ({{ $totals->total_count }})</span>
        <span style="font-size:.73rem;color:#6b7280;">{{ $transactions->currentPage() }} / {{ $transactions->lastPage() }} páginas</span>
    </div>
    <table class="tx-table">
        <thead><tr>
            <th>#</th><th>Descrição</th><th>Reserva</th><th>Data/Hora</th><th>Tipo</th><th style="text-align:right;">Valor</th>
        </tr></thead>
        <tbody>
        @forelse($transactions as $t)
        <tr>
            <td style="color:#9ca3af;font-size:.75rem;">{{ $t->id }}</td>
            <td>
                <div style="font-weight:600;">{{ $t->description }}</div>
                @if($t->notes)<div style="font-size:.72rem;color:#6b7280;">{{ $t->notes }}</div>@endif
            </td>
            <td>
                @if($t->reservation)
                <a href="{{ route('admin.reservations.financial.show', $t->reservation_id) }}" style="color:var(--color-primary);font-weight:600;">{{ $t->reservation->locator }}</a>
                <div style="font-size:.72rem;color:#6b7280;">{{ $t->reservation->guest?->full_name }}</div>
                @else<span style="color:#9ca3af;">—</span>@endif
            </td>
            <td style="color:#6b7280;font-size:.78rem;">
                <div>{{ $t->transacted_at->format('d/m/Y') }}</div>
                <div>{{ $t->transacted_at->format('H:i') }}</div>
            </td>
            <td>
                <span class="{{ $t->type === 'credit' ? 'pill-credit' : 'pill-debit' }}">
                    {{ $t->type === 'credit' ? '▲ Entrada' : '▼ Saída' }}
                </span>
            </td>
            <td style="text-align:right;font-weight:700;font-size:.9rem;color:{{ $t->type === 'credit' ? '#16a34a' : '#dc2626' }};">
                {{ $t->type === 'credit' ? '+' : '-' }}R$ {{ number_format((float)$t->amount, 2, ',', '.') }}
            </td>
        </tr>
        @empty
        <tr><td colspan="6" style="text-align:center;padding:32px;color:#9ca3af;">Nenhuma transação encontrada.</td></tr>
        @endforelse
        </tbody>
    </table>

    {{-- Paginação --}}
    @if($transactions->hasPages())
    <div style="padding:12px 20px;border-top:1px solid #f1f5f9;display:flex;gap:8px;justify-content:center;">
        @if($transactions->onFirstPage())
            <span style="padding:6px 12px;border-radius:7px;border:1px solid #e5e7eb;color:#9ca3af;font-size:.8rem;">← Anterior</span>
        @else
            <a href="{{ $transactions->previousPageUrl() }}" style="padding:6px 12px;border-radius:7px;border:1px solid #e5e7eb;color:#374151;font-size:.8rem;text-decoration:none;background:#fff;">← Anterior</a>
        @endif
        @if($transactions->hasMorePages())
            <a href="{{ $transactions->nextPageUrl() }}" style="padding:6px 12px;border-radius:7px;border:1px solid #e5e7eb;color:#374151;font-size:.8rem;text-decoration:none;background:#fff;">Próximo →</a>
        @else
            <span style="padding:6px 12px;border-radius:7px;border:1px solid #e5e7eb;color:#9ca3af;font-size:.8rem;">Próximo →</span>
        @endif
    </div>
    @endif
</div>
@endsection