@extends('clients.layouts.app')

@section('title', 'Billing & Invoices')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-bold text-[#1a233a] dark:text-white tracking-tight">Billing</h1>
                <p class="text-[10px] font-bold text-slate-400 mt-1.5 uppercase tracking-[0.1em]">Manage your payments and
                    history</p>
            </div>
            <div
                class="bg-white dark:bg-[#1e293b] px-8 py-4 rounded-[24px] border border-slate-100 dark:border-white/5 flex items-center space-x-4 shadow-sm">
                <div class="space-y-0.5">
                    <p class="text-[9px] font-bold text-slate-400 uppercase tracking-[0.1em]">Credit Balance</p>
                    <p class="text-xl font-bold text-emerald-500 tracking-tight">$0.00 USD</p>
                </div>
                <button
                    class="w-10 h-10 bg-emerald-50 dark:bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 hover:scale-110 transition-transform">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
        </div>

        <div class="bg-white dark:bg-[#1e293b] rounded-[24px] border border-slate-100 dark:border-white/5 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-white/5">
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Invoice #</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Date Generated</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Due Date</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Total</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em]">Status</th>
                            <th class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-[0.1em] text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($invoices['invoices']['invoice'] ?? [] as $invoice)
                            <tr class="group odd:bg-white even:bg-blue-50/20 dark:odd:bg-transparent dark:even:bg-white/5 hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                <td class="px-8 py-6">
                                    <div class="flex items-center space-x-4">
                                        <div class="w-10 h-10 bg-slate-50 dark:bg-white/5 rounded-xl flex items-center justify-center text-slate-400 group-hover:bg-primary group-hover:text-white transition-all">
                                            <i class="fas fa-file-invoice text-sm"></i>
                                        </div>
                                        <p class="text-sm font-bold text-[#1a233a] dark:text-white tracking-tight uppercase">
                                            #{{ $invoice['invoicenumber'] ?? $invoice['invoicenum'] ?? $invoice['id'] }}
                                        </p>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-sm font-semibold text-slate-600 dark:text-slate-300 tracking-tight">
                                    {{ $invoice['date'] }}
                                </td>
                                <td class="px-8 py-6 text-sm font-semibold text-slate-600 dark:text-slate-300 tracking-tight">
                                    {{ $invoice['duedate'] }}
                                </td>
                                <td class="px-8 py-6">
                                    <p class="text-sm font-bold text-[#1a233a] dark:text-white tracking-tight">
                                        {{ $invoice['total'] }}
                                    </p>
                                    <p class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">
                                        {{ $invoice['currencycode'] ?? 'USD' }}
                                    </p>
                                </td>
                                <td class="px-8 py-6">
                                    <span class="px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-widest 
                                        @if(strtolower($invoice['status']) === 'paid') bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10 
                                        @elseif(strtolower($invoice['status']) === 'unpaid') bg-rose-50 text-rose-500 dark:bg-rose-500/10
                                        @else bg-slate-100 text-slate-500 @endif border border-transparent">
                                        {{ $invoice['status'] }}
                                    </span>
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex items-center justify-center space-x-2">
                                        <a href="#" class="w-8 h-8 rounded-lg bg-slate-50 dark:bg-white/5 flex items-center justify-center text-slate-300 hover:text-primary hover:bg-white transition-all shadow-sm" title="View PDF">
                                            <i class="fas fa-file-pdf text-xs"></i>
                                        </a>
                                        @if(strtolower($invoice['status']) === 'unpaid')
                                            <a href="#" class="px-4 py-1.5 bg-rose-500 text-white rounded-full text-[10px] font-bold uppercase tracking-widest hover:opacity-90 transition-all shadow-md shadow-rose-500/10">Pay Now</a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-20 text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-receipt text-5xl text-slate-100 dark:text-white/5 mb-4"></i>
                                        <h3 class="text-base font-bold text-slate-400 uppercase tracking-[0.1em]">No billing history</h3>
                                        <p class="text-slate-300 mt-1 font-bold text-xs">Your invoices will appear here once generated.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection