<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/dashboard" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Dashboard
        </a>
        <h1>Customers</h1>
        <div class="page-subtitle">Manage customer records and their balances.</div>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-primary" onclick="document.getElementById('addCustomerModal').classList.add('show')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            Add Customer
        </button>
    </div>
</div>

<div class="card mb-6">
    <div class="filter-bar">
        <form action="" method="GET" class="flex gap-3 flex-1">
            <div class="search-box">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                <input type="text" name="search" class="form-control" placeholder="Search customers..." value="<?= e($_GET['search'] ?? '') ?>">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Search</button>
            <?php if (!empty($_GET['search'])): ?>
                <a href="<?= APP_URL ?>/customers" class="btn btn-outline btn-sm">Clear</a>
            <?php endif; ?>
        </form>
    </div>

    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Customer Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th class="text-right">Balance Due</th>
                    <th style="width: 80px;"></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($customers['data'])): ?>
                <tr>
                    <td colspan="5" class="text-center py-6">No customers found.</td>
                </tr>
                <?php else: foreach ($customers['data'] as $c): ?>
                <tr>
                    <td><strong><?= e($c['name']) ?></strong></td>
                    <td><?= e($c['email'] ?: '—') ?></td>
                    <td><?= e($c['phone'] ?: '—') ?></td>
                    <td class="text-right font-bold <?= (float)$c['balance'] > 0 ? 'text-danger' : 'text-success' ?>">
                        <?= money($c['balance']) ?>
                    </td>
                    <td class="text-right">
                        <div class="flex gap-2 justify-end">
                            <button class="btn btn-ghost btn-icon" title="Edit" 
                                    onclick='editCustomer(<?= htmlspecialchars(json_encode($c), ENT_QUOTES) ?>)'>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                            </button>
                        </div>
                    </td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
        </table>
    </div>
    
    <?= paginationLinks($customers, APP_URL . '/customers', $_GET) ?>
</div>

<div class="modal-overlay" id="addCustomerModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">New Customer</h3>
            <button class="modal-close" onclick="document.getElementById('addCustomerModal').classList.remove('show')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
        </div>
        <form action="<?= APP_URL ?>/customers/store" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Full Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="Full Name">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" placeholder="Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="2" placeholder="Address"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('addCustomerModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Customer</button>
            </div>
        </form>
    </div>
</div>
<!-- Edit Customer Modal -->
<div class="modal-overlay" id="editCustomerModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Customer</h3>
            <button class="modal-close" onclick="document.getElementById('editCustomerModal').classList.remove('show')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
        </div>
        <form id="editCustomerForm" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Full Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="Full Name">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" placeholder="Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="2" placeholder="Address"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('editCustomerModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Customer</button>
            </div>
        </form>
    </div>
</div>

<script>
function editCustomer(c) {
    const modal = document.getElementById('editCustomerModal');
    const form = document.getElementById('editCustomerForm');
    
    form.action = '<?= APP_URL ?>/customers/' + c.id + '/update';
    form.querySelector('[name="name"]').value = c.name;
    form.querySelector('[name="email"]').value = c.email || '';
    form.querySelector('[name="phone"]').value = c.phone || '';
    form.querySelector('[name="address"]').value = c.address || '';
    
    modal.classList.add('show');
}
</script>
