@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0">Record Loan Repayment</h4>
                <div class="page-title-right">
                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Loan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0"><i class="fas fa-credit-card me-2"></i>Repayment Details</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('loans.repayments.store', $loan->id) }}" method="POST" id="repaymentForm">
                        @csrf

                        <!-- Amount & Date Section -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount" class="form-label">Payment Amount *</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-success text-white">$</span>
                                        <input type="number" class="form-control @error('amount') is-invalid @enderror"
                                               id="amount" name="amount" step="0.01" min="0.01"
                                               max="{{ $remainingBalance }}"
                                               value="{{ old('amount') }}" required
                                               placeholder="Enter payment amount">
                                    </div>
                                    @error('amount')
                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Maximum allowed: ${{ number_format($remainingBalance, 2) }}
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="repayment_date" class="form-label">Payment Date *</label>
                                    <input type="date" class="form-control @error('repayment_date') is-invalid @enderror"
                                           id="repayment_date" name="repayment_date"
                                           value="{{ old('repayment_date', now()->format('Y-m-d')) }}" required>
                                    @error('repayment_date')
                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method Selection -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label">Payment Method *</label>
                                <div class="row">
                                    <div class="col-md-3 mb-2">
                                        <div class="form-check card-method">
                                            <input class="form-check-input" type="radio" name="payment_method"
                                                   id="cash" value="cash" {{ old('payment_method') == 'cash' ? 'checked' : '' }} required>
                                            <label class="form-check-label method-card" for="cash">
                                                <div class="method-icon">
                                                    <i class="fas fa-money-bill-wave"></i>
                                                </div>
                                                <span>Cash</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <div class="form-check card-method">
                                            <input class="form-check-input" type="radio" name="payment_method"
                                                   id="bank_transfer" value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'checked' : '' }}>
                                            <label class="form-check-label method-card" for="bank_transfer">
                                                <div class="method-icon">
                                                    <i class="fas fa-university"></i>
                                                </div>
                                                <span>Bank Transfer</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <div class="form-check card-method">
                                            <input class="form-check-input" type="radio" name="payment_method"
                                                   id="mobile_money" value="mobile_money" {{ old('payment_method') == 'mobile_money' ? 'checked' : '' }}>
                                            <label class="form-check-label method-card" for="mobile_money">
                                                <div class="method-icon">
                                                    <i class="fas fa-mobile-alt"></i>
                                                </div>
                                                <span>Mobile Money</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <div class="form-check card-method">
                                            <input class="form-check-input" type="radio" name="payment_method"
                                                   id="cheque" value="cheque" {{ old('payment_method') == 'cheque' ? 'checked' : '' }}>
                                            <label class="form-check-label method-card" for="cheque">
                                                <div class="method-icon">
                                                    <i class="fas fa-file-invoice-dollar"></i>
                                                </div>
                                                <span>Cheque</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                @error('payment_method')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- Dynamic Payment Details Sections -->

                        <!-- Bank Transfer Details -->
                        <div class="payment-details" id="bank_transfer_details" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <h6 class="border-bottom pb-2 text-success">
                                        <i class="fas fa-university me-2"></i>Bank Transfer Details
                                    </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="bank_name" class="form-label">Bank Name *</label>
                                        <select class="form-control" id="bank_name" name="bank_name">
                                            <option value="">Select Bank</option>
                                            <option value="ecobank" {{ old('bank_name') == 'ecobank' ? 'selected' : '' }}>EcoBank</option>
                                            <option value="cbz" {{ old('bank_name') == 'cbz' ? 'selected' : '' }}>CBZ Bank</option>
                                            <option value="stanbic" {{ old('bank_name') == 'stanbic' ? 'selected' : '' }}>Stanbic Bank</option>
                                            <option value="standard_chartered" {{ old('bank_name') == 'standard_chartered' ? 'selected' : '' }}>Standard Chartered</option>
                                            <option value="cabs" {{ old('bank_name') == 'cabs' ? 'selected' : '' }}>CABS</option>
                                            <option value="fbc" {{ old('bank_name') == 'fbc' ? 'selected' : '' }}>FBC Bank</option>
                                            <option value="other" {{ old('bank_name') == 'other' ? 'selected' : '' }}>Other Bank</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="account_number" class="form-label">Account Number *</label>
                                        <input type="text" class="form-control" id="account_number" name="account_number"
                                               value="{{ old('account_number') }}" placeholder="Enter account number">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="reference" class="form-label">Reference Number *</label>
                                        <input type="text" class="form-control" id="reference" name="reference"
                                               value="{{ old('reference') }}" placeholder="Bank reference number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="transfer_date" class="form-label">Transfer Date *</label>
                                        <input type="date" class="form-control" id="transfer_date" name="transfer_date"
                                               value="{{ old('transfer_date', now()->format('Y-m-d')) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Mobile Money Details -->
                        <div class="payment-details" id="mobile_money_details" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <h6 class="border-bottom pb-2 text-success">
                                        <i class="fas fa-mobile-alt me-2"></i>Mobile Money Details
                                    </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mobile_provider" class="form-label">Mobile Network *</label>
                                        <select class="form-control" id="mobile_provider" name="mobile_provider">
                                            <option value="">Select Network</option>
                                            <option value="ecocash" {{ old('mobile_provider') == 'ecocash' ? 'selected' : '' }}>EcoCash</option>
                                            <option value="onemoney" {{ old('mobile_provider') == 'onemoney' ? 'selected' : '' }}>OneMoney</option>
                                            <option value="telecash" {{ old('mobile_provider') == 'telecash' ? 'selected' : '' }}>TeleCash</option>
                                            <option value="mycash" {{ old('mobile_provider') == 'mycash' ? 'selected' : '' }}>MyCash</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mobile_number" class="form-label">Mobile Number *</label>
                                        <input type="text" class="form-control" id="mobile_number" name="mobile_number"
                                               value="{{ old('mobile_number') }}" placeholder="e.g., 0771234567">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="reference" class="form-label">Reference Number *</label>
                                        <input type="text" class="form-control" id="reference" name="reference"
                                               value="{{ old('reference') }}" placeholder="Mobile transaction reference">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mm_transaction_date" class="form-label">Transaction Date *</label>
                                        <input type="datetime-local" class="form-control" id="mm_transaction_date" name="mm_transaction_date"
                                               value="{{ old('mm_transaction_date') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Cheque Details -->
                        <div class="payment-details" id="cheque_details" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <h6 class="border-bottom pb-2 text-success">
                                        <i class="fas fa-file-invoice-dollar me-2"></i>Cheque Details
                                    </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cheque_number" class="form-label">Cheque Number *</label>
                                        <input type="text" class="form-control" id="cheque_number" name="cheque_number"
                                               value="{{ old('cheque_number') }}" placeholder="Cheque number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cheque_date" class="form-label">Cheque Date *</label>
                                        <input type="date" class="form-control" id="cheque_date" name="cheque_date"
                                               value="{{ old('cheque_date') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="bank_name_cheque" class="form-label">Bank Name *</label>
                                        <input type="text" class="form-control" id="bank_name_cheque" name="bank_name_cheque"
                                               value="{{ old('bank_name_cheque') }}" placeholder="Issuing bank">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="branch" class="form-label">Branch</label>
                                        <input type="text" class="form-control" id="branch" name="branch"
                                               value="{{ old('branch') }}" placeholder="Bank branch">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Cash Details -->
                        <div class="payment-details" id="cash_details" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <h6 class="border-bottom pb-2 text-success">
                                        <i class="fas fa-money-bill-wave me-2"></i>Cash Payment Details
                                    </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="received_by" class="form-label">Received By *</label>
                                        <input type="text" class="form-control" id="received_by" name="received_by"
                                               value="{{ old('received_by', auth()->user()->name) }}"
                                               placeholder="Name of staff receiving payment">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="receipt_number" class="form-label">Receipt Number *</label>
                                        <input type="text" class="form-control" id="receipt_number" name="receipt_number"
                                               value="{{ old('receipt_number') }}" placeholder="e.g., RCPT-001234"
                                               required>
                                        <small class="form-text text-muted">
                                            Enter official receipt number from receipt book
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Notes -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="notes" class="form-label">Additional Notes</label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror"
                                              id="notes" name="notes" rows="3"
                                              placeholder="Any additional information about this payment">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary me-md-2">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-success" id="submitBtn">
                                        <i class="fas fa-check-circle me-2"></i>Record Payment
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Loan Summary Sidebar -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0"><i class="fas fa-file-invoice-dollar me-2"></i>Loan Summary</h5>
                </div>
                <div class="card-body">
                    <div class="loan-summary">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-bold">Loan Number:</span>
                            <span class="badge bg-success">{{ $loan->loan_number }}</span>
                        </div>

                        <div class="mb-3">
                            <span class="fw-bold">Borrower:</span>
                            <div class="mt-1">
                                @if($loan->client)
                                    <h6 class="mb-1">{{ $loan->borrower_name }}</h6>
                                    <small class="text-muted">@if($loan->isGroupLoan())Group Loan@else{{ $loan->client->client_number ?? 'N/A' }}@endif</small>
                                @else
                                    <span class="text-danger">Client not found</span>
                                @endif
                            </div>
                        </div>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Loan Amount:</span>
                                <span class="fw-bold">${{ number_format($loan->amount, 2) }}</span>
                            </div>
                        </div>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Total Repayment:</span>
                                <span class="fw-bold">${{ number_format($loan->total_repayment, 2) }}</span>
                            </div>
                        </div>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Total Paid:</span>
                                <span class="text-success">${{ number_format($totalPaid, 2) }}</span>
                            </div>
                        </div>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Outstanding Balance:</span>
                                <span class="fw-bold text-danger">${{ number_format($loan->outstanding_balance, 2) }}</span>
                            </div>
                        </div>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Remaining Balance:</span>
                                <span class="fw-bold text-primary">${{ number_format($remainingBalance, 2) }}</span>
                            </div>
                        </div>

                        <hr>

                        <div class="summary-item">
                            <div class="d-flex justify-content-between">
                                <span>Next Due Date:</span>
                                <span class="{{ $nextDueDate && $nextDueDate->isPast() ? 'text-danger' : 'text-success' }}">
                                    {{ $nextDueDate ? $nextDueDate->format('M d, Y') : 'N/A' }}
                                </span>
                            </div>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mt-4">
                            <div class="d-flex justify-content-between mb-1">
                                <small>Repayment Progress</small>
                                <small>{{ number_format(($totalPaid / $loan->total_repayment) * 100, 1) }}%</small>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar"
                                     style="width: {{ ($totalPaid / $loan->total_repayment) * 100 }}%"
                                     aria-valuenow="{{ ($totalPaid / $loan->total_repayment) * 100 }}"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mt-3">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('loans.repayment-schedule', $loan->id) }}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-calendar-alt me-2"></i>View Repayment Schedule
                        </a>
                        <a href="{{ route('loans.reschedule.create', $loan->id) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-exchange-alt me-2"></i>Request Reschedule
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.method-card {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.method-card:hover {
    border-color: #198754;
    background-color: #f8fff9;
}

.form-check-input:checked + .method-card {
    border-color: #198754;
    background-color: #e8f5e8;
}

.method-icon {
    font-size: 24px;
    color: #198754;
    margin-bottom: 8px;
}

.card-method {
    margin-bottom: 0;
}

.payment-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    border-left: 4px solid #198754;
}

