<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/settings" 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 Settings
        </a>
        <h1>Units</h1>
        <div class="page-subtitle">Manage measurement units for products</div>
    </div>
    <button class="btn btn-primary" onclick="showAddUnitModal()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        Add Unit
    </button>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">All Units</h3>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Abbreviation</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($units as $unit): ?>
                <tr>
                    <td>
                        <div class="font-medium"><?= e($unit['name']) ?></div>
                    </td>
                    <td>
                        <span class="badge badge-secondary"><?= e($unit['abbreviation'] ?? 'N/A') ?></span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= e($unit['description'] ?? 'No description') ?>
                        </span>
                    </td>
                    <td>
                        <span class="badge <?= $unit['is_active'] ? 'badge-success' : 'badge-warning' ?>">
                            <?= $unit['is_active'] ? 'Active' : 'Inactive' ?>
                        </span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= date('M j, Y', strtotime($unit['created_at'])) ?>
                        </span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <button class="btn btn-ghost btn-icon" onclick="editUnit(<?= $unit['id'] ?>, '<?= e($unit['name']) ?>', '<?= e($unit['abbreviation'] ?? '') ?>', '<?= e($unit['description'] ?? '') ?>', <?= $unit['is_active'] ?>)" title="Edit">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                    <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>
                            <form method="POST" action="<?= APP_URL ?>/settings/toggle-unit-status" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $unit['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon" title="<?= $unit['is_active'] ? 'Deactivate' : 'Activate' ?>">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <?php if ($unit['is_active']): ?>
                                            <path d="M10 2v20M14 2v20"></path>
                                        <?php else: ?>
                                            <path d="M10 2v20M4 7h16M4 12h16M4 17h16"></path>
                                        <?php endif; ?>
                                    </svg>
                                </button>
                            </form>
                            <form method="POST" action="<?= APP_URL ?>/settings/delete-unit" onsubmit="return confirm('Are you sure you want to delete this unit?')" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $unit['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon text-danger" title="Delete">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <polyline points="3,6 5,6 21,6"></polyline>
                                        <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($units)): ?>
                <tr>
                    <td colspan="6" class="text-center text-muted py-8">
                        No units found. Create your first unit to get started.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Unit Modal -->
<div class="modal-overlay" id="addUnitModal">
    <div class="modal" style="max-width: 520px;">
        <div class="modal-header" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border-radius: 12px 12px 0 0;">
            <div class="flex items-center gap-3">
                <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="modal-title" style="margin: 0; font-size: 18px; font-weight: 600;">Add New Unit</h3>
                    <div style="font-size: 12px; opacity: 0.9;">Create a measurement unit for your products</div>
                </div>
            </div>
            <button class="modal-close" onclick="hideAddUnitModal()" style="background: rgba(255,255,255,0.2); color: white;">
                <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 method="POST" action="<?= APP_URL ?>/settings/store-unit">
            <?= Security::csrfField() ?>
            <div class="modal-body" style="padding: 32px 24px;">
                <div class="space-y-6">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--primary);">
                                <path d="M12 20h9"></path>
                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                            </svg>
                            Unit Name <span style="color: #dc2626;">*</span>
                        </label>
                        <input type="text" name="name" class="form-input" placeholder="e.g., Pieces, Kilograms, Liters" required 
                               style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg);">
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Enter the full name of the measurement unit</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--primary);">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                            </svg>
                            Abbreviation
                        </label>
                        <input type="text" name="abbreviation" class="form-input" placeholder="e.g., pcs, kg, L" maxlength="10"
                               style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg);">
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Short abbreviation (max 10 characters)</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--primary);">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14,2 14,8 20,8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10,9 9,9 8,9"></polyline>
                            </svg>
                            Description
                        </label>
                        <textarea name="description" class="form-textarea" rows="3" placeholder="Optional description of this unit"
                                  style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg); resize: vertical;"></textarea>
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Optional: Add a description to help users understand this unit</div>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div style="margin-top: 24px; padding: 16px; background: var(--bg-surface); border-radius: 8px; border-left: 4px solid var(--primary);">
                    <div style="font-weight: 600; margin-bottom: 8px; font-size: 13px; color: var(--text);">Quick Tips:</div>
                    <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.6;">
                        <li>Use clear, descriptive names (e.g., "Kilograms" instead of "KG")</li>
                        <li>Standard abbreviations help with consistency (pcs, kg, L, m)</li>
                        <li>Consider your industry's common measurement units</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer" style="padding: 24px; border-top: 1px solid var(--border); background: var(--bg-surface);">
                <div class="flex gap-3 justify-end">
                    <button type="button" class="btn btn-ghost" onclick="hideAddUnitModal()" 
                            style="padding: 12px 24px; border: 2px solid var(--border); border-radius: 8px; font-weight: 500; transition: all 0.3s ease;">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" 
                            style="padding: 12px 24px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; border-radius: 8px; font-weight: 500; color: white; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);">
                        <span style="display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                            Add Unit
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Unit Modal -->
<div class="modal-overlay" id="editUnitModal">
    <div class="modal" style="max-width: 520px;">
        <div class="modal-header" style="background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%); color: white; border-radius: 12px 12px 0 0;">
            <div class="flex items-center gap-3">
                <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;">
                        <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>
                </div>
                <div>
                    <h3 class="modal-title" style="margin: 0; font-size: 18px; font-weight: 600;">Edit Unit</h3>
                    <div style="font-size: 12px; opacity: 0.9;">Update the measurement unit details</div>
                </div>
            </div>
            <button class="modal-close" onclick="hideEditUnitModal()" style="background: rgba(255,255,255,0.2); color: white;">
                <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 method="POST" action="<?= APP_URL ?>/settings/update-unit">
            <?= Security::csrfField() ?>
            <input type="hidden" name="id" id="editUnitId">
            <div class="modal-body" style="padding: 32px 24px;">
                <div class="space-y-6">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--warning);">
                                <path d="M12 20h9"></path>
                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                            </svg>
                            Unit Name <span style="color: #dc2626;">*</span>
                        </label>
                        <input type="text" name="name" id="editUnitName" class="form-input" required
                               style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg);">
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Enter the full name of the measurement unit</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--warning);">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                            </svg>
                            Abbreviation
                        </label>
                        <input type="text" name="abbreviation" id="editUnitAbbreviation" class="form-input" maxlength="10"
                               style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg);">
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Short abbreviation (max 10 characters)</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; color: var(--warning);">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14,2 14,8 20,8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10,9 9,9 8,9"></polyline>
                            </svg>
                            Description
                        </label>
                        <textarea name="description" id="editUnitDescription" class="form-textarea" rows="3"
                                  style="padding: 12px 16px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: var(--bg); resize: vertical;"></textarea>
                        <div class="form-hint" style="margin-top: 6px; font-size: 12px; color: var(--text-muted);">Optional: Add a description to help users understand this unit</div>
                    </div>
                </div>
                
                <!-- Edit Status Info -->
                <div style="margin-top: 24px; padding: 16px; background: var(--bg-surface); border-radius: 8px; border-left: 4px solid var(--warning);">
                    <div style="font-weight: 600; margin-bottom: 8px; font-size: 13px; color: var(--text);">Edit Guidelines:</div>
                    <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.6;">
                        <li>Unit name cannot be changed if it's being used by products</li>
                        <li>Changes will affect all products using this unit</li>
                        <li>Consider the impact on existing inventory and reports</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer" style="padding: 24px; border-top: 1px solid var(--border); background: var(--bg-surface);">
                <div class="flex gap-3 justify-end">
                    <button type="button" class="btn btn-ghost" onclick="hideEditUnitModal()" 
                            style="padding: 12px 24px; border: 2px solid var(--border); border-radius: 8px; font-weight: 500; transition: all 0.3s ease;">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" 
                            style="padding: 12px 24px; background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%); border: none; border-radius: 8px; font-weight: 500; color: white; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">
                        <span style="display: flex; align-items: center; gap: 8px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                                <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>
                            Update Unit
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function showAddUnitModal() {
    document.getElementById('addUnitModal').classList.add('show');
}

function hideAddUnitModal() {
    document.getElementById('addUnitModal').classList.remove('show');
}

function editUnit(id, name, abbreviation, description, isActive) {
    document.getElementById('editUnitId').value = id;
    document.getElementById('editUnitName').value = name;
    document.getElementById('editUnitAbbreviation').value = abbreviation || '';
    document.getElementById('editUnitDescription').value = description || '';
    
    document.getElementById('editUnitModal').classList.add('show');
}

function hideEditUnitModal() {
    document.getElementById('editUnitModal').classList.remove('show');
}
</script>
