@extends('layouts.app')

@section('title','Due Payments')
@section('page_title','Due Payments')

@section('content')

<table style="width:100%;background:#fff;border-collapse:collapse;">
    <thead>
        <tr style="background:#e5e7eb;">
            <th style="padding:12px;text-align:left;">Project</th>
            <th style="padding:12px;text-align:left;">Payment</th>
            <th style="padding:12px;text-align:left;">Amount</th>
            <th style="padding:12px;text-align:left;">Due Date</th>
            <th style="padding:12px;text-align:left;">Status</th>
            <th style="padding:12px;text-align:left;">Action</th>
        </tr>
    </thead>

    <tbody>
        @foreach($payments as $payment)
            <tr style="border-bottom:1px solid #ddd;">
                <td style="padding:12px;">
                    {{ $payment->project->project_name ?? '-' }}
                </td>

                <td style="padding:12px;">
                    {{ $payment->payment_title }}
                </td>

                <td style="padding:12px;">
                    {{ $payment->project->currency ?? '' }} {{ $payment->amount }}
                </td>

                <td style="padding:12px;">
                    {{ $payment->due_date }}
                </td>

                <td style="padding:12px;">
                    {{ ucwords($payment->status) }}
                </td>

                <td style="padding:12px;">
                    <a href="{{ route('projects.show',$payment->project_id) }}"
                       style="background:#2563eb;color:white;padding:6px 10px;border-radius:4px;text-decoration:none;">
                        View Project
                    </a>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

@endsection