Notes

<div class="card card-primary">
<div class="card-body">
<h4 style="font-weight:500">Invoice History:</h4><br>

@if(isset($invoices) && count($invoices) > 0)
<ul style="list-style-type: circle;">
@foreach($invoices as $invoice)
<li style="margin-bottom: 10px;">
<!-- Button to open modal -->
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#invoiceModal{{ $invoice->id }}">
Invoice #{{ $invoice->number }}
</button>

&nbsp; ({{ ucfirst($invoice->description ?? 'General Payment') }})
&nbsp; ${{ number_format($invoice->total / 100, 2) }}
</li>

<!-- Modal (ID should be dynamic!) -->
<div class="modal fade" id="invoiceModal{{ $invoice->id }}" tabindex="-1" aria-labelledby="invoiceModalLabel{{ $invoice->id }}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title" id="invoiceModalLabel{{ $invoice->id }}">
Invoice #{{ $invoice->number ?? 'N/A' }}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<!-- Modal Body -->
<div class="modal-body text-center">
<p><strong>Invoice For:</strong>
@if($invoice->subscription)
Subscription
@elseif($invoice->order)
Order
@else
Unknown
@endif
</p>

<p class="mt-3">Click the button below to view or download your invoice:</p>

<div class="d-flex justify-content-center mt-4 gap-3">
<!-- View Invoice -->
<a href="{{ $invoice->invoice_pdf }}" target="_blank" class="btn btn-primary mr-2">
View Invoice
</a>

<!-- Download Invoice -->
<a href="{{ $invoice->invoice_pdf }}" target="_blank" download class="btn btn-success">
Download Invoice
</a>
</div>
</div>

<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>
@endforeach
</ul>
@else
<p>No invoices found.</p>
@endif

</div>
</div>