@extends('garage.layouts.app')

@section('title', 'Edit ' . ucfirst($voucher->voucher_type) . ' Voucher')

@push('styles')
<style>
    .transaction-row {
        border-bottom: 1px solid #e9ecef;
        padding: 0.75rem 0;
    }
    .transaction-row:last-child {
        border-bottom: none;
    }
    .debit-amount {
        color: #198754;
        font-weight: 600;
    }
    .credit-amount {
        color: #dc3545;
        font-weight: 600;
    }
    .balance-error {
        color: #dc3545;
        font-weight: 600;
    }
    .balance-ok {
        color: #198754;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="bi bi-pencil me-2"></i>Edit {{ ucfirst($voucher->voucher_type) }} Voucher
                </h5>
                <a href="{{ route('garage.vouchers.show', $voucher->id) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to View
                </a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('garage.vouchers.update', $voucher->id) }}" id="voucherForm">
                    @csrf
                    @method('PUT')

                    <!-- Basic Information -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Voucher Number</label>
                            <input type="text" class="form-control" value="{{ $voucher->voucher_no }}" disabled>
                            <small class="text-muted">Voucher number cannot be changed</small>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Voucher Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('voucher_date') is-invalid @enderror" name="voucher_date" value="{{ old('voucher_date', $voucher->voucher_date) }}" required>
                            @error('voucher_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Reference No</label>
                            <input type="text" class="form-control @error('reference_no') is-invalid @enderror" name="reference_no" value="{{ old('reference_no', $voucher->reference_no) }}">
                            @error('reference_no')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <input type="text" class="form-control" value="{{ ucfirst($voucher->status) }}" disabled>
                            <small class="text-muted">Status: {{ ucfirst($voucher->status) }}</small>
                        </div>
                    </div>

                    <!-- Cheque Information -->
                    @if(in_array($voucher->voucher_type, ['receipt', 'payment']))
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Cheque No</label>
                            <input type="text" class="form-control @error('cheque_no') is-invalid @enderror" name="cheque_no" value="{{ old('cheque_no', $voucher->cheque_no) }}">
                            @error('cheque_no')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Cheque Date</label>
                            <input type="date" class="form-control @error('cheque_date') is-invalid @enderror" name="cheque_date" value="{{ old('cheque_date', $voucher->cheque_date) }}">
                            @error('cheque_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Cheque Bank</label>
                            <input type="text" class="form-control @error('cheque_bank') is-invalid @enderror" name="cheque_bank" value="{{ old('cheque_bank', $voucher->cheque_bank) }}">
                            @error('cheque_bank')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    @endif

                    <!-- Narration -->
                    <div class="mb-4">
                        <label class="form-label">Narration</label>
                        <textarea class="form-control @error('narration') is-invalid @enderror" name="narration" rows="2" placeholder="Enter voucher narration...">{{ old('narration', $voucher->narration) }}</textarea>
                        @error('narration')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Transaction Lines -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">Transaction Lines</h6>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addTransactionRow()">
                                <i class="bi bi-plus-lg me-1"></i>Add Line
                            </button>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 30px;">#</th>
                                        <th>Ledger Account</th>
                                        <th style="width: 240px;">Sub-ledger</th>
                                        <th style="width: 120px;">Type</th>
                                        <th style="width: 200px;">Amount</th>
                                        <th style="width: 300px;">Narration</th>
                                        <th style="width: 50px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="transactionRows">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="4" class="text-end fw-bold">Total Debit:</td>
                                        <td class="text-end">
                                            <span id="totalDebit" class="debit-amount">PKR 0.00</span>
                                        </td>
                                        <td colspan="2"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-end fw-bold">Total Credit:</td>
                                        <td class="text-end">
                                            <span id="totalCredit" class="credit-amount">PKR 0.00</span>
                                        </td>
                                        <td colspan="2"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-end fw-bold">Balance:</td>
                                        <td class="text-end">
                                            <span id="balance" class="balance-ok">PKR 0.00</span>
                                        </td>
                                        <td colspan="2"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Error Messages -->
                    @if($errors->has('amount'))
                    <div class="alert alert-danger">
                        {{ $errors->first('amount') }}
                    </div>
                    @endif

                    <!-- Submit Buttons -->
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('garage.vouchers.show', $voucher->id) }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Update Voucher
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let rowCount = 0;
const ledgers = @json($ledgers);
const subLedgers = @json($subLedgers);
const transactions = @json($transactions);

function addTransactionRow(ledgerId = '', subLedgerId = '', transactionType = 'debit', amount = '', narration = '') {
    rowCount++;
    const row = document.createElement('tr');
    row.className = 'transaction-row';
    row.id = `row-${rowCount}`;
    
    row.innerHTML = `
        <td>${rowCount}</td>
        <td>
            <select class="form-select ledger-select" name="ledger_id[]" required>
                <option value="">Select Ledger</option>
                ${ledgers.map(ledger => `
                    <option value="${ledger.id}" ${ledgerId == ledger.id ? 'selected' : ''}>
                        ${ledger.code ? ledger.code + ' - ' : ''}${ledger.name}
                    </option>
                `).join('')}
            </select>
        </td>
        <td>
            <select class="form-select sub-ledger-select" name="sub_ledger_id[]">
                <option value="">— Sub-ledger —</option>
                ${subLedgers.map(sl => `
                    <option value="${sl.id}" ${subLedgerId == sl.id ? 'selected' : ''}>
                        ${(sl.sub_code ? sl.sub_code + ' - ' : '')}${(sl.title || 'Sub-ledger')}
                    </option>
                `).join('')}
            </select>
            <div class="small text-muted mt-1">Optional (vehicle sub-ledger etc.)</div>
        </td>
        <td>
            <select class="form-select transaction-type" name="transaction_type[]" required>
                <option value="debit" ${transactionType === 'debit' ? 'selected' : ''}>Debit</option>
                <option value="credit" ${transactionType === 'credit' ? 'selected' : ''}>Credit</option>
            </select>
        </td>
        <td>
            <input type="number" step="0.01" min="0" class="form-control amount-input" name="amount[]" value="${amount}" required onchange="calculateTotals()">
        </td>
        <td>
            <input type="text" class="form-control" name="line_narration[]" value="${narration}" placeholder="Line narration">
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(${rowCount})">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    `;
    
    document.getElementById('transactionRows').appendChild(row);
    calculateTotals();
}

function removeRow(id) {
    const row = document.getElementById(`row-${id}`);
    if (row) {
        row.remove();
        calculateTotals();
    }
}

function calculateTotals() {
    let totalDebit = 0;
    let totalCredit = 0;
    
    document.querySelectorAll('.transaction-row').forEach(row => {
        const type = row.querySelector('.transaction-type').value;
        const amount = parseFloat(row.querySelector('.amount-input').value) || 0;
        
        if (type === 'debit') {
            totalDebit += amount;
        } else {
            totalCredit += amount;
        }
    });
    
    document.getElementById('totalDebit').textContent = 'PKR ' + totalDebit.toFixed(2);
    document.getElementById('totalCredit').textContent = 'PKR ' + totalCredit.toFixed(2);
    
    const balance = totalDebit - totalCredit;
    const balanceElement = document.getElementById('balance');
    balanceElement.textContent = 'PKR ' + Math.abs(balance).toFixed(2);
    
    if (Math.abs(balance) < 0.01) {
        balanceElement.className = 'balance-ok';
        balanceElement.textContent = 'PKR 0.00 (Balanced)';
    } else {
        balanceElement.className = 'balance-error';
        balanceElement.textContent = 'PKR ' + Math.abs(balance).toFixed(2) + ' (Unbalanced)';
    }
}

// Load existing transactions
document.addEventListener('DOMContentLoaded', function() {
    transactions.forEach(transaction => {
        addTransactionRow(
            transaction.garage_ledger_id,
            transaction.garage_sub_ledger_id || '',
            transaction.transaction_type,
            transaction.amount,
            transaction.narration || ''
        );
    });
    
    calculateTotals();
    
    // Validate form before submit
    document.getElementById('voucherForm').addEventListener('submit', function(e) {
        const balance = parseFloat(document.getElementById('balance').textContent.replace(/[^0-9.-]+/g, ''));
        if (Math.abs(balance) >= 0.01) {
            e.preventDefault();
            alert('Voucher is not balanced! Total debits must equal total credits.');
            return false;
        }
        
        const rows = document.querySelectorAll('.transaction-row');
        if (rows.length < 2) {
            e.preventDefault();
            alert('Please add at least 2 transaction lines.');
            return false;
        }
    });
});
</script>
@endpush