@extends('layouts.app')

@section('title', 'Invoices')

@section('content')
<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Invoices</h1>
            <p class="text-sm text-slate-400 mt-0.5">
                @if ($unpaidCount > 0)
                    <span class="text-amber-600 font-medium">{{ $unpaidCount }} {{ Str::plural('invoice', $unpaidCount) }} pending</span>
                @else
                    All invoices settled
                @endif
            </p>
        </div>
        {{-- No create button — invoices are auto-generated --}}
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-3 gap-4 mb-8">

        {{-- Unpaid --}}
        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Unpaid</p>
            <p class="text-2xl font-semibold text-amber-600">{{ $unpaidCount }}</p>
        </div>

        {{-- Overdue --}}
        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Overdue</p>
            <p class="text-2xl font-semibold text-red-600">{{ $overdueCount }}</p>
            @if ($overdueCount > 0)
                <p class="text-xs text-red-500 font-medium mt-0.5">requires action</p>
            @endif
        </div>

        {{-- Paid this month --}}
        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Paid this month</p>
            <p class="text-2xl font-semibold text-emerald-600">{{ $paidCount }}</p>
        </div>

    </div>

    {{-- Invoices table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if ($invoices->isEmpty())
            <div class="py-20 text-center">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
                    <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
                <p class="text-sm font-medium text-slate-700">No invoices yet</p>
                <p class="text-sm text-slate-400 mt-1">Invoices are generated automatically when a proposal is approved</p>
            </div>
        @else
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Invoice #</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Client</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Project</th>
                        <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wider">Amount</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Status</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Due Date</th>
                        <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 bg-white">
                    @foreach ($invoices as $invoice)
                        @php
                            $sv = $invoice->status instanceof \App\Enums\InvoiceStatus ? $invoice->status->value : $invoice->status;
                            $symbol = $invoice->currency instanceof \App\Enums\Currency ? $invoice->currency->symbol() : (string) $invoice->currency;
                            $isOverdue = $invoice->due_date->isPast() && $sv === 'unpaid';
                            $totalAmt = (float) $invoice->amount;
                            $paidAmt  = $invoice->relationLoaded('payments')
                                ? $invoice->payments->sum(fn ($p) => (float) $p->amount)
                                : 0;
                            $paidPct  = $totalAmt > 0 ? min(100, round($paidAmt / $totalAmt * 100)) : 0;
                            $progressColor = match($sv) {
                                'paid'    => 'bg-emerald-500',
                                'partial' => 'bg-sky-600',
                                default   => 'bg-slate-200',
                            };
                            $badgeClass = match($sv) {
                                'unpaid'  => 'bg-amber-50 text-amber-700',
                                'partial' => 'bg-sky-50 text-sky-700',
                                'paid'    => 'bg-emerald-50 text-emerald-700',
                                default   => 'bg-slate-100 text-slate-600',
                            };
                            $badgeLabel = match($sv) {
                                'unpaid'  => 'Unpaid',
                                'partial' => 'Partial',
                                'paid'    => 'Paid',
                                default   => ucfirst($sv),
                            };
                        @endphp
                        <tr data-table-row class="hover:bg-slate-50 transition-colors duration-150">
                            <td class="px-5 py-4 text-sm font-medium font-mono text-slate-900">
                                {{ $invoice->invoice_number }}
                            </td>
                            <td class="px-5 py-4 text-sm font-medium text-slate-900">
                                {{ $invoice->client->name }}
                            </td>
                            <td class="px-5 py-4 text-sm text-slate-500">
                                {{ $invoice->project->title }}
                            </td>
                            <td class="px-5 py-4 text-right tabular-nums">
                                <p class="text-sm font-medium font-mono text-slate-900">
                                    {{ $symbol }}&nbsp;{{ number_format($totalAmt, 2) }}
                                </p>
                                @if ($sv !== 'unpaid' || $paidPct > 0)
                                <div class="mt-1.5 w-full bg-slate-100 rounded-full h-1">
                                    <div class="{{ $progressColor }} h-1 rounded-full" style="width: {{ $paidPct }}%"></div>
                                </div>
                                @endif
                            </td>
                            <td class="px-5 py-4">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $badgeClass }}">
                                    {{ $badgeLabel }}
                                </span>
                            </td>
                            <td class="px-5 py-4 text-sm {{ $isOverdue ? 'text-red-500 font-bold' : 'text-slate-500' }}">
                                {{ $invoice->due_date->format('d M Y') }}
                            </td>
                            <td class="px-5 py-4 text-right text-sm">
                                <a href="{{ route('invoices.show', $invoice) }}"
                                   class="text-sky-700 hover:underline">View</a>
                                @if ($sv === 'paid')
                                    <span class="text-slate-300 mx-1">&middot;</span>
                                    <span class="text-slate-400 text-xs">
                                        Paid {{ $invoice->paid_at->format('d M Y') }}
                                    </span>
                                @else
                                    <span class="text-slate-300 mx-1">&middot;</span>
                                    <a href="{{ route('invoices.show', $invoice) }}"
                                       class="text-slate-500 hover:underline">View &amp; Pay</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if ($invoices->hasPages())
                <div class="flex items-center justify-between px-5 py-4 border-t border-slate-100">
                    <p class="text-sm text-slate-400">
                        Showing {{ $invoices->firstItem() }}&ndash;{{ $invoices->lastItem() }} of {{ $invoices->total() }}
                    </p>
                    <div class="text-sm">
                        {{ $invoices->links() }}
                    </div>
                </div>
            @endif
        @endif

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    // Stat cards fade in together
    var cards = document.querySelectorAll('[data-stat-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    // Table rows stagger in sequentially
    var rows = document.querySelectorAll('[data-table-row]');
    if (rows.length) {
        Motion.animate(rows, { opacity: [0, 1], y: [8, 0] }, { delay: Motion.stagger(0.04, { start: 0.15 }), duration: 0.2, easing: 'ease-out' });
    }
})();
</script>
@endsection