@extends('layouts.app')

@section('content')
<main class="main-content">
    <header class="header mobile-header">
        <div class="user-greeting">
            <h3>Tagihan Air</h3>
        </div>
    </header>

    {{-- BAGIAN TAGIHAN SAAT INI --}}
    <h4>Tagihan Bulan Ini</h4>
    @if($currentInvoice)
        <div class="bill-card">
            <div class="bill-header">
                <i class="fas fa-file-alt"></i>
                <h4>Tagihan Bulan Ini</h4>
            </div>
            <div class="bill-amount">
                <h2>Rp {{ number_format($currentInvoice->total_amount, 0, ',', '.') }}</h2>
                <p>Jatuh Tempo: {{ $currentInvoice->due_date->translatedFormat('d F Y') }}</p>
            </div>
            <button class="bill-card-btn" onclick="window.location.href='{{ route('invoices.show', $currentInvoice->id) }}'">
            Bayar Sekarang
            </button>
        </div>
    @else
    <div class="empty-state-card">
        <div class="empty-state-icon">
            {{-- Ini adalah ikon "centang dalam lingkaran" --}}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
        </div>
        
        <h4>Semua Tagihan Lunas!</h4>
        <p>Anda tidak memiliki tagihan aktif untuk bulan ini. Nikmati harimu!</p>
        
    </div>
    @endif

    {{-- BAGIAN RIWAYAT TAGIHAN --}}
    <h4 style="margin-top: 30px;">Riwayat Tagihan</h4>
    <div class="history-list">
        @forelse ($invoiceHistory as $invoice)
            <a href="{{ route('invoices.show', $invoice->id) }}" class="history-item-link">
            <div class="history-item">
            <div class="history-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="history-details">
                <h5>
                Tagihan 
                @if($invoice->created_at)
                    {{ $invoice->created_at->translatedFormat('F Y') }}
                @elseif($invoice->due_date)
                    {{ $invoice->due_date->translatedFormat('F Y') }}
                @else
                    #{{ $invoice->id }}
                @endif
            </h5>
                <p>
                Lunas pada 
                @if($invoice->paid_at)
                    {{ $invoice->paid_at->translatedFormat('d M Y, H:i') }}
                @else
                    -
                @endif
            </p>
            </div>
            <div class="history-amount">
                <strong>Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</strong>
            </div>
        </div>
    </a>
        @empty
            <div class="invoice-card empty">
                <p>Belum ada riwayat tagihan.</p>
            </div>
        @endforelse
    </div>

    {{-- Link Pagination --}}
    <div class="pagination-links">
        {{ $invoiceHistory->links() }}
    </div>

</main>
@endsection