@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        <div class="azp-page-header">
            <div>
                <h1 class="azp-page-title">Receitas e despesas</h1>
                <div class="azp-page-subtitle">Gestao financeira por clube e periodo</div>
            </div>

            <div class="azp-actions">
                <a href="{{ route('admin.financial.revenues.create') }}" class="btn outline">Nova receita</a>
                <a href="{{ route('admin.financial.expenses.create') }}" class="btn primary">Nova despesa</a>
            </div>
        </div>

        @if(session('success'))
            <div class="flash success">{{ session('success') }}</div>
        @endif

        <div class="azp-card" style="margin-bottom:18px;">
            <form method="GET" action="{{ route('admin.financial.index') }}">
                <div class="azp-form-grid" style="align-items:end;">
                    <div class="field">
                        <label class="label" for="club_id">Clube</label>
                        <select name="club_id" id="club_id">
                            @foreach($clubs as $club)
                                <option value="{{ $club->id }}" {{ (int) $clubId === (int) $club->id ? 'selected' : '' }}>{{ $club->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label class="label" for="date_from">De</label>
                        <input type="date" name="date_from" id="date_from" value="{{ $dateFrom }}">
                    </div>
                    <div class="field">
                        <label class="label" for="date_to">Ate</label>
                        <input type="date" name="date_to" id="date_to" value="{{ $dateTo }}">
                    </div>
                    <div class="field">
                        <button type="submit" class="btn primary">Filtrar</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="azp-card" style="margin-bottom:18px;">
            <div class="azp-section-title">Somatorio por categoria</div>
            <div class="azp-table-wrap">
                <table class="azp-table">
                    <thead>
                    <tr>
                        <th>Tipo</th>
                        <th>Categoria</th>
                        <th>Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($summaryByCategory as $row)
                        <tr>
                            <td data-label="Tipo">{{ $row->type === 'revenue' ? 'Receita' : 'Despesa' }}</td>
                            <td data-label="Categoria">{{ $row->category_code ? $row->category_code.' - '.$row->category_name : 'Sem categoria' }}</td>
                            <td data-label="Total"><strong>{{ number_format($row->total, 2, ',', '.') }} EUR</strong></td>
                        </tr>
                    @empty
                        <tr><td colspan="3">Sem movimentos no periodo selecionado.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="financial-columns">
            <div class="azp-card">
                <div class="azp-section-title">Receitas</div>
                @include('admin.financial_documents._table', ['documents' => $revenues, 'empty' => 'Sem receitas neste periodo.'])
            </div>

            <div class="azp-card">
                <div class="azp-section-title">Despesas</div>
                @include('admin.financial_documents._table', ['documents' => $expenses, 'empty' => 'Sem despesas neste periodo.'])
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .financial-columns{
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        @media (max-width: 980px){
            .financial-columns{ grid-template-columns: 1fr; }
        }
    </style>
@endpush