@extends('layouts.bootstrap')

@section('title', 'Record Investment')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="bi bi-plus-circle me-2"></i>Record Investment
                </h1>
                <a href="{{ route('investments.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to Investments
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Investment Details</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('investments.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       id="title" name="title" value="{{ old('title') }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="amount" class="form-label">Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount') }}" 
                                           step="0.01" min="0.01" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('type') is-invalid @enderror" 
                                        id="type" name="type" required>
                                    <option value="">Select Type</option>
                                    @foreach(\App\Models\Investment::getTypes() as $key => $label)
                                        <option value="{{ $key }}" {{ old('type') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    @foreach(\App\Models\Investment::getStatuses() as $key => $label)
                                        <option value="{{ $key }}" {{ old('status', 'active') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="source" class="form-label">Source/Institution</label>
                                <input type="text" class="form-control @error('source') is-invalid @enderror" 
                                       id="source" name="source" value="{{ old('source') }}" 
                                       placeholder="Bank, investor, or funding source">
                                @error('source')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="reference_number" class="form-label">Reference Number</label>
                                <input type="text" class="form-control @error('reference_number') is-invalid @enderror" 
                                       id="reference_number" name="reference_number" value="{{ old('reference_number') }}" 
                                       placeholder="Loan number or reference">
                                @error('reference_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="interest_rate" class="form-label">Interest Rate (%)</label>
                                <input type="number" class="form-control @error('interest_rate') is-invalid @enderror" 
                                       id="interest_rate" name="interest_rate" value="{{ old('interest_rate') }}" 
                                       step="0.01" min="0" max="100" placeholder="0.00">
                                @error('interest_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="term_months" class="form-label">Term (Months)</label>
                                <input type="number" class="form-control @error('term_months') is-invalid @enderror" 
                                       id="term_months" name="term_months" value="{{ old('term_months') }}" 
                                       min="1" placeholder="12">
                                @error('term_months')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="start_date" class="form-label">Investment Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('start_date') is-invalid @enderror"
                                       id="start_date" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" required>
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="contract_file" class="form-label">Contract/Agreement</label>
                            <input type="file" class="form-control @error('contract_file') is-invalid @enderror" 
                                   id="contract_file" name="contract_file" accept=".pdf,.jpg,.jpeg,.png">
                            <div class="form-text">Upload contract or agreement document (PDF, JPG, PNG - Max 5MB)</div>
                            @error('contract_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('investments.index') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i>Record Investment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="bi bi-info-circle me-1"></i>Investment Types
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <strong>Bank Loan:</strong> Traditional bank financing<br><br>
                        <strong>Business Loan:</strong> Specific business funding<br><br>
                        <strong>Equipment Financing:</strong> Equipment purchase loans<br><br>
                        <strong>Line of Credit:</strong> Revolving credit facility<br><br>
                        <strong>Investor Funding:</strong> Private investor capital<br><br>
                        <strong>Grant:</strong> Government or institutional grants<br><br>
                        <strong>Other:</strong> Other types of investments or funding
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="bi bi-calculator me-1"></i>Loan Calculator
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <p>Use the interest rate and term fields to calculate monthly payments for loans.</p>
                        <div id="loanCalculator" style="display: none;">
                            <div class="alert alert-info py-2">
                                <strong>Monthly Payment:</strong> <span id="monthlyPayment">$0.00</span><br>
                                <strong>Total Interest:</strong> <span id="totalInterest">$0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="bi bi-lightbulb me-1"></i>Tips
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <ul class="mb-0">
                            <li>Upload contracts for important agreements</li>
                            <li>Include interest rates for accurate tracking</li>
                            <li>Set term months for loan repayment schedules</li>
                            <li>Use clear, descriptive titles</li>
                            <li>Keep reference numbers for easy identification</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const amountInput = document.getElementById('amount');
    const interestInput = document.getElementById('interest_rate');
    const termInput = document.getElementById('term_months');
    const calculator = document.getElementById('loanCalculator');
    const monthlyPaymentSpan = document.getElementById('monthlyPayment');
    const totalInterestSpan = document.getElementById('totalInterest');

    function calculateLoan() {
        const amount = parseFloat(amountInput.value) || 0;
        const rate = parseFloat(interestInput.value) || 0;
        const term = parseInt(termInput.value) || 0;

        if (amount > 0 && rate > 0 && term > 0) {
            const monthlyRate = rate / 100 / 12;
            const monthlyPayment = amount * (monthlyRate * Math.pow(1 + monthlyRate, term)) / (Math.pow(1 + monthlyRate, term) - 1);
            const totalInterest = (monthlyPayment * term) - amount;

            monthlyPaymentSpan.textContent = '$' + monthlyPayment.toFixed(2);
            totalInterestSpan.textContent = '$' + totalInterest.toFixed(2);
            calculator.style.display = 'block';
        } else {
            calculator.style.display = 'none';
        }
    }

    amountInput.addEventListener('input', calculateLoan);
    interestInput.addEventListener('input', calculateLoan);
    termInput.addEventListener('input', calculateLoan);
});
</script>
@endsection