@extends('layouts.app')

@section('title', 'Loan Settlement Details')

@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">Loan Settlement Details</h1>
                    <p class="text-gray-600">Process full settlement for this loan</p>
                </div>
                <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">
                    ← Back to Search
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-800">Please correct the following errors:</p>
                        <ul class="mt-2 text-sm text-red-700">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <!-- Loan Information Card -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Loan Information</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Loan ID:</span>
                        <span class="font-medium">{{ $settlementDetails['loan_id'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Loan Type:</span>
                        <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $settlementDetails['loan_type'])) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Member Name:</span>
                        <span class="font-medium">{{ $settlementDetails['loan']->member->initials ?? 'N/A' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">NIC:</span>
                        <span class="font-medium">{{ $settlementDetails['loan']->member->nic ?? 'N/A' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Branch:</span>
                        <span class="font-medium">{{ $settlementDetails['loan']->branch->branch_name ?? 'N/A' }}</span>
                    </div>
                </div>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Loan Amount:</span>
                        <span class="font-medium">Rs {{ number_format($settlementDetails['loan']->loan_amount ?? 0, 2) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Interest Rate:</span>
                        <span class="font-medium">{{ $settlementDetails['loan']->loanProduct->interest_rate ?? 'N/A' }}%</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Loan Status:</span>
                        <span class="px-2 py-1 text-xs font-medium rounded-full 
                            {{ ($settlementDetails['loan']->status ?? '') === 'settled' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ ucfirst($settlementDetails['loan']->status ?? 'active') }}
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Disbursement Date:</span>
                        <span class="font-medium">
                            @if($settlementDetails['loan']->disbursement_date && is_object($settlementDetails['loan']->disbursement_date))
                                {{ $settlementDetails['loan']->disbursement_date->format('M d, Y') }}
                            @elseif($settlementDetails['loan']->disbursement_date)
                                {{ \Carbon\Carbon::parse($settlementDetails['loan']->disbursement_date)->format('M d, Y') }}
                            @else
                                N/A
                            @endif
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settlement Summary Card -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Settlement Summary</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                    <div class="text-sm text-red-600 mb-1">Total Interest Due</div>
                    <div class="text-2xl font-bold text-red-700">Rs {{ number_format($settlementDetails['total_interest_due'], 2) }}</div>
                </div>
                <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                    <div class="text-sm text-red-600 mb-1">Total Capital Due</div>
                    <div class="text-2xl font-bold text-red-700">Rs {{ number_format($settlementDetails['total_capital_due'], 2) }}</div>
                </div>
                <div class="bg-red-100 p-4 rounded-lg border border-red-300">
                    <div class="text-sm text-red-700 mb-1">Total Amount Due</div>
                    <div class="text-3xl font-bold text-red-800">Rs {{ number_format($settlementDetails['total_due'], 2) }}</div>
                </div>
            </div>
        </div>

        <!-- Installment Details -->
        @if($settlementDetails['installments']->count() > 0)
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">Pending Installments ({{ $settlementDetails['installment_count'] }})</h2>
                <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">Interest Due</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capital Due</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Due</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($settlementDetails['installments'] as $installment)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($installment->installment_date && is_object($installment->installment_date))
                                            {{ $installment->installment_date->format('M d, Y') }}
                                        @elseif($installment->installment_date)
                                            {{ \Carbon\Carbon::parse($installment->installment_date)->format('M d, Y') }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Rs {{ number_format($installment->interest_due, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Rs {{ number_format($installment->capital_due, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Rs {{ number_format($installment->total_due, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
                                            Pending
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        <!-- Payment History -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Payment History</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                    <div class="text-sm text-green-600 mb-1">Total Payments Made</div>
                    <div class="text-2xl font-bold text-green-700">Rs {{ number_format($settlementDetails['total_payments_made'], 2) }}</div>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                    <div class="text-sm text-blue-600 mb-1">Pending Installments</div>
                    <div class="text-2xl font-bold text-blue-700">{{ $settlementDetails['installment_count'] }}</div>
                </div>
                                         <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                             <div class="text-sm text-gray-600 mb-1">Last Payment Date</div>
                             <div class="text-lg font-medium text-gray-800">
                                 @if($settlementDetails['last_payment_date'] && is_object($settlementDetails['last_payment_date']))
                                     {{ $settlementDetails['last_payment_date']->format('M d, Y') }}
                                 @elseif($settlementDetails['last_payment_date'])
                                     {{ \Carbon\Carbon::parse($settlementDetails['last_payment_date'])->format('M d, Y') }}
                                 @else
                                     No payments
                                 @endif
                             </div>
                         </div>
            </div>
        </div>

        <!-- Settlement Form -->
        @if(($settlementDetails['loan']->status ?? '') !== 'settled')
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">Process Settlement</h2>
                
                <form method="POST" action="{{ route('loan-settlement.process', [$settlementDetails['loan_type'], $settlementDetails['loan_id']]) }}" class="space-y-6">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="settlement_amount" class="block text-sm font-medium text-gray-700 mb-2">
                                Settlement Amount <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <span class="absolute left-3 top-2 text-gray-500">Rs</span>
                                <input type="number" 
                                       id="settlement_amount" 
                                       name="settlement_amount" 
                                       step="0.01" 
                                       min="{{ $settlementDetails['total_due'] }}"
                                       value="{{ $settlementDetails['total_due'] }}"
                                       class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                       required>
                            </div>
                            <p class="mt-1 text-sm text-gray-500">Minimum amount: Rs {{ number_format($settlementDetails['total_due'], 2) }}</p>
                        </div>

                        <div>
                            <label for="discount_percentage" class="block text-sm font-medium text-gray-700 mb-2">
                                Interest Discount Percentage
                            </label>
                            <div class="relative">
                                <input type="number" 
                                       id="discount_percentage" 
                                       name="discount_percentage" 
                                       step="0.01" 
                                       min="0" 
                                       max="100" 
                                       value="0"
                                       class="w-full pr-8 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <span class="absolute right-3 top-2 text-gray-500">%</span>
                            </div>
                            <p class="mt-1 text-sm text-gray-500">Optional: Reduce interest amount</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">
                                Payment Method <span class="text-red-500">*</span>
                            </label>
                            <select id="payment_method" 
                                    name="payment_method" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    required>
                                <option value="">Select payment method</option>
                                <option value="cash">Cash</option>
                                <option value="cheque">Cheque</option>
                                <option value="bank_transfer">Bank Transfer</option>
                            </select>
                        </div>

                        <div>
                            <label for="reference_number" class="block text-sm font-medium text-gray-700 mb-2">
                                Reference Number
                            </label>
                            <input type="text" 
                                   id="reference_number" 
                                   name="reference_number" 
                                   placeholder="Cheque number, transaction ID, etc."
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                            Notes
                        </label>
                        <textarea id="notes" 
                                  name="notes" 
                                  rows="3" 
                                  placeholder="Additional notes about this settlement..."
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>

                    <!-- Settlement Preview -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 class="text-lg font-medium text-blue-800 mb-3">Settlement Preview</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-blue-700">Total Due:</span>
                                    <span class="font-medium">Rs {{ number_format($settlementDetails['total_due'], 2) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-blue-700">Discount Amount:</span>
                                    <span class="font-medium" id="discount-amount">Rs 0.00</span>
                                </div>
                                <div class="flex justify-between border-t pt-2">
                                    <span class="text-blue-800 font-semibold">Amount to Pay:</span>
                                    <span class="text-blue-800 font-bold" id="amount-to-pay">Rs {{ number_format($settlementDetails['total_due'], 2) }}</span>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-blue-700">Interest Due:</span>
                                    <span class="font-medium">Rs {{ number_format($settlementDetails['total_interest_due'], 2) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-blue-700">Capital Due:</span>
                                    <span class="font-medium">Rs {{ number_format($settlementDetails['total_capital_due'], 2) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-blue-700">Installments:</span>
                                    <span class="font-medium">{{ $settlementDetails['installment_count'] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-4">
                        <a href="{{ route('loan-settlement.index') }}" 
                           class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-6 rounded-md transition duration-200">
                            Cancel
                        </a>
                        <button type="submit" 
                                class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-md transition duration-200">
                            Process Settlement
                        </button>
                    </div>
                </form>
            </div>
        @else
            <div class="bg-green-50 border border-green-200 rounded-lg p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-green-800">Loan Already Settled</h3>
                        <p class="text-green-700">This loan has already been settled. No further action is required.</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Calculate discount and update preview
    function updateSettlementPreview() {
        const totalDue = {{ json_encode($settlementDetails['total_due']) }};
        const discountPercentage = parseFloat(document.getElementById('discount_percentage').value) || 0;
        const discountAmount = (totalDue * discountPercentage) / 100;
        const amountToPay = totalDue - discountAmount;

        document.getElementById('discount-amount').textContent = 'Rs ' + discountAmount.toFixed(2);
        document.getElementById('amount-to-pay').textContent = 'Rs ' + amountToPay.toFixed(2);
        
        // Update settlement amount field
        document.getElementById('settlement_amount').value = amountToPay.toFixed(2);
    }

    // Update preview when discount percentage changes
    document.getElementById('discount_percentage').addEventListener('input', updateSettlementPreview);
    
    // Update preview when settlement amount changes
    document.getElementById('settlement_amount').addEventListener('input', function() {
        const amount = parseFloat(this.value) || 0;
        const totalDue = {{ json_encode($settlementDetails['total_due']) }};
        
        if (amount < totalDue) {
            this.setCustomValidity('Settlement amount cannot be less than total due amount');
        } else {
            this.setCustomValidity('');
        }
    });

    // Initialize preview
    updateSettlementPreview();
</script>
@endpush