@extends('layouts.app')

@section('title', 'All Invoices')

@section('content')
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h2><span class="material-icons">receipt_long</span> All Invoices</h2>
        <a href="{{ route('invoices.create') }}" class="btn btn-primary">Create New Invoice</a>
    </div>

    @if($invoices->count() > 0)
        <table>
            <thead>
                <tr>
                    <th>Invoice #</th>
                    <th>Customer Name</th>
                    <th>Issue Date</th>
                    <th>Due Date</th>
                    <th>Total Amount</th>
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                <tr>
                    <td>{{ $invoice->formatted_invoice_number }}</td>
                    <td>{{ $invoice->customer_name }}</td>
                    <td>{{ $invoice->issue_date->format('M d, Y') }}</td>
                    <td>{{ $invoice->due_date ? $invoice->due_date->format('M d, Y') : 'N/A' }}</td>
                    <td>{{ $invoice->formatted_total }}</td>
                    <td>
                        <span class="badge badge-{{ $invoice->status }}">
                            {{ ucfirst($invoice->status) }}
                        </span>
                    </td>
                    <td class="text-center">
                        <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-info" style="padding: 6px 12px; font-size: 12px;"><span class="material-icons" style="font-size: 16px;">visibility</span> View</a>
                        <a href="{{ route('invoices.edit', $invoice) }}" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px;"><span class="material-icons" style="font-size: 16px;">edit</span> Edit</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            {{ $invoices->links() }}
        </div>
    @else
        <p style="text-align: center; padding: 40px; color: #666;">
            No invoices found. <a href="{{ route('invoices.create') }}">Create your first invoice</a>
        </p>
    @endif
</div>
@endsection