@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small text-uppercase fw-bold">
                    <li class="breadcrumb-item"><a href="{{ route('accountant.currency-adjustments.index') }}" class="text-decoration-none text-muted">Currency Adjustments</a></li>
                    <li class="breadcrumb-item active text-primary">New Adjustment</li>
                </ol>
            </nav>
            <h2 class="h3 font-weight-bold text-dark mb-0">Record Currency Adjustment</h2>
        </div>
        <a href="{{ route('accountant.currency-adjustments.index') }}" class="btn-close shadow-none" aria-label="Close"></a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger mx-3 border-0 shadow-sm rounded-3 mb-4">
            {{ session('error') }}
        </div>
    @endif

    <div class="row mx-3">
        <div class="col-md-8">
            <form action="{{ route('accountant.currency-adjustments.store') }}" method="POST">
                @csrf
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Adjustment Date</label>
                                <input type="date" name="adjustment_date" class="form-control border-2 rounded-3" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Currency</label>
                                <select name="currency" id="currency-select" class="form-select border-2 rounded-3" required>
                                    <option value="">Select Currency</option>
                                    @foreach($currencies as $currency)
                                        <option value="{{ $currency }}">{{ $currency }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Last Known Rate (1 Unit = ?)</label>
                                <input type="number" step="0.000001" name="old_exchange_rate" id="old-rate" class="form-control border-2 rounded-3" value="1.000000" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">New Market Rate (1 Unit = ?)</label>
                                <input type="number" step="0.000001" name="exchange_rate" id="new-rate" class="form-control border-2 rounded-3" placeholder="e.g. 85.50" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Adjustment Account (Gain/Loss Tracking)</label>
                            <select name="adjustment_account_id" class="form-select border-2 rounded-3" required>
                                <option value="">Select Account</option>
                                @foreach($expenseAccounts as $account)
                                    <option value="{{ $account->id }}" {{ $account->code == '7000' ? 'selected' : '' }}>
                                        [{{ $account->code }}] {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-text">Choose the Income or Expense account where the difference will be recorded.</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Notes</label>
                            <textarea name="notes" class="form-control border-2 rounded-3" rows="3" placeholder="Reason for adjustment..."></textarea>
                        </div>
                    </div>
                    <div class="card-footer bg-light p-4 text-end">
                        <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold rounded-3">Record Adjustment</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-4">
            <!-- Impact Calculator Card -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 bg-light overflow-hidden">
                <div class="card-header bg-dark text-white p-3 border-0">
                    <h5 class="mb-0 small fw-bold text-uppercase">Adjustment Impact</h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <span class="text-muted small d-block">Total Foreign Balance</span>
                        <div class="h4 fw-bold mb-1" id="balance-display">$0.00</div>
                        <div id="accounts-list" class="small text-muted">No currency selected</div>
                    </div>
                    
                    <hr>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small">Current Valuation</span>
                        <span class="fw-bold" id="old-valuation">$0.00</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted small">New Valuation</span>
                        <span class="fw-bold" id="new-valuation">$0.00</span>
                    </div>
                    
                    <div class="card rounded-3 p-3 border-0" id="impact-result-card" style="background: rgba(0,0,0,0.05)">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold small text-uppercase">Net Impact</span>
                            <span class="h4 fw-bold mb-0" id="gain-loss-display">$0.00</span>
                        </div>
                        <div class="small fw-bold mt-1 d-none" id="impact-label"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const currencySelect = document.getElementById('currency-select');
    const oldRateInput = document.getElementById('old-rate');
    const newRateInput = document.getElementById('new-rate');
    
    let currentBalance = 0;

    currencySelect.addEventListener('change', async function() {
        const currency = this.value;
        if (!currency) return;

        try {
            const response = await fetch(`{{ route('accountant.currency-adjustments.balance') }}?currency=${currency}`);
            const data = await response.json();
            
            currentBalance = data.balance;
            document.getElementById('balance-display').innerText = currency + ' ' + currentBalance.toLocaleString(undefined, {minimumFractionDigits: 2});
            
            const accountsHtml = data.accounts.map(acc => `• ${acc.name}`).join('<br>');
            document.getElementById('accounts-list').innerHTML = accountsHtml || 'No accounts found';
            
            calculateImpact();
        } catch (error) {
            console.error('Error fetching balance:', error);
        }
    });

    [oldRateInput, newRateInput].forEach(input => {
        input.addEventListener('input', calculateImpact);
    });

    function calculateImpact() {
        const oldRate = parseFloat(oldRateInput.value) || 0;
        const newRate = parseFloat(newRateInput.value) || 0;
        
        const oldVal = currentBalance * oldRate;
        const newVal = currentBalance * newRate;
        const diff = newVal - oldVal;

        document.getElementById('old-valuation').innerText = '$' + oldVal.toLocaleString(undefined, {minimumFractionDigits: 2});
        document.getElementById('new-valuation').innerText = '$' + newVal.toLocaleString(undefined, {minimumFractionDigits: 2});
        
        const display = document.getElementById('gain-loss-display');
        const card = document.getElementById('impact-result-card');
        const label = document.getElementById('impact-label');

        display.innerText = (diff >= 0 ? '+' : '') + '$' + diff.toLocaleString(undefined, {minimumFractionDigits: 2});
        label.classList.remove('d-none');

        if (diff > 0) {
            display.className = 'h4 fw-bold mb-0 text-success';
            card.style.background = 'rgba(25, 135, 84, 0.1)';
            label.innerText = 'FIXED ASSET VALUE GAIN';
            label.className = 'small fw-bold mt-1 text-success';
        } else if (diff < 0) {
            display.className = 'h4 fw-bold mb-0 text-danger';
            card.style.background = 'rgba(220, 53, 69, 0.1)';
            label.innerText = 'FIXED ASSET VALUE LOSS';
            label.className = 'small fw-bold mt-1 text-danger';
        } else {
            display.className = 'h4 fw-bold mb-0 text-muted';
            card.style.background = 'rgba(0,0,0,0.05)';
            label.classList.add('d-none');
        }
    }
</script>
@endsection