@extends('admin.layouts.app')

@section('title', ucfirst($type) . ' Voucher Entry')

@section('content')
<style>
    .voucher-container {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    @media (max-width: 1024px) {
        .voucher-container {
            grid-template-columns: 1fr;
        }
    }
    
    .voucher-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .voucher-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .card-title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        font-size: 13px;
        font-weight: 500;
        color: #666;
        margin-bottom: 5px;
        display: block;
    }
    
    .form-control, .form-select {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 14px;
        transition: border-color 0.3s;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .summary-card {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 8px;
        padding: 20px;
        position: sticky;
        top: 20px;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-size: 14px;
    }
    
    .summary-item:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        color: #666;
        font-weight: 500;
    }
    
    .summary-value {
        font-weight: 600;
        font-size: 16px;
    }
    
    .summary-value.debit {
        color: #e74c3c;
    }
    
    .summary-value.credit {
        color: #27ae60;
    }
    
    .summary-value.diff {
        color: #f39c12;
    }
    
    .alert-balance {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 12px;
        border-radius: 4px;
        font-size: 13px;
        color: #856404;
        margin: 15px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .transactions-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    
    .transactions-table th {
        background: #f8f9fa;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        color: #333;
        border-bottom: 2px solid #ddd;
    }
    
    .transactions-table td {
        padding: 8px 6px;
        border-bottom: 1px solid #eee;
    }
    
    .transactions-table tr:hover {
        background: #f9f9f9;
    }
    
    .transactions-table input,
    .transactions-table select {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 12px;
        font-family: inherit;
    }
    
    .transactions-table input:focus,
    .transactions-table select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }
    
    .transactions-table input::placeholder {
        color: #999;
    }
    
    .btn-add-row {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 8px 16px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: background 0.3s;
    }
    
    .btn-add-row:hover {
        background: #764ba2;
    }
    
    .btn-remove {
        background: #e74c3c;
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    }
    
    .btn-remove:hover {
        background: #c0392b;
    }
    
    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn-save {
        flex: 1;
        padding: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        transition: transform 0.2s;
    }
    
    .btn-save:hover:not(:disabled) {
        transform: translateY(-2px);
    }
    
    .btn-save:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .btn-cancel {
        flex: 1;
        padding: 12px;
        background: #f0f0f0;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
    }
    
    .btn-cancel:hover {
        background: #e8e8e8;
    }
</style>

<script>
// Define functions immediately so they're available for inline onclick handlers
let rowIndex = 0;
const ledgers = @json($ledgers);

function addRow() {
    rowIndex++;
    console.log('Adding row:', rowIndex);
    
    const tbody = document.getElementById('entriesBody');
    if (!tbody) {
        console.error('entriesBody not found!');
        return;
    }
    
    const row = document.createElement('tr');
    row.id = `row_${rowIndex}`;
    
    // Build ledger dropdown options
    let ledgerOptions = '<option value="">-- Search Ledger --</option>';
    ledgers.forEach(l => {
        ledgerOptions += `<option value="${l.id}">${l.name}</option>`;
    });
    
    row.innerHTML = `
        <td>
            <select name="ledger_id[]" class="ledger-select" required onchange="updateTotals()">
                ${ledgerOptions}
            </select>
        </td>
        <td>
            <select name="transaction_type[]" class="type-select" required onchange="updateTotals()">
                <option value="debit">Debit</option>
                <option value="credit">Credit</option>
            </select>
        </td>
        <td>
            <input type="number" name="amount[]" class="amount-input" step="0.01" min="0" value="0" onchange="updateTotals()" placeholder="0.00" required>
        </td>
        <td>
            <input type="text" name="line_narration[]" class="description-input" placeholder="Optional description">
        </td>
        <td style="text-align: center;">
            <button type="button" class="btn-remove" onclick="removeRow(${rowIndex})" title="Remove row">✕</button>
        </td>
    `;
    
    tbody.appendChild(row);
    console.log('Row added successfully');
}

function removeRow(index) {
    console.log('Removing row:', index);
    const row = document.getElementById(`row_${index}`);
    const rowCount = document.querySelectorAll('tbody tr').length;
    
    if (rowCount <= 1) {
        alert('At least one row is required!');
        return;
    }
    
    if (row) {
        row.remove();
        updateTotals();
    }
}

function updateTotals() {
    let totalDebit = 0;
    let totalCredit = 0;
    
    document.querySelectorAll('tbody tr').forEach(row => {
        const typeSelect = row.querySelector('select[name="transaction_type[]"]');
        const amountInput = row.querySelector('input[name="amount[]"]');
        const amount = parseFloat(amountInput?.value) || 0;
        const type = typeSelect?.value;
        
        if (type === 'debit') {
            totalDebit += amount;
        } else if (type === 'credit') {
            totalCredit += amount;
        }
    });
    
    const difference = Math.abs(totalDebit - totalCredit);
    const isBalanced = totalDebit === totalCredit && totalDebit > 0;
    
    const debitEl = document.getElementById('totalDebit');
    const creditEl = document.getElementById('totalCredit');
    const diffEl = document.getElementById('totalDiff');
    
    if (debitEl) debitEl.textContent = `Rs. ${totalDebit.toFixed(2)}`;
    if (creditEl) creditEl.textContent = `Rs. ${totalCredit.toFixed(2)}`;
    if (diffEl) diffEl.textContent = `Rs. ${difference.toFixed(2)}`;
    
    const alertBox = document.getElementById('balanceAlert');
    const submitBtn = document.getElementById('submitBtn');
    
    if (alertBox && submitBtn) {
        if (isBalanced) {
            alertBox.style.display = 'none';
            submitBtn.disabled = false;
            submitBtn.style.opacity = '1';
            submitBtn.style.cursor = 'pointer';
        } else {
            alertBox.style.display = 'flex';
            document.getElementById('balanceMessage').textContent = 'Voucher is not balanced';
            submitBtn.disabled = true;
            submitBtn.style.opacity = '0.6';
            submitBtn.style.cursor = 'not-allowed';
        }
    }
}

