@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <div class="flex justify-between items-center mb-6 mt-4">
            <h4 class="text-lg font-semibold text-gray-600 dark:text-gray-300">
                LOAN REPAYMENT SCHEDULE
            </h4>
            <div class="flex space-x-3">
                <a href="{{ route('loans.show', $loan) }}" 
                   class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    View Loan Details
                </a>
            </div>
        </div>

        <!-- Loan Summary Card -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Loan Code</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ $loan->loan_code }}</p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Client</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">
                        @if($loan->individualClient)
                            {{ $loan->individualClient->client->fullname }}
                        @else
                            Group Loan
                        @endif
                    </p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Total Installments</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ $loan->installments }}</p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Installment Amount</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ formatCurrencyDecimals($loan->installment_amount) }}</p>
                </div>
            </div>
        </div>

        <!-- Schedule Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
                <h6 class="text-sm font-medium text-blue-600 dark:text-blue-400">Total Installments</h6>
                <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">{{ $schedules->count() }}</p>
            </div>
            <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4">
                <h6 class="text-sm font-medium text-green-600 dark:text-green-400">Paid</h6>
                <p class="text-2xl font-bold text-green-700 dark:text-green-300">{{ $schedules->where('status', 'paid')->count() }}</p>
            </div>
            <div class="bg-yellow-50 dark:bg-yellow-900 rounded-lg p-4">
                <h6 class="text-sm font-medium text-yellow-600 dark:text-yellow-400">Partial</h6>
                <p class="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{{ $schedules->where('status', 'partial')->count() }}</p>
            </div>
            <div class="bg-red-50 dark:bg-red-900 rounded-lg p-4">
                <h6 class="text-sm font-medium text-red-600 dark:text-red-400">Pending</h6>
                <p class="text-2xl font-bold text-red-700 dark:text-red-300">{{ $schedules->where('status', 'pending')->count() }}</p>
            </div>
        </div>

        <!-- Repayment Schedule Table -->
        <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
                <table class="w-full whitespace-no-wrap">
                    <thead>
                        <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                            <th class="px-4 py-3">#</th>
                            <th class="px-4 py-3">Due Date</th>
                            <th class="px-4 py-3">Amount ({{getCurrencyCode()}})</th>
                            <th class="px-4 py-3">Principal Paid ({{getCurrencyCode()}})</th>
                            <th class="px-4 py-3">Interest Paid ({{getCurrencyCode()}})</th>
                            <th class="px-4 py-3">Balance ({{getCurrencyCode()}})</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                        @forelse($schedules as $index => $schedule)
                            <tr class="text-gray-700 dark:text-gray-400 {{ $schedule->status === 'paid' ? 'bg-green-50 dark:bg-green-900' : ($schedule->status === 'partial' ? 'bg-yellow-50 dark:bg-yellow-900' : '') }}">
                                <td class="px-4 py-3 text-sm font-medium">{{ $index + 1 }}</td>
                                <td class="px-4 py-3 text-sm">{{ $schedule->date ? $schedule->date->format('d M, Y') : 'N/A' }}</td>
                                <td class="px-4 py-3 text-sm font-semibold">{{ formatAmount($schedule->amount) }}</td>
                                <td class="px-4 py-3 text-sm text-green-600">{{ formatAmount($schedule->principal_paid ?: 0) }}</td>
                                <td class="px-4 py-3 text-sm text-blue-600">{{ formatAmount($schedule->interest_paid ?: 0) }}</td>
                                <td class="px-4 py-3 text-sm font-semibold text-red-600">{{ formatAmount($schedule->balance ?: 0) }}</td>
                                <td class="px-4 py-3 text-sm">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full 
                                        {{ $schedule->status === 'paid' ? 'text-green-800 bg-green-100 dark:bg-green-200 dark:text-green-900' : 
                                           ($schedule->status === 'partial' ? 'text-yellow-800 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-900' : 
                                            'text-red-800 bg-red-100 dark:bg-red-200 dark:text-red-900') }}">
                                        {{ ucfirst($schedule->status) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-2 text-sm">
                                        <x-tooltip message="View schedule details" position="left">
                                            <a href="{{ route('loans.repayment-schedule.show', [$loan, $schedule]) }}" 
                                               class="px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </x-tooltip>
                                        
                                        @if(Auth::user()->can('loans-edit'))
                                            <x-tooltip message="Edit schedule" position="left">
                                                <a href="{{ route('loans.repayment-schedule.edit', [$loan, $schedule]) }}" 
                                                   class="px-2 py-1 text-xs font-medium text-yellow-600 hover:text-yellow-800 dark:text-yellow-400">
                                                    <i class="fa fa-pen"></i>
                                                </a>
                                            </x-tooltip>
                                        @endif

                                        @if(Auth::user()->can('loans-delete') && $schedules->count() > 1)
                                            <x-tooltip message="Delete schedule" position="left">
                                                <button type="button" 
                                                        onclick="confirmDelete({{ $schedule->id }}, '{{ $schedule->date ? $schedule->date->format('d M, Y') : 'N/A' }}')"
                                                        class="px-2 py-1 text-xs font-medium text-red-600 hover:text-red-800 dark:text-red-400">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </x-tooltip>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-3 text-sm text-center text-gray-500 dark:text-gray-400">
                                    <div class="flex flex-col items-center py-8">
                                        <i class="fa fa-calendar-alt text-4xl mb-4 text-gray-300 dark:text-gray-600"></i>
                                        <p class="text-lg font-medium">No repayment schedule found</p>
                                        <p class="text-sm">This loan doesn't have a repayment schedule yet.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Summary Totals -->
        @if($schedules->count() > 0)
            <div class="mt-6 bg-white rounded-lg shadow-md dark:bg-gray-800 p-6">
                <h5 class="font-semibold text-gray-700 dark:text-gray-300 mb-4">Schedule Summary</h5>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <h6 class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Amount</h6>
                        <p class="text-xl font-bold text-gray-800 dark:text-gray-200">{{ formatCurrencyDecimals($schedules->sum('amount')) }}</p>
                    </div>
                    <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4">
                        <h6 class="text-sm font-medium text-green-600 dark:text-green-400">Total Principal Paid</h6>
                        <p class="text-xl font-bold text-green-700 dark:text-green-300">{{ formatCurrencyDecimals($schedules->sum('principal_paid')) }}</p>
                    </div>
                    <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
                        <h6 class="text-sm font-medium text-blue-600 dark:text-blue-400">Total Interest Paid</h6>
                        <p class="text-xl font-bold text-blue-700 dark:text-blue-300">{{ formatCurrencyDecimals($schedules->sum('interest_paid')) }}</p>
                    </div>
                    <div class="bg-red-50 dark:bg-red-900 rounded-lg p-4">
                        <h6 class="text-sm font-medium text-red-600 dark:text-red-400">Total Balance</h6>
                        <p class="text-xl font-bold text-red-700 dark:text-red-300">{{ formatCurrencyDecimals($schedules->sum('balance')) }}</p>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fa fa-exclamation-triangle text-red-600 dark:text-red-400"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
                                Delete Repayment Schedule
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    Are you sure you want to delete the repayment schedule for <strong id="scheduleDate"></strong>? 
                                    This action cannot be undone.
                                </p>
                                @if($schedules->count() <= 1)
                                    <div class="mt-3 p-3 bg-red-50 dark:bg-red-900 rounded-md">
                                        <div class="flex">
                                            <div class="flex-shrink-0">
                                                <i class="fa fa-exclamation-triangle text-red-400"></i>
                                            </div>
                                            <div class="ml-3">
                                                <p class="text-sm text-red-800 dark:text-red-200">
                                                    <strong>Cannot Delete:</strong> This is the last repayment schedule for this loan.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900 rounded-md">
                                        <div class="flex">
                                            <div class="flex-shrink-0">
                                                <i class="fa fa-exclamation-triangle text-yellow-400"></i>
                                            </div>
                                            <div class="ml-3">
                                                <p class="text-sm text-yellow-800 dark:text-yellow-200">
                                                    <strong>Warning:</strong> This will permanently remove this installment from the loan schedule.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <form id="deleteForm" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                            Delete Schedule
                        </button>
                    </form>
                    <button type="button" 
                            onclick="closeDeleteModal()"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function confirmDelete(scheduleId, scheduleDate) {
            document.getElementById('scheduleDate').textContent = scheduleDate;
            document.getElementById('deleteForm').action = `{{ route('loans.repayment-schedule.index', $loan) }}/${scheduleId}`;
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
        }

        // Close modal when clicking outside
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });

        // Close modal with escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('deleteModal').classList.contains('hidden')) {
                closeDeleteModal();
            }
        });
    </script>
@endsection