@extends('layout.main')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="loanCalculator()">
        <!-- Page Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Loan Calculator</h1>
                <p class="text-gray-600 dark:text-gray-400">Calculate and project loan repayment schedules</p>
            </div>
            <div class="flex items-center space-x-3">
                <button @click="resetCalculator()" 
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
                    <i class="fa fa-refresh mr-2"></i>
                    Reset
                </button>
                <button @click="exportToPDF()" 
                        x-show="showResults"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors">
                    <i class="fa fa-file-pdf mr-2"></i>
                    Export PDF
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Calculator Form -->
            <div class="lg:col-span-1">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Loan Parameters</h2>
                    
                    <form @submit.prevent="calculateLoan()" class="space-y-6">
                        <!-- Principal Amount -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Principal Amount
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="text-gray-400 fa fa-coins"></i>
                                </div>
                                <input type="number" 
                                       x-model="form.principalAmount" 
                                       step="0.01" 
                                       min="1"
                                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white" 
                                       placeholder="Enter loan amount"
                                       required>
                            </div>
                        </div>

                        <!-- Interest Rate -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Interest Rate (%)
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-percentage text-gray-400"></i>
                                </div>
                                <input type="number" 
                                       x-model="form.interestRate" 
                                       step="0.01" 
                                       min="0"
                                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white" 
                                       placeholder="Enter interest rate"
                                       required>
                            </div>
                        </div>

                        <!-- Interest Method -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Interest Method
                            </label>
                            <select x-model="form.interestMethod" 
                                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white">
                                <option value="flat_interest">Flat Interest</option>
                                <option value="declining_balance">Declining Balance</option>
                            </select>
                        </div>

                        <!-- Number of Installments -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Number of Installments
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-hashtag text-gray-400"></i>
                                </div>
                                <input type="number" 
                                       x-model="form.installments" 
                                       min="1"
                                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white" 
                                       placeholder="Enter number of installments"
                                       required>
                            </div>
                        </div>

                        <!-- Installment Period -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Installment Period
                            </label>
                            <select x-model="form.installmentPeriod" 
                                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white">
                                <option value="monthly">Monthly</option>
                                <option value="weekly">Weekly</option>
                                <option value="daily">Daily</option>
                            </select>
                        </div>

                        <!-- First Installment Date -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                First Installment Date
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-calendar text-gray-400"></i>
                                </div>
                                <input type="date" 
                                       x-model="form.firstInstallmentDate" 
                                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white" 
                                       required>
                            </div>
                        </div>

                        <!-- Calculate Button -->
                        <button type="submit" 
                                class="w-full inline-flex justify-center items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
                            <i class="fa fa-calculator mr-2"></i>
                            Calculate Loan
                        </button>
                    </form>
                </div>
            </div>

            <!-- Results Section -->
            <div class="lg:col-span-2">
                <!-- Summary Cards -->
                <div x-show="showResults" x-transition class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-white">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-blue-100">Principal Amount</p>
                                <p class="text-2xl font-bold" x-text="formatCurrencyDecimals(results.principalAmount)"></p>
                            </div>
                            <i class="fa fa-money-bill-wave text-3xl text-blue-200"></i>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg p-6 text-white">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-100">Total Interest</p>
                                <p class="text-2xl font-bold" x-text="formatCurrencyDecimals(results.totalInterest)"></p>
                            </div>
                            <i class="fa fa-percentage text-3xl text-green-200"></i>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg p-6 text-white">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-purple-100">Total Amount</p>
                                <p class="text-2xl font-bold" x-text="formatCurrencyDecimals(results.totalAmount)"></p>
                            </div>
                            <i class="fa fa-calculator text-3xl text-purple-200"></i>
                        </div>
                    </div>
                </div>

                <!-- Repayment Schedule -->
                <div x-show="showResults" x-transition class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Repayment Schedule</h3>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-500 dark:text-gray-400">Interest Method:</span>
                                <span class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 rounded-full"
                                      x-text="form.interestMethod === 'flat_interest' ? 'Flat Interest' : 'Declining Balance'"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-700">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">#</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Installment ({{ getCurrencyCode() }})</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Principal ({{ getCurrencyCode() }})</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Interest ({{ getCurrencyCode() }})</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Balance ({{ getCurrencyCode() }})</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    <template x-for="(schedule, index) in results.schedules" :key="index">
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-white" x-text="index + 1"></td>
                                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-white" x-text="formatDate(schedule.date)"></td>
                                            <td class="px-4 py-3 text-sm font-semibold text-blue-600 dark:text-blue-400" x-text="formatAmount(schedule.amount)"></td>
                                            <td class="px-4 py-3 text-sm text-green-600 dark:text-green-400" x-text="formatAmount(schedule.principalPaid)"></td>
                                            <td class="px-4 py-3 text-sm text-orange-600 dark:text-orange-400" x-text="formatAmount(schedule.interestPaid)"></td>
                                            <td class="px-4 py-3 text-sm text-red-600 dark:text-red-400" x-text="formatAmount(schedule.balance)"></td>
                                        </tr>
                                    </template>
                                </tbody>
                                <tfoot class="bg-gray-100 dark:bg-gray-700">
                                    <tr class="font-semibold">
                                        <td class="px-4 py-3 text-sm text-gray-900 dark:text-white" colspan="2">Totals</td>
                                        <td class="px-4 py-3 text-sm text-blue-600 dark:text-blue-400" x-text="formatAmount(results.totalAmount)"></td>
                                        <td class="px-4 py-3 text-sm text-green-600 dark:text-green-400" x-text="formatAmount(results.principalAmount)"></td>
                                        <td class="px-4 py-3 text-sm text-orange-600 dark:text-orange-400" x-text="formatAmount(results.totalInterest)"></td>
                                        <td class="px-4 py-3 text-sm text-red-600 dark:text-red-400" x-text="formatAmount(0)"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div x-show="!showResults" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-12 text-center">
                    <i class="fa fa-calculator text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Ready to Calculate</h3>
                    <p class="text-gray-500 dark:text-gray-400">Enter loan parameters on the left and click "Calculate Loan" to see the repayment schedule.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function loanCalculator() {
            return {
                form: {
                    principalAmount: 100000,
                    interestRate: 12,
                    interestMethod: 'flat_interest',
                    installments: 12,
                    installmentPeriod: 'monthly',
                    firstInstallmentDate: new Date().toISOString().split('T')[0]
                },
                results: {
                    principalAmount: 0,
                    totalInterest: 0,
                    totalAmount: 0,
                    schedules: []
                },
                showResults: false,

                calculateLoan() {
                    const principal = parseFloat(this.form.principalAmount);
                    const interestRate = parseFloat(this.form.interestRate) / 100;
                    const installments = parseInt(this.form.installments);
                    const firstDate = new Date(this.form.firstInstallmentDate);
                    
                    let schedules = [];
                    let totalInterest = 0;
                    let remainingPrincipal = principal;

                    if (this.form.interestMethod === 'flat_interest') {
                        // Flat Interest Method
                        totalInterest = principal * interestRate;
                        const totalAmount = principal + totalInterest;
                        const installmentAmount = totalAmount / installments;
                        const interestPerInstallment = totalInterest / installments;
                        const principalPerInstallment = installmentAmount - interestPerInstallment;

                        for (let i = 1; i <= installments; i++) {
                            const installmentDate = this.calculateInstallmentDate(firstDate, i, this.form.installmentPeriod);
                            
                            schedules.push({
                                date: installmentDate,
                                amount: installmentAmount,
                                principalPaid: principalPerInstallment,
                                interestPaid: interestPerInstallment,
                                balance: installmentAmount
                            });
                        }
                    } else {
                        // Declining Balance Method
                        const principalPerInstallment = principal / installments;
                        
                        for (let i = 1; i <= installments; i++) {
                            const installmentDate = this.calculateInstallmentDate(firstDate, i, this.form.installmentPeriod);
                            const interestPaid = (interestRate / installments) * remainingPrincipal;
                            const principalPaid = principalPerInstallment;
                            const installmentAmount = interestPaid + principalPaid;
                            
                            totalInterest += interestPaid;
                            
                            schedules.push({
                                date: installmentDate,
                                amount: installmentAmount,
                                principalPaid: principalPaid,
                                interestPaid: interestPaid,
                                balance: installmentAmount
                            });
                            
                            remainingPrincipal -= principalPaid;
                        }
                    }

                    this.results = {
                        principalAmount: principal,
                        totalInterest: totalInterest,
                        totalAmount: principal + totalInterest,
                        schedules: schedules
                    };
                    
                    this.showResults = true;
                },

                calculateInstallmentDate(startDate, installmentNumber, period) {
                    const date = new Date(startDate);
                    
                    switch (period) {
                        case 'monthly':
                            date.setMonth(date.getMonth() + (installmentNumber - 1));
                            break;
                        case 'weekly':
                            date.setDate(date.getDate() + (7 * (installmentNumber - 1)));
                            break;
                        case 'daily':
                            date.setDate(date.getDate() + (installmentNumber - 1));
                            break;
                    }
                    
                    return date;
                },

                // JavaScript equivalents of your PHP helper functions
                formatCurrencyDecimals(amount) {
                    const currencyCode = '{{ getCurrencyCode() }}';
                    const decimals = {{ config('app.currency_decimals', 2) }};
                    
                    return new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: currencyCode,
                        minimumFractionDigits: decimals,
                        maximumFractionDigits: decimals
                    }).format(amount || 0);
                },

                formatAmount(amount) {
                    const decimals = {{ config('app.currency_decimals', 2) }};
                    
                    return new Intl.NumberFormat('en-US', {
                        minimumFractionDigits: decimals,
                        maximumFractionDigits: decimals
                    }).format(amount || 0);
                },

                formatDate(date) {
                    return new Intl.DateTimeFormat('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                    }).format(new Date(date));
                },

                resetCalculator() {
                    this.form = {
                        principalAmount: 100000,
                        interestRate: 12,
                        interestMethod: 'flat_interest',
                        installments: 12,
                        installmentPeriod: 'monthly',
                        firstInstallmentDate: new Date().toISOString().split('T')[0]
                    };
                    this.results = {
                        principalAmount: 0,
                        totalInterest: 0,
                        totalAmount: 0,
                        schedules: []
                    };
                    this.showResults = false;
                },

                exportToPDF() {
                    // Create a new window with the content to be printed
                    const printWindow = window.open('', '_blank');
                    const scheduleTable = this.generateScheduleHTML();
                    
                    printWindow.document.write(`
                        <!DOCTYPE html>
                        <html>
                        <head>
                            <title>Loan Repayment Schedule</title>
                            <style>
                                body { font-family: Arial, sans-serif; margin: 20px; }
                                .header { text-align: center; margin-bottom: 30px; }
                                .summary { margin-bottom: 30px; }
                                .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
                                .summary-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; text-align: center; }
                                .summary-card h3 { margin: 0; color: #666; font-size: 14px; }
                                .summary-card p { margin: 5px 0 0 0; font-size: 18px; font-weight: bold; }
                                table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                                th { background-color: #f4f4f4; font-weight: bold; }
                                .text-right { text-align: right; }
                                .total-row { background-color: #f9f9f9; font-weight: bold; }
                                @media print {
                                    body { margin: 0; }
                                    .no-print { display: none; }
                                }
                            </style>
                        </head>
                        <body>
                            <div class="header">
                                <h1>Loan Repayment Schedule</h1>
                                <p>Generated on ${new Date().toLocaleDateString()}</p>
                            </div>
                            
                            <div class="summary">
                                <h2>Loan Summary</h2>
                                <div class="summary-grid">
                                    <div class="summary-card">
                                        <h3>Principal Amount</h3>
                                        <p>${this.formatCurrencyDecimals(this.results.principalAmount)}</p>
                                    </div>
                                    <div class="summary-card">
                                        <h3>Total Interest</h3>
                                        <p>${this.formatCurrencyDecimals(this.results.totalInterest)}</p>
                                    </div>
                                    <div class="summary-card">
                                        <h3>Total Amount</h3>
                                        <p>${this.formatCurrencyDecimals(this.results.totalAmount)}</p>
                                    </div>
                                </div>
                                <p><strong>Interest Method:</strong> ${this.form.interestMethod === 'flat_interest' ? 'Flat Interest' : 'Declining Balance'}</p>
                                <p><strong>Interest Rate:</strong> ${this.form.interestRate}%</p>
                                <p><strong>Number of Installments:</strong> ${this.form.installments}</p>
                                <p><strong>Installment Period:</strong> ${this.form.installmentPeriod}</p>
                            </div>
                            
                            ${scheduleTable}
                            
                            <div style="margin-top: 30px; text-align: center; color: #666; font-size: 12px;">
                                <p>This is a projected loan repayment schedule for informational purposes only.</p>
                            </div>
                        </body>
                        </html>
                    `);
                    
                    printWindow.document.close();
                    printWindow.print();
                },

                generateScheduleHTML() {
                    const currencyCode = '{{ getCurrencyCode() }}';
                    let tableHTML = `
                        <table>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th class="text-right">Installment (${currencyCode})</th>
                                    <th class="text-right">Principal (${currencyCode})</th>
                                    <th class="text-right">Interest (${currencyCode})</th>
                                    <th class="text-right">Balance (${currencyCode})</th>
                                </tr>
                            </thead>
                            <tbody>
                    `;
                    
                    this.results.schedules.forEach((schedule, index) => {
                        tableHTML += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${this.formatDate(schedule.date)}</td>
                                <td class="text-right">${this.formatAmount(schedule.amount)}</td>
                                <td class="text-right">${this.formatAmount(schedule.principalPaid)}</td>
                                <td class="text-right">${this.formatAmount(schedule.interestPaid)}</td>
                                <td class="text-right">${this.formatAmount(schedule.balance)}</td>
                            </tr>
                        `;
                    });
                    
                    tableHTML += `
                            </tbody>
                            <tfoot>
                                <tr class="total-row">
                                    <td colspan="2">Totals</td>
                                    <td class="text-right">${this.formatAmount(this.results.totalAmount)}</td>
                                    <td class="text-right">${this.formatAmount(this.results.principalAmount)}</td>
                                    <td class="text-right">${this.formatAmount(this.results.totalInterest)}</td>
                                    <td class="text-right">${this.formatAmount(0)}</td>
                                </tr>
                            </tfoot>
                        </table>
                    `;
                    
                    return tableHTML;
                }
            }
        }
    </script>
@endsection