@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6" x-data="{ showLoanModal: false ,showRepaymentHistoryModal : false}">
<h1 class="text-3xl font-bold text-gray-800 mb-6">Loan Management</h1>
    <!-- Request Loan Button -->
    <div class="mb-6 flex justify-end">
        <button @click="showLoanModal = true" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition">
            Request a Loan
        </button>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md" x-data="{ search: '' }">
    <input type="text" x-model="search" placeholder="Search Member Name..."
        class="w-full p-2 border border-gray-300 rounded-md mb-4" />
    
    <!-- Make table responsive -->
    <div class="overflow-x-auto">
        <table class="min-w-full table-auto border-collapse">
        <thead class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md rounded-t-lg">
            <tr>
                <th class="py-3 px-4 text-left">Member Name</th>
                <th class="py-3 px-4 text-left">Loan Principal (Tsh)</th>
                <th class="py-3 px-4 text-left">Interest Rate (%)</th>
                <th class="py-3 px-4 text-left">Total Payable (Tsh)</th>
                <th class="py-3 px-4 text-left">Monthly Installment (Tsh)</th>
                <th class="py-3 px-4 text-left">Repayment Duration (Months)</th>
                <th class="py-3 px-4 text-left">Final Due Date</th>
                <th class="py-3 px-4 text-left">Amount Repaid (Tsh)</th>
                <th class="py-3 px-4 text-left">Loan Status</th>
                <th class="py-3 px-4 text-left">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($loans as $loan)
                <tr class="border-t hover:bg-gray-100" 
                    x-show="search === '' || '{{ strtolower($loan->member->name) }}'.includes(search.toLowerCase())">
                    <td class="py-3 px-4 text-sm">{{ $loan->member->name }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($loan->amount, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ $loan->interest_rate }}%</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($loan->total_loan, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($loan->monthly_repayment, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ $loan->repayment_period }}</td>
                    
                    <td class="py-3 px-4 text-sm">
                        @php
                            $fullRepaymentDate = $loan->approved_at 
                                ? \Carbon\Carbon::parse($loan->approved_at)->addMonths($loan->repayment_period)->format('M d, Y') 
                                : 'N/A';
                        @endphp
                        {{ $fullRepaymentDate }}
                    </td>
                    <td class="py-3 px-4 text-sm">
                        <a href="{{ route('loans.repayments', $loan->id) }}" class="text-green-600">
                            {{ number_format($loan->paid_amount, 2) }}
                        </a>
                    </td>
                   <td class="py-3 px-4 text-sm">
                    <span class="px-3 py-1 rounded-full text-white 
                        {{ $loan->total_loan == $loan->paid_amount ? 'bg-green-500' : (
                            $loan->status === 'approved' ? 'bg-blue-500' : 
                            ($loan->status === 'rejected' ? 'bg-red-500' : 'bg-yellow-500')
                        ) }}">
                        {{ $loan->total_loan == $loan->paid_amount ? 'Repaid' : ucfirst($loan->status) }}
                    </span>
                </td>

                    <td class="py-3 px-4 text-sm">
                        <a href="{{ route('loans.show', $loan) }}" class="text-blue-600">View</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Loan Request Modal -->
<div x-show="showLoanModal" x-clock class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full sm:w-1/2 md:w-1/2 lg:w-1/3 max-w-[90vw] max-h-[90vh] overflow-y-auto">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">Request a Loan</h2>

        <form action="{{ route('loans.store') }}" method="POST">
            @csrf
            
            <!-- Select Member -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Select Member</label>
                <select name="member_id" class="w-full p-2 border rounded-md">
                    @foreach ($members as $member)
                        <option value="{{ $member->id }}">{{ $member->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Loan Amount -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Loan Amount</label>
                <input type="number" name="amount" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Interest Rate -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Interest Rate (%)</label>
                <input type="number" step="0.01" name="interest_rate" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Repayment Period -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Repayment Period (Months)</label>
                <input type="number" name="repayment_period" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Collateral -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Collateral (if any)</label>
                <input type="text" name="collateral" class="w-full p-3 border rounded-md">
            </div>

            <!-- Guarantors Section -->
            <div x-data="{
                    guarantors: [{name: '', contact: ''}],
                    addGuarantor() {
                        if (this.guarantors.length < 4) {
                            this.guarantors.push({ name: '', contact: '' });
                        }
                    },
                    removeGuarantor(index) {
                        if (this.guarantors.length > 1) {
                            this.guarantors.splice(index, 1);
                        }
                    }
                }" class="mb-4">
                
                <label class="block text-sm font-medium text-gray-700">Guarantors</label>
                
                <template x-for="(guarantor, index) in guarantors" :key="index">
                    <div class="mb-4 flex space-x-4">
                        <div class="w-full sm:w-1/2">
                            <label class="block text-sm font-medium text-gray-700">Guarantor Name</label>
                            <input type="text" :name="'guarantors['+index+'][name]'" x-model="guarantor.name" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div class="w-full sm:w-1/2">
                            <label class="block text-sm font-medium text-gray-700">Guarantor Contact</label>
                            <input type="text" :name="'guarantors['+index+'][contact]'" x-model="guarantor.contact" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <button type="button" x-show="guarantors.length > 1" @click="removeGuarantor(index)" class="text-red-500 hover:text-red-700 mt-6 ml-2">Remove</button>
                    </div>
                </template>

                <button type="button" @click="addGuarantor" class="bg-blue-500 text-white px-6 py-2 rounded-md mt-4">
                    Add Another Guarantor
                </button>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-2 mt-6">
                <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Submit Loan Request
                </button>
                <button @click="showLoanModal = false" type="button" class="bg-gray-500 text-white px-6 py-3 rounded-md text-lg hover:bg-gray-600 focus:outline-none">
                    Cancel
                </button>
            </div>

        </form>
    </div>
</div>


</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('loanModal', () => ({
            showLoanModal: false
        }));
    });
</script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('loanRepayment', () => ({
        showRepaymentHistoryModal: false,
        loanId: null,  // Initialize loanId here
        repayments: [],

        // Fetch repayment history for the loan
        fetchRepaymentHistory() {
            if (this.loanId) {
                fetch(`/loans/${this.loanId}/repayments`)
                    .then(response => response.json())
                    .then(data => {
                        this.repayments = data.repayements; // Store repayments in the Alpine data
                    });
            }
        }
    }));
});

</script>
@endsection