@extends('layouts.app')

@section('title', 'New Micro Loan Application')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Form Container -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
        <!-- Form Header -->
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-hand-holding-usd mr-2"></i> Micro Loan Application Form
                </h2>
                <span class="text-indigo-100 text-sm">Step 2 of 2</span>
            </div>
        </div>
        <div class="p-6">
            <form method="POST" action="{{ route('micro_loans.store_new') }}" class="space-y-8">
                @csrf
                
                <!-- Pre-selected Member Information -->
                @if($selectedMember)
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-user-check mr-2 text-green-600"></i>Selected Member Information
                    </h4>
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Member Name</label>
                                <input type="text" value="{{ $selectedMember->full_name }}" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">NIC Number</label>
                                <input type="text" value="{{ $selectedMember->nic }}" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Branch</label>
                                <input type="text" value="{{ $branches->find($selectedBranchId)->branch_name ?? 'N/A' }}" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">CBO</label>
                                <input type="text" value="{{ \App\Models\Cbo::find($selectedCboId)->cbo_name ?? 'N/A' }}" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Member ID</label>
                                <input type="text" value="{{ $selectedMember->id }}" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                            </div>
                        </div>
                    </div>
                    <!-- Hidden fields for form submission -->
                    <input type="hidden" name="branch_id" value="{{ $selectedBranchId }}">
                    <input type="hidden" name="cbo_id" value="{{ $selectedCboId }}">
                    <input type="hidden" name="member_id" value="{{ $selectedMemberId }}">
                </div>
                @endif
		<div class="form-group mb-3">
                    <label for="created_at">Loan Creation Date (Backdate)</label>
                    <input type="date" name="created_at" id="created_at" class="form-control" value="{{ old('created_at', now()->format('Y-m-d')) }}">
                </div>	

                <!-- Loan Details Section -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-money-bill-wave mr-2 text-indigo-600"></i>Loan Details
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Loan Product</label>
                            <select name="loan_product_id" id="loan_product_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" required>
                                <option value="">-- Select Loan Product --</option>
                                @foreach($loanProducts as $product)
                                    <option value="{{ $product->id }}"
                                        data-repayment="{{ $product->repayment_method }}" 
                                        data-interest="{{ $product->interest_rate }}"
                                        data-installments="{{ $product->installments }}"
                                        data-rental="{{ $product->rental_value }}"
                                        data-default-amount="{{ $product->loan_amount }}">
                                        {{ $product->name }} - {{ $product->interest_rate }}% ({{ $product->repayment_method }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Loan Amount (Rs.)</label>
                            <div class="flex items-center">
                                <span class="inline-block px-3 py-2 bg-gray-100 border border-gray-300 rounded-l-md">Rs.</span>
                                <input type="number" name="loan_amount" id="loan_amount" class="w-full px-3 py-2 border-t border-b border-r border-gray-300 rounded-r-md focus:ring-indigo-500 focus:border-indigo-500" required>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Repayment Method</label>
                            <input type="text" name="repayment_method" id="repayment_method" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Installments</label>
                            <input type="number" name="installments" id="installments" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Interest Rate</label>
                            <div class="flex items-center">
                                <input type="text" name="interest_rate" id="interest_rate" class="w-full px-3 py-2 border-t border-b border-l border-gray-300 rounded-l-md bg-gray-100" readonly>
                                <span class="inline-block px-3 py-2 bg-gray-100 border border-gray-300 rounded-r-md">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Rental Value</label>
                            <div class="flex items-center">
                                <span class="inline-block px-3 py-2 bg-gray-100 border border-gray-300 rounded-l-md">Rs.</span>
                                <input type="text" name="rental_value" id="rental_value" class="w-full px-3 py-2 border-t border-b border-r border-gray-300 rounded-r-md bg-gray-100" readonly>
                            </div>
                        </div>
                        <!-- Add more fields as needed -->
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <a href="{{ route('micro_loans.select_member_new') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Member Selection
                    </a>
                    <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-paper-plane mr-2"></i>Submit Application
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JavaScript for loan calculations -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    // Loan product selection
    $("#loan_product_id").change(function() {
        let selected = $(this).find(":selected");
        let repaymentMethod = selected.data("repayment");
        let interestRate = parseFloat(selected.data("interest"));
        let installments = parseInt(selected.data("installments"));
        let defaultAmount = parseFloat(selected.data("default-amount"));
        
        // Set the fixed values
        $("#repayment_method").val(repaymentMethod);
        $("#interest_rate").val(interestRate.toFixed(2));
        $("#installments").val(installments);
        $("#loan_amount").val(defaultAmount.toFixed(2));
        
        // Calculate initial values
        calculateLoanValues();
    });
    
    // Loan amount change handler
    $("#loan_amount").on('input', function() {
        calculateLoanValues();
    });
    
    // Function to calculate all loan values
    function calculateLoanValues() {
        let loanAmount = parseFloat($("#loan_amount").val()) || 0;
        let interestRate = parseFloat($("#interest_rate").val()) || 0;
        let installments = parseInt($("#installments").val()) || 1;
        let repaymentMethod = $("#repayment_method").val();
        
        if (loanAmount > 0 && interestRate > 0) {
            // Calculate effective rate based on repayment method
            let effectiveRate = interestRate / 100;
            if (repaymentMethod === "weekly") {
                effectiveRate /= 52;
            } else if (repaymentMethod === "monthly") {
                effectiveRate /= 12;
            } else if (repaymentMethod === "daily") {
                effectiveRate /= 365;
            }
            
            // Calculate total interest and rental value
            let totalInterest = loanAmount * effectiveRate * installments;
            let totalRepayment = loanAmount + totalInterest;
            let rentalValue = totalRepayment / installments;
            
            // Update the form fields
            $("#rental_value").val(rentalValue.toFixed(2));
            $("#total_repayment").val(totalRepayment.toFixed(2));
        }
    }
</script>
@endsection