<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>Warehouses & Shops</h1>
        <div class="page-subtitle">Manage your warehouses, stores, and outlets</div>
    </div>
    <button class="btn btn-primary" onclick="showAddLocationModal()">
        <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 Location
    </button>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">All Locations</h3>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Type</th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th>Products</th>
                    <th>Stock</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($locations as $location): ?>
                <tr>
                    <td>
                        <div class="font-medium"><?= e($location['name']) ?></div>
                        <?php if ($location['is_default']): ?>
                        <span class="badge badge-primary" style="font-size:10px;">Default</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <code><?= e($location['code']) ?></code>
                    </td>
                    <td>
                        <?php
                        $typeLabels = [
                            'warehouse' => 'Warehouse',
                            'store' => 'Store',
                            'outlet' => 'Outlet'
                        ];
                        $typeColors = [
                            'warehouse' => '#6366f1',
                            'store' => '#10b981',
                            'outlet' => '#f59e0b'
                        ];
                        $type = $location['type'];
                        ?>
                        <span class="badge" style="background:<?= $typeColors[$type] ?>20; color:<?= $typeColors[$type] ?>;">
                            <?= $typeLabels[$type] ?? $type ?>
                        </span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= e($location['address'] ?? 'No address') ?>
                        </span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= e($location['phone'] ?? 'N/A') ?>
                        </span>
                    </td>
                    <td>
                        <span class="text-sm font-medium"><?= number_format($location['product_count'] ?? 0) ?></span>
                    </td>
                    <td>
                        <span class="text-sm font-medium"><?= number_format($location['total_stock'] ?? 0, 2) ?></span>
                    </td>
                    <td>
                        <?php if ($location['is_active']): ?>
                            <span class="badge badge-success">Active</span>
                        <?php else: ?>
                            <span class="badge badge-secondary">Inactive</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <?php if (!$location['is_default']): ?>
                            <form method="POST" action="<?= APP_URL ?>/settings/set-default-location" onsubmit="return confirm('Set this as the default location?')" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $location['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon" title="Set as Default">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                                    </svg>
                                </button>
                            </form>
                            <?php endif; ?>
                            <button class="btn btn-ghost btn-icon" onclick="editLocation(<?= $location['id'] ?>, '<?= e($location['name']) ?>', '<?= e($location['code']) ?>', '<?= e($location['type']) ?>', '<?= e($location['address'] ?? '') ?>', '<?= e($location['phone'] ?? '') ?>')" 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-location-status" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $location['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon" title="<?= $location['is_active'] ? 'Deactivate' : 'Activate' ?>">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <?php if ($location['is_active']): ?>
                                            <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
                                            <line x1="12" y1="2" x2="12" y2="12"></line>
                                        <?php else: ?>
                                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
                                        <?php endif; ?>
                                    </svg>
                                </button>
                            </form>
                            <form method="POST" action="<?= APP_URL ?>/settings/delete-location" onsubmit="return confirm('Are you sure you want to delete this location?')" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $location['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($locations)): ?>
                <tr>
                    <td colspan="9" class="text-center text-muted py-8">
                        No locations found. Create your first warehouse or store to get started.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Location Modal -->
<div class="modal-overlay" id="addLocationModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add Location</h3>
            <button class="modal-close" onclick="hideAddLocationModal()">
                <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-location">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Location Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="e.g., Main Warehouse, Downtown Store">
                </div>
                <div class="form-group">
                    <label class="form-label">Location Code <span class="required">*</span></label>
                    <input type="text" name="code" class="form-control" required placeholder="e.g., WH01, ST01" style="text-transform:uppercase;">
                    <div class="form-hint">Unique identifier for this location (will be converted to uppercase)</div>
                </div>
                <div class="form-group">
                    <label class="form-label">Location Type <span class="required">*</span></label>
                    <select name="type" class="form-control" required>
                        <option value="">Select type...</option>
                        <option value="store">Store</option>
                        <option value="warehouse">Warehouse</option>
                        <option value="outlet">Outlet</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="3" placeholder="Physical address of the location"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone" class="form-control" placeholder="Contact phone number">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideAddLocationModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Location</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Location Modal -->
<div class="modal-overlay" id="editLocationModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Location</h3>
            <button class="modal-close" onclick="hideEditLocationModal()">
                <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-location">
            <?= Security::csrfField() ?>
            <input type="hidden" name="id" id="editLocationId">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Location Name <span class="required">*</span></label>
                    <input type="text" name="name" id="editLocationName" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Location Code <span class="required">*</span></label>
                    <input type="text" name="code" id="editLocationCode" class="form-control" required style="text-transform:uppercase;">
                    <div class="form-hint">Unique identifier for this location (will be converted to uppercase)</div>
                </div>
                <div class="form-group">
                    <label class="form-label">Location Type <span class="required">*</span></label>
                    <select name="type" id="editLocationType" class="form-control" required>
                        <option value="">Select type...</option>
                        <option value="store">Store</option>
                        <option value="warehouse">Warehouse</option>
                        <option value="outlet">Outlet</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <textarea name="address" id="editLocationAddress" class="form-control" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone" id="editLocationPhone" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideEditLocationModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Location</button>
            </div>
        </form>
    </div>
</div>

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

function hideAddLocationModal() {
    document.getElementById('addLocationModal').classList.remove('show');
}

function editLocation(id, name, code, type, address, phone) {
    document.getElementById('editLocationId').value = id;
    document.getElementById('editLocationName').value = name;
    document.getElementById('editLocationCode').value = code;
    document.getElementById('editLocationType').value = type;
    document.getElementById('editLocationAddress').value = address || '';
    document.getElementById('editLocationPhone').value = phone || '';
    document.getElementById('editLocationModal').classList.add('show');
}

function hideEditLocationModal() {
    document.getElementById('editLocationModal').classList.remove('show');
}

// Auto-uppercase code inputs
document.querySelectorAll('input[name="code"]').forEach(input => {
    input.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
});
</script>
