@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">
                REPAYMENT SCHEDULE DETAILS
            </h4>
            <div class="flex space-x-3">
                @if(Auth::user()->can('loans-edit'))
                    <a href="{{ route('loans.repayment-schedule.edit', [$loan, $schedule]) }}" 
                       class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        Edit Schedule
                    </a>
                @endif
                
                @if(Auth::user()->can('loans-delete'))
                    @php
                        $totalSchedules = $loan->repaymentSchedules()->count();
                    @endphp
                    @if($totalSchedules > 1)
                        <button type="button" 
                                onclick="confirmDelete()"
                                class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                            Delete Schedule
                        </button>
                    @else
                        <button type="button" 
                                disabled
                                title="Cannot delete the last schedule"
                                class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-300 rounded-lg cursor-not-allowed">
                            Delete Schedule
                        </button>
                    @endif
                @endif
                
                <a href="{{ route('loans.repayment-schedule.index', $loan) }}" 
                   class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    Back to Schedule
                </a>
                <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">Loan Amount</h5>
                    <p class="text-lg text-gray-900 dark:text-gray-100">{{ formatCurrencyDecimals($loan->loan_amount) }}</p>
                </div>
                <div>
                    <h5 class="font-semibold text-gray-700 dark:text-gray-300">Status</h5>
                    <span class="px-3 py-1 text-sm 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>
                </div>
            </div>
        </div>

        <!-- Schedule Details -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6 mb-6">
            <h5 class="font-semibold text-gray-700 dark:text-gray-300 mb-6">Installment Information</h5>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Left Column -->
                <div class="space-y-4">
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Due Date:</span>
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                            {{ $schedule->date ? $schedule->date->format('l, d M Y') : 'Not Set' }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Installment Amount:</span>
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                            {{ formatCurrencyDecimals($schedule->amount) }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Payment Status:</span>
                        <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>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Last Updated:</span>
                        <span class="text-sm text-gray-600 dark:text-gray-400">
                            {{ $schedule->updated_at ? $schedule->updated_at->format('d M Y, H:i') : 'Never' }}
                        </span>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="space-y-4">
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Principal Paid:</span>
                        <span class="text-sm font-semibold text-green-600 dark:text-green-400">
                            {{ formatCurrencyDecimals($schedule->principal_paid ?: 0) }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Interest Paid:</span>
                        <span class="text-sm font-semibold text-blue-600 dark:text-blue-400">
                            {{ formatCurrencyDecimals($schedule->interest_paid ?: 0) }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Paid:</span>
                        <span class="text-sm font-semibold text-purple-600 dark:text-purple-400">
                            {{ formatCurrencyDecimals(($schedule->principal_paid ?: 0) + ($schedule->interest_paid ?: 0)) }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center border-b pb-2">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Remaining Balance:</span>
                        <span class="text-sm font-semibold text-red-600 dark:text-red-400">
                            {{ formatCurrencyDecimals($schedule->balance ?: 0) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Breakdown -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6 mb-6">
            <h5 class="font-semibold text-gray-700 dark:text-gray-300 mb-6">Payment Breakdown</h5>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4 text-center">
                    <h6 class="text-sm font-medium text-green-600 dark:text-green-400 mb-2">Principal Payment</h6>
                    <p class="text-2xl font-bold text-green-700 dark:text-green-300">
                        {{ formatCurrencyDecimals($schedule->principal_paid ?: 0) }}
                    </p>
                    <div class="mt-2">
                        @php
                            $principalPercentage = $schedule->amount > 0 ? (($schedule->principal_paid ?: 0) / $schedule->amount) * 100 : 0;
                        @endphp
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-600 h-2 rounded-full" style="width: {{ min(100, $principalPercentage) }}%"></div>
                        </div>
                        <p class="text-xs text-green-600 dark:text-green-400 mt-1">{{ number_format($principalPercentage, 1) }}%</p>
                    </div>
                </div>
                
                <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4 text-center">
                    <h6 class="text-sm font-medium text-blue-600 dark:text-blue-400 mb-2">Interest Payment</h6>
                    <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">
                        {{ formatCurrencyDecimals($schedule->interest_paid ?: 0) }}
                    </p>
                    <div class="mt-2">
                        @php
                            $interestPercentage = $schedule->amount > 0 ? (($schedule->interest_paid ?: 0) / $schedule->amount) * 100 : 0;
                        @endphp
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ min(100, $interestPercentage) }}%"></div>
                        </div>
                        <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">{{ number_format($interestPercentage, 1) }}%</p>
                    </div>
                </div>
                
                <div class="bg-red-50 dark:bg-red-900 rounded-lg p-4 text-center">
                    <h6 class="text-sm font-medium text-red-600 dark:text-red-400 mb-2">Outstanding Balance</h6>
                    <p class="text-2xl font-bold text-red-700 dark:text-red-300">
                        {{ formatCurrencyDecimals($schedule->balance ?: 0) }}
                    </p>
                    <div class="mt-2">
                        @php
                            $balancePercentage = $schedule->amount > 0 ? (($schedule->balance ?: 0) / $schedule->amount) * 100 : 0;
                        @endphp
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-red-600 h-2 rounded-full" style="width: {{ min(100, $balancePercentage) }}%"></div>
                        </div>
                        <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ number_format($balancePercentage, 1) }}%</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status Information -->
        <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                        Schedule Status Information
                    </h3>
                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                        @if($schedule->status === 'paid')
                            <p>✅ This installment has been fully paid. No further payment is required for this period.</p>
                        @elseif($schedule->status === 'partial')
                            <p>⚠️ This installment has been partially paid. Outstanding balance: {{ formatCurrencyDecimals($schedule->balance) }}</p>
                        @else
                            <p>❌ This installment is pending payment. Full amount due: {{ formatCurrencyDecimals($schedule->amount) }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </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>{{ $schedule->date ? $schedule->date->format('d M, Y') : 'N/A' }}</strong>? 
                                    This action cannot be undone.
                                </p>
                                <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, including any recorded payments.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </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 action="{{ route('loans.repayment-schedule.destroy', [$loan, $schedule]) }}" 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() {
            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