@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <div class="flex justify-between items-center mb-6 mt-4">
            <h4 class="text-lg font-semibold text-gray-600 dark:text-gray-300">
                PAYMENT DETAILS
            </h4>
            <div class="flex space-x-3">
                <a href="{{ route('loan.payment.edit', [$loan, $payment]) }}" 
                   class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Edit Date
                </a>
                <a href="{{ route('loan.payment.download', [$loan, $payment]) }}" 
                   class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                    Download PDF
                </a>
                <a href="{{ route('loan.payment.details', $loan) }}" 
                   class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    Back to Payments
                </a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6">
            <!-- Payment Slip Content -->
            <div class="max-w-2xl mx-auto">
                <!-- Header -->
                <div class="text-center border-b pb-6 mb-6">
                    @if(getLogo())
                        <img src="{{ Storage::url(getLogo()) }}" alt="Company Logo" class="mx-auto mb-4 h-16">
                    @endif
                    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">{{ getApplicationName() }}</h1>
                    <h2 class="text-lg font-semibold text-gray-600 dark:text-gray-400 mt-2">Payment Receipt</h2>
                </div>

                <!-- Payment Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Payment Information</h3>
                        <div class="space-y-3">
                            <div>
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Receipt No:</span>
                                <span class="text-sm text-gray-800 dark:text-gray-200 ml-2">{{ $payment->slug ?? 'N/A' }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Payment Date:</span>
                                <span class="text-sm text-gray-800 dark:text-gray-200 ml-2">{{ formatDate($payment->deposit_date) }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Amount Paid:</span>
                                <span class="text-lg font-bold text-green-600 ml-2">{{ formatCurrencyDecimals($payment->amount) }}</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Loan Information</h3>
                        <div class="space-y-3">
                            <div>
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Loan Code:</span>
                                <span class="text-sm text-gray-800 dark:text-gray-200 ml-2">{{ $loan->loan_code }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Loan Amount:</span>
                                <span class="text-sm text-gray-800 dark:text-gray-200 ml-2">{{ formatCurrencyDecimals($loan->loan_amount) }}</span>
                            </div>
                            @if($loan->individualClient)
                                <div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Client:</span>
                                    <span class="text-sm text-gray-800 dark:text-gray-200 ml-2">{{ $loan->individualClient->client->fullname ?? 'N/A' }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Payment Summary -->
                <div class="border-t pt-6">
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Total Amount Paid:</span>
                            <span class="text-2xl font-bold text-green-600">{{ formatCurrencyDecimals($payment->amount) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="text-center mt-8 pt-6 border-t text-sm text-gray-500 dark:text-gray-400">
                    <p>Generated on {{ formatDate(now()) }}</p>
                    <p>This is a computer generated receipt</p>
                </div>
            </div>
        </div>
    </div>
@endsection