<?php $__template->layout('Layout.main'); ?>

<?php $__template->section('title'); ?>قيد يومية جديد<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;">إنشاء قيد يومية يدوي</h3>
        <?php if ($fiscal_year): ?>
            <p style="color:#6B7280;margin:5px 0 0;font-size:13px;">السنة المالية: <?= e($fiscal_year['name_ar']) ?></p>
        <?php endif; ?>
    </div>
    <div style="padding:20px;">
        <form method="POST" action="/accounting/journal-entries" id="journalForm">
            <?= csrf_field() ?>

            <!-- Header -->
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;">
                <div>
                    <label class="form-label">تاريخ القيد <span style="color:#DC2626;">*</span></label>
                    <input type="date" name="entry_date" class="form-input" value="<?= date('Y-m-d') ?>" required>
                </div>
                <div>
                    <label class="form-label">رقم المرجع</label>
                    <input type="text" name="reference_number" class="form-input" dir="ltr">
                </div>
                <div>
                    <label class="form-label">الفرع</label>
                    <select name="branch_id" class="form-select">
                        <option value="">— بدون —</option>
                        <?php foreach ($branches as $b): ?>
                            <option value="<?= (int)$b['id'] ?>"><?= e($b['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-bottom:20px;">
                <div>
                    <label class="form-label">الوصف (عربي) <span style="color:#DC2626;">*</span></label>
                    <input type="text" name="description_ar" class="form-input" required>
                </div>
                <div>
                    <label class="form-label">مركز التكلفة</label>
                    <select name="cost_center_id" class="form-select">
                        <option value="">— بدون —</option>
                        <?php foreach ($cost_centers as $cc): ?>
                            <option value="<?= (int)$cc['id'] ?>"><?= e($cc['code']) ?> — <?= e($cc['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <!-- Lines -->
            <div style="border:1px solid #E5E7EB;border-radius:8px;overflow:hidden;margin-bottom:20px;">
                <div style="padding:10px 15px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center;">
                    <strong>سطور القيد</strong>
                    <button type="button" class="btn btn-sm btn-outline" onclick="addLine()">+ سطر جديد</button>
                </div>
                <table style="width:100%;" id="linesTable">
                    <thead>
                        <tr style="background:#F9FAFB;">
                            <th style="padding:8px;text-align:right;width:35%;">الحساب</th>
                            <th style="padding:8px;text-align:right;width:20%;">البيان</th>
                            <th style="padding:8px;text-align:center;width:18%;">مدين</th>
                            <th style="padding:8px;text-align:center;width:18%;">دائن</th>
                            <th style="padding:8px;width:9%;"></th>
                        </tr>
                    </thead>
                    <tbody id="linesBody">
                        <tr>
                            <td style="padding:5px;">
                                <select name="line_account_id[]" class="form-select" required>
                                    <option value="">— اختر حساباً —</option>
                                    <?php foreach ($accounts as $acc): ?>
                                        <option value="<?= (int)$acc['id'] ?>"><?= e($acc['account_code']) ?> — <?= e($acc['name_ar']) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                            <td style="padding:5px;"><input type="text" name="line_description[]" class="form-input" style="font-size:13px;"></td>
                            <td style="padding:5px;"><input type="number" name="line_debit[]" class="form-input debit-input" value="0.00" step="0.01" min="0" dir="ltr" onchange="calcTotals()"></td>
                            <td style="padding:5px;"><input type="number" name="line_credit[]" class="form-input credit-input" value="0.00" step="0.01" min="0" dir="ltr" onchange="calcTotals()"></td>
                            <td style="padding:5px;text-align:center;"><button type="button" class="btn btn-sm" style="color:#DC2626;" onclick="removeLine(this)">X</button></td>
                        </tr>
                        <tr>
                            <td style="padding:5px;">
                                <select name="line_account_id[]" class="form-select" required>
                                    <option value="">— اختر حساباً —</option>
                                    <?php foreach ($accounts as $acc): ?>
                                        <option value="<?= (int)$acc['id'] ?>"><?= e($acc['account_code']) ?> — <?= e($acc['name_ar']) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                            <td style="padding:5px;"><input type="text" name="line_description[]" class="form-input" style="font-size:13px;"></td>
                            <td style="padding:5px;"><input type="number" name="line_debit[]" class="form-input debit-input" value="0.00" step="0.01" min="0" dir="ltr" onchange="calcTotals()"></td>
                            <td style="padding:5px;"><input type="number" name="line_credit[]" class="form-input credit-input" value="0.00" step="0.01" min="0" dir="ltr" onchange="calcTotals()"></td>
                            <td style="padding:5px;text-align:center;"><button type="button" class="btn btn-sm" style="color:#DC2626;" onclick="removeLine(this)">X</button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr style="background:#F0FDF4;font-weight:700;">
                            <td style="padding:10px;" colspan="2">الإجمالي</td>
                            <td style="padding:10px;text-align:center;direction:ltr;" id="totalDebit">0.00</td>
                            <td style="padding:10px;text-align:center;direction:ltr;" id="totalCredit">0.00</td>
                            <td></td>
                        </tr>
                        <tr id="differenceRow" style="display:none;background:#FEF2F2;">
                            <td style="padding:10px;color:#DC2626;" colspan="2">الفرق</td>
                            <td style="padding:10px;text-align:center;color:#DC2626;direction:ltr;" colspan="2" id="difference">0.00</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div>
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-textarea" rows="2"></textarea>
            </div>

            <div style="margin-top:20px;display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary">حفظ كمسودة</button>
                <a href="/accounting/journal-entries" class="btn btn-outline">إلغاء</a>
            </div>
        </form>
    </div>
</div>

<script>
function addLine() {
    const tbody = document.getElementById('linesBody');
    const firstRow = tbody.querySelector('tr');
    const newRow = firstRow.cloneNode(true);
    newRow.querySelectorAll('input').forEach(i => { if(i.type === 'number') i.value = '0.00'; else i.value = ''; });
    newRow.querySelectorAll('select').forEach(s => s.selectedIndex = 0);
    tbody.appendChild(newRow);
}

function removeLine(btn) {
    const tbody = document.getElementById('linesBody');
    if (tbody.querySelectorAll('tr').length > 2) {
        btn.closest('tr').remove();
        calcTotals();
    }
}

function calcTotals() {
    let totalDebit = 0, totalCredit = 0;
    document.querySelectorAll('.debit-input').forEach(i => totalDebit += parseFloat(i.value) || 0);
    document.querySelectorAll('.credit-input').forEach(i => totalCredit += parseFloat(i.value) || 0);
    document.getElementById('totalDebit').textContent = totalDebit.toFixed(2);
    document.getElementById('totalCredit').textContent = totalCredit.toFixed(2);
    const diff = Math.abs(totalDebit - totalCredit);
    const diffRow = document.getElementById('differenceRow');
    if (diff > 0.001) {
        diffRow.style.display = '';
        document.getElementById('difference').textContent = diff.toFixed(2);
    } else {
        diffRow.style.display = 'none';
    }
}
</script>
<?php $__template->endSection(); ?>
