<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>Suppliers</h1>
        <div class="page-subtitle">Manage supplier records and track outstanding balances.</div>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-primary" onclick="document.getElementById('addSupplierModal').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 Supplier
        </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 suppliers..." 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 ?>/suppliers" class="btn btn-outline btn-sm">Clear</a>
            <?php endif; ?>
        </form>
    </div>

    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Supplier 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($suppliers['data'])): ?>
                <tr>
                    <td colspan="5" class="text-center py-6">No suppliers found.</td>
                </tr>
                <?php else: foreach ($suppliers['data'] as $s): ?>
                <tr>
                    <td><strong><?= e($s['name']) ?></strong></td>
                    <td><?= e($s['email'] ?: '—') ?></td>
                    <td><?= e($s['phone'] ?: '—') ?></td>
                    <td class="text-right font-bold <?= (float)$s['balance'] > 0 ? 'text-danger' : 'text-success' ?>">
                        <?= money($s['balance']) ?>
                    </td>
                    <td class="text-right">
                        <div class="flex gap-2 justify-end">
                             <button class="btn btn-ghost btn-icon" title="Edit" 
                                     onclick='editSupplier(<?= htmlspecialchars(json_encode($s), 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($suppliers, APP_URL . '/suppliers', $_GET) ?>
</div>

<div class="modal-overlay" id="addSupplierModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">New Supplier</h3>
            <button class="modal-close" onclick="document.getElementById('addSupplierModal').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 ?>/suppliers/store" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Company Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="Acme Suppliers Ltd.">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" placeholder="supplier@example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" placeholder="+123 456 789">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Business Address</label>
                    <textarea name="address" class="form-control" rows="2" placeholder="Street, City, State"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('addSupplierModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Supplier</button>
            </div>
        </form>
    </div>
</div>
<!-- Edit Supplier Modal -->
<div class="modal-overlay" id="editSupplierModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Supplier</h3>
            <button class="modal-close" onclick="document.getElementById('editSupplierModal').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="editSupplierForm" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Company Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Business Address</label>
                    <textarea name="address" class="form-control" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('editSupplierModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Supplier</button>
            </div>
        </form>
    </div>
</div>

<script>
function editSupplier(s) {
    const modal = document.getElementById('editSupplierModal');
    const form = document.getElementById('editSupplierForm');
    
    form.action = '<?= APP_URL ?>/suppliers/' + s.id + '/update';
    form.querySelector('[name="name"]').value = s.name;
    form.querySelector('[name="email"]').value = s.email || '';
    form.querySelector('[name="phone"]').value = s.phone || '';
    form.querySelector('[name="address"]').value = s.address || '';
    
    modal.classList.add('show');
}
</script>