// Initialize on page load
window.addEventListener('load', function() {
    console.log('Page loaded, adding initial rows...');
    addRow();
    addRow();
    
    // File upload handler
    const fileInput = document.getElementById('attachmentInput');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name || 'No file chosen';
            document.getElementById('fileName').textContent = fileName;
        });
    }
    
    // Form submit handler
    const voucherForm = document.getElementById('voucherForm');
    if (voucherForm) {
        voucherForm.addEventListener('submit', function(e) {
            const totalDebit = parseFloat(document.getElementById('totalDebit').textContent.replace('Rs. ', ''));
            const totalCredit = parseFloat(document.getElementById('totalCredit').textContent.replace('Rs. ', ''));
            
            if (totalDebit !== totalCredit) {
                e.preventDefault();
                alert('❌ Debit and Credit must be equal!');
                return false;
            }
            
            if (totalDebit === 0) {
                e.preventDefault();
                alert('❌ Please enter at least one transaction!');
                return false;
            }
        });
    }
});
</script>
    <div class="voucher-header">
        <h2 style="margin: 0;">
            @if($type == 'journal') 📝 Journal Voucher
            @elseif($type == 'receipt') 💰 Receipt Voucher
            @elseif($type == 'payment') 💸 Payment Voucher
            @elseif($type == 'contra') 🔄 Contra Voucher
            @endif
        </h2>
    </div>

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('admin.accounting.vouchers.store') }}" method="POST" id="voucherForm">
        @csrf
        <input type="hidden" name="voucher_type" value="{{ $type }}">

        <div class="voucher-container">
            <!-- Left Column - Main Form -->
            <div>
                <!-- Voucher Details -->
                <div class="voucher-card">
                    <div class="card-title">📋 Voucher Details</div>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div class="form-group">
                            <label>Voucher No <span style="color: #e74c3c;">*</span></label>
                            <input type="text" name="voucher_no" class="form-control" value="{{ $voucherNo }}" readonly>
                        </div>
                        <div class="form-group">
                            <label>Date <span style="color: #e74c3c;">*</span></label>
                            <input type="date" name="voucher_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Reference No</label>
                        <input type="text" name="reference_no" class="form-control" placeholder="Optional">
                    </div>
                    
                    <div class="form-group">
                        <label>Narration / Description</label>
                        <textarea name="narration" class="form-control" rows="4" placeholder="Enter voucher description..." style="resize: vertical;"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label>Attachment</label>
                        <div style="border: 2px dashed #ddd; border-radius: 6px; padding: 20px; text-align: center; cursor: pointer;" onclick="document.getElementById('attachmentInput').click();">
                            <input type="file" id="attachmentInput" name="attachment" style="display: none;" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                            <div style="font-size: 24px; margin-bottom: 8px;">📎</div>
                            <div style="color: #666; font-size: 13px;">
                                <strong>Choose File</strong><br>
                                <span id="fileName">No file chosen</span><br>
                                <small>PDF, JPG, PNG, DOC</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Transactions Table -->
                <div class="voucher-card">
                    <div class="card-title">📝 Transactions</div>
                    
                    <div style="overflow-x: auto;">
                        <table class="transactions-table">
                            <thead>
                                <tr>
                                    <th style="width: 40%;">Account Ledger <span style="color: #e74c3c;">*</span></th>
                                    <th style="width: 12%;">Type <span style="color: #e74c3c;">*</span></th>
                                    <th style="width: 15%;">Amount <span style="color: #e74c3c;">*</span></th>
                                    <th style="width: 25%;">Description</th>
                                    <th style="width: 8%; text-align: center;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="entriesBody">
                                <!-- Rows added by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                    
                    <button type="button" class="btn-add-row" onclick="addRow()">
                        ➕ Add Row
                    </button>
                </div>
            </div>

            <!-- Right Column - Summary -->
            <div>
                <div class="summary-card">
                    <div class="card-title" style="border-bottom: 2px solid rgba(0,0,0,0.1);">📊 Voucher Summary</div>
                    
                    <div class="summary-item">
                        <span class="summary-label">Total Debit:</span>
                        <span class="summary-value debit" id="totalDebit">Rs. 0.00</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">Total Credit:</span>
                        <span class="summary-value credit" id="totalCredit">Rs. 0.00</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">Difference:</span>
                        <span class="summary-value diff" id="totalDiff">Rs. 0.00</span>
                    </div>
                    
                    <div id="balanceAlert" class="alert-balance" style="display: none;">
                        ⚠️ <span id="balanceMessage">Voucher is not balanced</span>
                    </div>
                    
                    <div class="button-group">
                        <button type="submit" class="btn-save" id="submitBtn">
                            💾 Save Voucher
                        </button>
                    </div>
                    
                    <button type="button" class="btn-cancel" onclick="window.location.href='{{ route('admin.accounting.vouchers.index') }}'">
                        ✕ Cancel
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection