@extends('layouts.app')
@section('content')
<div class="max-w-6xl mx-auto p-6">
    <div class="text-sm text-gray-600 mb-2">Project → Booking #{{ $booking->booking_number }} → Installments</div>
    <h1 class="text-xl font-semibold mb-4">Installment Schedule</h1>
    @if(session('success'))<div class="p-3 mb-4 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>@endif
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="p-4 bg-white rounded shadow">
            <div class="text-xs text-gray-500">Total Due</div>
            <div class="text-lg font-semibold">{{ number_format($totalDue, 2) }}</div>
        </div>
        <div class="p-4 bg-white rounded shadow">
            <div class="text-xs text-gray-500">Paid</div>
            <div class="text-lg font-semibold">{{ number_format($paid, 2) }}</div>
        </div>
        <div class="p-4 bg-white rounded shadow">
            <div class="text-xs text-gray-500">Pending</div>
            <div class="text-lg font-semibold">{{ number_format($pending, 2) }}</div>
        </div>
        <div class="p-4 bg-white rounded shadow">
            <div class="text-xs text-gray-500">Overdue</div>
            <div class="text-lg font-semibold">{{ number_format($overdue, 2) }}</div>
        </div>
    </div>
    <div class="bg-white rounded shadow overflow-hidden">
        <table class="min-w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">#</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Due Date</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Amount</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Fine</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Total</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Status</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Paid Date</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($schedules as $s)
                <tr class="@if($s->status === 'pending' && $s->due_date->lt(\Carbon\Carbon::today())) bg-red-50 @endif">
                    <td class="px-4 py-2">{{ $s->installment_number }}</td>
                    <td class="px-4 py-2">{{ $s->due_date->format('Y-m-d') }}</td>
                    <td class="px-4 py-2">{{ number_format($s->amount, 2) }}</td>
                    <td class="px-4 py-2">{{ number_format($s->fine_amount, 2) }}</td>
                    <td class="px-4 py-2">{{ number_format($s->amount + $s->fine_amount, 2) }}</td>
                    <td class="px-4 py-2 capitalize">{{ $s->status }}</td>
                    <td class="px-4 py-2">{{ $s->paid_at ? $s->paid_at->format('Y-m-d') : '-' }}</td>
                    <td class="px-4 py-2 space-x-2">
                        @if($s->status === 'pending')
                        <a class="text-blue-600" href="{{ route('installments.payment.form', $s) }}">Receive Payment</a>
                        <form method="POST" action="{{ route('installments.calculate.fine', $s) }}" class="inline">
                            @csrf
                            <button class="text-gray-700 ml-2">Calculate Fine</button>
                        </form>
                        @endif
                        @if($s->fine_amount > 0)
                        <form method="POST" action="{{ route('installments.waive.fine', $s) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                            @csrf
                            <button class="text-red-700 ml-2">Waive Fine</button>
                        </form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection