@extends('layouts.app')

@section('title', 'Settlement History')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Settlement History</h1>
                    <p class="text-gray-600">Payment history for loan settlement</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('loan-settlement.show', [$loanType, $loanId]) }}" 
                       class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-200">
                        ← Back to Loan
                    </a>
                    <a href="{{ route('loan-settlement.index') }}" 
                       class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition duration-200">
                        Search New Loan
                    </a>
                </div>
            </div>
        </div>

        <!-- Loan Summary -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Loan Summary</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <span class="text-sm text-gray-600">Loan Type:</span>
                    <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $loanType)) }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-600">Loan ID:</span>
                    <p class="font-medium">{{ $loanId }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-600">Total Settlements:</span>
                    <p class="font-medium">{{ $payments->count() }}</p>
                </div>
            </div>
        </div>

        <!-- Settlement History -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800">Settlement Payments</h2>
            </div>

            @if($payments->count() > 0)
                <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 tracking-wider">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Interest Paid</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capital Paid</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reference</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($payments as $payment)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($payment->payment_date && is_object($payment->payment_date))
                                            {{ $payment->payment_date->format('M d, Y') }}
                                        @elseif($payment->payment_date)
                                            {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        <span class="font-medium text-green-600">
                                            Rs {{ number_format($payment->amount, 2) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Rs {{ number_format($payment->interest_paid, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Rs {{ number_format($payment->capital_paid, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        <span class="px-2 py-1 text-xs font-medium rounded-full 
                                            {{ $payment->payment_method === 'cash' ? 'bg-green-100 text-green-800' : 
                                               ($payment->payment_method === 'cheque' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800') }}">
                                            {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $payment->reference_number ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs font-medium rounded-full 
                                            {{ $payment->status === 'paid' ? 'bg-green-100 text-green-800' : 
                                               ($payment->status === 'reversed' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                                            {{ ucfirst($payment->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        <div class="flex space-x-2">
                                            @if($payment->status !== 'reversed')
                                                <a href="{{ route('payments.receipt', ['regular', $payment->id]) }}" 
                                                   target="_blank"
                                                   class="text-blue-600 hover:text-blue-900 text-sm font-medium">
                                                    Receipt
                                                </a>
                                            @endif
                                            @if($payment->status === 'paid')
                                                <button onclick="showPaymentDetails({{ $payment->id }})" 
                                                        class="text-green-600 hover:text-green-900 text-sm font-medium">
                                                    Details
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Summary Statistics -->
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="text-center">
                            <div class="text-sm text-gray-600">Total Settlements</div>
                            <div class="text-lg font-semibold text-gray-900">{{ $payments->count() }}</div>
                        </div>
                        <div class="text-center">
                            <div class="text-sm text-gray-600">Total Amount</div>
                            <div class="text-lg font-semibold text-green-600">
                                Rs {{ number_format($payments->sum('amount'), 2) }}
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="text-sm text-gray-600">Total Interest</div>
                            <div class="text-lg font-semibold text-blue-600">
                                Rs {{ number_format($payments->sum('interest_paid'), 2) }}
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="text-sm text-gray-600">Total Capital</div>
                            <div class="text-lg font-semibold text-purple-600">
                                Rs {{ number_format($payments->sum('capital_paid'), 2) }}
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="px-6 py-12 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">No settlements found</h3>
                    <p class="mt-1 text-sm text-gray-500">This loan has no settlement payments yet.</p>
                </div>
            @endif
        </div>

        <!-- Payment Details Modal -->
        <div id="paymentDetailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
            <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
                <div class="mt-3">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-900">Payment Details</h3>
                        <button onclick="hidePaymentDetails()" class="text-gray-400 hover:text-gray-600">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div id="paymentDetailsContent" class="space-y-3">
                        <!-- Payment details will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function showPaymentDetails(paymentId) {
        // Show modal
        document.getElementById('paymentDetailsModal').classList.remove('hidden');
        
        // Load payment details via AJAX (you can implement this if needed)
        // For now, we'll just show a simple message
        document.getElementById('paymentDetailsContent').innerHTML = `
            <div class="text-center py-4">
                <p class="text-gray-600">Payment ID: ${paymentId}</p>
                <p class="text-sm text-gray-500 mt-2">Detailed payment information can be loaded here</p>
            </div>
        `;
    }

    function hidePaymentDetails() {
        document.getElementById('paymentDetailsModal').classList.add('hidden');
    }

    // Close modal when clicking outside
    document.getElementById('paymentDetailsModal').addEventListener('click', function(e) {
        if (e.target === this) {
            hidePaymentDetails();
        }
    });

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            hidePaymentDetails();
        }
    });
</script>
@endpush