@extends('crm.layouts.app')

@section('title', 'Invoices')

@section('content')
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">

    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Invoices</h1>
            <p class="mt-1 text-sm text-gray-600">Bill clients and track what has been paid.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ route('crm.invoices.create') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                <svg class="-ml-0.5 size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                </svg>
                New Invoice
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4 text-sm font-medium text-green-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-6 rounded-md bg-red-50 p-4 text-sm font-medium text-red-800">{{ session('error') }}</div>
    @endif

    <!-- Totals -->
    <dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        @foreach([
            ['label' => 'Billed',  'amount' => $stats['total'],   'count' => $stats['count']['total'],   'tone' => 'text-gray-900'],
            ['label' => 'Paid',    'amount' => $stats['paid'],    'count' => $stats['count']['paid'],    'tone' => 'text-green-700'],
            ['label' => 'Awaiting payment', 'amount' => $stats['pending'], 'count' => $stats['count']['pending'], 'tone' => 'text-blue-700'],
            ['label' => 'Overdue', 'amount' => $stats['overdue'], 'count' => $stats['count']['overdue'], 'tone' => 'text-red-700'],
        ] as $stat)
            <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-sm ring-1 ring-gray-900/5 sm:p-6">
                <dt class="truncate text-sm font-medium text-gray-500">{{ $stat['label'] }}</dt>
                <dd class="mt-1 text-3xl font-semibold tracking-tight {{ $stat['tone'] }}">
                    ${{ number_format($stat['amount'] ?? 0, 2) }}
                </dd>
                <dd class="mt-1 text-sm text-gray-500">{{ $stat['count'] ?? 0 }} {{ Str::plural('invoice', $stat['count'] ?? 0) }}</dd>
            </div>
        @endforeach
    </dl>

    <!-- Filters -->
    <form method="GET" action="{{ route('crm.invoices.index') }}" class="mb-6 flex flex-wrap items-end gap-3">
        <div class="flex-1 min-w-64">
            <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
            <input type="search" name="search" id="search" value="{{ request('search') }}"
                   placeholder="Invoice number or client name"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
        </div>
        <div>
            <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
            <select name="status" id="status" class="mt-1 block rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                @foreach(['all' => 'All', 'draft' => 'Draft', 'sent' => 'Sent', 'paid' => 'Paid', 'overdue' => 'Overdue'] as $value => $label)
                    <option value="{{ $value }}" @selected(request('status', 'all') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
            Apply
        </button>
        @if(request('search') || request('status', 'all') !== 'all')
            <a href="{{ route('crm.invoices.index') }}" class="px-3 py-2 text-sm font-semibold text-gray-600 hover:text-gray-900">Clear</a>
        @endif
    </form>

    <!-- List -->
    <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Invoice</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Client</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Artist</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Issued</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Due</th>
                        <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900">Total</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
                        <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6"><span class="sr-only">Open</span></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    @forelse($invoices as $invoice)
                        <tr class="hover:bg-gray-50">
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                {{ $invoice->invoice_number }}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-700">{{ $invoice->client?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $invoice->artist?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $invoice->invoice_date?->format('M j, Y') ?? '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $invoice->due_date?->format('M j, Y') ?? '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium text-gray-900 tabular-nums">
                                ${{ number_format($invoice->total_amount, 2) }}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm">
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                                    @if($invoice->status === 'paid') bg-green-50 text-green-700 ring-green-600/20
                                    @elseif($invoice->status === 'sent') bg-blue-50 text-blue-700 ring-blue-600/20
                                    @elseif($invoice->status === 'overdue') bg-red-50 text-red-700 ring-red-600/20
                                    @else bg-gray-50 text-gray-600 ring-gray-500/10
                                    @endif">
                                    {{ ucfirst($invoice->status) }}
                                </span>
                            </td>
                            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                <a href="{{ route('crm.invoices.show', $invoice) }}" class="text-indigo-600 hover:text-indigo-900">
                                    Open<span class="sr-only">, invoice {{ $invoice->invoice_number }}</span>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-16 text-center">
                                <p class="text-sm font-semibold text-gray-900">No invoices yet</p>
                                <p class="mt-1 text-sm text-gray-500">
                                    @if(request('search') || request('status', 'all') !== 'all')
                                        Nothing matches those filters.
                                    @else
                                        Create your first invoice to start billing clients.
                                    @endif
                                </p>
                                <a href="{{ route('crm.invoices.create') }}" class="mt-4 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                    New Invoice
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

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