@extends('layouts.app')

@section('title', 'New 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-file-signature mr-2"></i> Loan Application Form
                </h2>
                <span class="text-indigo-100 text-sm">Step 1 of 3</span>
            </div>
        </div>
        <div class="p-6">
            <form method="POST" action="{{ route('loan-applications.store') }}" class="space-y-8">
                @csrf
                <!-- Loan Type Selection -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-tag mr-2 text-indigo-600"></i>Loan Type
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <label class="flex items-center space-x-3 p-4 border rounded-lg cursor-pointer hover:border-indigo-400 transition-colors">
                            <input class="h-5 w-5 text-indigo-600" type="radio" name="loan_type" value="BL" checked>
                            <div>
                                <span class="block text-gray-900 font-medium">Business Loan (BL)</span>
                                <span class="block text-sm text-gray-500">For business capital needs</span>
                            </div>
                        </label>
                        <label class="flex items-center space-x-3 p-4 border rounded-lg cursor-pointer hover:border-indigo-400 transition-colors">
                            <input class="h-5 w-5 text-indigo-600" type="radio" name="loan_type" value="ML">
                            <div>
                                <span class="block text-gray-900 font-medium">Micro Loan (ML)</span>
                                <span class="block text-sm text-gray-500">Small-scale financing</span>
                            </div>
                        </label>
                        <label class="flex items-center space-x-3 p-4 border rounded-lg cursor-pointer hover:border-indigo-400 transition-colors">
                            <input class="h-5 w-5 text-indigo-600" type="radio" name="loan_type" value="LL">
                            <div>
                                <span class="block text-gray-900 font-medium">Lease Loan (LL)</span>
                                <span class="block text-sm text-gray-500">Vehicle/equipment leasing</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Branch and Officer Information -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-building mr-2 text-indigo-600"></i>Branch Information
                    </h4>
                    <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">Branch</label>
                            <select name="branch_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 Branch --</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Credit Officer</label>
                            <select name="credit_officer_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 Credit Officer --</option>
                                @foreach($creditOfficers as $officer)
                                    <option value="{{ $officer->id }}">{{ $officer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Member Search Section -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-user mr-2 text-indigo-600"></i>Member Information
                    </h4>
                    <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">Member NIC</label>
                            <div class="flex gap-2">
                                <input type="text" id="search_nic" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter NIC" required>
                                <button type="button" id="search_btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center">
                                    <i class="fas fa-search mr-1"></i> Search
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Member Name</label>
                            <input type="text" id="member_name" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100" readonly>
                        </div>
                    </div>
                    <input type="hidden" id="member_id" name="member_id">
                    <div id="member_status" class="p-3 rounded-md bg-yellow-50 border border-yellow-200 text-yellow-700">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            Please search and select a member before proceeding.
                        </div>
                    </div>
                </div>

                <!-- Guarantor Sections -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-user-shield mr-2 text-indigo-600"></i>Guarantor Details
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Guarantor 1 -->
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                            <h5 class="font-semibold mb-3 flex items-center text-indigo-700">
                                <i class="fas fa-user-shield mr-2"></i>Guarantor 1 Details
                            </h5>
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                                    <input type="text" name="guarantor1_name" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter full name" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">NIC Number</label>
                                    <input type="text" name="guarantor1_nic" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter NIC" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
                                    <input type="text" name="guarantor1_mobile" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter mobile" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                                    <input type="text" name="guarantor1_address" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter address" required>
                                </div>
                            </div>
                        </div>

                        <!-- Guarantor 2 -->
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                            <h5 class="font-semibold mb-3 flex items-center text-indigo-700">
                                <i class="fas fa-user-shield mr-2"></i>Guarantor 2 Details
                            </h5>
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                                    <input type="text" name="guarantor2_name" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter full name" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">NIC Number</label>
                                    <input type="text" name="guarantor2_nic" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter NIC" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
                                    <input type="text" name="guarantor2_mobile" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter mobile" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                                    <input type="text" name="guarantor2_address" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" placeholder="Enter address" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 flex-col sm:flex-row justify-end gap-3 pt-6 border-t border-gray-200">
                    <button type="reset" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        <i class="fas fa-undo mr-2"></i> Reset
                    </button>
                    <button type="submit" class="inline-flex items-center px-6 py-3 bg-indigo-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        <i class="fas fa-paper-plane mr-2"></i> Submit Application
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Show/hide loan type specific fields
    $('input[name="loan_type"]').change(function() {
        $('#business_loan_fields').toggle($(this).val() === 'BL');
        // Add similar toggles for micro loan and lease loan fields
    });

    // 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));
        }
    }
    
    // Initialize calculations if product is pre-selected
    if ($("#loan_product_id").val()) {
        $("#loan_product_id").trigger("change");
    }
    // Member search
    $("#search_btn").click(function () {
        let nic = $("#search_nic").val().trim();

        if (nic !== "") {
            // Show loading state
            $("#search_btn").prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Searching...');
            $("#member_status").html('<div class="p-3 rounded-md bg-blue-50 border border-blue-200 text-blue-700 flex items-center"><i class="fas fa-spinner fa-spin mr-2"></i> Searching for member...</div>');
            
            $.ajax({
                url: "{{ route('members.search') }}",
                type: "POST",
                data: { 
                    search: nic,
                    _token: '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function (response) {
                    if (response.success) {
                        $("#member_id").val(response.member.id);
                        $("#member_name").val(response.member.name);
                        $("#member_status").html('<div class="p-3 rounded-md bg-green-50 border border-green-200 text-green-700 flex items-center"><i class="fas fa-check-circle mr-2"></i> Member found and selected: <strong class="ml-1">' + response.member.name + '</strong></div>');
                    } else {
                        $("#member_id").val("");
                        $("#member_name").val("");
                        $("#member_status").html('<div class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 flex items-center"><i class="fas fa-exclamation-circle mr-2"></i> ' + (response.message || "Member not found") + '</div>');
                    }
                },
                error: function (xhr) {
                    let errorMessage = "Error processing request";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    $("#member_id").val("");
                    $("#member_name").val("");
                    $("#member_status").html('<div class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 flex items-center"><i class="fas fa-exclamation-circle mr-2"></i> ' + errorMessage + '</div>');
                },
                complete: function() {
                    // Reset button state
                    $("#search_btn").prop('disabled', false).html('<i class="fas fa-search mr-2"></i> Search');
                }
            });
        } else {
            $("#member_status").html('<div class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 flex items-center"><i class="fas fa-exclamation-circle mr-2"></i> Please enter a NIC number.</div>');
            $("#search_nic").focus();
        }
    });

    // Form submission validation
    $("form").submit(function(e) {
        let memberId = $("#member_id").val();
        if (!memberId || memberId === "") {
            e.preventDefault();
            $("#member_status").html('<div class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 flex items-center"><i class="fas fa-exclamation-circle mr-2"></i> Please search and select a member before submitting the application.</div>');
            $("#search_nic").focus();
            return false;
        }
        
        // Additional validation
        let nic = $("#search_nic").val().trim();
        if (!nic) {
            e.preventDefault();
            $("#member_status").html('<div class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 flex items-center"><i class="fas fa-exclamation-circle mr-2"></i> Please enter a NIC number and search for the member.</div>');
            $("#search_nic").focus();
            return false;
        }
    });
});
</script>
@endsection