@extends('layouts.app')

@section('title', 'Outstanding Dues Report')
@section('page-title', 'Outstanding Dues Report')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
        <div class="text-gray-500 text-sm font-medium uppercase">Total Outstanding Amount</div>
        <div class="text-2xl font-bold text-red-600 mt-2">{{ number_format($totalDue, 2) }}</div>
    </div>
    <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
        <div class="text-gray-500 text-sm font-medium uppercase">Pending Shipments Count</div>
        <div class="text-2xl font-bold text-gray-800 mt-2">{{ $bookings->count() }}</div>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">Outstanding Payments</h3>
        <button onclick="window.print()" class="text-gray-600 hover:text-gray-800">
            <i class="fas fa-print mr-2"></i> Print Report
        </button>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">CNTR No</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Customer</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Receiver</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Paid</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($bookings as $booking)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $booking->booking_date->format('d M, Y') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        <a href="{{ route('bookings.show', $booking) }}" class="text-indigo-600 hover:underline">{{ $booking->cntr_no }}</a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $booking->customer->name ?? 'N/A' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $booking->receiver_name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ number_format($booking->total_amount, 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">{{ number_format($booking->advance_payment, 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-bold">{{ number_format($booking->due_payment, 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                            {{ $booking->payment_status == 'Paid' ? 'bg-green-100 text-green-800' : 
                               ($booking->payment_status == 'Partial' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                            {{ $booking->payment_status }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-4 text-center text-gray-500">No outstanding dues found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection