@if($installments->count() > 0)
<div class="table-responsive">
    <table class="table table-hover">
        <thead class="thead-light">
            <tr>
                <th>#</th>
                <th>Customer</th>
                <th>Sale Invoice</th>
                <th>Installment</th>
                <th>Amount</th>
                <th>Due Date</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($installments as $installment)
            @php
                $rowClass = '';
                if($installment->status == 'paid') {
                    $rowClass = 'paid';
                } elseif($installment->is_overdue) {
                    $rowClass = 'overdue';
                } elseif($installment->due_date->diffInDays(now()) <= 3) {
                    $rowClass = 'due-soon';
                }
            @endphp
            <tr class="installment-row {{ $rowClass }}" data-id="{{ $installment->id }}">
                <td>{{ $loop->iteration }}</td>
                <td>
                    <strong>{{ $installment->customer->name ?? 'N/A' }}</strong>
                    <br>
                    <small class="text-muted">{{ $installment->customer->phone ?? '' }}</small>
                </td>
                <td>
                    <a href="{{ route('sales.show', $installment->sale_id) }}" class="text-primary">
                        {{ $installment->sale->invoice_number ?? 'N/A' }}
                    </a>
                </td>
                <td>
                    <strong>{{ $installment->installment_no }}/{{ $installment->total_installments }}</strong>
                    <br>
                    <small class="text-muted">
                        {{ $installment->due_date->format('d M, Y') }}
                        @if($installment->is_overdue)
                        <span class="text-danger">
                            ({{ $installment->due_date->diffForHumans() }})
                        </span>
                        @elseif($installment->due_date->isToday())
                        <span class="text-warning">(Today)</span>
                        @elseif($installment->due_date->isFuture() && $installment->due_date->diffInDays(now()) <= 3)
                        <span class="text-info">
                            (in {{ $installment->due_date->diffForHumans() }})
                        </span>
                        @endif
                    </small>
                </td>
                <td>
                    <strong class="text-success">৳{{ number_format($installment->amount, 2) }}</strong>
                    <br>
                    @if($installment->late_fee > 0)
                    <small class="text-danger">
                        Late Fee: ৳{{ number_format($installment->late_fee, 2) }}
                    </small>
                    @endif
                </td>
                <td>
                    {{ $installment->due_date->format('d M, Y') }}
                    <br>
                    <small class="text-muted">
                        @if($installment->paid_date)
                        Paid: {{ $installment->paid_date->format('d M, Y') }}
                        @endif
                    </small>
                </td>
                <td>
                    @if($installment->status == 'paid')
                    <span class="badge badge-success">
                        <i class="fas fa-check-circle"></i> Paid
                    </span>
                    @elseif($installment->is_overdue)
                    <span class="badge badge-danger">
                        <i class="fas fa-exclamation-triangle"></i> Overdue
                    </span>
                    @else
                    <span class="badge badge-warning">
                        <i class="fas fa-clock"></i> Pending
                    </span>
                    @endif
                </td>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        @if($installment->status == 'pending')
                        <button type="button" class="btn btn-success pay-btn"
                                data-id="{{ $installment->id }}"
                                data-amount="{{ $installment->amount }}"
                                data-due-amount="{{ $installment->amount + $installment->late_fee }}"
                                title="Pay Installment">
                            <i class="fas fa-money-bill-wave"></i> Pay
                        </button>
                        
                        <button type="button" class="btn btn-warning remind-btn"
                                data-id="{{ $installment->id }}"
                                data-amount="{{ $installment->amount }}"
                                data-due-date="{{ $installment->due_date->format('d M, Y') }}"
                                data-installment-no="{{ $installment->installment_no }}/{{ $installment->total_installments }}"
                                title="Send Reminder">
                            <i class="fas fa-bell"></i> Remind
                        </button>
                        @endif
                        
                        <a href="{{ route('installments.show', $installment->id) }}" 
                           class="btn btn-info" title="View Details">
                            <i class="fas fa-eye"></i>
                        </a>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Pagination -->
@if(method_exists($installments, 'links'))
<div class="d-flex justify-content-between align-items-center mt-3">
    <div class="text-muted">
        Showing {{ $installments->firstItem() ?? 0 }} to {{ $installments->lastItem() ?? 0 }} 
        of {{ $installments->total() }} entries
    </div>
    <div>
        {{ $installments->links() }}
    </div>
</div>
@endif

@else
<div class="text-center py-5">
    <i class="fas fa-calendar-alt fa-3x text-muted mb-3"></i>
    <h5>No Installments Found</h5>
    <p class="text-muted">No installment records found for the selected criteria.</p>
    <a href="{{ route('sales.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Create New Sale
    </a>
</div>
@endif