@extends('layouts.app')

@section('title', 'Reschedule Loan - ' . $loan->loan_number)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-calendar-alt me-2 text-primary"></i>Reschedule Loan</h1>
                    <p class="text-muted mb-0">Loan Number: {{ $loan->loan_number }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Loan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-card card">
                <div class="card-body">
                    <!-- Current Loan Terms -->
                    <div class="section-wrapper mb-4">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <h5>Current Loan Terms</h5>
                        </div>
                        <div class="alert alert-info">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Principal Amount</label>
                                        <div class="info-value text-success fw-bold">
                                            ${{ number_format($loan->amount, 2) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Interest Rate</label>
                                        <div class="info-value">
                                            {{ $loan->interest_rate }}%
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Loan Term</label>
                                        <div class="info-value">
                                            {{ $loan->duration_months }} months
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Monthly Payment</label>
                                        <div class="info-value">
                                            ${{ number_format($loan->monthly_payment, 2) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Outstanding Balance</label>
                                        <div class="info-value text-danger fw-bold">
                                            ${{ number_format($loan->outstanding_balance, 2) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-item">
                                        <label class="info-label">Remaining Payments</label>
                                        <div class="info-value">
                                            @php
                                                // Calculate remaining payments directly in the view as fallback
                                                $totalPaid = $loan->repayments->sum('amount');
                                                $remainingPaymentsView = $loan->duration_months;
                                                if ($totalPaid > 0) {
                                                    $paidMonths = floor($totalPaid / $loan->monthly_payment);
                                                    $remainingPaymentsView = max(0, $loan->duration_months - $paidMonths);
                                                }
                                                echo $remainingPaymentsView;
                                            @endphp
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h5 class="alert-heading">Please fix the following errors:</h5>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('loans.reschedule.store', $loan->id) }}" method="POST">
                        @csrf

                        <div class="section-wrapper">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <h5>New Loan Terms</h5>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="reschedule_type" class="form-label">Reschedule Type <span class="text-danger">*</span></label>
                                        <select class="form-control @error('reschedule_type') is-invalid @enderror"
                                                id="reschedule_type" name="reschedule_type" required>
                                            <option value="">Select Reschedule Type</option>
                                            <option value="extend_duration" {{ old('reschedule_type') == 'extend_duration' ? 'selected' : '' }}>
                                                Extend Duration Only
                                            </option>
                                            <option value="change_rate" {{ old('reschedule_type') == 'change_rate' ? 'selected' : '' }}>
                                                Change Interest Rate Only
                                            </option>
                                            <option value="restructure" {{ old('reschedule_type') == 'restructure' ? 'selected' : '' }}>
                                                Complete Restructure
                                            </option>
                                        </select>
                                        @error('reschedule_type')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="reason" class="form-label">Reason for Rescheduling <span class="text-danger">*</span></label>
                                        <textarea class="form-control @error('reason') is-invalid @enderror"
                                                  id="reason" name="reason" rows="2" required
                                                  placeholder="Please provide a detailed reason for rescheduling...">{{ old('reason') }}</textarea>
                                        @error('reason')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Dynamic Fields Based on Reschedule Type -->
                            <div id="reschedule_fields">
                                <!-- Extend Duration Fields -->
                                <div class="reschedule-type-fields" id="extend_duration_fields" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="new_duration" class="form-label">New Loan Term (months) <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control @error('new_duration') is-invalid @enderror"
                                                       id="new_duration" name="new_duration"
                                                       value="{{ old('new_duration', $loan->duration_months) }}"
                                                       min="{{ $loan->duration_months + 1 }}" max="360" required>
                                                @error('new_duration')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                <small class="form-text text-muted">
                                                    Minimum: {{ $loan->duration_months + 1 }} months, Maximum: 360 months
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">New Monthly Payment</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">$</span>
                                                    <input type="text" class="form-control"
                                                           id="new_monthly_payment_extend" readonly>
                                                </div>
                                                <small class="form-text text-muted">
                                                    This will be calculated automatically
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Change Rate Fields -->
                                <div class="reschedule-type-fields" id="change_rate_fields" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="new_interest_rate" class="form-label">New Interest Rate (%) <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control @error('new_interest_rate') is-invalid @enderror"
                                                           id="new_interest_rate" name="new_interest_rate"
                                                           value="{{ old('new_interest_rate', $loan->interest_rate) }}"
                                                           step="0.01" min="0.1" max="50" required>
                                                    <span class="input-group-text">%</span>
                                                </div>
                                                @error('new_interest_rate')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label class="form-label">New Monthly Payment</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">$</span>
                                                    <input type="text" class="form-control"
                                                           id="new_monthly_payment_rate" readonly>
                                                </div>
                                                <small class="form-text text-muted">
                                                    This will be calculated automatically
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Restructure Fields -->
                                <div class="reschedule-type-fields" id="restructure_fields" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="new_amount" class="form-label">New Principal Amount</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">$</span>
                                                    <input type="number" class="form-control @error('new_amount') is-invalid @enderror"
                                                           id="new_amount" name="new_amount"
                                                           value="{{ old('new_amount', $loan->amount) }}"
                                                           step="0.01" min="0" max="100000">
                                                </div>
                                                @error('new_amount')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="new_duration_restructure" class="form-label">New Loan Term (months) <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control @error('new_duration') is-invalid @enderror"
                                                       id="new_duration_restructure" name="new_duration"
                                                       value="{{ old('new_duration', $loan->duration_months) }}"
                                                       min="1" max="360" required>
                                                @error('new_duration')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="new_interest_rate_restructure" class="form-label">New Interest Rate (%) <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control @error('new_interest_rate') is-invalid @enderror"
                                                           id="new_interest_rate_restructure" name="new_interest_rate"
                                                           value="{{ old('new_interest_rate', $loan->interest_rate) }}"
                                                           step="0.01" min="0.1" max="50" required>
                                                    <span class="input-group-text">%</span>
                                                </div>
                                                @error('new_interest_rate')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group mb-3">
                                                <label class="form-label">New Monthly Payment</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">$</span>
                                                    <input type="text" class="form-control"
                                                           id="new_monthly_payment_restructure" readonly>
                                                </div>
                                                <small class="form-text text-muted">
                                                    This will be calculated automatically
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Section -->
                            <div class="card mt-4" id="previewSection" style="display: none;">
                                <div class="card-header bg-success text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-calculator me-2"></i> New Payment Schedule Preview
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="preview-item">
                                                <label>New Monthly Payment:</label>
                                                <span id="previewMonthlyPayment" class="text-success fw-bold"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="preview-item">
                                                <label>Total Interest:</label>
                                                <span id="previewTotalInterest" class="text-info"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="preview-item">
                                                <label>Total Payment:</label>
                                                <span id="previewTotalPayment" class="text-primary"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="preview-item">
                                                <label>Term Change:</label>
                                                <span id="previewTermChange"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- New Payment Schedule Table -->
                                    <div class="mt-4" id="schedulePreview" style="display: none;">
                                        <h6 class="text-success mb-3">
                                            <i class="fas fa-table me-2"></i> New Payment Schedule
                                        </h6>
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered" id="previewScheduleTable">
                                                <thead class="table-success">
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th>Due Date</th>
                                                        <th class="text-end">Principal</th>
                                                        <th class="text-end">Interest</th>
                                                        <th class="text-end">Payment</th>
                                                        <th class="text-end">Balance</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="previewScheduleBody">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="mt-2">
                                        <small class="text-muted">
                                            Note: This preview is based on the current outstanding balance and new terms
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-warning btn-lg">
                                    <i class="fas fa-calendar-alt me-2"></i> Submit Reschedule Request
                                </button>
                                <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary btn-lg">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-green: #198754;
    --primary-green-light: #d1e7dd;
    --primary-green-dark: #146c43;
    --accent-yellow: #ffc107;
    --accent-yellow-light: #fff3cd;
    --success-green: #198754;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --info-blue: #0dcaf0;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

/* Navigation Bar Styles */
.navigation-bar {
    background: white;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-title h1 {
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.page-title h1 i {
    color: var(--primary-green);
}

.page-title p {
    color: var(--gray-600);
    margin-bottom: 0;
}

.action-buttons-nav .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.action-buttons-nav .btn-outline-secondary {
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.action-buttons-nav .btn-outline-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

/* Form Card */
.form-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: none;
    overflow: hidden;
}

.form-card .card-body {
    padding: 2rem;
}

/* Section Styles */
.section-wrapper {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 14px;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.section-wrapper:hover {
    border-color: var(--primary-green);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12);
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-green);
}

.section-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-header .icon-wrapper {
    width: 36px;
    height: 36px;
    background: var(--primary-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

/* Info Items */
.info-item {
    margin-bottom: 1rem;
}

.info-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-value {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--gray-900);
    font-weight: 500;
}

/* Form Controls */
.form-control, .form-select {
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger-red);
}

.invalid-feedback {
    font-size: 0.875rem;
    color: var(--danger-red);
    margin-top: 0.25rem;
}

/* Buttons */
.btn-warning {
    background: var(--accent-yellow);
    border: none;
    color: #000;
    font-weight: 600;
}

.btn-warning:hover {
    background: #e6a700;
    transform: translateY(-1px);
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}

/* Preview Items */
.preview-item {
    text-align: center;
    padding: 0.5rem;
}

.preview-item label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.preview-item span {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navigation-bar {
        padding: 1rem 0;
    }

    .page-title h1 {
        font-size: 1.5rem;
    }

    .action-buttons-nav {
        margin-top: 1rem;
    }

    .action-buttons-nav .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-card .card-body {
        padding: 1.5rem;
    }

    .section-wrapper {
        padding: 1rem;
    }

    .btn-lg {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const rescheduleType = document.getElementById('reschedule_type');
    const rescheduleFields = document.querySelectorAll('.reschedule-type-fields');
    const previewSection = document.getElementById('previewSection');

    // Outstanding balance for calculations
    const outstandingBalance = {{ $loan->outstanding_balance }};
    const currentTerm = {{ $loan->duration_months }};
    const currentRate = {{ $loan->interest_rate }};
    const currentMonthlyPayment = {{ $loan->monthly_payment }};

    function showRescheduleFields(type) {
        // Hide all fields
        rescheduleFields.forEach(field => {
            field.style.display = 'none';
        });

        // Show selected fields
        const selectedField = document.getElementById(type + '_fields');
        if (selectedField) {
            selectedField.style.display = 'block';
        }

        // Show preview section if a type is selected
        if (type) {
            previewSection.style.display = 'block';
            calculatePreview(type);
        } else {
            previewSection.style.display = 'none';
        }
    }

    function calculateMonthlyPayment(principal, rate, term) {
        if (term <= 0 || rate < 0 || principal <= 0) {
            return 0;
        }

        const monthlyRate = rate / 100 / 12;
        const payment = principal * monthlyRate * Math.pow(1 + monthlyRate, term) /
                       (Math.pow(1 + monthlyRate, term) - 1);

        return isFinite(payment) ? payment : 0;
    }

    function calculatePreview(type) {
        let principal = outstandingBalance;
        let rate = currentRate;
        let term = currentTerm;
        let monthlyPayment = 0;

        switch (type) {
            case 'extend_duration':
                term = parseInt(document.getElementById('new_duration').value) || currentTerm;
                monthlyPayment = calculateMonthlyPayment(principal, rate, term);
                document.getElementById('new_monthly_payment_extend').value = monthlyPayment.toFixed(2);
                break;

            case 'change_rate':
                rate = parseFloat(document.getElementById('new_interest_rate').value) || currentRate;
                monthlyPayment = calculateMonthlyPayment(principal, rate, term);
                document.getElementById('new_monthly_payment_rate').value = monthlyPayment.toFixed(2);
                break;

            case 'restructure':
                principal = parseFloat(document.getElementById('new_amount').value) || outstandingBalance;
                term = parseInt(document.getElementById('new_duration_restructure').value) || currentTerm;
                rate = parseFloat(document.getElementById('new_interest_rate_restructure').value) || currentRate;
                monthlyPayment = calculateMonthlyPayment(principal, rate, term);
                document.getElementById('new_monthly_payment_restructure').value = monthlyPayment.toFixed(2);
                break;
        }

        // Update preview
        if (monthlyPayment > 0) {
            const totalPayment = monthlyPayment * term;
            const totalInterest = totalPayment - principal;
            const termChange = term - currentTerm;

            document.getElementById('previewMonthlyPayment').textContent = '$' + monthlyPayment.toFixed(2);
            document.getElementById('previewTotalInterest').textContent = '$' + totalInterest.toFixed(2);
            document.getElementById('previewTotalPayment').textContent = '$' + totalPayment.toFixed(2);

            const termChangeElement = document.getElementById('previewTermChange');
            if (termChange > 0) {
                termChangeElement.textContent = '+' + termChange + ' months';
                termChangeElement.className = 'text-warning';
            } else if (termChange < 0) {
                termChangeElement.textContent = termChange + ' months';
                termChangeElement.className = 'text-success';
            } else {
                termChangeElement.textContent = 'No change';
                termChangeElement.className = 'text-info';
            }

            // Generate and display the new payment schedule for change_rate
            if (type === 'change_rate') {
                generatePreviewSchedule(principal, rate, term, monthlyPayment);
                document.getElementById('schedulePreview').style.display = 'block';
            } else {
                document.getElementById('schedulePreview').style.display = 'none';
            }
        }
    }

    function generatePreviewSchedule(principal, rate, term, monthlyPayment) {
        const tableBody = document.getElementById('previewScheduleBody');
        tableBody.innerHTML = '';

        const monthlyRate = rate / 100 / 12;
        let balance = principal;
        const currentDate = new Date();

        for (let i = 1; i <= Math.min(term, 12); i++) { // Show first 12 payments as preview
            const interestPayment = balance * monthlyRate;
            const principalPayment = monthlyPayment - interestPayment;
            balance -= principalPayment;

            // Calculate due date
            const dueDate = new Date(currentDate);
            dueDate.setMonth(currentDate.getMonth() + i);

            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="text-center">${i}</td>
                <td>${dueDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</td>
                <td class="text-end">$${principalPayment.toFixed(2)}</td>
                <td class="text-end">$${interestPayment.toFixed(2)}</td>
                <td class="text-end">$${monthlyPayment.toFixed(2)}</td>
                <td class="text-end">$${Math.max(0, balance).toFixed(2)}</td>
            `;
            tableBody.appendChild(row);
        }

        // Add ellipsis row if term > 12
        if (term > 12) {
            const ellipsisRow = document.createElement('tr');
            ellipsisRow.innerHTML = `
                <td colspan="6" class="text-center text-muted">
                    <em>... ${term - 12} more payments ...</em>
                </td>
            `;
            tableBody.appendChild(ellipsisRow);
        }
    }

    // Event listeners
    rescheduleType.addEventListener('change', function() {
        showRescheduleFields(this.value);
    });

    // Add change listeners to all input fields
    const inputFields = [
        'new_duration', 'new_interest_rate', 'new_amount',
        'new_duration_restructure', 'new_interest_rate_restructure'
    ];

    inputFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('input', function() {
                if (rescheduleType.value) {
                    calculatePreview(rescheduleType.value);
                }
            });
        }
    });

    // Initial calculation if type is pre-selected
    if (rescheduleType.value) {
        showRescheduleFields(rescheduleType.value);
    }
});
</script>
@endsection