@extends('layouts.master')

@section('page_title', 'Edit Journal Entry')

@section('content')
<div class="">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Edit Journal Entry</h1>
        <div>
            <a href="{{ route('journal-entries.index') }}" class="btn btn-secondary">Back to List</a>
            <a href="{{ route('journal-entries.show', $journalEntry) }}" class="btn btn-info">View Details</a>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Edit Journal Entry - {{ $journalEntry->entry_number }}</h5>
            <span class="badge bg-warning">{{ ucfirst($journalEntry->status) }}</span>
        </div>
        <div class="card-body">
            <form action="{{ route('journal-entries.update', $journalEntry) }}" method="POST" id="journalEntryForm">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="entry_date" class="form-label">Entry Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('entry_date') is-invalid @enderror" 
                                   id="entry_date" name="entry_date" 
                                   value="{{ old('entry_date', $journalEntry->entry_date?->format('Y-m-d')) }}" required>
                            @error('entry_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="entry_number" class="form-label">Entry Number</label>
                            <input type="text" class="form-control" id="entry_number" 
                                   value="{{ $journalEntry->entry_number }}" readonly>
                        </div>
                    </div>
                </div>

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

                <!-- Journal Entry Lines -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Journal Entry Lines</h6>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addLine()">
                            <i class="icon-plus"></i> Add Line
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="journalLinesTable">
                                <thead>
                                    <tr>
                                        <th width="30%">Account</th>
                                        <th width="30%">Description</th>
                                        <th width="15%">Debit</th>
                                        <th width="15%">Credit</th>
                                        <th width="10%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="journalLinesBody">
                                    @foreach($journalEntry->journalEntryLines as $index => $line)
                                    <tr class="journal-line" data-index="{{ $index }}">
                                        <td>
                                            <select class="form-control account-select" name="lines[{{ $index }}][account_id]" required>
                                                <option value="">Select Account</option>
                                                @foreach($accounts as $account)
                                                    <option value="{{ $account->id }}" 
                                                            {{ old("lines.{$index}.account_id", $line->account_id) == $account->id ? 'selected' : '' }}>
                                                        {{ $account->code ?? $account->account_code }} - {{ $account->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" 
                                                   name="lines[{{ $index }}][description]" 
                                                   value="{{ old("lines.{$index}.description", $line->description) }}" 
                                                   placeholder="Line description">
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" class="form-control debit-input" 
                                                   name="lines[{{ $index }}][debit_amount]" 
                                                   value="{{ old("lines.{$index}.debit_amount", $line->debit_amount > 0 ? $line->debit_amount : '') }}" 
                                                   placeholder="0.00" min="0">
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" class="form-control credit-input" 
                                                   name="lines[{{ $index }}][credit_amount]" 
                                                   value="{{ old("lines.{$index}.credit_amount", $line->credit_amount > 0 ? $line->credit_amount : '') }}" 
                                                   placeholder="0.00" min="0">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removeLine(this)">
                                                <i class="icon-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="table-active">
                                        <th colspan="2">Totals:</th>
                                        <th>
                                            <span id="totalDebits" class="text-info fw-bold">0.00</span>
                                        </th>
                                        <th>
                                            <span id="totalCredits" class="text-success fw-bold">0.00</span>
                                        </th>
                                        <th>
                                            <span id="balanceStatus" class="badge bg-secondary">Checking...</span>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <div class="alert alert-info mt-3">
                            <i class="icon-info"></i>
                            <strong>Note:</strong> Each line must have either a debit OR credit amount (not both). 
                            Total debits must equal total credits for the entry to be balanced.
                        </div>
                    </div>
                </div>

                @if($errors->has('error'))
                    <div class="alert alert-danger mt-3">
                        {{ $errors->first('error') }}
                    </div>
                @endif

                <div class="d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('journal-entries.show', $journalEntry) }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary" id="saveButton">Update Journal Entry</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let lineIndex = {{ count($journalEntry->journalEntryLines) }};

document.addEventListener('DOMContentLoaded', function() {
    updateTotals();
    
    // Add event listeners to existing inputs
    document.querySelectorAll('.debit-input, .credit-input').forEach(input => {
        input.addEventListener('input', handleAmountInput);
    });
});

function addLine() {
    const tbody = document.getElementById('journalLinesBody');
    const newRow = document.createElement('tr');
    newRow.className = 'journal-line';
    newRow.setAttribute('data-index', lineIndex);
    
    newRow.innerHTML = `
        <td>
            <select class="form-control account-select" name="lines[${lineIndex}][account_id]" required>
                <option value="">Select Account</option>
                @foreach($accounts as $account)
                    <option value="{{ $account->id }}">{{ $account->code ?? $account->account_code }} - {{ $account->name }}</option>
                @endforeach
            </select>
        </td>
        <td>
            <input type="text" class="form-control" name="lines[${lineIndex}][description]" placeholder="Line description">
        </td>
        <td>
            <input type="number" step="0.01" class="form-control debit-input" name="lines[${lineIndex}][debit_amount]" placeholder="0.00" min="0">
        </td>
        <td>
            <input type="number" step="0.01" class="form-control credit-input" name="lines[${lineIndex}][credit_amount]" placeholder="0.00" min="0">
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-danger" onclick="removeLine(this)">
                <i class="icon-trash"></i>
            </button>
        </td>
    `;
    
    tbody.appendChild(newRow);
    
    // Add event listeners to new inputs
    newRow.querySelectorAll('.debit-input, .credit-input').forEach(input => {
        input.addEventListener('input', handleAmountInput);
    });
    
    lineIndex++;
    updateTotals();
}

function removeLine(button) {
    const row = button.closest('tr');
    const tbody = document.getElementById('journalLinesBody');
    
    if (tbody.children.length > 2) {
        row.remove();
        updateTotals();
    } else {
        alert('At least 2 lines are required for a journal entry.');
    }
}

function handleAmountInput(event) {
    const input = event.target;
    const row = input.closest('tr');
    const isDebit = input.classList.contains('debit-input');
    
    if (input.value) {
        // Clear the opposite field in the same row
        if (isDebit) {
            const creditInput = row.querySelector('.credit-input');
            creditInput.value = '';
        } else {
            const debitInput = row.querySelector('.debit-input');
            debitInput.value = '';
        }
    }
    
    updateTotals();
}

function updateTotals() {
    let totalDebits = 0;
    let totalCredits = 0;
    
    document.querySelectorAll('.debit-input').forEach(input => {
        if (input.value) {
            totalDebits += parseFloat(input.value) || 0;
        }
    });
    
    document.querySelectorAll('.credit-input').forEach(input => {
        if (input.value) {
            totalCredits += parseFloat(input.value) || 0;
        }
    });
    
    document.getElementById('totalDebits').textContent = totalDebits.toFixed(2);
    document.getElementById('totalCredits').textContent = totalCredits.toFixed(2);
    
    const balanceStatus = document.getElementById('balanceStatus');
    const difference = Math.abs(totalDebits - totalCredits);
    
    if (difference < 0.01 && totalDebits > 0) {
        balanceStatus.textContent = 'Balanced';
        balanceStatus.className = 'badge bg-success';
    } else if (totalDebits === 0 && totalCredits === 0) {
        balanceStatus.textContent = 'Empty';
        balanceStatus.className = 'badge bg-secondary';
    } else {
        balanceStatus.textContent = `Unbalanced (${difference.toFixed(2)})`;
        balanceStatus.className = 'badge bg-danger';
    }
}

// Form validation before submit
document.getElementById('journalEntryForm').addEventListener('submit', function(e) {
    const lines = document.querySelectorAll('.journal-line');
    
    if (lines.length < 2) {
        e.preventDefault();
        alert('At least 2 lines are required for a journal entry.');
        return;
    }
    
    let hasValidLines = false;
    let totalDebits = 0;
    let totalCredits = 0;
    
    lines.forEach(line => {
        const accountSelect = line.querySelector('.account-select');
        const debitInput = line.querySelector('.debit-input');
        const creditInput = line.querySelector('.credit-input');
        
        if (accountSelect.value) {
            const debitValue = parseFloat(debitInput.value) || 0;
            const creditValue = parseFloat(creditInput.value) || 0;
            
            if (debitValue > 0 || creditValue > 0) {
                hasValidLines = true;
                totalDebits += debitValue;
                totalCredits += creditValue;
                
                if (debitValue > 0 && creditValue > 0) {
                    e.preventDefault();
                    alert('Each line can have either a debit OR credit amount, not both.');
                    return;
                }
            }
        }
    });
    
    if (!hasValidLines) {
        e.preventDefault();
        alert('At least one line must have an amount entered.');
        return;
    }
    
    if (Math.abs(totalDebits - totalCredits) > 0.01) {
        e.preventDefault();
        alert('The journal entry is not balanced. Total debits must equal total credits.');
        return;
    }
});
</script>
@endpush

@push('styles')
<style>
.table th, .table td {
    vertical-align: middle;
}
.journal-line input, .journal-line select {
    margin-bottom: 0;
}
.account-select {
    font-size: 0.875rem;
}
#journalLinesTable {
    margin-bottom: 0;
}
.table-active {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>
@endpush