<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<div class="animate-up">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;">
        <div>
            <a href="<?= base_url('admin/projects') ?>" style="color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 5px; margin-bottom: 10px;">
                <i class="bi bi-arrow-left"></i> Back to Projects
            </a>
            <h1>Expense Tracker: <span style="color: var(--primary);"><?= $project['title'] ?></span></h1>
            <p style="color: var(--text-muted);">Manage detailed expenditures and track project budget efficiency.</p>
        </div>
        
        <div style="text-align: right;">
            <div style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 1px;">Project Budget</div>
            <div style="font-size: 1.8rem; font-weight: 800; color: var(--text-main);">₹<?= number_format($project['budget'], 2) ?></div>
        </div>
    </div>

    <form action="<?= base_url('admin/save_expenses/' . $project['id']) ?>" method="post">
        <div class="admin-card" style="padding: 0; overflow: hidden;">
            <table class="admin-table" id="expenses-table">
                <thead>
                    <tr>
                        <th style="width: 200px;">Category</th>
                        <th style="width: 200px;">Employee</th>
                        <th>Description / Vendor</th>
                        <th style="width: 150px;">Amount (₹)</th>
                        <th style="width: 150px;">Date</th>
                        <th style="width: 60px;"></th>
                    </tr>
                </thead>
                <tbody id="expense-rows">
                    <?php if (empty($expenses)): ?>
                        <!-- Initial Empty Row -->
                        <tr class="expense-row">
                            <td>
                                <select name="category[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                    <option value="Labor">Labor</option>
                                    <option value="Materials">Materials</option>
                                    <option value="Equipment">Equipment</option>
                                    <option value="Permits">Permits</option>
                                    <option value="Subcontractor">Subcontractor</option>
                                    <option value="Other">Other</option>
                                </select>
                            </td>
                            <td>
                                <select name="employee_id[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                    <option value="">-- No Employee --</option>
                                    <?php foreach ($employees as $emp): ?>
                                        <option value="<?= $emp['id'] ?>"><?= $emp['name'] ?> (<?= $emp['role'] ?>)</option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                            <td>
                                <input type="text" name="description[]" placeholder="e.g. Concrete mix, Plumbing labor..." class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                            </td>
                            <td>
                                <input type="number" step="0.01" name="amount[]" placeholder="0.00" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                            </td>
                            <td>
                                <input type="date" name="date[]" value="<?= date('Y-m-d') ?>" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                            </td>
                            <td>
                                <button type="button" class="btn-remove" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;" onclick="removeRow(this)">
                                    <i class="bi bi-x-circle-fill"></i>
                                </button>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($expenses as $expense): ?>
                            <tr class="expense-row">
                                <td>
                                    <select name="category[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                        <option value="Labor" <?= $expense['category'] == 'Labor' ? 'selected' : '' ?>>Labor</option>
                                        <option value="Materials" <?= $expense['category'] == 'Materials' ? 'selected' : '' ?>>Materials</option>
                                        <option value="Equipment" <?= $expense['category'] == 'Equipment' ? 'selected' : '' ?>>Equipment</option>
                                        <option value="Permits" <?= $expense['category'] == 'Permits' ? 'selected' : '' ?>>Permits</option>
                                        <option value="Subcontractor" <?= $expense['category'] == 'Subcontractor' ? 'selected' : '' ?>>Subcontractor</option>
                                        <option value="Other" <?= $expense['category'] == 'Other' ? 'selected' : '' ?>>Other</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="employee_id[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                        <option value="">-- No Employee --</option>
                                        <?php foreach ($employees as $emp): ?>
                                            <option value="<?= $emp['id'] ?>" <?= $expense['employee_id'] == $emp['id'] ? 'selected' : '' ?>><?= $emp['name'] ?> (<?= $emp['role'] ?>)</option>
                                        <?php endforeach; ?>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name="description[]" value="<?= $expense['description'] ?>" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                </td>
                                <td>
                                    <input type="number" step="0.01" name="amount[]" value="<?= $expense['amount'] ?>" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                </td>
                                <td>
                                    <input type="date" name="date[]" value="<?= $expense['date'] ?>" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                                </td>
                                <td>
                                    <button type="button" class="btn-remove" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;" onclick="removeRow(this)">
                                        <i class="bi bi-x-circle-fill"></i>
                                    </button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
            
            <div style="padding: 20px; background: rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center;">
                <button type="button" class="btn" style="border: 2px dashed var(--border-admin); color: var(--text-admin-muted); display: flex; align-items: center; gap: 10px; padding: 10px 20px;" onclick="addRow()">
                    <i class="bi bi-plus-circle"></i> Add Expense Row
                </button>
                
                <div style="display: flex; align-items: center; gap: 25px;">
                    <div id="total-expense" style="font-weight: 700; color: var(--text-admin-main);">Total Expense: ₹0.00</div>
                    <button type="submit" class="btn btn-primary" style="padding: 12px 40px; border-radius: 8px;">
                        <i class="bi bi-cloud-check"></i> Save All Changes
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<template id="expense-row-template">
    <tr class="expense-row">
        <td>
            <select name="category[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                <option value="Labor">Labor</option>
                <option value="Materials">Materials</option>
                <option value="Equipment">Equipment</option>
                <option value="Permits">Permits</option>
                <option value="Subcontractor">Subcontractor</option>
                <option value="Other">Other</option>
            </select>
        </td>
        <td>
            <select name="employee_id[]" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
                <option value="">-- No Employee --</option>
                <?php foreach ($employees as $emp): ?>
                    <option value="<?= $emp['id'] ?>"><?= $emp['name'] ?> (<?= $emp['role'] ?>)</option>
                <?php endforeach; ?>
            </select>
        </td>
        <td>
            <input type="text" name="description[]" placeholder="Description..." class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
        </td>
        <td>
            <input type="number" step="0.01" name="amount[]" placeholder="0.00" class="form-control amount-input" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
        </td>
        <td>
            <input type="date" name="date[]" value="<?= date('Y-m-d') ?>" class="form-control" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); width: 100%; padding: 10px; border-radius: 6px;">
        </td>
        <td>
            <button type="button" class="btn-remove" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;" onclick="removeRow(this)">
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </td>
    </tr>
</template>

<script>
    function addRow() {
        const template = document.getElementById('expense-row-template');
        const clone = template.content.cloneNode(true);
        document.getElementById('expense-rows').appendChild(clone);
        calculateTotal();
    }

    function removeRow(btn) {
        const row = btn.closest('tr');
        if (document.querySelectorAll('.expense-row').length > 1) {
            row.remove();
        } else {
            row.querySelectorAll('input').forEach(input => input.value = '');
        }
        calculateTotal();
    }

    function calculateTotal() {
        let total = 0;
        document.querySelectorAll('input[name="amount[]"]').forEach(input => {
            const val = parseFloat(input.value) || 0;
            total += val;
        });
        document.getElementById('total-expense').innerText = `Total Expense: ₹${total.toLocaleString('en-IN', {minimumFractionDigits: 2})}`;
        
        // Visual indicator if over budget
        const budget = <?= $project['budget'] ?>;
        const totalDisplay = document.getElementById('total-expense');
        if (total > budget) {
            totalDisplay.style.color = '#ff4757';
        } else {
            totalDisplay.style.color = 'var(--text-admin-main)';
        }
    }

    // Initialize total calculation
    document.addEventListener('input', (e) => {
        if (e.target.name === 'amount[]') {
            calculateTotal();
        }
    });
    
    calculateTotal();
</script>

<?= $this->endSection() ?>
