@extends('layouts.app')
@section('title', 'Invoices')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Invoices</h2>
        <p class="page-subtitle">Manage and track all your invoices</p>
    </div>
    <x-button type="link" href="{{ route('invoices.create') }}">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Create Invoice
    </x-button>
</div>

{{-- Stats Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
    <div class="stat-card bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border card-hover">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-gray-500 dark:text-dark-muted">Total</span>
            <div class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
        </div>
        <p class="text-2xl font-bold text-gray-900 dark:text-dark-text">{{ $stats['total'] }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-1">Total invoices</p>
    </div>

    <div class="stat-card bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border card-hover">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-gray-500 dark:text-dark-muted">Paid</span>
            <div class="w-10 h-10 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
        <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ $stats['paid'] }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-1">Paid invoices</p>
    </div>

    <div class="stat-card bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border card-hover">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-gray-500 dark:text-dark-muted">Unpaid</span>
            <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-500/10 flex items-center justify-center">
                <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" 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>
            </div>
        </div>
        <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ $stats['pending'] }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-1">Unpaid invoices</p>
    </div>
</div>

{{-- Filter Tabs --}}
<div class="flex flex-wrap items-center gap-2 mb-4">
    <a href="{{ route('invoices.index') }}" class="px-4 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ !request('status') ? 'bg-primary-600 text-white shadow-sm' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-border border border-gray-200 dark:border-dark-border' }}">
        All
    </a>
    <a href="{{ route('invoices.index', array_merge(request()->except('status', 'page'), ['status' => 'pending'])) }}" class="px-4 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ request('status') === 'pending' ? 'bg-amber-500 text-white shadow-sm' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-border border border-gray-200 dark:border-dark-border' }}">
        Unpaid
    </a>
    <a href="{{ route('invoices.index', array_merge(request()->except('status', 'page'), ['status' => 'paid'])) }}" class="px-4 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ request('status') === 'paid' ? 'bg-emerald-600 text-white shadow-sm' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-border border border-gray-200 dark:border-dark-border' }}">
        Paid
    </a>
    <a href="{{ route('invoices.index', array_merge(request()->except('status', 'page'), ['status' => 'cancelled'])) }}" class="px-4 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ request('status') === 'cancelled' ? 'bg-red-600 text-white shadow-sm' : 'bg-white dark:bg-dark-card text-gray-600 dark:text-dark-muted hover:bg-gray-50 dark:hover:bg-dark-border border border-gray-200 dark:border-dark-border' }}">
        Cancelled
    </a>
</div>

{{-- Search & Filter Card --}}
<form method="GET" action="{{ route('invoices.index') }}" class="search-card dark:bg-dark-card dark:border-dark-border">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div>
            <label for="query" class="form-label">Search</label>
            <input type="text" name="query" id="query" value="{{ request('query') }}" placeholder="Invoice #, Customer..." class="form-input">
        </div>
        <div>
            <label for="status" class="form-label">Status</label>
            <select name="status" id="status" class="form-select">
                <option value="">All Status</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Unpaid</option>
                <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
            </select>
        </div>
        <div>
            <label for="invoice_type" class="form-label">Invoice Type</label>
            <select name="invoice_type" id="invoice_type" class="form-select">
                <option value="">All Types</option>
                <option value="tax" {{ request('invoice_type') === 'tax' ? 'selected' : '' }}>Tax Invoice</option>
                <option value="non-tax" {{ request('invoice_type') === 'non-tax' ? 'selected' : '' }}>Non-Tax Invoice</option>
            </select>
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                Filter
            </button>
            @if(request()->anyFilled(['query', 'status', 'invoice_type']))
            <a href="{{ route('invoices.index') }}" class="btn-ghost btn-sm">
                Clear
            </a>
            @endif
        </div>
    </div>
</form>

{{-- Table --}}
<div class="table-container dark:bg-dark-card dark:border-dark-border">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
            <thead>
                <tr>
                    <th class="table-th dark:text-dark-muted">Invoice #</th>
                    <th class="table-th dark:text-dark-muted">Customer</th>
                    <th class="table-th dark:text-dark-muted">Date</th>
                    <th class="table-th dark:text-dark-muted">Type</th>
                    <th class="table-th text-right dark:text-dark-muted">Amount</th>
                    <th class="table-th text-center dark:text-dark-muted">Status</th>
                    <th class="table-th text-right dark:text-dark-muted">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                @forelse($invoices as $invoice)
                <tr class="table-row">
                    <td class="table-td">
                        <a href="{{ route('invoices.show', $invoice) }}" class="font-medium text-primary-600 dark:text-primary-400 hover:underline font-mono text-xs">{{ $invoice->invoice_number }}</a>
                    </td>
                    <td class="table-td">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
                                {{ strtoupper(substr($invoice->customer?->customer_name ?? '?', 0, 2)) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900 dark:text-dark-text">{{ $invoice->customer?->customer_name ?? '—' }}</p>
                                @if($invoice->customer?->email)
                                <p class="text-xs text-gray-400 dark:text-dark-muted">{{ $invoice->customer->email }}</p>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="table-td text-gray-500 dark:text-dark-muted">{{ $invoice->invoice_date?->format('d M, Y') }}</td>
                    <td class="table-td">
                        @php
                            $typeClasses = $invoice->invoice_type === 'tax' ? 'badge-purple' : 'badge-gray';
                        @endphp
                        <span class="badge {{ $typeClasses }}">{{ $invoice->invoice_type === 'tax' ? 'Tax' : 'Non-Tax' }}</span>
                    </td>
                    <td class="table-td text-right">
                        <span class="font-semibold text-gray-900 dark:text-dark-text">₹{{ number_format($invoice->grand_total, 2) }}</span>
                    </td>
                    <td class="table-td text-center">
                        @php
                            $statusDot = [
                                'pending' => 'bg-amber-500',
                                'paid' => 'bg-emerald-500',
                                'cancelled' => 'bg-red-500',
                            ][$invoice->status] ?? 'bg-gray-400';
                            $statusLabel = [
                                'pending' => 'Unpaid',
                                'paid' => 'Paid',
                                'cancelled' => 'Cancelled',
                            ][$invoice->status] ?? ucfirst($invoice->status);
                            $statusBg = [
                                'pending' => 'bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/20',
                                'paid' => 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20',
                                'cancelled' => 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 border-red-200 dark:border-red-500/20',
                            ][$invoice->status] ?? 'bg-gray-50 dark:bg-gray-500/10 text-gray-700 dark:text-gray-400 border-gray-200 dark:border-gray-500/20';
                        @endphp
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border {{ $statusBg }}">
                            <span class="w-1.5 h-1.5 rounded-full {{ $statusDot }}"></span>
                            {{ $statusLabel }}
                        </span>
                    </td>
                    <td class="table-td text-right">
                        <x-row-actions :edit-url="route('invoices.edit', $invoice)" :delete-url="route('invoices.destroy', $invoice)" :view-url="route('invoices.show', $invoice)" item-name="invoice" />
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center">
                        <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        </div>
                        <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No invoices found</p>
                        <p class="text-xs text-gray-500 dark:text-dark-muted mt-1">Get started by creating a new invoice.</p>
                        <a href="{{ route('invoices.create') }}" class="btn-primary mt-4 inline-flex">Create Invoice</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($invoices->hasPages())
        <div class="px-6 py-4 border-t border-gray-100 dark:border-dark-border"><x-pagination :paginator="$invoices" /></div>
    @endif
</div>
@endsection