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

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

<div style="max-width: 1000px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;">
        <div>
            <a href="<?= base_url('employee') ?>" style="color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; font-weight: 700;">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </a>
            <h1 style="margin: 0; font-size: 1.8rem; font-weight: 800;">Expense Tracker: <span style="color: var(--primary);"><?= $project['title'] ?></span></h1>
            <p style="color: var(--text-muted);">Manage your personal expenditures for this project.</p>
        </div>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div style="background: rgba(46, 204, 113, 0.1); color: #2ecc71; padding: 15px; border-radius: 12px; border: 1px solid rgba(46, 204, 113, 0.2); margin-bottom: 25px; display: flex; align-items: center; gap: 10px;">
            <i class="bi bi-check-circle-fill"></i>
            <?= session()->getFlashdata('success') ?>
        </div>
    <?php endif; ?>

    <form action="<?= base_url('employee/project_expenses/' . $project['id']) ?>" method="post">
        <div class="card" style="padding: 0; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa; text-align: left; border-bottom: 1px solid var(--border);">
                        <th style="padding: 15px 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); width: 200px;">Category</th>
                        <th style="padding: 15px 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Description / Vendor</th>
                        <th style="padding: 15px 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); width: 180px;">Amount (₹)</th>
                        <th style="padding: 15px 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); width: 180px;">Date</th>
                        <th style="padding: 15px 20px; width: 60px;"></th>
                    </tr>
                </thead>
                <tbody id="expense-rows">
                    <?php if (empty($expenses)): ?>
                        <tr class="expense-row" style="border-bottom: 1px solid #f1f3f5;">
                            <td style="padding: 15px 20px;">
                                <select name="category[]" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                                    <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 style="padding: 15px 20px;">
                                <input type="text" name="description[]" placeholder="e.g. Concrete mix..." class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                            </td>
                            <td style="padding: 15px 20px;">
                                <input type="number" step="0.01" name="amount[]" placeholder="0.00" class="form-control amount-input" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                            </td>
                            <td style="padding: 15px 20px;">
                                <input type="date" name="date[]" value="<?= date('Y-m-d') ?>" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                            </td>
                            <td style="padding: 15px 20px; text-align: center;">
                                <button type="button" onclick="removeRow(this)" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($expenses as $expense): ?>
                            <tr class="expense-row" style="border-bottom: 1px solid #f1f3f5;">
                                <td style="padding: 15px 20px;">
                                    <select name="category[]" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                                        <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 style="padding: 15px 20px;">
                                    <input type="text" name="description[]" value="<?= $expense['description'] ?>" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                                </td>
                                <td style="padding: 15px 20px;">
                                    <input type="number" step="0.01" name="amount[]" value="<?= $expense['amount'] ?>" class="form-control amount-input" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                                </td>
                                <td style="padding: 15px 20px;">
                                    <input type="date" name="date[]" value="<?= $expense['date'] ?>" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                                </td>
                                <td style="padding: 15px 20px; text-align: center;">
                                    <button type="button" onclick="removeRow(this)" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;">
                                        <i class="bi bi-trash3-fill"></i>
                                    </button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
            
            <div style="padding: 25px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f3f5;">
                <button type="button" class="btn" style="border: 2px dashed var(--border); color: var(--text-muted); font-weight: 700; padding: 10px 25px; border-radius: 10px;" onclick="addRow()">
                    <i class="bi bi-plus-circle-fill"></i> Add New Row
                </button>
                
                <div style="display: flex; align-items: center; gap: 30px;">
                    <div style="text-align: right;">
                        <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">My Total Contribution</div>
                        <div id="total-expense" style="font-size: 1.5rem; font-weight: 800; color: #1e1e2d;">₹0.00</div>
                    </div>
                    <button type="submit" class="btn btn-primary" style="padding: 15px 40px; border-radius: 12px; font-weight: 800; box-shadow: 0 4px 15px rgba(229, 45, 39, 0.3);">
                        Save My Expenses
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<template id="expense-row-template">
    <tr class="expense-row" style="border-bottom: 1px solid #f1f3f5;">
        <td style="padding: 15px 20px;">
            <select name="category[]" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
                <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 style="padding: 15px 20px;">
            <input type="text" name="description[]" placeholder="Description..." class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
        </td>
        <td style="padding: 15px 20px;">
            <input type="number" step="0.01" name="amount[]" placeholder="0.00" class="form-control amount-input" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
        </td>
        <td style="padding: 15px 20px;">
            <input type="date" name="date[]" value="<?= date('Y-m-d') ?>" class="form-control" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
        </td>
        <td style="padding: 15px 20px; text-align: center;">
            <button type="button" onclick="removeRow(this)" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.2rem;">
                <i class="bi bi-trash3-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('.amount-input').forEach(input => {
            const val = parseFloat(input.value) || 0;
            total += val;
        });
        document.getElementById('total-expense').innerText = `₹${total.toLocaleString('en-IN', {minimumFractionDigits: 2})}`;
    }

    document.addEventListener('input', (e) => {
        if (e.target.classList.contains('amount-input')) {
            calculateTotal();
        }
    });
    
    calculateTotal();
</script>

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