@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6" x-data="{ showRepaymentModal: false }">
    <!-- Success Message -->
    @if(session('success'))
        <div class="bg-green-500 text-white p-3 rounded mb-4">{{ session('success') }}</div>
    @endif

    <!-- Heading -->
    <h1 class="text-3xl font-bold text-blue-800 mb-6">Loan Details</h1>

    <!-- Loan Information Box -->
    <div class="bg-white p-6 rounded-lg shadow-md">
        
        <!-- Approval & Rejection Buttons (Only if Pending) -->
        @if($loan->status === 'pending')
        <div class="mt-6 flex flex-col sm:flex-row gap-4">
            <!-- Approval Form -->
            <form action="{{ route('loans.approve', $loan) }}" method="POST">
                @csrf @method('POST')
                <button type="submit" class="bg-green-500 text-white px-6 py-3 rounded-md hover:bg-green-600 flex items-center">
                    <i class="fas fa-check mr-2"></i> Approve
                </button>
            </form>

            <!-- Rejection Form -->
            <form action="{{ route('loans.reject', $loan) }}" method="POST">
                @csrf @method('POST')
                <button type="submit" class="bg-red-500 text-white px-6 py-3 rounded-md hover:bg-red-600 flex items-center">
                    <i class="fas fa-times mr-2"></i> Reject
                </button>
            </form>
        </div>
        @endif

        <!-- Loan Details -->
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-8">
            <div class="space-y-3">
                <div class="flex items-center">
                    <i class="fas fa-user mr-2 text-gray-600"></i>
                    <p><strong>Member:</strong> {{ $loan->member->name }}</p>
                </div>

                <div class="flex items-center">
                    <i class="fas fa-dollar-sign mr-2 text-gray-600"></i>
                    <p><strong>Principal:</strong> Tsh {{ number_format($loan->amount, 2) }}</p>
                </div>

                <div class="flex items-center">
                    <i class="fas fa-percent mr-2 text-gray-600"></i>
                    <p><strong>Interest Rate:</strong> {{ $loan->interest_rate }}%</p>
                </div>

                <div class="flex items-center">
                    <i class="fas fa-calendar-alt mr-2 text-gray-600"></i>
                    <p><strong>Repayment Period:</strong> {{ $loan->repayment_period }} months</p>
                </div>

                <div class="flex items-center">
                    💸
                    <p><strong>Total Loan:</strong> Tsh {{ number_format($loan->total_loan, 2) }}</p>
                </div>

                <div class="flex items-center">
                    <i class="fas fa-clipboard-list mr-2 text-gray-600"></i>
                    <p><strong>Collateral:</strong> {{ $loan->collateral ?? 'None' }}</p>
                </div>

                <div class="flex items-center">
                    <i class="fas fa-circle mr-2 text-gray-600"></i>
                    <p><strong>Status:</strong> 
                        <span class="px-3 py-1 rounded-full text-white 
                            {{ $loan->status === 'approved' ? 'bg-green-500' : ($loan->status === 'rejected' ? 'bg-red-500' : 'bg-yellow-500') }}">
                            {{ ucfirst($loan->status) }}
                        </span>
                    </p>
                </div>
            </div>

            <!-- Loan Progress Circle -->
            <div class="relative flex items-center justify-center w-full sm:w-auto">
                <svg class="w-48 h-48 sm:w-56 sm:h-56 transform -rotate-90" viewBox="0 0 100 100">
                    <!-- Background Circle -->
                    <circle class="text-orange-200" stroke-width="16" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
                    <!-- Progress Circle -->
                    <circle class="text-green-600" stroke-width="16" stroke="currentColor" fill="transparent"
                        r="40" cx="50" cy="50"
                        stroke-dasharray="251.2"
                        stroke-dashoffset="{{ 251.2 - (251.2 * ($loan->paid_amount / $loan->total_loan)) }}"
                        class="transition-all duration-300" />
                </svg>
                <span class="absolute text-4xl font-semibold text-green-800">
                    {{ round(($loan->paid_amount / $loan->total_loan) * 100) }}%
                </span>
            </div>
        </div>

        <!-- Loan Payment Status -->
        <p class="mt-4 text-center text-green-600">
            <strong><b style="font-size:18px;font-weight: 900;">Paid: Tsh {{ number_format($loan->paid_amount, 2) }} / {{ number_format($loan->total_loan, 2) }}</b></strong><br>
            <strong><b style="font-size:18px;font-weight: 900;" class="mt-2 text-center text-orange-600">Outstanding: Tsh {{ number_format(($loan->total_loan - $loan->paid_amount), 2) }}</b></strong>
        </p>

        <!-- Repayment Actions -->
        <div class="mt-6 flex flex-col sm:flex-row justify-end gap-4">
            <!-- Repayment Button -->
            @if($loan->status === 'approved' && $loan->paid_amount < $loan->total_loan)
                <button @click="showRepaymentModal = true" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 flex items-center">
                    <i class="fas fa-credit-card mr-2"></i> Repay Loan
                </button>
            @elseif($loan->paid_amount >= $loan->total_loan)
                <p class="mt-4 text-green-600 font-bold">Loan Fully Repaid <i class="fas fa-check-circle"></i></p>
            @endif

            <!-- View Repayment History Link -->
            <a href="{{ route('loans.repayments', $loan->id) }}" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 flex items-center">
                <i class="fas fa-history mr-2"></i> View Repayment History
            </a>
        </div>
    </div>

    <!-- Loan Repayment Modal -->
    <div x-show="showRepaymentModal" 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/3" @click.away="showRepaymentModal = false">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4">Make a Repayment</h2>

            <form action="{{ route('loans.repay', $loan) }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Enter Repayment Amount</label>
                    <input type="number" name="repayment" required class="w-full p-2 border rounded-md" min="1" step="0.01">
                </div>

                <div class="flex justify-end gap-2">
                    <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 flex items-center">
                        <i class="fas fa-check mr-2"></i> Submit Payment
                    </button>
                    <button @click="showRepaymentModal = false" type="button" class="bg-gray-500 text-white px-6 py-3 rounded-md text-lg hover:bg-gray-600 flex items-center">
                        <i class="fas fa-times mr-2"></i> Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Alpine.js Script for Modal -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('repaymentModal', () => ({
            showRepaymentModal: false
        }));
    });
</script>
@endsection