@extends('layouts.main')
@section('title', 'Invoices')
@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Invoices</h2>
        <p class="text-gray-500 dark:text-gray-400">Manage your sales invoices</p>
    </div>
    <a href="{{ route('invoices.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
        <i class="fas fa-plus mr-2"></i> Create Invoice
    </a>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4 flex items-center">
        <i class="fas fa-check-circle mr-2"></i>
        {{ session('success') }}
    </div>
@endif

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    @if($invoices->count() > 0)
        <table class="w-full">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                    <th class="px-6 py-4 font-semibold">Invoice #</th>
                    <th class="px-6 py-4 font-semibold">Customer</th>
                    <th class="px-6 py-4 font-semibold">Date</th>
                    <th class="px-6 py-4 font-semibold text-right">Amount</th>
                    <th class="px-6 py-4 font-semibold text-center">Status</th>
                    <th class="px-6 py-4 font-semibold text-center">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                @foreach($invoices as $invoice)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 font-medium text-gray-800 dark:text-white">{{ $invoice->invoice_number }}</td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ $invoice->customer->name ?? 'N/A' }}</td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ $invoice->invoice_date->format('M d, Y') }}</td>
                        <td class="px-6 py-4 text-right font-semibold text-gray-800 dark:text-white">${{ number_format($invoice->total, 2) }}</td>
                        <td class="px-6 py-4 text-center">
                            <span class="px-3 py-1 rounded-full text-sm font-medium 
                                {{ $invoice->status === 'paid' ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300' : '' }}
                                {{ $invoice->status === 'sent' ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : '' }}
                                {{ $invoice->status === 'draft' ? 'bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300' : '' }}">
                                {{ ucfirst($invoice->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <a href="{{ route('invoices.show', $invoice) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('invoices.edit', $invoice) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('invoices.destroy', $invoice) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" onclick="return confirm('Are you sure?')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="text-center py-12">
            <i class="fas fa-file-invoice text-gray-300 dark:text-gray-600 text-5xl mb-4"></i>
            <p class="text-gray-500 dark:text-gray-400 text-lg mb-4">No invoices yet</p>
            <a href="{{ route('invoices.create') }}" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg">
                Create your first invoice
            </a>
        </div>
    @endif
</div>
@endsection