@extends('layouts.client')

@section('header_title', 'Contratos e Faturas')
@section('header_subtitle', 'Consulte a vigência dos contratos e o estado dos pagamentos.')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        @forelse($contracts as $contract)
            <div class="bg-slate-900 border border-white/5 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-white font-semibold">Contrato #{{ $contract->id }}</h3>
                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-500/10 text-blue-400">{{ $contract->status }}</span>
                </div>
                <p class="text-sm text-slate-500 mb-3">{{ $contract->installation->address ?? 'Sem instalação associada' }}</p>
                <p class="text-2xl font-bold text-white">{{ number_format((float) $contract->monthly_fee, 2, ',', '.') }} Kz</p>
                <p class="text-xs text-slate-500 mt-2">
                    {{ $contract->start_date->format('d/m/Y') }} até {{ $contract->end_date?->format('d/m/Y') ?? 'sem data fim' }}
                </p>
            </div>
        @empty
            <div class="lg:col-span-3 p-10 rounded-2xl border border-dashed border-white/10 text-center">
                <p class="text-slate-500">Nenhum contrato associado à sua conta.</p>
            </div>
        @endforelse
    </div>

    <div class="bg-slate-900 border border-white/5 rounded-2xl overflow-hidden shadow-xl">
        <div class="px-6 py-5 border-b border-white/5">
            <h3 class="text-lg font-semibold text-white">Faturas</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-950/50 border-b border-white/5 text-xs font-semibold uppercase tracking-wider text-slate-400">
                        <th class="px-6 py-4">Referência</th>
                        <th class="px-6 py-4">Valor</th>
                        <th class="px-6 py-4">Emissão</th>
                        <th class="px-6 py-4">Vencimento</th>
                        <th class="px-6 py-4">Estado</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5 whitespace-nowrap text-sm text-slate-300">
                    @forelse($invoices as $invoice)
                        <tr class="hover:bg-slate-800/50">
                            <td class="px-6 py-4 text-white">Fatura #{{ $invoice->id }}</td>
                            <td class="px-6 py-4">{{ number_format((float) $invoice->amount, 2, ',', '.') }} Kz</td>
                            <td class="px-6 py-4">{{ $invoice->issue_date->format('d/m/Y') }}</td>
                            <td class="px-6 py-4">{{ $invoice->due_date?->format('d/m/Y') ?? '---' }}</td>
                            <td class="px-6 py-4">{{ $invoice->status }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-6 py-12 text-center text-slate-500">Nenhuma fatura registada.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($invoices->hasPages())
            <div class="px-6 py-4 border-t border-white/5 bg-slate-950/20">{{ $invoices->links() }}</div>
        @endif
    </div>
@endsection