.summary-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
    border-bottom: none;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}

.bg-success {
    background-color: #198754 !important;
}

.page-title-box {
    padding: 15px 0;
}

.card {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border: 1px solid #e3e6f0;
}

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

/* Fix for form validation */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Payment method selection handler
    const paymentMethods = document.querySelectorAll('input[name="payment_method"]');
    const paymentDetails = document.querySelectorAll('.payment-details');

    paymentMethods.forEach(method => {
        method.addEventListener('change', function() {
            // Hide all payment details
            paymentDetails.forEach(detail => {
                detail.style.display = 'none';
            });

            // Show selected payment details
            const selectedMethod = this.value;
            const detailsElement = document.getElementById(selectedMethod + '_details');
            if (detailsElement) {
                detailsElement.style.display = 'block';
            }
        });

        // Trigger change on page load if method is already selected
        if (method.checked) {
            method.dispatchEvent(new Event('change'));
        }
    });

    // Amount validation
    const amountInput = document.getElementById('amount');
    const maxAmount = {{ $remainingBalance }};

    amountInput.addEventListener('change', function() {
        if (parseFloat(this.value) > maxAmount) {
            this.value = maxAmount.toFixed(2);
            alert('Payment amount cannot exceed remaining balance of $' + maxAmount.toFixed(2));
        }
    });

    // Mobile number formatting for Zimbabwe
    const mobileNumberInput = document.getElementById('mobile_number');
    if (mobileNumberInput) {
        mobileNumberInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.startsWith('0')) {
                value = value.substring(1);
            }
            if (value.length > 0) {
                this.value = '0' + value;
            }
        });
    }

    // Auto-generate receipt number for cash payments
    const receiptNumberInput = document.getElementById('receipt_number');
    if (receiptNumberInput && !receiptNumberInput.value) {
        // Generate a simple receipt number (in real system, this would come from database)
        const timestamp = new Date().getTime().toString().slice(-6);
        receiptNumberInput.value = 'RCPT-' + timestamp;
    }

    // Form submission handler - FIXED
    const form = document.getElementById('repaymentForm');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Basic validation
        const amount = document.getElementById('amount').value;
        const repaymentDate = document.getElementById('repayment_date').value;
        const selectedMethod = document.querySelector('input[name="payment_method"]:checked');

        if (!amount || !repaymentDate) {
            alert('Please fill in all required fields');
            return;
        }

        if (!selectedMethod) {
            alert('Please select a payment method');
            return;
        }

        // Method-specific validation
        const method = selectedMethod.value;
        let isValid = true;
        let errorMessage = '';

        if (method === 'bank_transfer') {
            const bankName = document.getElementById('bank_name').value;
            const accountNumber = document.getElementById('account_number').value;
            const reference = document.getElementById('reference').value;

            if (!bankName || !accountNumber || !reference) {
                isValid = false;
                errorMessage = 'Please fill all required bank transfer details';
            }
        } else if (method === 'mobile_money') {
            const provider = document.getElementById('mobile_provider').value;
            const mobileNumber = document.getElementById('mobile_number').value;
            const reference = document.getElementById('reference').value;

            if (!provider || !mobileNumber || !reference) {
                isValid = false;
                errorMessage = 'Please fill all required mobile money details';
            }
        } else if (method === 'cheque') {
            const chequeNumber = document.getElementById('cheque_number').value;
            const chequeDate = document.getElementById('cheque_date').value;
            const bankName = document.getElementById('bank_name_cheque').value;

            if (!chequeNumber || !chequeDate || !bankName) {
                isValid = false;
                errorMessage = 'Please fill all required cheque details';
            }
        } else if (method === 'cash') {
            const receivedBy = document.getElementById('received_by').value;
            const receiptNumber = document.getElementById('receipt_number').value;

            if (!receivedBy || !receiptNumber) {
                isValid = false;
                errorMessage = 'Please fill all required cash payment details';
            }
        }

        if (!isValid) {
            alert(errorMessage);
            return;
        }

        // If all validations pass, submit the form
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';

        // Submit the form
        this.submit();
    });

    // Re-enable button if form validation fails and page reloads
    window.addEventListener('pageshow', function() {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-check-circle me-2"></i>Record Payment';
    });
});
</script>
@endpush