@extends('layouts.app')

@section('title', __('dashboard.invoices'))

@section('content')
<div class="container mx-auto px-4 py-12">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white">{{ __('dashboard.invoices') }}</h1>
        <p class="text-gray-400 mt-2">{{ __('dashboard.invoices_description') }}</p>
    </div>

    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        @if(isset($invoices) && count($invoices) > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-gray-400 border-b border-gray-700">
                            <th class="pb-3">{{ __('dashboard.invoice_number') }}</th>
                            <th class="pb-3">{{ __('dashboard.date') }}</th>
                            <th class="pb-3">{{ __('dashboard.description') }}</th>
                            <th class="pb-3">{{ __('dashboard.amount') }}</th>
                            <th class="pb-3">{{ __('dashboard.status') }}</th>
                            <th class="pb-3">{{ __('dashboard.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $invoice)
                            <tr class="border-b border-gray-700">
                                <td class="py-4 text-white">{{ $invoice->invoice_number }}</td>
                                <td class="py-4 text-white">{{ $invoice->created_at->format('Y-m-d') }}</td>
                                <td class="py-4 text-white">{{ $invoice->description }}</td>
                                <td class="py-4 text-white">${{ number_format($invoice->amount, 2) }}</td>
                                <td class="py-4">
                                    @if($invoice->status == 'paid')
                                        <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.paid') }}</span>
                                    @elseif($invoice->status == 'pending')
                                        <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.pending') }}</span>
                                    @else
                                        <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.failed') }}</span>
                                    @endif
                                </td>
                                <td class="py-4">
                                    <div class="flex space-x-3">
                                        <a href="{{ route('invoices.show', [app()->getLocale(), $invoice->id]) }}" class="text-blue-400 hover:text-blue-300">
                                            {{ __('dashboard.view') }}
                                        </a>
                                        <a href="{{ route('invoices.download', [app()->getLocale(), $invoice->id]) }}" class="text-blue-400 hover:text-blue-300">
                                            {{ __('dashboard.download') }}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-6">
                {{ $invoices->links() }}
            </div>
        @else
            <p class="text-gray-400">{{ __('dashboard.no_invoices_found') }}</p>
        @endif
    </div>
</div>
@endsection