@extends('layouts.dashboard')

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

@section('dashboard_content')
<div class="glass-panel rounded-3xl overflow-hidden">
    <div class="px-8 py-8 border-b border-white/5 flex items-center justify-between">
        <h3 class="font-bold text-white text-lg">Invoice History</h3>
        <div class="text-xs text-white/40 italic">All amounts in PKR</div>
    </div>
    
    <table class="w-full text-left">
        <thead>
            <tr class="bg-white/5">
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Invoice #</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Related Order</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Amount</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Status</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Due Date</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40 text-right">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
            @forelse($invoices ?? [] as $invoice)
                <tr class="group hover:bg-white/[0.02] transition-colors">
                    <td class="px-8 py-6 font-bold text-white">{{ $invoice->invoice_number }}</td>
                    <td class="px-8 py-6">
                        <div class="text-white/60 text-sm">#{{ $invoice->order->order_number ?? 'N/A' }}</div>
                        <div class="text-[10px] text-white/20 uppercase tracking-widest">{{ $invoice->order->service->name ?? 'Service' }}</div>
                    </td>
                    <td class="px-8 py-6 text-white font-black text-lg">
                        {{ number_format($invoice->amount) }}
                    </td>
                    <td class="px-8 py-6">
                        <span class="badge {{ $invoice->status === 'paid' ? 'badge-success' : 'badge-pending' }}">
                            {{ $invoice->status }}
                        </span>
                    </td>
                    <td class="px-8 py-6 text-white/40 text-sm">{{ $invoice->due_date ? $invoice->due_date->format('M d, Y') : 'N/A' }}</td>
                    <td class="px-8 py-6 text-right">
                        <a href="{{ route('invoices.download', $invoice) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-emerald/10 text-emerald text-[10px] font-black uppercase tracking-widest rounded-lg hover:bg-emerald hover:text-white transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            Download PDF
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-8 py-20 text-center text-white/20 italic">No invoices found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if($invoices->hasPages())
    <div class="mt-8">
        {{ $invoices->links() }}
    </div>
@endif
@endsection