@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">
                EDIT REPAYMENT SCHEDULE
            </h4>
            <div class="flex space-x-3">
                <a href="{{ route('loans.repayment-schedule.index', $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 Schedule
                </a>
                <a href="{{ route('loans.show', $loan) }}" 
                   class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    View Loan Details
                </a>
            </div>
        </div>

        <!-- Loan Summary Card -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Loan Code</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ $loan->loan_code }}</p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Client</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">
                        @if($loan->individualClient)
                            {{ $loan->individualClient->client->fullname }}
                        @else
                            Group Loan
                        @endif
                    </p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Loan Amount</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ formatCurrencyDecimals($loan->loan_amount) }}</p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Installment Amount</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ formatCurrencyDecimals($loan->installment_amount) }}</p>
                </div>
            </div>
        </div>

        <!-- Edit Form -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6">
            <form action="{{ route('loans.repayment-schedule.update', [$loan, $schedule]) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Left Column -->
                    <div class="space-y-4">
                        <x-form.input 
                            type="date" 
                            name="date" 
                            label="Due Date" 
                            required="true" 
                            value="{{ old('date', $schedule->date ? $schedule->date->format('Y-m-d') : '') }}"
                        />

                        <x-form.input 
                            type="number" 
                            name="amount" 
                            label="Installment Amount" 
                            min="0" 
                            step="0.01"
                            required="true" 
                            value="{{ old('amount', $schedule->amount) }}" 
                            placeholder="Enter installment amount"
                        />

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Payment Status <span class="text-red-500">*</span>
                            </label>
                            <select name="status" 
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                    required>
                                @foreach($statuses as $value => $label)
                                    <option value="{{ $value }}" {{ old('status', $schedule->status) == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('status')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-4">
                        <x-form.input 
                            type="number" 
                            name="principal_paid" 
                            label="Principal Paid" 
                            min="0" 
                            step="0.01"
                            value="{{ old('principal_paid', $schedule->principal_paid) }}" 
                            placeholder="Enter principal amount paid"
                        />

                        <x-form.input 
                            type="number" 
                            name="interest_paid" 
                            label="Interest Paid" 
                            min="0" 
                            step="0.01"
                            value="{{ old('interest_paid', $schedule->interest_paid) }}" 
                            placeholder="Enter interest amount paid"
                        />

                        <!-- Balance Display (Read-only) -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Current Balance
                            </label>
                            <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300">
                                {{ formatCurrencyDecimals($schedule->balance) }}
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Balance will be automatically calculated based on payments
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Payment Summary Section -->
                <div class="mt-8 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300 mb-4">Payment Summary</h5>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">Installment Amount:</span>
                            <p class="font-semibold">{{ formatCurrencyDecimals($schedule->amount) }}</p>
                        </div>
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">Principal Paid:</span>
                            <p class="font-semibold text-green-600">{{ formatCurrencyDecimals($schedule->principal_paid ?: 0) }}</p>
                        </div>
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">Interest Paid:</span>
                            <p class="font-semibold text-blue-600">{{ formatCurrencyDecimals($schedule->interest_paid ?: 0) }}</p>
                        </div>
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">Remaining Balance:</span>
                            <p class="font-semibold text-red-600">{{ formatCurrencyDecimals($schedule->balance ?: 0) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-end mt-8 space-x-4">
                    <a href="{{ route('loans.repayment-schedule.index', $loan) }}" 
                       class="px-6 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">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        Update Schedule
                    </button>
                </div>
            </form>
        </div>

        <!-- Help Information -->
        <div class="mt-6 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                        Payment Status Guidelines
                    </h3>
                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                        <ul class="list-disc pl-5 space-y-1">
                            <li><strong>Pending:</strong> No payments have been made for this installment</li>
                            <li><strong>Partial:</strong> Some payment has been made but the full amount is still outstanding</li>
                            <li><strong>Paid:</strong> The full installment amount has been paid</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Auto-calculate balance when amounts change
        document.addEventListener('DOMContentLoaded', function() {
            const amountInput = document.querySelector('input[name="amount"]');
            const principalInput = document.querySelector('input[name="principal_paid"]');
            const interestInput = document.querySelector('input[name="interest_paid"]');
            const statusSelect = document.querySelector('select[name="status"]');

            function updateStatusBasedOnPayments() {
                const amount = parseFloat(amountInput.value) || 0;
                const principal = parseFloat(principalInput.value) || 0;
                const interest = parseFloat(interestInput.value) || 0;
                const totalPaid = principal + interest;

                if (totalPaid === 0) {
                    statusSelect.value = 'pending';
                } else if (totalPaid >= amount) {
                    statusSelect.value = 'paid';
                } else if (totalPaid > 0) {
                    statusSelect.value = 'partial';
                }
            }

            // Add event listeners
            [principalInput, interestInput].forEach(input => {
                if (input) {
                    input.addEventListener('input', updateStatusBasedOnPayments);
                }
            });
        });
    </script>
@endsection