@extends('layouts.app')
@section('content')
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
}
body {
    background: #0a1f5e;
}
.voucher-screen {
    background: #0a1f5e;
    color: white;
    padding: 20px;
    min-height: 100vh;
}
.voucher-container {
    max-width: 1100px;
    margin: auto;
    background: #001a4d;
    border: 2px solid cyan;
    padding: 20px;
}
.row {
    display: flex;
    margin-bottom: 12px;
}
.label {
    width: 180px;
    font-weight: bold;
    color: yellow;
}
.field {
    flex: 1;
}
input, select, textarea {
    background: #ffffcc;
    border: none;
    padding: 6px 10px;
    width: 100%;
    font-weight: bold;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}
th, td {
    border: 1px solid cyan;
    padding: 8px;
    text-align: left;
}
th {
    background: #003399;
    color: yellow;
}
.item-row td input {
    width: 100%;
}
button {
    background: yellow;
    color: black;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
}
.footer-buttons {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}
</style>

<div class="voucher-screen">
    <div class="voucher-container">
        <h2 style="color:yellow; text-align:center;">📄 Sales Voucher</h2>

        <form id="salesForm">
            <div class="row">
                <div class="label">Date :</div>
                <div class="field"><input type="date" id="voucherDate" value="2026-06-14"></div>
            </div>
            <div class="row">
                <div class="label">Party A/c Name :</div>
                <div class="field"><input type="text" id="partyName" placeholder="Press F12 to select"></div>
            </div>
            <div class="row">
                <div class="label">Sales Ledger :</div>
                <div class="field"><input type="text" id="salesLedger" value="Sales - Local"></div>
            </div>

            <table id="itemsTable">
                <thead>
                    <tr>
                        <th>Item Name</th>
                        <th>Godown</th>
                        <th>Qty</th>
                        <th>Rate</th>
                        <th>Amount</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="item-row">
                        <td><input type="text" class="itemName" placeholder="Item"></td>
                        <td><input type="text" class="godown" placeholder="Godown"></td>
                        <td><input type="number" class="qty" step="any" value="1"></td>
                        <td><input type="number" class="rate" step="any"></td>
                        <td><input type="text" class="amount" readonly></td>
                        <td><button type="button" class="delRow">X</button></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" id="addRowBtn">➕ Add Item</button>

            <div class="row" style="margin-top:20px;">
                <div class="label">Narration :</div>
                <div class="field"><textarea rows="3" placeholder="Narration"></textarea></div>
            </div>

            <div class="footer-buttons">
                <button type="button" id="saveBtn">Ctrl+A → Save</button>
                <button type="button" onclick="history.back()">Esc → Back</button>
            </div>
        </form>
    </div>
</div>

<script>
// Auto calculate amount
function calcAmount(row) {
    let qty = row.querySelector('.qty').value;
    let rate = row.querySelector('.rate').value;
    let amountField = row.querySelector('.amount');
    let amt = (parseFloat(qty) || 0) * (parseFloat(rate) || 0);
    amountField.value = amt.toFixed(2);
}

// Add new row
document.getElementById('addRowBtn').addEventListener('click', () => {
    let tbody = document.querySelector('#itemsTable tbody');
    let newRow = document.createElement('tr');
    newRow.className = 'item-row';
    newRow.innerHTML = `
        <td><input type="text" class="itemName" placeholder="Item"></td>
        <td><input type="text" class="godown" placeholder="Godown"></td>
        <td><input type="number" class="qty" step="any" value="1"></td>
        <td><input type="number" class="rate" step="any"></td>
        <td><input type="text" class="amount" readonly></td>
        <td><button type="button" class="delRow">X</button></td>
    `;
    tbody.appendChild(newRow);
    attachEvents(newRow);
});

function attachEvents(row) {
    row.querySelector('.qty').addEventListener('input', () => calcAmount(row));
    row.querySelector('.rate').addEventListener('input', () => calcAmount(row));
    row.querySelector('.delRow').addEventListener('click', () => row.remove());
}

// attach to existing rows
document.querySelectorAll('.item-row').forEach(row => attachEvents(row));

// Ctrl+A Save
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'a') {
        e.preventDefault();
        alert('✅ Sales Voucher Saved (Demo)');
        // এখানে AJAX save logic বসাবেন
    }
    if (e.key === 'Escape') {
        history.back();
    }
});
</script>
@endsection